Add support for mobile devices

Other changes in this commit: - Remove serialization support - Remove Alert component and optimize imports
haukesomm · Sep 24, 2023 · 9dc2a3e · 9dc2a3e
1 parent dc33020
commit 9dc2a3e
Show file tree

Hide file tree

Showing 29 changed files with 126 additions and 139 deletions.
diff --git a/README.md b/README.md
@@ -11,7 +11,10 @@ game published in 1984 by Spectrum Holobyte.
 
 The latest snapshot version can be played [here](https://sokoban.haukesomm.de).
 
-<img src="./assets/screenshot.png" width="50%">
+## Screenshots
+
+<img src="./assets/screenshot-desktop.png" width="50%">
+<img src="./assets/screenshot-mobile.png" width="25%">
 
 ## Modules
 

diff --git a/assets/screenshot-desktop.png b/assets/screenshot-desktop.png
diff --git a/assets/screenshot-mobile.png b/assets/screenshot-mobile.png
diff --git a/assets/screenshot.png b/assets/screenshot.png
diff --git a/build.gradle.kts b/build.gradle.kts
@@ -2,7 +2,6 @@ import org.jetbrains.kotlin.gradle.tasks.KotlinCompile
 
 plugins {
     kotlin("multiplatform") version "1.7.20" apply false
-    kotlin("plugin.serialization") version "1.7.20" apply false
     id("com.google.devtools.ksp") version "1.7.21-1.0.8" apply false
 }
 

diff --git a/core/build.gradle.kts b/core/build.gradle.kts
@@ -1,6 +1,5 @@
 plugins {
     kotlin("multiplatform")
-    kotlin("plugin.serialization")
     id("com.google.devtools.ksp")
 }
 
@@ -20,13 +19,11 @@ kotlin {
         val commonMain by getting {
             dependencies {
                 api("org.jetbrains.kotlinx:kotlinx-coroutines-core:${rootProject.extra["coroutinesVersion"]}")
-                implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:${rootProject.ext["serializationVersion"]}")
             }
         }
         val jvmTest by getting {
             dependencies {
                 implementation(kotlin("test"))
-                //implementation(kotlin("test-annotations-common"))
             }
         }
     }

diff --git a/core/src/commonMain/kotlin/de/haukesomm/sokoban/core/Entity.kt b/core/src/commonMain/kotlin/de/haukesomm/sokoban/core/Entity.kt
@@ -1,7 +1,5 @@
 package de.haukesomm.sokoban.core
 
-import kotlinx.serialization.Serializable
-
 /**
  * Represents the type an [Entity] can have.
  */
@@ -10,7 +8,6 @@ enum class EntityType { Box, Player }
 /**
  * Represents an entity in the game that can be moved and placed on a [Tile].
  */
-@Serializable
 data class Entity(
     val type: EntityType
 ) {

diff --git a/core/src/commonMain/kotlin/de/haukesomm/sokoban/core/GameState.kt b/core/src/commonMain/kotlin/de/haukesomm/sokoban/core/GameState.kt
@@ -1,7 +1,5 @@
 package de.haukesomm.sokoban.core
 
-import kotlinx.serialization.Serializable
-
 /**
  * Represents the state of a game.
  *
@@ -107,7 +105,6 @@ interface GameState {
  * This implementation does not allow modifications to the game state.
  * A mutable copy of the game state can be created via the [toMutableGameState] method.
  */
-@Serializable
 data class ImmutableGameState(
     override val levelId: String,
     override val width: Int,
@@ -132,7 +129,6 @@ fun GameState.toImmutableGameState(): ImmutableGameState =
  * This implementation allows modifications to the game state.
  * An immutable copy of the game state can be created via the [toImmutableGameState] method.
  */
-@Serializable
 data class MutableGameState(
     override var levelId: String,
     override var width: Int,

diff --git a/core/src/commonMain/kotlin/de/haukesomm/sokoban/core/SokobanGame.kt b/core/src/commonMain/kotlin/de/haukesomm/sokoban/core/SokobanGame.kt
@@ -1,6 +1,9 @@
 package de.haukesomm.sokoban.core
 
-import kotlinx.coroutines.flow.*
+import kotlinx.coroutines.flow.Flow
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.asSharedFlow
+import kotlinx.coroutines.flow.map
 
 /**
  * Represents a Sokoban game.

diff --git a/core/src/commonMain/kotlin/de/haukesomm/sokoban/core/Tile.kt b/core/src/commonMain/kotlin/de/haukesomm/sokoban/core/Tile.kt
@@ -1,7 +1,5 @@
 package de.haukesomm.sokoban.core
 
-import kotlinx.serialization.Serializable
-
 enum class TileType { Empty, Wall, Target }
 
 /**
@@ -20,7 +18,6 @@ data class TileProperties(
  *
  * A tile can hold an [Entity] and has a [TileType] that determines if it is a wall, a target or empty.
  */
-@Serializable
 data class Tile(
     val type: TileType,
     val entity: Entity? = null

diff --git a/core/src/commonMain/kotlin/de/haukesomm/sokoban/core/levels/BundledLevelRepository.kt b/core/src/commonMain/kotlin/de/haukesomm/sokoban/core/levels/BundledLevelRepository.kt
@@ -1,6 +1,5 @@
 package de.haukesomm.sokoban.core.levels
 
-import de.haukesomm.sokoban.core.CharacterMap
 import de.haukesomm.sokoban.core.Level
 import de.haukesomm.sokoban.core.LevelDescription
 import de.haukesomm.sokoban.core.LevelRepository

diff --git a/core/src/jvmTest/kotlin/de/haukesomm/sokoban/core/moving/MoveServiceImplTests.kt b/core/src/jvmTest/kotlin/de/haukesomm/sokoban/core/moving/MoveServiceImplTests.kt
@@ -1,7 +1,6 @@
 package de.haukesomm.sokoban.core.moving
 
 import de.haukesomm.sokoban.core.*
-import de.haukesomm.sokoban.core.Level
 import de.haukesomm.sokoban.core.moving.rules.BoxDetectingMoveRule
 import de.haukesomm.sokoban.core.moving.rules.MultipleBoxesPreventingMoveRule
 import de.haukesomm.sokoban.core.moving.rules.WallCollisionPreventingMoveRule

diff --git a/legacy/src/main/java/de/haukesomm/sokoban/legacy/GameField.java b/legacy/src/main/java/de/haukesomm/sokoban/legacy/GameField.java
@@ -1,14 +1,13 @@
 package de.haukesomm.sokoban.legacy;
 
-import javax.swing.*;
-import java.awt.GridBagLayout;
-import java.awt.GridBagConstraints;
-
 import de.haukesomm.sokoban.core.GameState;
 import de.haukesomm.sokoban.core.Position;
 import de.haukesomm.sokoban.legacy.textures.JarResourceTextureRepository;
 import de.haukesomm.sokoban.legacy.textures.TextureRepository;
 
+import javax.swing.*;
+import java.awt.*;
+
 public class GameField extends JPanel {
 
     private final TextureRepository textureRepository = new JarResourceTextureRepository();

diff --git a/legacy/src/main/java/de/haukesomm/sokoban/legacy/GameFrame.java b/legacy/src/main/java/de/haukesomm/sokoban/legacy/GameFrame.java
@@ -1,15 +1,14 @@
 package de.haukesomm.sokoban.legacy;
 
-import javax.swing.*;
-import java.awt.GridBagLayout;
-import java.awt.GridBagConstraints;
-import java.awt.event.ActionEvent;
-
-import de.haukesomm.sokoban.core.GameStateChangeHandler;
 import de.haukesomm.sokoban.core.Direction;
+import de.haukesomm.sokoban.core.GameStateChangeHandler;
 import de.haukesomm.sokoban.core.SokobanGame;
 import de.haukesomm.sokoban.core.SokobanGameFactory;
 
+import javax.swing.*;
+import java.awt.*;
+import java.awt.event.ActionEvent;
+
 public class GameFrame extends JFrame {
 
     private class MovePlayerAction extends AbstractAction {

diff --git a/legacy/src/main/java/de/haukesomm/sokoban/legacy/InfoWindow.java b/legacy/src/main/java/de/haukesomm/sokoban/legacy/InfoWindow.java
@@ -1,12 +1,7 @@
 package de.haukesomm.sokoban.legacy;
 
-import java.awt.Component;
-import java.awt.GridBagConstraints;
-import java.awt.GridBagLayout;
-import java.awt.Insets;
-import javax.swing.JButton;
-import javax.swing.JFrame;
-import javax.swing.JLabel;
+import javax.swing.*;
+import java.awt.*;
 
 public class InfoWindow extends JFrame {
 

diff --git a/legacy/src/main/java/de/haukesomm/sokoban/legacy/LevelInfoBar.java b/legacy/src/main/java/de/haukesomm/sokoban/legacy/LevelInfoBar.java
@@ -1,13 +1,12 @@
 package de.haukesomm.sokoban.legacy;
 
-import java.awt.*;
+import de.haukesomm.sokoban.core.LevelDescription;
+import de.haukesomm.sokoban.legacy.level.LevelDescriptionListCellRenderer;
+
+import javax.swing.*;
 import java.util.HashSet;
 import java.util.List;
 import java.util.Set;
-import javax.swing.*;
-
-import de.haukesomm.sokoban.core.LevelDescription;
-import de.haukesomm.sokoban.legacy.level.LevelDescriptionListCellRenderer;
 
 public class LevelInfoBar extends JPanel {
 

diff --git a/legacy/src/main/java/de/haukesomm/sokoban/legacy/MenuBar.java b/legacy/src/main/java/de/haukesomm/sokoban/legacy/MenuBar.java
@@ -1,8 +1,6 @@
 package de.haukesomm.sokoban.legacy;
 
-import javax.swing.JMenu;
-import javax.swing.JMenuBar;
-import javax.swing.JMenuItem;
+import javax.swing.*;
 
 public class MenuBar extends JMenuBar {
 

diff --git a/web/build.gradle.kts b/web/build.gradle.kts
@@ -1,9 +1,5 @@
-import java.io.ByteArrayOutputStream
-import java.nio.charset.Charset
-
 plugins {
     kotlin("multiplatform")
-    kotlin("plugin.serialization")
     id("com.google.devtools.ksp")
 }
 
@@ -19,7 +15,6 @@ kotlin {
         val commonMain by getting {
             dependencies {
                 implementation("dev.fritz2:headless:$fritz2version")
-                implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:${rootProject.ext["serializationVersion"]}")
                 implementation(project(":core"))
             }
         }

diff --git a/web/src/jsMain/kotlin/de/haukesomm/sokoban/web/App.kt b/web/src/jsMain/kotlin/de/haukesomm/sokoban/web/App.kt
@@ -1,21 +1,12 @@
 package de.haukesomm.sokoban.web
 
-import de.haukesomm.sokoban.web.components.alert
-import de.haukesomm.sokoban.web.components.icons.HeroIcons
 import de.haukesomm.sokoban.web.theme.DarkModeStore
-import dev.fritz2.core.RenderContext
 import kotlinx.browser.document
 
 fun main() {
     renderWithPortalRoot {
         initTheme()
-
-        div("hidden md:block") {
-            gameFrame()
-        }
-        div("block md:hidden") {
-            mobileDeviceNotSupportedBanner()
-        }
+        gameFrame()
     }
 }
 
@@ -31,16 +22,4 @@ private fun initTheme() {
     document.querySelector("body")
         ?.classList
         ?.add("text-neutral-dark", "dark:text-neutral-light")
-}
-
-private fun RenderContext.mobileDeviceNotSupportedBanner() =
-    div("m-4") {
-        alert(
-            title = "Mobile devices are not yet supported",
-            message = """It appears you are accessing this app from a mobile device.
-                | Unfortunately, Sokoban is not playable on mobile devices yet.
-                | Please try again on a desktop computer.
-            """.trimMargin(),
-            icon = HeroIcons.device_mobile
-        )
-    }
+}
diff --git a/web/src/jsMain/kotlin/de/haukesomm/sokoban/web/GameFrame.kt b/web/src/jsMain/kotlin/de/haukesomm/sokoban/web/GameFrame.kt
@@ -1,11 +1,13 @@
 package de.haukesomm.sokoban.web
 
 import de.haukesomm.sokoban.core.Direction
+import de.haukesomm.sokoban.core.LevelDescription
 import de.haukesomm.sokoban.core.SokobanGame
 import de.haukesomm.sokoban.core.SokobanGameFactory
-import de.haukesomm.sokoban.core.LevelDescription
 import de.haukesomm.sokoban.web.components.*
+import de.haukesomm.sokoban.web.components.game.MoveEvent
 import de.haukesomm.sokoban.web.components.game.gameField
+import de.haukesomm.sokoban.web.components.game.moveButtons
 import de.haukesomm.sokoban.web.components.icons.*
 import de.haukesomm.sokoban.web.theme.ThemePreference
 import de.haukesomm.sokoban.web.theme.ThemePreferences
@@ -15,10 +17,6 @@ import kotlinx.coroutines.flow.*
 
 class GameFrame {
 
-    companion object {
-        private const val MAX_TITLEBAR_WIDTH_CLASSES = "max-w-4xl"
-    }
-
     private val enabledGameConfigurations = storeOf(SokobanGameFactory.configurationOptions)
 
     private var gameFlow = MutableStateFlow(
@@ -28,20 +26,6 @@ class GameFrame {
     )
 
 
-    private fun RenderContext.initializeKeyboardInput(game: SokobanGame) {
-        Window.keydowns.map { shortcutOf(it.key) } handledBy { shortcut ->
-            game.run {
-                when(shortcut) {
-                    Keys.ArrowUp -> movePlayerIfPossible(Direction.Top)
-                    Keys.ArrowDown -> movePlayerIfPossible(Direction.Bottom)
-                    Keys.ArrowLeft -> movePlayerIfPossible(Direction.Left)
-                    Keys.ArrowRight -> movePlayerIfPossible(Direction.Right)
-                }
-            }
-        }
-    }
-
-
     private fun RenderContext.initializeLevelClearedAlert(game: SokobanGame) {
         game.state
             .filter { it.levelCleared }
@@ -71,15 +55,44 @@ class GameFrame {
 
     fun RenderContext.render() {
         gameFlow.render { game ->
-            initializeKeyboardInput(game)
             initializeLevelClearedAlert(game)
 
             div("mb-4 w-full flex flex-col gap-4 items-center") {
+                // Disable double-tap to zoom on mobile devices as this interferes with the
+                // virtual gamepad.
+                inlineStyle("touch-action: manipulation;")
+
                 titleBar(game)
 
                 div("max-w-min rounded-lg shadow overflow-hidden") {
                     gameField(game.state)
                 }
+
+                div("block md:hidden") {
+                    moveButtons {
+                        merge(
+                            moveEvents,
+                            Window.keydowns.mapNotNull {
+                                when(shortcutOf(it.key)) {
+                                    Keys.ArrowUp -> MoveEvent.Up
+                                    Keys.ArrowDown -> MoveEvent.Down
+                                    Keys.ArrowLeft -> MoveEvent.Left
+                                    Keys.ArrowRight -> MoveEvent.Right
+                                    else -> null
+                                }
+                            },
+                        ) handledBy { moveEvent ->
+                            game.run {
+                                when(moveEvent) {
+                                    MoveEvent.Up -> movePlayerIfPossible(Direction.Top)
+                                    MoveEvent.Down -> movePlayerIfPossible(Direction.Bottom)
+                                    MoveEvent.Left -> movePlayerIfPossible(Direction.Left)
+                                    MoveEvent.Right -> movePlayerIfPossible(Direction.Right)
+                                }
+                            }
+                        }
+                    }
+                }
             }
         }
     }
@@ -95,18 +108,18 @@ class GameFrame {
         }
 
         disclosure(
-            """w-full py-2 px-4 flex flex-col items-center bg-background-lightest dark:bg-background-dark
+            """w-full py-2 px-4 flex flex-col items-stretch md:items-center bg-background-lightest dark:bg-background-dark
                 | shadow-sm dark:shadow-md""".trimMargin()
         ) {
-            div("w-full flex flex-row justify-between items-center gap-4 text-sm") {
+            div("w-full flex flex-row flex-wrap justify-between items-center gap-x-4 gap-y-6 text-sm") {
                 div("flex flex-row items-center gap-2"){
                     icon("w-7 h-7", definition = SokobanAppIcons.logo)
                     span("text-xl font-semibold text-primary-500 dark:text-primary-600") {
                         +"Sokoban"
                     }
                 }
-                div("grow max-w-lg flex gap-6 items-center") {
-                    div("grow") {
+                div("grow max-w-lg flex flex-wrap gap-x-6 gap-y-2 items-center") {
+                    div("grow w-full md:w-auto") {
                         listBox {
                             entries = levelDescriptions
                             format = LevelDescription::name
@@ -169,9 +182,8 @@ class GameFrame {
             disclosurePanel {
                 div(
                     classes(
-                        """mt-4 my-2 p-4 bg-background-light dark:bg-background-darkest rounded-md
-                            | grid grid-cols-3 gap-6""".trimMargin(),
-                        MAX_TITLEBAR_WIDTH_CLASSES
+                        """max-w-4xl mt-4 my-2 p-4 bg-background-light dark:bg-background-darkest rounded-md
+                            | grid grid-cols-1 md:grid-cols-3 gap-6""".trimMargin(),
                     )
                 ) {
                     withTitle("Configuration options") {