Skip to content

Commit

Permalink
Add mobile controls
Browse files Browse the repository at this point in the history
  • Loading branch information
@shezard
shezard committed Jul 23, 2023
1 parent 067e7bf commit 3aadb51
Show file tree
Hide file tree
Showing 7 changed files with 153 additions and 102 deletions.
2 changes: 1 addition & 1 deletion src/components/Game.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
</div>
</div>
{:else}
<UI />
<UI {canvas} />
{/if}
<div
class="absolute z-0 w-full h-full bg-stone-800 overflow-hidden {$pointer}"
Expand Down
83 changes: 8 additions & 75 deletions src/components/Scene.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,40 +13,19 @@
import Script from './Script.svelte';
import { gameTick } from '$lib/game';
import { currentLevel, store } from '$stores/store';
import { scripts } from '$lib/scripts';
import { keyboard } from '$stores/keyboard';
import { onMount } from 'svelte';
import { updateCamera } from '$lib/camera';
import { get } from 'svelte/store';
import { player } from '$stores/player';
import { INTERACTIVITY_DISTANCE, pointer } from '$stores/cursor';
import { INTERACTIVITY_DISTANCE, pointer, type CursorName } from '$stores/cursor';
import Debug from './Debug.svelte';
const { camera, scene } = useThrelte();
interactivity();
gameTick();
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 keyUp = (e: KeyboardEvent) => {
if (e.key !== 'Escape') {
return;
Expand All @@ -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) {
Expand Down Expand Up @@ -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') {
Expand Down
16 changes: 13 additions & 3 deletions src/components/UI.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -31,7 +34,7 @@
/*no op*/
}}
/>
<div class="w-40">
<div>
<div
class="border-4 border-dark-color w-[160px] h-[35px] m-[10px] grid items-center justify-items-center text-white"
style="background: linear-gradient(to left, rgba(0, 0, 0, 0) {hpPercent}%, #870001 {hpPercent}%)"
Expand All @@ -46,12 +49,19 @@
{$player.xp} / {$player.getNeededXp()}
</div>
</div>
<div class="w-20" />
<div class="logs">
<div class="m-[10px]">
{#each $lastLogs as log}
<div>{log}</div>
{/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>
</div>
</div>

Expand Down
36 changes: 19 additions & 17 deletions src/lib/dialogs.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<string, NpcDialog | PlayerDialog> => {
Expand Down
2 changes: 1 addition & 1 deletion src/lib/helpers.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export function clickOutside(node: HTMLElement) {
};
}

export function isBrowser() : boolean {
export function isBrowser(): boolean {
return typeof window !== 'undefined';
}

Expand Down
7 changes: 4 additions & 3 deletions src/lib/scripts.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
109 changes: 107 additions & 2 deletions src/stores/player.ts
View file
Original file line number Diff line number Diff line change
@@ -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 },
Expand All @@ -24,4 +43,90 @@ const initialPlayer = new Player(
}
);

export const player = writable<Player>(initialPlayer);
const createPlayerStore = () => {
const { subscribe, set, update } = writable<Player>(initialPlayer);

const moveForward = (camera: Writable<Camera>) => {
update((player) => {
player.moveForward(get(currentLevel));
doWalk();
store.update((store) => {
return store;
});
updateCamera(camera, player.position);
return player;
});
};

const moveLeft = (camera: Writable<Camera>) => {
update((player) => {
player.moveLeft(get(currentLevel));
doWalk();
store.update((store) => {
return store;
});
updateCamera(camera, player.position);
return player;
});
};

const moveBackward = (camera: Writable<Camera>) => {
update((player) => {
player.moveBackward(get(currentLevel));
doWalk();
store.update((store) => {
return store;
});
updateCamera(camera, player.position);
return player;
});
};

const moveRight = (camera: Writable<Camera>) => {
update((player) => {
player.moveRight(get(currentLevel));
doWalk();
store.update((store) => {
return store;
});
updateCamera(camera, player.position);
return player;
});
};

const rotateLeft = (camera: Writable<Camera>) => {
update((player) => {
player.rotateLeft();
store.update((store) => {
return store;
});
updateCamera(camera, player.position);
return player;
});
};

const rotateRight = (camera: Writable<Camera>) => {
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();

0 comments on commit 3aadb51

Please sign in to comment.