Merge pull request #61 from sam-mfb/mobile

Add mobile touch controls support

Author: sam-mfb

MOBILE_PLAN.md

@@ -170,9 +170,6 @@ Based on analysis of the codebase, here's a comprehensive plan for adapting the
   - Check for touch capability: `'ontouchstart' in window || navigator.maxTouchPoints > 0`
   - **Returns true for phones AND tablets (including iPads)**
   - This is the key function for determining default touch control state
-- Optional: Export `isSmallScreen()` for UI layout decisions
-  - Check screen width (e.g., `window.innerWidth < 768`)
-  - Used for layout optimizations, NOT for enabling/disabling touch controls
 - **Default behavior**: Touch controls enabled for ANY touch-capable device, regardless of screen size
 
 **2. Add touch controls state to `appSlice.ts`**

package-lock.json

@@ -20,6 +20,7 @@
   },
   "dependencies": {
     "@reduxjs/toolkit": "^2.8.2",
+    "nipplejs": "^0.10.2",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-redux": "^9.2.0"

package.json

@@ -8,7 +8,13 @@ import VolumeButton from './components/VolumeButton'
 import FullscreenButton from './components/FullscreenButton'
 import InGameControlsPanel from './components/InGameControlsPanel'
 import { loadLevel } from './levelThunks'
-import { startGame, setMode } from './appSlice'
+import {
+  startGame,
+  setMode,
+  enableTouchControls,
+  disableTouchControls
+} from './appSlice'
+import { isTouchDevice } from './mobile/deviceDetection'
 import { setHighScore } from '@/core/highscore'
 import { shipSlice } from '@/core/ship'
 import { invalidateHighScore } from './gameSlice'
@@ -46,10 +52,25 @@ export const App: React.FC<AppProps> = ({
     state => state.game.highScoreEligible
   )
   const scaleMode = useAppSelector(state => state.app.scaleMode)
+  const touchControlsOverride = useAppSelector(
+    state => state.app.touchControlsOverride
+  )
 
   // Use responsive scale that adapts to viewport size or fixed scale from settings
   const { scale, dimensions } = useResponsiveScale(scaleMode)
 
+  // Re-evaluate touch controls when override setting changes
+  useEffect(() => {
+    const shouldEnableTouchControls =
+      touchControlsOverride !== null ? touchControlsOverride : isTouchDevice()
+
+    if (shouldEnableTouchControls) {
+      dispatch(enableTouchControls())
+    } else {
+      dispatch(disableTouchControls())
+    }
+  }, [touchControlsOverride, dispatch])
+
   // Track if we should show the resize hint
   const [showResizeHint, setShowResizeHint] = useState(false)
 

src/game/App.tsx

@@ -13,6 +13,7 @@ import {
   setVolume,
   enableSound,
   disableSound,
+  setTouchControlsOverride,
   type CollisionMode,
   type ScaleMode
 } from './appSlice'
@@ -28,6 +29,7 @@ export type PersistedAppSettings = {
   scaleMode: ScaleMode
   volume: number
   soundOn: boolean
+  touchControlsOverride: boolean | null
 }
 
 /**
@@ -48,7 +50,8 @@ export const appMiddleware: Middleware<{}, RootState> =
       setScaleMode.match(action) ||
       setVolume.match(action) ||
       enableSound.match(action) ||
-      disableSound.match(action)
+      disableSound.match(action) ||
+      setTouchControlsOverride.match(action)
     ) {
       const state = store.getState()
       try {
@@ -58,7 +61,8 @@ export const appMiddleware: Middleware<{}, RootState> =
           showInGameControls: state.app.showInGameControls,
           scaleMode: state.app.scaleMode,
           volume: state.app.volume,
-          soundOn: state.app.soundOn
+          soundOn: state.app.soundOn,
+          touchControlsOverride: state.app.touchControlsOverride
         }
         localStorage.setItem(
           APP_SETTINGS_STORAGE_KEY,
@@ -87,7 +91,8 @@ export const loadAppSettings = (): Partial<PersistedAppSettings> => {
         showInGameControls: parsed.showInGameControls,
         scaleMode: parsed.scaleMode,
         volume: parsed.volume,
-        soundOn: parsed.soundOn
+        soundOn: parsed.soundOn,
+        touchControlsOverride: parsed.touchControlsOverride
       }
     }
   } catch (error) {

src/game/appMiddleware.ts

@@ -31,6 +31,10 @@ export type AppState = {
   volume: number
   soundOn: boolean
 
+  // Touch controls
+  touchControlsEnabled: boolean
+  touchControlsOverride: boolean | null // null = auto-detect
+
   // Game flow
   mode: GameMode
   mostRecentScore: MostRecentScore | null
@@ -51,6 +55,8 @@ const initialState: AppState = {
   scaleMode: 'auto', // Default to responsive auto-scaling
   volume: 0,
   soundOn: true,
+  touchControlsEnabled: false, // Will be set based on device detection
+  touchControlsOverride: null, // null = auto-detect based on device
   mode: 'start',
   mostRecentScore: null,
   showSettings: false,
@@ -137,6 +143,22 @@ export const appSlice = createSlice({
 
     setTotalLevels: (state, action: PayloadAction<number>) => {
       state.totalLevels = action.payload
+    },
+
+    // Touch controls management
+    enableTouchControls: state => {
+      state.touchControlsEnabled = true
+    },
+
+    disableTouchControls: state => {
+      state.touchControlsEnabled = false
+    },
+
+    setTouchControlsOverride: (
+      state,
+      action: PayloadAction<boolean | null>
+    ) => {
+      state.touchControlsOverride = action.payload
     }
   }
 })
@@ -159,5 +181,8 @@ export const {
   toggleSettings,
   setFullscreen,
   setCurrentGalaxy,
-  setTotalLevels
+  setTotalLevels,
+  enableTouchControls,
+  disableTouchControls,
+  setTouchControlsOverride
 } = appSlice.actions

src/game/appSlice.ts

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import type { FrameInfo, KeyInfo, MonochromeBitmap } from '@lib/bitmap'
 import { useAppDispatch, useAppSelector, type RootState } from '../store'
 import { togglePause, showMap, hideMap, pause, unpause } from '../gameSlice'
@@ -11,6 +11,7 @@ import { getDebug } from '../debug'
 import type { SpriteService } from '@/core/sprites'
 import { SCENTER } from '@/core/figs'
 import { useStore } from 'react-redux'
+import { TouchControlsOverlay } from '../mobile/TouchControlsOverlay'
 
 type GameRendererProps = {
   renderer: (frame: FrameInfo, controls: ControlMatrix) => MonochromeBitmap
@@ -47,9 +48,27 @@ const GameRenderer: React.FC<GameRendererProps> = ({
   const paused = useAppSelector(state => state.game.paused)
   const showMapState = useAppSelector(state => state.game.showMap)
   const bindings = useAppSelector(state => state.controls.bindings)
+  const touchControlsEnabled = useAppSelector(
+    state => state.app.touchControlsEnabled
+  )
   const store = useStore()
   const dispatch = useAppDispatch()
 
+  // Track touch controls state
+  const [touchControls, setTouchControls] = useState<ControlMatrix>({
+    thrust: false,
+    left: false,
+    right: false,
+    fire: false,
+    shield: false,
+    selfDestruct: false,
+    pause: false,
+    quit: false,
+    nextLevel: false,
+    extraLife: false,
+    map: false
+  })
+
   useEffect(() => {
     const canvas = canvasRef.current
     if (!canvas) return
@@ -113,6 +132,25 @@ const GameRenderer: React.FC<GameRendererProps> = ({
           keysPressed: keysPressed,
           keysReleased: keysReleased
         }
+        // Get keyboard controls
+        const keyboardControls = getControls(keyInfo, bindings)
+
+        // Merge keyboard and touch controls (OR logic for each control)
+        const mergedControls: ControlMatrix = {
+          thrust: keyboardControls.thrust || touchControls.thrust,
+          left: keyboardControls.left || touchControls.left,
+          right: keyboardControls.right || touchControls.right,
+          fire: keyboardControls.fire || touchControls.fire,
+          shield: keyboardControls.shield || touchControls.shield,
+          selfDestruct:
+            keyboardControls.selfDestruct || touchControls.selfDestruct,
+          pause: keyboardControls.pause || touchControls.pause,
+          quit: keyboardControls.quit || touchControls.quit,
+          nextLevel: keyboardControls.nextLevel || touchControls.nextLevel,
+          extraLife: keyboardControls.extraLife || touchControls.extraLife,
+          map: keyboardControls.map || touchControls.map
+        }
+
         // If map is showing, use blank controls (all false) to prevent game input
         const controls = showMapState
           ? {
@@ -127,9 +165,9 @@ const GameRenderer: React.FC<GameRendererProps> = ({
               nextLevel: false,
               extraLife: false,
               // need to still detect the map key
-              map: getControls(keyInfo, bindings).map
+              map: mergedControls.map
             }
-          : getControls(keyInfo, bindings)
+          : mergedControls
 
         if (controls.map) {
           if (showMapState) {
@@ -298,25 +336,34 @@ const GameRenderer: React.FC<GameRendererProps> = ({
     dispatch,
     collisionService,
     spriteService,
-    store
+    store,
+    touchControls
   ])
 
   return (
-    <div style={{ position: 'relative', display: 'inline-block' }}>
-      <canvas
-        ref={canvasRef}
-        width={width * scale}
-        height={height * scale}
-        style={{
-          imageRendering: 'pixelated',
-          // @ts-ignore - vendor prefixes
-          WebkitImageRendering: 'pixelated',
-          MozImageRendering: 'crisp-edges',
-          display: 'block'
-        }}
-      />
-      {showMapState && <Map scale={scale} />}
-    </div>
+    <>
+      <div style={{ position: 'relative', display: 'inline-block' }}>
+        <canvas
+          ref={canvasRef}
+          width={width * scale}
+          height={height * scale}
+          style={{
+            imageRendering: 'pixelated',
+            // @ts-ignore - vendor prefixes
+            WebkitImageRendering: 'pixelated',
+            MozImageRendering: 'crisp-edges',
+            display: 'block'
+          }}
+        />
+        {showMapState && <Map scale={scale} />}
+      </div>
+      {touchControlsEnabled && (
+        <TouchControlsOverlay
+          scale={scale}
+          onControlsChange={setTouchControls}
+        />
+      )}
+    </>
   )
 }
 

src/game/components/GameRenderer.tsx

@@ -10,6 +10,12 @@ type InGameControlsPanelProps = {
 const InGameControlsPanel: React.FC<InGameControlsPanelProps> = ({ scale }) => {
   const dispatch = useAppDispatch()
   const bindings = useAppSelector(state => state.controls.bindings)
+  const touchControlsEnabled = useAppSelector(
+    state => state.app.touchControlsEnabled
+  )
+
+  // Hide panel when touch controls are active to save screen space
+  if (touchControlsEnabled) return null
 
   const panelStyle: React.CSSProperties = {
     position: 'absolute',