Skip to content

Commit 3aadb51

Browse files
shezardshezard
committed
Add mobile controls
1 parent 067e7bf commit 3aadb51

File tree

7 files changed

+153
-102
lines changed

7 files changed

+153
-102
lines changed

‎src/components/Game.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
</div>
4646
</div>
4747
{:else}
48-
<UI />
48+
<UI {canvas} />
4949
{/if}
5050
<div
5151
class="absolute z-0 w-full h-full bg-stone-800 overflow-hidden {$pointer}"

‎src/components/Scene.svelte

Lines changed: 8 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -13,40 +13,19 @@
1313
import Script from './Script.svelte';
1414
import { gameTick } from '$lib/game';
1515
import { currentLevel, store } from '$stores/store';
16-
import { scripts } from '$lib/scripts';
1716
import { keyboard } from '$stores/keyboard';
1817
import { onMount } from 'svelte';
1918
import { updateCamera } from '$lib/camera';
2019
import { get } from 'svelte/store';
2120
import { player } from '$stores/player';
22-
import { INTERACTIVITY_DISTANCE, pointer } from '$stores/cursor';
21+
import { INTERACTIVITY_DISTANCE, pointer, type CursorName } from '$stores/cursor';
2322
import Debug from './Debug.svelte';
2423
2524
const { camera, scene } = useThrelte();
2625
2726
interactivity();
2827
gameTick();
2928
30-
const doWalk = () => {
31-
32-
const position = get(player).position;
33-
34-
scripts[get(store).currentLevelNumber]
35-
.filter((script) => {
36-
return (
37-
script.doWalk &&
38-
script.x === position.x &&
39-
script.y === position.y
40-
);
41-
})
42-
.map((script) => {
43-
if (!script.doWalk) {
44-
return;
45-
}
46-
script.doWalk();
47-
});
48-
};
49-
5029
const keyUp = (e: KeyboardEvent) => {
5130
if (e.key !== 'Escape') {
5231
return;
@@ -64,72 +43,26 @@
6443
}
6544
6645
if (e.code === $keyboard.forward) {
67-
player.update((player) => {
68-
player.moveForward($currentLevel);
69-
doWalk();
70-
store.update((store) => {
71-
return store;
72-
});
73-
updateCamera(camera, player.position);
74-
return player;
75-
});
46+
player.moveForward(camera);
7647
}
7748
7849
if (e.code === $keyboard.left) {
79-
player.update((player) => {
80-
player.moveLeft($currentLevel);
81-
doWalk();
82-
store.update((store) => {
83-
return store;
84-
});
85-
updateCamera(camera, player.position);
86-
return player;
87-
});
50+
player.moveLeft(camera);
8851
}
8952
9053
if (e.code === $keyboard.backward) {
91-
player.update((player) => {
92-
player.moveBackward($currentLevel);
93-
doWalk();
94-
store.update((store) => {
95-
return store;
96-
});
97-
updateCamera(camera, player.position);
98-
return player;
99-
});
54+
player.moveBackward(camera);
10055
}
10156
10257
if (e.code === $keyboard.right) {
103-
player.update((player) => {
104-
player.moveRight($currentLevel);
105-
doWalk();
106-
store.update((store) => {
107-
return store;
108-
});
109-
updateCamera(camera, player.position);
110-
return player;
111-
});
58+
player.moveRight(camera);
11259
}
11360
11461
if (e.code === $keyboard.rotateLeft) {
115-
player.update((player) => {
116-
player.rotateLeft();
117-
store.update((store) => {
118-
return store;
119-
});
120-
updateCamera(camera, player.position);
121-
return player;
122-
});
62+
player.rotateLeft(camera);
12363
}
12464
if (e.code === $keyboard.rotateRight) {
125-
player.update((player) => {
126-
player.rotateRight();
127-
store.update((store) => {
128-
return store;
129-
});
130-
updateCamera(camera, player.position);
131-
return player;
132-
});
65+
player.rotateRight(camera);
13366
}
13467
13568
if (e.code === $keyboard.inventory) {
@@ -159,7 +92,7 @@
15992
16093
if(intersects.length) {
16194
162-
let cursor = null;
95+
let cursor : CursorName|null = null;
16396
16497
if(intersects[0].distance < INTERACTIVITY_DISTANCE) {
16598
if(intersects[0].object.name === 'interact') {

‎src/components/UI.svelte

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
import { lastLogs } from '$stores/logs';
33
import { player } from '$stores/player';
44
import { ui } from '$stores/ui';
5+
import { Canvas } from '@threlte/core';
6+
7+
export let canvas : Canvas;
58
69
const attack = () => {
710
if ($player.inventory.mainHand === null) {
@@ -31,7 +34,7 @@
3134
/*no op*/
3235
}}
3336
/>
34-
<div class="w-40">
37+
<div>
3538
<div
3639
class="border-4 border-dark-color w-[160px] h-[35px] m-[10px] grid items-center justify-items-center text-white"
3740
style="background: linear-gradient(to left, rgba(0, 0, 0, 0) {hpPercent}%, #870001 {hpPercent}%)"
@@ -46,12 +49,19 @@
4649
{$player.xp} / {$player.getNeededXp()}
4750
</div>
4851
</div>
49-
<div class="w-20" />
50-
<div class="logs">
52+
<div class="m-[10px]">
5153
{#each $lastLogs as log}
5254
<div>{log}</div>
5355
{/each}
5456
</div>
57+
<div class="m-[10px] grid grid-cols-3 text-center">
58+
<div class="w-10 cursor-pointer" on:click={() => player.rotateLeft(canvas.ctx.camera)}>&#11170;</div>
59+
<diV class="w-10 cursor-pointer" on:click={() => player.moveForward(canvas.ctx.camera)}>&uparrow;</diV>
60+
<div class="w-10 cursor-pointer" on:click={() => player.rotateRight(canvas.ctx.camera)}>&#11171;</div>
61+
<div class="w-10 cursor-pointer" on:click={() => player.moveLeft(canvas.ctx.camera)}>&leftarrow;</div>
62+
<div class="w-10 cursor-pointer" on:click={() => player.moveBackward(canvas.ctx.camera)}>&downarrow;</div>
63+
<div class="w-10 cursor-pointer" on:click={() => player.moveRight(canvas.ctx.camera)}>&rightarrow;</div>
64+
</div>
5565
</div>
5666
</div>
5767

‎src/lib/dialogs.ts

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -119,27 +119,29 @@ const lockedDoor: GraphDialog = {
119119
]
120120
};
121121

122-
const greta : GraphDialog = {
123-
content: 'Hello !',
122+
const greta: GraphDialog = {
123+
content: 'Hello !'
124124
};
125125

126-
const bob : GraphDialog = {
126+
const bob: GraphDialog = {
127127
content: 'Hello ! We have gobelin, deep in the mine. Could you look into them ?',
128-
dialogChoices: [{
129-
content: 'Yes',
130-
nextStep: {
131-
content: 'Thanks ! I\'ve open the door for you',
132-
doAction: () => {
133-
store.update((store) => {
134-
const door = store.levels[store.currentLevelNumber].getScript(4) as Doodad;
135-
door.z = 1.01;
136-
door.collision = false;
137-
store.levels[store.currentLevelNumber].replaceScript(door);
138-
return store;
139-
});
128+
dialogChoices: [
129+
{
130+
content: 'Yes',
131+
nextStep: {
132+
content: "Thanks ! I've open the door for you",
133+
doAction: () => {
134+
store.update((store) => {
135+
const door = store.levels[store.currentLevelNumber].getScript(4) as Doodad;
136+
door.z = 1.01;
137+
door.collision = false;
138+
store.levels[store.currentLevelNumber].replaceScript(door);
139+
return store;
140+
});
141+
}
140142
}
141-
},
142-
}]
143+
}
144+
]
143145
};
144146

145147
const makeDialogs = (graph: GraphDialog, ref = ''): Record<string, NpcDialog | PlayerDialog> => {

‎src/lib/helpers.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export function clickOutside(node: HTMLElement) {
3333
};
3434
}
3535

36-
export function isBrowser() : boolean {
36+
export function isBrowser(): boolean {
3737
return typeof window !== 'undefined';
3838
}
3939

‎src/lib/scripts.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -98,11 +98,12 @@ export const scripts = [
9898
x: 4,
9999
y: 1,
100100
doWalk: () => {
101-
102101
const currentStore = get(store);
103-
const ladder = currentStore.levels[currentStore.currentLevelNumber].getScript(4) as Doodad;
102+
const ladder = currentStore.levels[currentStore.currentLevelNumber].getScript(
103+
4
104+
) as Doodad;
104105

105-
if((ladder.z ?? 0) > 0) {
106+
if ((ladder.z ?? 0) > 0) {
106107
return;
107108
}
108109

‎src/stores/player.ts

Lines changed: 107 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,24 @@
11
import { Player } from '$lib/Player';
2-
import { writable } from 'svelte/store';
2+
import { scripts } from '$lib/scripts';
3+
import { get, writable, type Writable } from 'svelte/store';
4+
import { currentLevel, store } from '$stores/store';
5+
import { updateCamera } from '$lib/camera';
6+
import type { Camera } from 'three';
7+
8+
const doWalk = () => {
9+
const position = get(player).position;
10+
11+
scripts[get(store).currentLevelNumber]
12+
.filter((script) => {
13+
return script.doWalk && script.x === position.x && script.y === position.y;
14+
})
15+
.map((script) => {
16+
if (!script.doWalk) {
17+
return;
18+
}
19+
script.doWalk();
20+
});
21+
};
322

423
const initialPlayer = new Player(
524
{ x: 2, y: 10, t: 0 },
@@ -24,4 +43,90 @@ const initialPlayer = new Player(
2443
}
2544
);
2645

27-
export const player = writable<Player>(initialPlayer);
46+
const createPlayerStore = () => {
47+
const { subscribe, set, update } = writable<Player>(initialPlayer);
48+
49+
const moveForward = (camera: Writable<Camera>) => {
50+
update((player) => {
51+
player.moveForward(get(currentLevel));
52+
doWalk();
53+
store.update((store) => {
54+
return store;
55+
});
56+
updateCamera(camera, player.position);
57+
return player;
58+
});
59+
};
60+
61+
const moveLeft = (camera: Writable<Camera>) => {
62+
update((player) => {
63+
player.moveLeft(get(currentLevel));
64+
doWalk();
65+
store.update((store) => {
66+
return store;
67+
});
68+
updateCamera(camera, player.position);
69+
return player;
70+
});
71+
};
72+
73+
const moveBackward = (camera: Writable<Camera>) => {
74+
update((player) => {
75+
player.moveBackward(get(currentLevel));
76+
doWalk();
77+
store.update((store) => {
78+
return store;
79+
});
80+
updateCamera(camera, player.position);
81+
return player;
82+
});
83+
};
84+
85+
const moveRight = (camera: Writable<Camera>) => {
86+
update((player) => {
87+
player.moveRight(get(currentLevel));
88+
doWalk();
89+
store.update((store) => {
90+
return store;
91+
});
92+
updateCamera(camera, player.position);
93+
return player;
94+
});
95+
};
96+
97+
const rotateLeft = (camera: Writable<Camera>) => {
98+
update((player) => {
99+
player.rotateLeft();
100+
store.update((store) => {
101+
return store;
102+
});
103+
updateCamera(camera, player.position);
104+
return player;
105+
});
106+
};
107+
108+
const rotateRight = (camera: Writable<Camera>) => {
109+
update((player) => {
110+
player.rotateRight();
111+
store.update((store) => {
112+
return store;
113+
});
114+
updateCamera(camera, player.position);
115+
return player;
116+
});
117+
};
118+
119+
return {
120+
subscribe,
121+
set,
122+
update,
123+
moveForward,
124+
moveLeft,
125+
moveBackward,
126+
moveRight,
127+
rotateLeft,
128+
rotateRight
129+
};
130+
};
131+
132+
export const player = createPlayerStore();

0 commit comments

Comments
 (0)