From 122b07e7d6c0ede51382885af6cf585d92f7ea2d Mon Sep 17 00:00:00 2001 From: unknown Date: Sun, 23 Jul 2023 13:19:06 +0200 Subject: [PATCH] Split stats & inventory screen for better mobile experience --- README.md | 3 ++ src/components/Game.svelte | 3 ++ src/components/Menu/Container.svelte | 10 ++++++ src/components/Menu/Inventory.svelte | 46 ++------------------------- src/components/Menu/Stats.svelte | 47 ++++++++++++++++++++++++++++ src/components/Scene.svelte | 6 +++- src/components/UI.svelte | 13 ++++---- src/index.d.ts | 2 +- src/routes/+layout.svelte | 7 +++-- src/stores/keyboard.ts | 4 ++- src/stores/store.ts | 10 +++++- 11 files changed, 96 insertions(+), 55 deletions(-) create mode 100644 src/components/Menu/Stats.svelte diff --git a/README.md b/README.md index a56cfcd..5b29396 100644 --- 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 index 10f53b6..5a72391 100644 --- 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 @@ {:else if $store.game.state == 'inventory'} + {:else if $store.game.state == 'stats'} + {:else if $store.game.state == 'container'} {:else if $store.game.state == 'dialog'} diff --git a/src/components/Menu/Container.svelte b/src/components/Menu/Container.svelte index a414bf9..8bc3748 100644 --- 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 @@
+ +
store.back()} + on:keypress={noop} + > + X +
+
Bag
diff --git a/src/components/Menu/Inventory.svelte b/src/components/Menu/Inventory.svelte index 745c36d..2b886e1 100644 --- a/src/components/Menu/Inventory.svelte +++ b/src/components/Menu/Inventory.svelte @@ -1,7 +1,6 @@
-
Stats
- -
-
- Level : {$player.level}
- XP : {$player.xp} / {$player.getNeededXp()}
-
-
- Strength : {baseStats.strength} {#if $player.freeBaseStatsPoint > 0} - + - {/if}
- Dexterity : {baseStats.dexterity} {#if $player.freeBaseStatsPoint > 0} - + - {/if}
- wisdom : {baseStats.wisdom} {#if $player.freeBaseStatsPoint > 0} - + - {/if}
-
-
- AC : {stats.ac}
- Hit : {stats.hit}
- HP : {stats.hp}
-
-
- Attack : {stats.pAttack}
- Defense : {stats.pDefense}
-
-
-
Inventory
-
+
Main Hand
@@ -103,7 +63,7 @@
-
+
Bag
diff --git a/src/components/Menu/Stats.svelte b/src/components/Menu/Stats.svelte new file mode 100644 index 0000000..d1279a1 --- /dev/null +++ b/src/components/Menu/Stats.svelte @@ -0,0 +1,47 @@ + + +
+
Stats
+ +
+
+ Level : {$player.level}
+ XP : {$player.xp} / {$player.getNeededXp()}
+
+
+ Strength : {baseStats.strength} {#if $player.freeBaseStatsPoint > 0} + + + {/if}
+ Dexterity : {baseStats.dexterity} {#if $player.freeBaseStatsPoint > 0} + + + {/if}
+ Wisdom : {baseStats.wisdom} {#if $player.freeBaseStatsPoint > 0} + + + {/if}
+
+
+ AC : {stats.ac}
+ Hit : {stats.hit}
+ HP : {stats.hp}
+
+
+ Attack : {stats.pAttack}
+ Defense : {stats.pDefense}
+
+
+
diff --git a/src/components/Scene.svelte b/src/components/Scene.svelte index 02c6e33..e5f9e28 100644 --- 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 index 70ac690..83f04ec 100644 --- 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}
-
player.rotateLeft(canvas.ctx.camera)}>⮢
-
player.moveForward(canvas.ctx.camera)}>↑
-
player.rotateRight(canvas.ctx.camera)}>⮣
-
player.moveLeft(canvas.ctx.camera)}>←
-
player.moveBackward(canvas.ctx.camera)}>↓
-
player.moveRight(canvas.ctx.camera)}>→
+
player.rotateLeft(canvas.ctx.camera)} on:keypress={noop}>⮢
+
player.moveForward(canvas.ctx.camera)} on:keypress={noop}>↑
+
player.rotateRight(canvas.ctx.camera)} on:keypress={noop}>⮣
+
player.moveLeft(canvas.ctx.camera)} on:keypress={noop}>←
+
player.moveBackward(canvas.ctx.camera)} on:keypress={noop}>↓
+
player.moveRight(canvas.ctx.camera)} on:keypress={noop}>→
diff --git a/src/index.d.ts b/src/index.d.ts index ba016ea..80d1103 100644 --- 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 index 0e4bd92..ff4e50a 100644 --- 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 index b7fdfd6..d7ff073 100644 --- 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({ right: 'KeyD', rotateLeft: 'KeyQ', rotateRight: 'KeyE', - inventory: 'KeyI' + inventory: 'KeyI', + stats: 'KeyC' }); diff --git a/src/stores/store.ts b/src/stores/store.ts index 1ac70fc..8cc88ea 100644 --- 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: {