Split stats & inventory screen for better mobile experience

shezard · Jul 23, 2023 · 122b07e · 122b07e
1 parent 3aadb51
commit 122b07e
Show file tree

Hide file tree

Showing 11 changed files with 96 additions and 55 deletions.
diff --git a/README.md b/README.md
@@ -40,6 +40,9 @@ You can preview the production build with `npm run preview`.
 -   [x] Add treasure chest
 -   [x] Pause game while in the menu
 -   [x] Container: fix store not updating
+-   [ ] Mobile
+    -   [ ] Fix icons for left / right rotation
+    -   [ ] Add cross to exit menus
 -   [ ] Cursor
     -   [x] Click on AI should attack
     -   [x] Fix cursor bypassing walls

diff --git a/src/components/Game.svelte b/src/components/Game.svelte
@@ -14,6 +14,7 @@
 	import Container from './Menu/Container.svelte';
     import Dialog from './Menu/Dialog.svelte';
 	import Editor from './Editor/Editor.svelte';
+    import Stats from './Menu/Stats.svelte';
 
 	$: shaking = $store.screen.shaking;
 
@@ -37,6 +38,8 @@
 						<Editor />
 					{:else if $store.game.state == 'inventory'}
 						<Inventory />
+                    {:else if $store.game.state == 'stats'}
+                        <Stats />
 					{:else if $store.game.state == 'container'}
 						<Container />
 					{:else if $store.game.state == 'dialog'}

diff --git a/src/components/Menu/Container.svelte b/src/components/Menu/Container.svelte
@@ -3,6 +3,7 @@
     import { noop } from '$lib/helpers';
 	import { container } from '$stores/container';
 	import { player } from '$stores/player';
+    import { store } from '$stores/store';
 	import type { Item, ItemName } from '../..';
 	import MenuItem from './Item.svelte';
 
@@ -41,6 +42,15 @@
 </script>
 
 <div class="menu text-white">
+
+    <div
+        class="text-3xl float-right ml-10 cursor-pointer"
+        on:click={() => store.back()}
+        on:keypress={noop}
+    >
+        X
+    </div>
+
 	<div class="grid grid-cols-3">
 		<div class="flex flex-col items-center">
 			<div class="text-3xl">Bag</div>

diff --git a/src/components/Menu/Inventory.svelte b/src/components/Menu/Inventory.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-    import { noop } from '$lib/helpers';
     import { player } from '$stores/player';
-    import type { BaseStatsName, Item } from '../..';
+    import type { Item } from '../..';
     import MenuItem from './Item.svelte';
 
     const toBag = (item: Item) => () => {
@@ -22,52 +21,13 @@
     $: offHand = $player.inventory.offHand;
     $: armor = $player.inventory.armor;
 
-    $: baseStats = $player.getBaseStats();
-    $: stats = $player.getStats();
-
-    const addBaseStats = (baseStatsName : BaseStatsName) => () => {
-        player.update((player) => {
-            player.baseStats[baseStatsName]++;
-            player.freeBaseStatsPoint--;
-            return player;
-        });
-    }
 </script>
 
 <div class="menu text-white">
-    <div class="text-3xl">Stats</div>
-
-    <div class="grid grid-cols-4 text-2xl">
-        <div class="pl-10">
-            Level : {$player.level} <br />
-            XP : {$player.xp} / {$player.getNeededXp()} <br />
-        </div>
-        <div>
-            Strength : {baseStats.strength} {#if $player.freeBaseStatsPoint > 0}
-                <span on:click={addBaseStats('strength')} on:keypress={noop}>+</span>
-            {/if}<br />
-            Dexterity : {baseStats.dexterity}  {#if $player.freeBaseStatsPoint > 0}
-                <span on:click={addBaseStats('dexterity')} on:keypress={noop}>+</span>
-            {/if}<br />
-            wisdom : {baseStats.wisdom}  {#if $player.freeBaseStatsPoint > 0}
-                <span on:click={addBaseStats('wisdom')} on:keypress={noop}>+</span>
-            {/if}<br />
-        </div>
-        <div>
-            AC : {stats.ac} <br />
-            Hit : {stats.hit} <br />
-            HP : {stats.hp} <br />
-        </div>
-        <div>
-            Attack : {stats.pAttack} <br />
-            Defense : {stats.pDefense} <br />
-        </div>
-    </div>
-
     <div class="grid grid-cols-2 mt-5">
         <div>
             <div class="text-3xl">Inventory</div>
-                <div class="grid grid-inventory text-2xl pl-10">
+                <div class="grid grid-inventory text-2xl pl-5">
                     <div>
                         Main Hand
                     </div>
@@ -103,7 +63,7 @@
                 </div>
             </div>
 
-        <div class="flex flex-col">
+        <div class="flex flex-col pl-5">
             <div class="text-3xl">Bag</div>
 
             <div class="grid grid-bag">

diff --git a/src/components/Menu/Stats.svelte b/src/components/Menu/Stats.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+    import { noop } from '$lib/helpers';
+    import { player } from '$stores/player';
+    import type { BaseStatsName } from '../..';
+
+    $: baseStats = $player.getBaseStats();
+    $: stats = $player.getStats();
+
+    const addBaseStats = (baseStatsName : BaseStatsName) => () => {
+        player.update((player) => {
+            player.baseStats[baseStatsName]++;
+            player.freeBaseStatsPoint--;
+            return player;
+        });
+    }
+</script>
+
+<div class="menu text-white">
+    <div class="text-3xl">Stats</div>
+
+    <div class="grid grid-cols-2 text-2xl">
+        <div class="pl-5">
+            Level : {$player.level} <br />
+            XP : {$player.xp} / {$player.getNeededXp()} <br />
+        </div>
+        <div class="pl-5">
+            Strength : {baseStats.strength} {#if $player.freeBaseStatsPoint > 0}
+                <span on:click={addBaseStats('strength')} on:keypress={noop}>+</span>
+            {/if}<br />
+            Dexterity : {baseStats.dexterity}  {#if $player.freeBaseStatsPoint > 0}
+                <span on:click={addBaseStats('dexterity')} on:keypress={noop}>+</span>
+            {/if}<br />
+            Wisdom : {baseStats.wisdom}  {#if $player.freeBaseStatsPoint > 0}
+                <span on:click={addBaseStats('wisdom')} on:keypress={noop}>+</span>
+            {/if}<br />
+        </div>
+        <div class="pl-5 mt-5">
+            AC : {stats.ac} <br />
+            Hit : {stats.hit} <br />
+            HP : {stats.hp} <br />
+        </div>
+        <div class="pl-5 mt-5">
+            Attack : {stats.pAttack} <br />
+            Defense : {stats.pDefense} <br />
+        </div>
+    </div>
+</div>
diff --git a/src/components/Scene.svelte b/src/components/Scene.svelte
@@ -36,7 +36,7 @@
 
 	const keyPress = (e: KeyboardEvent) => {
 		if (
-			($store.game.state !== 'inventory' && $store.game.state !== 'running') ||
+			($store.game.state !== 'stats' && $store.game.state !== 'inventory' && $store.game.state !== 'running') ||
 			$store.game.running === 'gameOver'
 		) {
 			return;
@@ -69,6 +69,10 @@
 			store.navigateTo('inventory');
 		}
 
+		if (e.code === $keyboard.stats) {
+			store.navigateTo('stats');
+		}
+
         updateCursor();
 	};
 

diff --git a/src/components/UI.svelte b/src/components/UI.svelte
@@ -3,6 +3,7 @@
 	import { player } from '$stores/player';
 	import { ui } from '$stores/ui';
     import { Canvas } from '@threlte/core';
+    import { noop } from 'svelte/internal';
 
     export let canvas : Canvas;
 
@@ -55,12 +56,12 @@
 			{/each}
 		</div>
         <div class="m-[10px] grid grid-cols-3 text-center">
-            <div class="w-10 cursor-pointer" on:click={() => player.rotateLeft(canvas.ctx.camera)}>&#11170;</div>
-            <diV class="w-10 cursor-pointer" on:click={() => player.moveForward(canvas.ctx.camera)}>&uparrow;</diV>
-            <div class="w-10 cursor-pointer" on:click={() => player.rotateRight(canvas.ctx.camera)}>&#11171;</div>
-            <div class="w-10 cursor-pointer" on:click={() => player.moveLeft(canvas.ctx.camera)}>&leftarrow;</div>
-            <div class="w-10 cursor-pointer" on:click={() => player.moveBackward(canvas.ctx.camera)}>&downarrow;</div>
-            <div class="w-10 cursor-pointer" on:click={() => player.moveRight(canvas.ctx.camera)}>&rightarrow;</div>
+            <div class="w-10 cursor-pointer" on:click={() => player.rotateLeft(canvas.ctx.camera)} on:keypress={noop}>&#11170;</div>
+            <diV class="w-10 cursor-pointer" on:click={() => player.moveForward(canvas.ctx.camera)} on:keypress={noop}>&uparrow;</diV>
+            <div class="w-10 cursor-pointer" on:click={() => player.rotateRight(canvas.ctx.camera)} on:keypress={noop}>&#11171;</div>
+            <div class="w-10 cursor-pointer" on:click={() => player.moveLeft(canvas.ctx.camera)} on:keypress={noop}>&leftarrow;</div>
+            <div class="w-10 cursor-pointer" on:click={() => player.moveBackward(canvas.ctx.camera)} on:keypress={noop}>&downarrow;</div>
+            <div class="w-10 cursor-pointer" on:click={() => player.moveRight(canvas.ctx.camera)} on:keypress={noop}>&rightarrow;</div>
         </div>
 	</div>
 </div>

diff --git a/src/index.d.ts b/src/index.d.ts
@@ -12,7 +12,7 @@ export type GameState = (
           running: 'newGame' | 'continue';
       }
     | {
-          state: 'running' | 'inventory' | 'container';
+          state: 'running' | 'stats' | 'inventory' | 'container';
           running: 'continue' | 'gameOver';
       }
 ) & {

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -22,8 +22,11 @@
 
 	:global(.menu) {
 		position: relative;
-		width: 60vw;
-		height: 60vh;
+
+        @media(max-width: 1279) {
+            width: 60vw;
+            height: 60vh;
+        }
 	}
 
     :global(.action::before) {

diff --git a/src/stores/keyboard.ts b/src/stores/keyboard.ts
@@ -8,6 +8,7 @@ interface Keyboard {
     rotateLeft: string;
     rotateRight: string;
     inventory: string;
+    stats: string;
 }
 
 export type Action = keyof Keyboard;
@@ -19,5 +20,6 @@ export const keyboard = writable<Keyboard>({
     right: 'KeyD',
     rotateLeft: 'KeyQ',
     rotateRight: 'KeyE',
-    inventory: 'KeyI'
+    inventory: 'KeyI',
+    stats: 'KeyC'
 });
diff --git a/src/stores/store.ts b/src/stores/store.ts
@@ -7,7 +7,15 @@ import level2 from '$maps/level-2.json';
 import { Level } from '../lib/Level';
 import type { LevelProp, Store } from '..';
 
-type Route = 'main' | 'control' | 'editor' | 'running' | 'inventory' | 'container' | 'dialog';
+type Route =
+    | 'main'
+    | 'control'
+    | 'editor'
+    | 'running'
+    | 'stats'
+    | 'inventory'
+    | 'container'
+    | 'dialog';
 
 const initialStoreState: Store = {
     game: {