Skip to content

Commit 03731a4

Browse files
torch2424torch2424
committed
Added some mobile controls that are added depending on desktop or mobile
1 parent c999321 commit 03731a4

File tree

11 files changed

+472
-19
lines changed

11 files changed

+472
-19
lines changed

‎demo/debugger/components/mobile/touchpad/touchpad.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export default class Touchpad extends Component {
3939

4040
// Add touch controls
4141
WasmBoy.ResponsiveGamepad.TouchInput.addDpadInput(dpadElement, {
42-
allowMultipleDirections: true
42+
allowMultipleDirections: false
4343
});
4444
WasmBoy.ResponsiveGamepad.TouchInput.addButtonInput(aElement, WasmBoy.ResponsiveGamepad.RESPONSIVE_GAMEPAD_INPUTS.A);
4545
WasmBoy.ResponsiveGamepad.TouchInput.addButtonInput(bElement, WasmBoy.ResponsiveGamepad.RESPONSIVE_GAMEPAD_INPUTS.B);

‎demo/iframe/App.svelte

+9-18
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,17 @@
22
import PlayPoster from './components/PlayPoster.svelte';
33
import WasmBoy from './components/WasmBoy.svelte';
44
import Modal from './components/Modal.svelte';
5-
import ControlsBar from './components/ControlsBar.svelte';
5+
import ControlsBar from './components/ControlsBar.svelte';
6+
import GameBoyTouchPad from './components/touchpad/GameBoyTouchPad.svelte';
67
import {isStarted, isLoaded} from './stores.js';
78
8-
import loadScript from 'load-script';
9+
import {setupLayoutChange} from './scripts/layout-change.js';
10+
import {setupHotkeys} from './scripts/hotkeys.js';
11+
import {loadAnalytics} from './scripts/load-analytics.js';
912
10-
// Load our analytics
11-
if (typeof window !== 'undefined') {
12-
loadScript('https://www.googletagmanager.com/gtag/js?id=UA-125276735-3', (err, script) => {
13-
if (err) {
14-
console.error(err);
15-
return;
16-
}
17-
18-
window.dataLayer = window.dataLayer || [];
19-
function gtag() {
20-
window.dataLayer.push(arguments);
21-
}
22-
gtag('js', new Date());
23-
gtag('config', 'UA-125276735-3');
24-
});
25-
}
13+
setupLayoutChange();
14+
setupHotkeys();
15+
loadAnalytics();
2616
</script>
2717

2818
<main class="app">
@@ -33,6 +23,7 @@
3323
{#if $isLoaded}
3424
<Modal />
3525
<ControlsBar />
26+
<GameBoyTouchPad />
3627
{/if}
3728
{/if}
3829
</main>

‎demo/iframe/components/PlayPoster.svelte

+3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
<script>
22
import {isStarted, playPoster} from '../stores.js';
33
import PlayIcon from './icons/PlayIcon.svelte';
4+
import {WasmBoy} from '../../../dist/wasmboy.wasm.esm.js';
45
56
function handlePlay() {
7+
// Calling resume Audio Context here, as it is always touched on mobile
8+
WasmBoy.resumeAudioContext();
69
isStarted.set(true);
710
}
811
</script>

‎demo/iframe/components/touchpad/GameBoyDpad.svelte

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<script>
2+
</script>
3+
4+
<svg viewBox="0 0 189 189" xmlns="http://www.w3.org/2000/svg">
5+
<defs>
6+
<radialGradient id="ButtonBackgroundFill" cx="0.5" cy="0.5" r="0.75" fx="0.5" fy="0.95">
7+
<stop offset="0%" stop-color="rgba(255, 255, 255, 0.5)" stop-opacity="0.5" />
8+
<stop offset="100%" stop-color="rgba(255, 255, 255, 0.5)" stop-opacity="0.5" />
9+
</radialGradient>
10+
<linearGradient id="ButtonTriangleFillUp" x2="0%" y2="100%">
11+
<stop offset="0%" stop-color="rgba(175, 175, 175, 0.25)" stop-opacity="0.25" />
12+
<stop offset="100%" stop-color="rgba(175, 175, 175, 0.25)" stop-opacity="0.25" />
13+
</linearGradient>
14+
<linearGradient id="ButtonTriangleFillDown" x2="0%" y2="100%">
15+
<stop offset="0%" stop-color="rgba(175, 175, 175, 0.25)" stop-opacity="0.25" />
16+
<stop offset="100%" stop-color="rgba(175, 175, 175, 0.25)" stop-opacity="0.25" />
17+
</linearGradient>
18+
<linearGradient id="ButtonTriangleFillHorizontal" x2="0%" y2="100%">
19+
<stop offset="0%" stop-color="rgba(175, 175, 175, 0.25)" stop-opacity="0.25" />
20+
<stop offset="75%" stop-color="rgba(175, 175, 175, 0.25)" stop-opacity="0.25" />
21+
<stop offset="100%" stop-color="rgba(175, 175, 175, 0.25)" stop-opacity="0.25" />
22+
</linearGradient>
23+
<linearGradient id="ButtonTriangleStroke" x2="0%" y2="100%">
24+
<stop offset="0%" stop-color="rgba(175, 175, 175, 0.25)" stop-opacity="0.25" />
25+
<stop offset="75%" stop-color="rgba(175, 175, 175, 0.25)" stop-opacity="0.25" />
26+
<stop offset="100%" stop-color="rgba(175, 175, 175, 0.25)" stop-opacity="0.25" />
27+
</linearGradient>
28+
</defs>
29+
<path
30+
d="M58,58 L58,8.00037538 C58,3.5859394 61.5833386,0 66.0036109,0 L122.996389,0 C127.417239,0 131,3.58189007 131,8.00037538 L131,58 L180.999625,58 C185.414061,58 189,61.5833386 189,66.0036109 L189,122.996389 C189,127.417239 185.41811,131 180.999625,131 L131,131 L131,180.999625 C131,185.414061 127.416661,189 122.996389,189 L66.0036109,189 C61.5827606,189 58,185.41811 58,180.999625 L58,131 L8.00037538,131 C3.5859394,131 0,127.416661 0,122.996389 L0,66.0036109 C0,61.5827606 3.58189007,58 8.00037538,58 L58,58 Z"
31+
fill="url(#ButtonBackgroundFill)"
32+
/>
33+
<polygon points="75,45 115,45 95,10" fill="url(#ButtonTriangleFillUp)" stroke="url(#ButtonTriangleStroke)" />
34+
<polygon points="75,145 115,145 95,180" fill="url(#ButtonTriangleFillDown)" stroke="url(#ButtonTriangleStroke)" />
35+
<polygon points="10,95 46.5,115 45,75" fill="url(#ButtonTriangleFillHorizontal)" stroke="url(#ButtonTriangleStroke)" />
36+
<polygon points="180,95 143.5,115 145,75" fill="url(#ButtonTriangleFillHorizontal)" stroke="url(#ButtonTriangleStroke)" />
37+
</svg>
38+
39+
<style>
40+
svg {
41+
width: 100%;
42+
height: 100%;
43+
}
44+
</style>

‎demo/iframe/components/touchpad/GameBoyLetterButton.svelte

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<script>
2+
export let content = '';
3+
</script>
4+
5+
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
6+
<defs>
7+
<radialGradient id="ButtonBackgroundFill" cx="0.5" cy="0.5" r="0.75" fx="0.5" fy="0.95">
8+
<stop offset="0%" stop-color="rgba(255, 255, 255, 0.5)" stop-opacity="0.5" />
9+
<stop offset="100%" stop-color="rgba(255, 255, 255, 0.5)" stop-opacity="0.5" />
10+
</radialGradient>
11+
<radialGradient id="ButtonLetterFill" cx="0.5" cy="0.5" r="0.75" fx="0.5" fy="0.95">
12+
<stop offset="0%" stop-color="rgba(150, 150, 150, 0.25)" stop-opacity="0.25" />
13+
<stop offset="100%" stop-color="rgba(150, 150, 150, 0.25)" stop-opacity="0.25" />
14+
</radialGradient>
15+
<radialGradient id="ButtonLetterStroke" cx="0.5" cy="0.5" r="0.75" fx="0.5" fy="0.75">
16+
<stop offset="0%" stop-color="rgba(200, 200, 200, 0.25)" stop-opacity="0.25" />
17+
<stop offset="75%" stop-color="rgba(200, 200, 200, 0.25)" stop-opacity="0.25" />
18+
<stop offset="100%" stop-color="rgba(200, 200, 200, 0.25)" stop-opacity="0.25" />
19+
</radialGradient>
20+
</defs>
21+
<rect x="0" y="0" width="100" height="100" rx="50%" ry="50%" fill="url(#ButtonBackgroundFill)" />
22+
<text x="25" y="80" fill="url(#ButtonLetterFill)" stroke="url(#ButtonLetterStroke)">
23+
{content}
24+
</text>
25+
</svg>
26+
27+
<style>
28+
svg {
29+
width: 100%;
30+
height: 100%;
31+
}
32+
</style>

‎demo/iframe/components/touchpad/GameBoyTouchPad.svelte

+230
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,230 @@
1+
<script>
2+
import { onMount, onDestroy } from 'svelte';
3+
import {modalStore, showTouchPad} from '../../stores.js';
4+
5+
import GameBoyDpad from './GameBoyDpad.svelte';
6+
import GameBoyLetterButton from './GameBoyLetterButton.svelte';
7+
import GameBoyWordButton from './GameBoyWordButton.svelte';
8+
9+
import {WasmBoy} from '../../../../dist/wasmboy.wasm.esm.js';
10+
11+
let mountResolve;
12+
let mountPromise = new Promise(resolve => {
13+
mountResolve = resolve;
14+
});
15+
onMount(mountResolve);
16+
17+
const removeInputCallbacks = [];
18+
19+
const addWasmBoyInputs = async () => {
20+
21+
// Wait to mount
22+
await mountPromise;
23+
24+
// Get our touch input elements
25+
const dpadElement = document.querySelector('#gameboy-dpad');
26+
const startElement = document.querySelector('#gameboy-start');
27+
const selectElement = document.querySelector('#gameboy-select');
28+
const aElement = document.querySelector('#gameboy-a');
29+
const bElement = document.querySelector('#gameboy-b');
30+
31+
// Add touch controls
32+
removeInputCallbacks.push(
33+
WasmBoy.ResponsiveGamepad.TouchInput.addDpadInput(dpadElement, {
34+
allowMultipleDirections: false
35+
})
36+
);
37+
removeInputCallbacks.push(
38+
WasmBoy.ResponsiveGamepad.TouchInput.addButtonInput(aElement, WasmBoy.ResponsiveGamepad.RESPONSIVE_GAMEPAD_INPUTS.A)
39+
);
40+
removeInputCallbacks.push(
41+
WasmBoy.ResponsiveGamepad.TouchInput.addButtonInput(bElement, WasmBoy.ResponsiveGamepad.RESPONSIVE_GAMEPAD_INPUTS.B)
42+
);
43+
removeInputCallbacks.push(
44+
WasmBoy.ResponsiveGamepad.TouchInput.addButtonInput(startElement, WasmBoy.ResponsiveGamepad.RESPONSIVE_GAMEPAD_INPUTS.START)
45+
);
46+
removeInputCallbacks.push(
47+
WasmBoy.ResponsiveGamepad.TouchInput.addButtonInput(selectElement, WasmBoy.ResponsiveGamepad.RESPONSIVE_GAMEPAD_INPUTS.SELECT)
48+
);
49+
};
50+
addWasmBoyInputs();
51+
52+
onDestroy(() => {
53+
removeInputCallbacks.forEach(callback => callback());
54+
})
55+
</script>
56+
57+
{#if $modalStore === 0 && $showTouchPad === true}
58+
<div class="mobile-controls">
59+
<div class="gameboy-input">
60+
<div id="gameboy-dpad"><GameBoyDpad /></div>
61+
<div id="gameboy-a"><GameBoyLetterButton content="A" /></div>
62+
<div id="gameboy-b"><GameBoyLetterButton content="B" /></div>
63+
<div id="gameboy-start"><GameBoyWordButton content="start" /></div>
64+
<div id="gameboy-select"><GameBoyWordButton content="select" /></div>
65+
</div>
66+
</div>
67+
{/if}
68+
69+
<style>
70+
/*GENERAL*/
71+
.mobile-controls {
72+
position: fixed;
73+
top: 0;
74+
left: 0;
75+
76+
width: 100%;
77+
/* - px to make room for controls bar*/
78+
height: calc(100% - 50px);
79+
80+
z-index: 3;
81+
}
82+
83+
.gameboy-input {
84+
position: relative;
85+
top: 0;
86+
left: 0;
87+
88+
height: 100%;
89+
width: 100%;
90+
}
91+
92+
.gameboy-input :global(svg) {
93+
width: 100%;
94+
height: 100%;
95+
96+
padding: 3px;
97+
overflow: visible;
98+
cursor: pointer;
99+
}
100+
101+
.gameboy-input :global(svg) :global(path),
102+
.gameboy-input :global(svg) :global(rect) {
103+
stroke: #000;
104+
stroke-width: 2px;
105+
}
106+
107+
.gameboy-input :global(svg) :global(text),
108+
.gameboy-input :global(svg) :global(polygon) {
109+
stroke: #000;
110+
stroke-width: 1px;
111+
}
112+
113+
.gameboy-input :global(svg) :global(text) {
114+
font-size: 80px;
115+
font-weight: 700;
116+
text-transform: capitalize;
117+
}
118+
119+
#gameboy-select :global(svg) :global(text),
120+
#gameboy-start :global(svg) :global(text) {
121+
font-size: 23px;
122+
}
123+
124+
/*PORTRAIT*/
125+
:global(html.portrait) #gameboy-dpad {
126+
width: 37vw;
127+
height: 37vw;
128+
max-width: 170px;
129+
max-height: 170px;
130+
131+
position: absolute;
132+
z-index: 1;
133+
bottom: 27.5%;
134+
left: 5%;
135+
}
136+
137+
:global(html.portrait) #gameboy-b {
138+
width: 20vw;
139+
height: 20vw;
140+
max-width: 95px;
141+
max-height: 95px;
142+
143+
position: absolute;
144+
z-index: 1;
145+
bottom: 27.5%;
146+
right: 21%;
147+
}
148+
149+
:global(html.portrait) #gameboy-a {
150+
width: 20vw;
151+
height: 20vw;
152+
max-width: 95px;
153+
max-height: 95px;
154+
155+
position: absolute;
156+
z-index: 1;
157+
bottom: 37.5%;
158+
right: 3%;
159+
}
160+
161+
:global(html.portrait) #gameboy-select {
162+
width: 19.5vw;
163+
height: 19.5vw;
164+
max-width: 100px;
165+
max-height: 100px;
166+
167+
position: absolute;
168+
z-index: 1;
169+
left: 25.5%;
170+
bottom: 13%;
171+
}
172+
173+
:global(html.portrait) #gameboy-start {
174+
width: 19.5vw;
175+
height: 19.5vw;
176+
max-width: 100px;
177+
max-height: 100px;
178+
179+
position: absolute;
180+
z-index: 1;
181+
left: 51.5%;
182+
bottom: 13%;
183+
}
184+
185+
/*LANDSCAPE*/
186+
:global(html.landscape) #gameboy-dpad {
187+
width: 20vw;
188+
height: 20vw;
189+
position: absolute;
190+
z-index: 1;
191+
top: calc(50% - 13vw);
192+
left: 5%;
193+
}
194+
195+
:global(html.landscape) #gameboy-b {
196+
width: 12vw;
197+
height: 12vw;
198+
position: absolute;
199+
z-index: 1;
200+
top: calc(50% - 5vw);
201+
right: 15%;
202+
}
203+
204+
:global(html.landscape) #gameboy-a {
205+
width: 12vw;
206+
height: 12vw;
207+
position: absolute;
208+
z-index: 1;
209+
top: calc(50% - 13vw);
210+
right: 1%;
211+
}
212+
213+
:global(html.landscape) #gameboy-select {
214+
width: 22.5vh;
215+
height: 22.5vh;
216+
position: absolute;
217+
z-index: 1;
218+
left: 30.5%;
219+
bottom: 7%;
220+
}
221+
222+
:global(html.landscape) #gameboy-start {
223+
width: 22.5vh;
224+
height: 22.5vh;
225+
position: absolute;
226+
z-index: 1;
227+
left: 54.5%;
228+
bottom: 7%;
229+
}
230+
</style>

0 commit comments

Comments
 (0)