Reintroduce mobile controllers #230 (#231)

* Reintroduce mobile controllers #230 * Clean up mobile controls code
neu5 · Sep 26, 2023 · 0711df9 · 0711df9
1 parent 9b65e83
commit 0711df9
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 4 deletions.
diff --git a/packages/client/src/main.ts b/packages/client/src/main.ts
@@ -43,8 +43,6 @@ const leaveRaceRoomBtn = document.getElementById(
   "leave-race-room-btn"
 ) as HTMLAnchorElement;
 
-let dataFromServer: PlayersFromServer = [];
-
 const canvas = document.getElementById("canvas") as HTMLCanvasElement;
 const FPSEl = document.getElementById("fps") as HTMLElement;
 const startRaceBtn = document.getElementById(
@@ -53,8 +51,13 @@ const startRaceBtn = document.getElementById(
 const stopRaceBtn = document.getElementById(
   "stop-race-btn"
 ) as HTMLAnchorElement;
+const [...mobileControlsEls] = document.getElementsByClassName(
+  "mobile-controls"
+) as HTMLCollectionOf<HTMLElement>;
 // const playersListEl = document.getElementById("players-list") as HTMLElement;
 
+let dataFromServer: PlayersFromServer = [];
+
 const game: GameClient = {
   elements: {
     joinRaceRoomBtn,
@@ -67,12 +70,19 @@ const game: GameClient = {
   rootEl: document.getElementById("root"),
   ui,
   usernameAlreadySelected: false,
+  windowSize: {
+    width: Infinity,
+    height: Infinity,
+  },
 };
 
 const sessionID = localStorage.getItem("rally-online");
 
 const dialog = new ui.DialogWrapper({ rootEl: game.rootEl });
 
+ui.MobileControls.updateWindowSize(game);
+ui.MobileControls.updateControls({ dialog, game, mobileControlsEls });
+
 const startEngineLoop = ({
   engine,
   playersMap,
@@ -276,7 +286,7 @@ const startEngineLoop = ({
   window.addEventListener("resize", () => {
     resizeDebounced();
 
-    // updateWindowSize();
-    // updateControls();
+    ui.MobileControls.updateWindowSize(game);
+    ui.MobileControls.updateControls({ dialog, game, mobileControlsEls });
   });
 })();
diff --git a/packages/client/src/ui/index.ts b/packages/client/src/ui/index.ts
@@ -1,4 +1,6 @@
 import { DialogWrapper } from "./dialog";
+import { MobileControls } from "./mobileControls";
+
 import type { RoomList, UI, UsersList } from "@neu5/types/src";
 
 const [usersListEl] = document.getElementsByClassName(
@@ -118,6 +120,7 @@ const ui: UI = {
   setCurrentPlayer,
   showElement,
   DialogWrapper,
+  MobileControls,
   // PlayersIndicators,
 };
 

diff --git a/packages/client/src/ui/mobileControls.ts b/packages/client/src/ui/mobileControls.ts
@@ -0,0 +1,44 @@
+import type { GameClient } from "@neu5/types/src";
+import type { DialogWrapper } from "../ui/dialog";
+
+const isTouchDevice = () => "ontouchstart" in window;
+
+const pEl = document.createElement("p");
+pEl.textContent =
+  "The game may be more playable if you rotate the screen horizontally";
+
+const updateControls = ({
+  dialog,
+  game,
+  mobileControlsEls,
+}: {
+  dialog: DialogWrapper;
+  game: GameClient;
+  mobileControlsEls: HTMLElement[];
+}) => {
+  if (isTouchDevice()) {
+    mobileControlsEls.forEach((el) => el.classList.remove("hide"));
+  } else {
+    mobileControlsEls.forEach((el) => el.classList.add("hide"));
+  }
+
+  if (isTouchDevice() && game.windowSize.width / game.windowSize.height < 1) {
+    dialog.show({
+      content: pEl,
+    });
+  }
+};
+
+const updateWindowSize = (game: GameClient) => {
+  game.windowSize = {
+    width: window.innerWidth,
+    height: window.innerHeight,
+  };
+};
+
+const MobileControls = {
+  updateControls,
+  updateWindowSize,
+};
+
+export { MobileControls };
diff --git a/packages/types/src/client.ts b/packages/types/src/client.ts
@@ -4,6 +4,11 @@ type ActionTypes = "accelerate" | "brake" | "left" | "right";
 
 type Class = { new (...args: any[]): any };
 
+type WindowSize = {
+  width: number;
+  height: number;
+};
+
 type Game = {
   elements: {
     joinRaceRoomBtn: HTMLElement;
@@ -16,6 +21,7 @@ type Game = {
   rootEl: HTMLElement | null;
   ui: UI;
   usernameAlreadySelected: boolean;
+  windowSize: WindowSize;
 };
 
 type PlayerFromServer = {
@@ -37,6 +43,10 @@ type UI = {
   setCurrentPlayer: (id: string) => void;
   showElement: (element: HTMLElement) => void;
   DialogWrapper: Class;
+  MobileControls: {
+    updateControls: Function;
+    updateWindowSize: Function;
+  };
 };
 
 interface ClientEvents {