From 3aadb51f6e4068f2d3c71ff65da1a5d8d3dd71db Mon Sep 17 00:00:00 2001 From: unknown Date: Sun, 23 Jul 2023 09:59:57 +0200 Subject: [PATCH] Add mobile controls --- src/components/Game.svelte | 2 +- src/components/Scene.svelte | 83 +++------------------------ src/components/UI.svelte | 16 +++++- src/lib/dialogs.ts | 36 ++++++------ src/lib/helpers.ts | 2 +- src/lib/scripts.ts | 7 ++- src/stores/player.ts | 109 +++++++++++++++++++++++++++++++++++- 7 files changed, 153 insertions(+), 102 deletions(-) diff --git a/src/components/Game.svelte b/src/components/Game.svelte index 012e9a0..10f53b6 100644 --- a/src/components/Game.svelte +++ b/src/components/Game.svelte @@ -45,7 +45,7 @@ {:else} - + {/if}
{ - - const position = get(player).position; - - scripts[get(store).currentLevelNumber] - .filter((script) => { - return ( - script.doWalk && - script.x === position.x && - script.y === position.y - ); - }) - .map((script) => { - if (!script.doWalk) { - return; - } - script.doWalk(); - }); - }; - const keyUp = (e: KeyboardEvent) => { if (e.key !== 'Escape') { return; @@ -64,72 +43,26 @@ } if (e.code === $keyboard.forward) { - player.update((player) => { - player.moveForward($currentLevel); - doWalk(); - store.update((store) => { - return store; - }); - updateCamera(camera, player.position); - return player; - }); + player.moveForward(camera); } if (e.code === $keyboard.left) { - player.update((player) => { - player.moveLeft($currentLevel); - doWalk(); - store.update((store) => { - return store; - }); - updateCamera(camera, player.position); - return player; - }); + player.moveLeft(camera); } if (e.code === $keyboard.backward) { - player.update((player) => { - player.moveBackward($currentLevel); - doWalk(); - store.update((store) => { - return store; - }); - updateCamera(camera, player.position); - return player; - }); + player.moveBackward(camera); } if (e.code === $keyboard.right) { - player.update((player) => { - player.moveRight($currentLevel); - doWalk(); - store.update((store) => { - return store; - }); - updateCamera(camera, player.position); - return player; - }); + player.moveRight(camera); } if (e.code === $keyboard.rotateLeft) { - player.update((player) => { - player.rotateLeft(); - store.update((store) => { - return store; - }); - updateCamera(camera, player.position); - return player; - }); + player.rotateLeft(camera); } if (e.code === $keyboard.rotateRight) { - player.update((player) => { - player.rotateRight(); - store.update((store) => { - return store; - }); - updateCamera(camera, player.position); - return player; - }); + player.rotateRight(camera); } if (e.code === $keyboard.inventory) { @@ -159,7 +92,7 @@ if(intersects.length) { - let cursor = null; + let cursor : CursorName|null = null; if(intersects[0].distance < INTERACTIVITY_DISTANCE) { if(intersects[0].object.name === 'interact') { diff --git a/src/components/UI.svelte b/src/components/UI.svelte index 1eefeb1..70ac690 100644 --- a/src/components/UI.svelte +++ b/src/components/UI.svelte @@ -2,6 +2,9 @@ import { lastLogs } from '$stores/logs'; import { player } from '$stores/player'; import { ui } from '$stores/ui'; + import { Canvas } from '@threlte/core'; + + export let canvas : Canvas; const attack = () => { if ($player.inventory.mainHand === null) { @@ -31,7 +34,7 @@ /*no op*/ }} /> -
+
-
-
+
{#each $lastLogs as log}
{log}
{/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)}>→
+
diff --git a/src/lib/dialogs.ts b/src/lib/dialogs.ts index 772ce19..19c3c32 100644 --- a/src/lib/dialogs.ts +++ b/src/lib/dialogs.ts @@ -119,27 +119,29 @@ const lockedDoor: GraphDialog = { ] }; -const greta : GraphDialog = { - content: 'Hello !', +const greta: GraphDialog = { + content: 'Hello !' }; -const bob : GraphDialog = { +const bob: GraphDialog = { content: 'Hello ! We have gobelin, deep in the mine. Could you look into them ?', - dialogChoices: [{ - content: 'Yes', - nextStep: { - content: 'Thanks ! I\'ve open the door for you', - doAction: () => { - store.update((store) => { - const door = store.levels[store.currentLevelNumber].getScript(4) as Doodad; - door.z = 1.01; - door.collision = false; - store.levels[store.currentLevelNumber].replaceScript(door); - return store; - }); + dialogChoices: [ + { + content: 'Yes', + nextStep: { + content: "Thanks ! I've open the door for you", + doAction: () => { + store.update((store) => { + const door = store.levels[store.currentLevelNumber].getScript(4) as Doodad; + door.z = 1.01; + door.collision = false; + store.levels[store.currentLevelNumber].replaceScript(door); + return store; + }); + } } - }, - }] + } + ] }; const makeDialogs = (graph: GraphDialog, ref = ''): Record => { diff --git a/src/lib/helpers.ts b/src/lib/helpers.ts index 707a7d5..4cf3736 100644 --- a/src/lib/helpers.ts +++ b/src/lib/helpers.ts @@ -33,7 +33,7 @@ export function clickOutside(node: HTMLElement) { }; } -export function isBrowser() : boolean { +export function isBrowser(): boolean { return typeof window !== 'undefined'; } diff --git a/src/lib/scripts.ts b/src/lib/scripts.ts index b5fd049..ad6d843 100644 --- a/src/lib/scripts.ts +++ b/src/lib/scripts.ts @@ -98,11 +98,12 @@ export const scripts = [ x: 4, y: 1, doWalk: () => { - const currentStore = get(store); - const ladder = currentStore.levels[currentStore.currentLevelNumber].getScript(4) as Doodad; + const ladder = currentStore.levels[currentStore.currentLevelNumber].getScript( + 4 + ) as Doodad; - if((ladder.z ?? 0) > 0) { + if ((ladder.z ?? 0) > 0) { return; } diff --git a/src/stores/player.ts b/src/stores/player.ts index a50b727..f176e80 100644 --- a/src/stores/player.ts +++ b/src/stores/player.ts @@ -1,5 +1,24 @@ import { Player } from '$lib/Player'; -import { writable } from 'svelte/store'; +import { scripts } from '$lib/scripts'; +import { get, writable, type Writable } from 'svelte/store'; +import { currentLevel, store } from '$stores/store'; +import { updateCamera } from '$lib/camera'; +import type { Camera } from 'three'; + +const doWalk = () => { + const position = get(player).position; + + scripts[get(store).currentLevelNumber] + .filter((script) => { + return script.doWalk && script.x === position.x && script.y === position.y; + }) + .map((script) => { + if (!script.doWalk) { + return; + } + script.doWalk(); + }); +}; const initialPlayer = new Player( { x: 2, y: 10, t: 0 }, @@ -24,4 +43,90 @@ const initialPlayer = new Player( } ); -export const player = writable(initialPlayer); +const createPlayerStore = () => { + const { subscribe, set, update } = writable(initialPlayer); + + const moveForward = (camera: Writable) => { + update((player) => { + player.moveForward(get(currentLevel)); + doWalk(); + store.update((store) => { + return store; + }); + updateCamera(camera, player.position); + return player; + }); + }; + + const moveLeft = (camera: Writable) => { + update((player) => { + player.moveLeft(get(currentLevel)); + doWalk(); + store.update((store) => { + return store; + }); + updateCamera(camera, player.position); + return player; + }); + }; + + const moveBackward = (camera: Writable) => { + update((player) => { + player.moveBackward(get(currentLevel)); + doWalk(); + store.update((store) => { + return store; + }); + updateCamera(camera, player.position); + return player; + }); + }; + + const moveRight = (camera: Writable) => { + update((player) => { + player.moveRight(get(currentLevel)); + doWalk(); + store.update((store) => { + return store; + }); + updateCamera(camera, player.position); + return player; + }); + }; + + const rotateLeft = (camera: Writable) => { + update((player) => { + player.rotateLeft(); + store.update((store) => { + return store; + }); + updateCamera(camera, player.position); + return player; + }); + }; + + const rotateRight = (camera: Writable) => { + update((player) => { + player.rotateRight(); + store.update((store) => { + return store; + }); + updateCamera(camera, player.position); + return player; + }); + }; + + return { + subscribe, + set, + update, + moveForward, + moveLeft, + moveBackward, + moveRight, + rotateLeft, + rotateRight + }; +}; + +export const player = createPlayerStore();