diff --git a/index.html b/index.html
index 46dccad..10120ed 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,7 @@
Salvá la costanera
+
diff --git a/src/main.ts b/src/main.ts
index 0eeaabd..bd208ad 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -6,6 +6,7 @@ import * as win from "./win";
import * as lose from "./lose";
import { Assets, loadAssets } from "./assets";
import { loadSprite, Sprite } from "./sprite";
+import { drawText, isMobile } from "./utils";
export type State = welcome.State | jugando.State | win.State | lose.State;
@@ -30,7 +31,12 @@ export type Juego = {
state: T;
};
+function needsRotation(juego: Juego): boolean {
+ return juego.canvas.width < juego.canvas.height;
+}
+
function update(juego: Juego, dt: number) {
+ if (needsRotation(juego)) return;
switch (juego.state.current) {
case "welcome":
welcome.update(juego, dt);
@@ -55,6 +61,17 @@ function draw(juego: Juego, timestamp: number) {
juego.ctx.fillStyle = "white";
juego.ctx.fillRect(0, 0, width, height);
juego.ctx.fillStyle = "black";
+
+ if (needsRotation(juego)) {
+ drawText(
+ juego,
+ "¡Por favor rotá el dispositivo!",
+ { x: juego.canvas.width / 2, y: juego.canvas.height / 2 },
+ { align: "center", maxWidth: juego.canvas.width }
+ );
+ return;
+ }
+
switch (juego.state.current) {
case "welcome":
welcome.draw(juego, timestamp);
@@ -204,4 +221,15 @@ async function initJuego() {
window.requestAnimationFrame(loop);
}
+
+document.getElementById("full-screen")!.addEventListener("click", async () => {
+ if (isMobile()) {
+ document.documentElement.requestFullscreen &&
+ (await document.documentElement.requestFullscreen({
+ navigationUI: "hide",
+ }));
+ await screen.orientation.lock("landscape");
+ }
+});
+
initJuego();
diff --git a/src/style.css b/src/style.css
index 646e38c..da1f70e 100644
--- a/src/style.css
+++ b/src/style.css
@@ -16,3 +16,9 @@ body {
width: 100%;
height: 100%;
}
+
+#full-screen {
+ position: fixed;
+ bottom: 0;
+ right: 0;
+}
diff --git a/src/utils.ts b/src/utils.ts
index 7b0b014..6c388d1 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -36,18 +36,20 @@ export function drawText(
size = 2,
align = "left",
baseline = "top",
+ maxWidth,
}: {
align?: CanvasTextAlign;
baseline?: CanvasTextBaseline;
bold?: boolean;
// in rem
size?: number;
+ maxWidth?: number;
}
): Box {
juego.ctx.font = `${bold ? "bold " : ""}${size}rem sans-serif`;
juego.ctx.textAlign = align;
juego.ctx.textBaseline = baseline;
- juego.ctx.fillText(text, pos.x, pos.y);
+ juego.ctx.fillText(text, pos.x, pos.y, maxWidth);
const measure = juego.ctx.measureText(text);
return {