Add hint to mobile users

src/css/main.scss

@@ -26,6 +26,7 @@
 @import "states/keybindings";
 @import "states/settings";
 @import "states/about";
+@import "states/mobile_warning";
 
 @import "ingame_hud/buildings_toolbar";
 @import "ingame_hud/building_placer";

src/css/states/mobile_warning.scss

@@ -0,0 +1,43 @@
+#state_MobileWarningState {
+    display: flex;
+    align-items: center;
+    background: #333438 !important;
+    @include S(padding, 20px);
+    box-sizing: border-box;
+
+    .logo {
+        width: 80%;
+        max-width: 200px;
+        margin-bottom: 10px;
+    }
+
+    p {
+        color: #aaacaf;
+        display: block;
+        margin-bottom: 13px;
+        font-size: 16px;
+        line-height: 20px;
+        a {
+            color: $colorBlueBright;
+        }
+    }
+
+    .standaloneLink {
+        width: 100%;
+        height: 80px;
+        background: uiResource("get_on_itch_io.svg") center center / contain no-repeat;
+        overflow: hidden;
+        display: block;
+        text-indent: -999em;
+        cursor: pointer;
+        margin-top: 20px;
+        pointer-events: all;
+        transition: all 0.12s ease-in;
+        transition-property: opacity, transform;
+        transform: skewX(-0.5deg);
+        &:hover {
+            transform: skewX(-1deg) scale(1.02);
+            opacity: 0.9;
+        }
+    }
+}

src/js/application.js

@@ -1,5 +1,5 @@
 import { AnimationFrame } from "./core/animation_frame";
-import { performanceNow } from "./core/builtins";
+import { performanceNow, Math_min } from "./core/builtins";
 import { GameState } from "./core/game_state";
 import { GLOBAL_APP, setGlobalApp } from "./core/globals";
 import { InputDistributor } from "./core/input_distributor";
@@ -36,6 +36,7 @@ import { KeybindingsState } from "./states/keybindings";
 import { AboutState } from "./states/about";
 import { PlatformWrapperImplElectron } from "./platform/electron/wrapper";
 import { StorageImplElectron } from "./platform/electron/storage";
+import { MobileWarningState } from "./states/mobile_warning";
 
 const logger = createLogger("application");
 
@@ -158,6 +159,7 @@ export class Application {
         /** @type {Array<typeof GameState>} */
         const states = [
             PreloadState,
+            MobileWarningState,
             MainMenuState,
             InGameState,
             SettingsState,
@@ -315,7 +317,12 @@ export class Application {
 
         Loader.linkAppAfterBoot(this);
 
-        this.stateMgr.moveToState("PreloadState");
+        // Check for mobile
+        if (IS_MOBILE) {
+            this.stateMgr.moveToState("MobileWarningState");
+        } else {
+            this.stateMgr.moveToState("PreloadState");
+        }
 
         // Starting rendering
         this.ticker.frameEmitted.add(this.onFrameEmitted, this);

src/js/core/config.js

@@ -84,7 +84,7 @@ export const globalConfig = {
     debug: {
         /* dev:start */
         // fastGameEnter: true,
-        // noArtificialDelays: true,
+        noArtificialDelays: true,
         // disableSavegameWrite: true,
         // showEntityBounds: true,
         // showAcceptorEjectors: true,
@@ -93,8 +93,8 @@ export const globalConfig = {
         // disableZoomLimits: true,
         // showChunkBorders: true,
         // rewardsInstant: true,
-        // allBuildingsUnlocked: true,
-        // upgradesNoCost: true,
+        allBuildingsUnlocked: true,
+        upgradesNoCost: true,
         // disableUnlockDialog: true,
         // disableLogicTicks: true,
         // testClipping: true,

src/js/states/mobile_warning.js

@@ -0,0 +1,54 @@
+import { GameState } from "../core/game_state";
+import { cachebust } from "../core/cachebust";
+import { THIRDPARTY_URLS } from "../core/config";
+
+export class MobileWarningState extends GameState {
+    constructor() {
+        super("MobileWarningState");
+    }
+
+    getInnerHTML() {
+        return `
+        
+            <div class="mobileWarning">
+                <img class="logo" src="${cachebust("res/logo.png")}" alt="shapez.io Logo">
+
+                <p>
+                    I'm sorry, but shapez.io is not yet available on mobile devices!
+                    (There is also no estimate when this will change, but feel to make a contribution! It's
+                    &nbsp;<a href="https://github.com/tobspr/shapez.io" target="_blank">open source</a>!)</p>
+                
+                <p>If you want to play on your computer, you can also get the standalone on itch.io:</p>
+
+                
+                <a href="${
+                    THIRDPARTY_URLS.standaloneStorePage
+                }" class="standaloneLink" target="_blank">Get the shapez.io standalone!</a>
+            </div>
+        `;
+    }
+
+    getThemeMusic() {
+        return null;
+    }
+
+    getHasFadeIn() {
+        return false;
+    }
+
+    onEnter() {
+        try {
+            if (window.gtag) {
+                window.gtag("event", "click", {
+                    event_category: "ui",
+                    event_label: "mobile_warning",
+                });
+            }
+        } catch (ex) {
+            console.warn("Failed to track mobile click:", ex);
+        }
+    }
+    onLeave() {
+        // this.dialogs.cleanup();
+    }
+}