Add ability to hide debug UI, to be used for Cypress screenshot

Other Changes:
- Also updated all the screenshots
- Added some TODOs for further work
- Made the readme screenshot 50% smaller

Author: Coteh

README.md

@@ -6,7 +6,7 @@
 
 A clone of [2048](https://play2048.co/), and also a remake of my first side project on GitHub, [2048Clone](https://github.com/Coteh/2048Clone).
 
-![Browser Game Screenshot](cypress/screenshots/readme/screenshot.png "Browser Game Screenshot")
+![Browser Game Screenshot](screenshot.png "Browser Game Screenshot")
 
 ## Setup
 

cypress.config.ts

@@ -19,6 +19,7 @@ export default defineConfig({
     screenshotOnRunFailure: process.env.CI === undefined,
     video: process.env.CI === undefined,
     videoCompression: 0,
+    trashAssetsBeforeRuns: false,
     blockHosts: ["*.posthog.com"],
     reporter: "junit",
     reporterOptions: {

cypress/e2e/misc/screenshot.cy.ts

@@ -28,6 +28,7 @@ describe("misc", () => {
                 };
                 const preferences: Preferences = {
                     theme: "standard",
+                    animations: "enabled",
                 };
                 window.localStorage.setItem("game-state", JSON.stringify(gameState));
                 window.localStorage.setItem("persistent-state", JSON.stringify(persistentState));
@@ -39,9 +40,38 @@ describe("misc", () => {
     specify("gameplay screenshot", () => {
         cy.viewport("iphone-6");
 
+        // Hide debug elements from the screenshot
+        cy.get("body").type("d");
+        cy.get("#debug-overlay").should("be.visible").click({
+            force: true,
+        });
+
+        // TODO: Create a video screenshot for the readme.
+        // What needs to be fixed:
+        // - screenshot.sh needs to reposition the ffmpeg crop to where the game is located on the page
+        // - Animations look very choppy on the video taken by Cypress
+
+        // After this delay, the video screenshot should start.
+        cy.wait(1000);
+
+        // Static screenshot taken for now
         cy.screenshot("readme/screenshot", {
             capture: "viewport",
             overwrite: true,
         });
+
+        cy.get("body").type("{leftArrow}");
+
+        cy.wait(500);
+
+        cy.get("body").type("{downArrow}");
+
+        cy.wait(500);
+
+        cy.get("body").type("{leftArrow}");
+
+        cy.wait(500);
+
+        cy.get("body").type("{downArrow}");
     });
 });

cypress/screenshots/readme/screenshot.png

@@ -9,9 +9,13 @@ Y=80
 
 # Install Cypress first before running this script
 
-./node_modules/.bin/cypress run --spec cypress/e2e/misc/screenshot.cy.js
+# TODO: Fix screenshots not being taken when run in headless (run in non-headless for now)
+./node_modules/.bin/cypress run --spec cypress/e2e/misc/screenshot.cy.ts
 
 # Crop filter adapted from: https://video.stackexchange.com/a/4571
 # GIF filters adapted from: https://superuser.com/a/556031
 
-ffmpeg -y -ss 5 -i cypress/videos/screenshot.cy.js.mp4 -filter:v "crop=$WIDTH:$HEIGHT:$X:$Y,fps=10,scale=320:-1:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" -loop 0 $OUTPUT_FILE
+# TODO: Add video screenshot
+# ffmpeg -y -ss 5 -i cypress/videos/screenshot.cy.ts.mp4 -filter:v "crop=$WIDTH:$HEIGHT:$X:$Y,fps=10,scale=320:-1:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" -loop 0 $OUTPUT_FILE
+
+magick convert cypress/screenshots/readme/screenshot.png -resize 50% screenshot.png

cypress/screenshots/viewport/huge mobile device.png

@@ -284,6 +284,17 @@ document.addEventListener("DOMContentLoaded", async () => {
                 console.log("going up");
                 move(DIRECTION_UP);
                 break;
+            case "d":
+                if (import.meta.env.DEV) {
+                    if (debugButton.style.display === "") {
+                        debugButton.style.display = "none";
+                        undoButton.style.display = "none";
+                    } else {
+                        debugButton.style.display = "";
+                        undoButton.style.display = "";
+                    }
+                }
+                break;
         }
     };
 
@@ -296,16 +307,17 @@ document.addEventListener("DOMContentLoaded", async () => {
         if (gameState.ended) {
             newGame();
             if (onNewGameStarted) {
-                onNewGameStarted()
+                onNewGameStarted();
             }
             return;
         }
         const dialogElem = createDialogContentFromTemplate("#prompt-dialog-content");
-        (dialogElem.querySelector(".prompt-text") as HTMLSpanElement).innerText = "Are you sure you want to start a new game? All progress will be lost.";
+        (dialogElem.querySelector(".prompt-text") as HTMLSpanElement).innerText =
+            "Are you sure you want to start a new game? All progress will be lost.";
         renderPromptDialog(dialogElem, true, () => {
             newGame();
             if (onNewGameStarted) {
-                onNewGameStarted()
+                onNewGameStarted();
             }
         });
     };
@@ -543,7 +555,8 @@ document.addEventListener("DOMContentLoaded", async () => {
                 }
             } else if (elem.classList.contains(BLOCK_STYLE_SETTING_NAME)) {
                 const blockStyleIndex = selectableBlockStyles.indexOf(selectedBlockStyle);
-                let nextBlockStyle = selectableBlockStyles[(blockStyleIndex + 1) % selectableBlockStyles.length];
+                let nextBlockStyle =
+                    selectableBlockStyles[(blockStyleIndex + 1) % selectableBlockStyles.length];
                 switchBlockStyle(nextBlockStyle);
                 savePreferenceValue(BLOCK_STYLE_PREFERENCE_NAME, nextBlockStyle);
                 toggle.innerText = nextBlockStyle;
@@ -593,12 +606,16 @@ document.addEventListener("DOMContentLoaded", async () => {
     }
     if (getPreferenceValue(ANIMATIONS_PREFERENCE_NAME) === SETTING_ENABLED) {
         isAnimationEnabled = true;
-        const setting = document.querySelector(`.setting.${ANIMATIONS_SETTING_NAME}`) as HTMLElement;
+        const setting = document.querySelector(
+            `.setting.${ANIMATIONS_SETTING_NAME}`
+        ) as HTMLElement;
         const knob = setting.querySelector(".knob") as HTMLElement;
         knob.classList.add("enabled");
     }
     switchBlockStyle(getPreferenceValue(BLOCK_STYLE_PREFERENCE_NAME));
-    const blockStyleSetting = document.querySelector(`.setting.${BLOCK_STYLE_SETTING_NAME}`) as HTMLElement;
+    const blockStyleSetting = document.querySelector(
+        `.setting.${BLOCK_STYLE_SETTING_NAME}`
+    ) as HTMLElement;
     (blockStyleSetting.querySelector(".toggle") as HTMLElement).innerText = selectedBlockStyle;
 
     const generateShareText = (gameState: GameState) => {
@@ -827,9 +844,14 @@ document.addEventListener("DOMContentLoaded", async () => {
     });
 
     if (import.meta.env.DEV) {
-        undoButton.style.display = "";
         debugButton.style.display = "";
-        (document.querySelector("#debug-overlay") as HTMLDivElement).style.display = "";
+        undoButton.style.display = "";
+        const debugOverlay = document.querySelector("#debug-overlay") as HTMLDivElement;
+        debugOverlay.style.display = "";
+        debugOverlay.addEventListener("click", (e) => {
+            e.preventDefault();
+            debugOverlay.style.opacity = debugOverlay.style.opacity !== "0" ? "0" : "1";
+        });
         (document.querySelector("#swipeSensitivity") as HTMLSpanElement).innerText =
             swipeSensitivity.toString();
     }