SuperKamiGuru/foss-mmo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add attempt at onscreen controls for touch screens.

Browse source
This commit is contained in:
David Thompson 2024-05-26 14:55:04 -04:00
parent 89b39ab6f0
commit aa0c826b3c
4 changed files with 249 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
assets/images/AUTHORS
View file

@ -1,3 +1,6 @@
Artwork by Christine Lemmer-Webber
cirkoban.png by Christine Lemmer-Webber
Licensed under CC BY-SA 4.0 International
Directional pad and A button SVGs embedded in ../index.html by Kenney
Licensed under CC0
https://kenney.nl/assets/onscreen-controls

36
game.css
View file

@ -6,6 +6,7 @@
}
body {
display: flex;
background-color: #222034;
margin: 0;
width: 100vw;
@ -14,5 +15,38 @@ body {
canvas {
display: block;
margin: 0 auto;
margin: auto auto;
}
@media (pointer: fine) {
#onscreen-controls {
display: none;
}
}
/* Onscreen controls for "coarse" pointer devices assumed to be
touchscreens on phones/tablets. Inline SVG is used so that we can
attach click handlers to individual elements of the controls. */
@media (pointer: coarse) {
#onscreen-controls {
position: absolute;
width: 100%;
bottom: 0;
display: flex;
flex-direction: row;
align-items: center;
}
#onscreen-controls #dpad-container {
width: min(25vw,25vh);
height: min(25vw,25vh);
margin: 5%;
}
#onscreen-controls #button-container {
width: min(15vw,15vh);
height: min(15vw,15vh);
margin: 5%;
margin-left: auto;
}
}

69
game.scm
View file

@ -150,7 +150,7 @@
(set! *snapshots* older-snapshots)
(play-sound-effect audio:undo)
(unless *current-effect*
(show-effect! (make-wipe-effect 0.15))))))
(show-effect! (make-wipe-effect 0.25))))))
(define (sort lst compare)
(match lst
@ -639,34 +639,36 @@
(define (on-key-down event)
(let ((key (keyboard-event-code event)))
(pk 'key-down key)
(match *state*
('play
(cond
((string=? key key:left)
(move-player 'left))
((string=? key key:right)
(move-player 'right))
((string=? key key:up)
(move-player 'up))
((string=? key key:down)
(move-player 'down))
((string=? key key:undo)
(rollback-snapshot!)
(with-goblins (update-objects!)))
;; REMOVE BEFORE RELEASE!!!!
((string=? key key:confirm)
(next-level!))))
;; Pressing any bound key resets the game.
('win
(when (or
(string=? key key:left)
(string=? key key:right)
(string=? key key:up)
(string=? key key:down)
(string=? key key:undo)
(string=? key key:confirm))
(reset-game!))))))
(cond
((string=? key key:left)
(on-input-down 'left))
((string=? key key:right)
(on-input-down 'right))
((string=? key key:up)
(on-input-down 'up))
((string=? key key:down)
(on-input-down 'down))
((string=? key key:undo)
(on-input-down 'undo))
((string=? key key:confirm)
(on-input-down 'confirm)))))
(define (on-input-down input)
(pk 'input-down input)
(match *state*
('play
(match input
('left (move-player 'left))
('right (move-player 'right))
('up (move-player 'up))
('down (move-player 'down))
('undo
(rollback-snapshot!)
(with-goblins (update-objects!)))
;; REMOVE BEFORE RELEASE!!!!
('confirm (next-level!))))
;; Pressing any bound input resets the game.
('win (reset-game!))))
;; Canvas and event loop setup
(define canvas (get-element-by-id "canvas"))
@ -695,6 +697,15 @@
(procedure->external (lambda (_) (resize-canvas))))
(add-event-listener! (current-document) "keydown"
(procedure->external on-key-down))
(define (register-touch-control elem-id input-id)
(add-event-listener! (get-element-by-id elem-id) "click"
(procedure->external
(lambda (e) (on-input-down input-id)))))
(register-touch-control "dpad-left" 'left)
(register-touch-control "dpad-right" 'right)
(register-touch-control "dpad-down" 'down)
(register-touch-control "dpad-up" 'up)
(register-touch-control "button-a" 'undo)
(resize-canvas)
(request-animation-frame draw-callback)
(timeout update-callback dt)

169
index.html
View file

@ -7,6 +7,175 @@
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div id="onscreen-controls">
<div id="dpad-container">
<svg
version="1.1"
preserveAspectRatio="none"
x="0px"
y="0px"
viewBox="0 0 159.95001 159.95001"
id="svg2202"
sodipodi:docname="transparent-dark.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview2204"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
showgrid="false" />
<defs
id="defs1791">
<g
id="Layer0_46_FILL">
<path
fill="#383838"
fill-opacity="0.501961"
stroke="none"
d="M 645.5,240.5 615,210 h -40 q -5,0 -5,5 v 51 q 0,5 5,5 h 40 l 30.5,-30.5 m -60.2,1.2 q -0.3,-0.3 -0.3,-0.7 0,-0.35 0.3,-0.65 l 5.05,-5.05 q 0.45,-0.45 1.05,-0.2 0.6,0.25 0.6,0.9 v 10.05 q 0,0.65 -0.6,0.9 -0.2,0.05 -0.4,0.05 -0.35,0.05 -0.65,-0.25 v -0.05 z"
id="path1656" />
<path
fill="#d4d4d4"
stroke="none"
d="m 585,241 q 0,0.4 0.3,0.7 l 5.05,5 v 0.05 q 0.3,0.3 0.65,0.25 0.2,0 0.4,-0.05 0.6,-0.25 0.6,-0.9 V 236 q 0,-0.65 -0.6,-0.9 -0.6,-0.25 -1.05,0.2 l -5.05,5.05 q -0.3,0.3 -0.3,0.65 z"
id="path1658" />
</g>
<g
id="Layer0_47_FILL">
<path
fill="#383838"
fill-opacity="0.501961"
stroke="none"
d="m 681,165 q 0,-5 -5,-5 h -51 q -5,0 -5,5 v 40 L 650.5,235.5 681,205 v -40 m -29.35,10.3 5.05,5.05 q 0.45,0.45 0.2,1.05 -0.25,0.6 -0.9,0.6 h -10.05 q -0.65,0 -0.9,-0.6 -0.05,-0.2 -0.05,-0.4 -0.05,-0.35 0.25,-0.65 h 0.05 l 5,-5.05 q 0.3,-0.3 0.7,-0.3 0.35,0 0.65,0.3 z"
id="path1661" />
<path
fill="#d4d4d4"
stroke="none"
d="m 656.7,180.35 -5.05,-5.05 q -0.3,-0.3 -0.65,-0.3 -0.4,0 -0.7,0.3 l -5,5.05 h -0.05 q -0.3,0.3 -0.25,0.65 0,0.2 0.05,0.4 0.25,0.6 0.9,0.6 H 656 q 0.65,0 0.9,-0.6 0.25,-0.6 -0.2,-1.05 z"
id="path1663" />
</g>
<g
id="Layer0_48_FILL">
<path
fill="#383838"
fill-opacity="0.501961"
stroke="none"
d="m 729.95,266 v -51 q 0,-5 -5,-5 H 686 L 655.5,240.5 686,271 h 38.95 q 5,0 5,-5 M 708,236 q 0,-0.65 0.6,-0.9 0.6,-0.25 1.05,0.2 l 5.05,5.05 q 0.3,0.3 0.3,0.65 0,0.4 -0.3,0.7 l -5.05,5 v 0.05 q -0.3,0.3 -0.65,0.25 -0.2,0 -0.4,-0.05 -0.6,-0.25 -0.6,-0.9 z"
id="path1666" />
<path
fill="#d4d4d4"
stroke="none"
d="m 708.6,235.1 q -0.6,0.25 -0.6,0.9 v 10.05 q 0,0.65 0.6,0.9 0.2,0.05 0.4,0.05 0.35,0.05 0.65,-0.25 v -0.05 l 5.05,-5 q 0.3,-0.3 0.3,-0.7 0,-0.35 -0.3,-0.65 l -5.05,-5.05 q -0.45,-0.45 -1.05,-0.2 z"
id="path1668" />
</g>
<g
id="Layer0_49_FILL">
<path
fill="#383838"
fill-opacity="0.501961"
stroke="none"
d="M 681,276 650.5,245.5 620,276 v 38.95 q 0,5 5,5 h 51 q 5,0 5,-5 V 276 m -24.1,22.6 q 0.25,0.6 -0.2,1.05 l -5.05,5.05 q -0.3,0.3 -0.65,0.3 -0.4,0 -0.7,-0.3 l -5,-5.05 h -0.05 q -0.3,-0.3 -0.25,-0.65 0,-0.2 0.05,-0.4 0.25,-0.6 0.9,-0.6 H 656 q 0.65,0 0.9,0.6 z"
id="path1671" />
<path
fill="#d4d4d4"
stroke="none"
d="m 656.7,299.65 q 0.45,-0.45 0.2,-1.05 -0.25,-0.6 -0.9,-0.6 h -10.05 q -0.65,0 -0.9,0.6 -0.05,0.2 -0.05,0.4 -0.05,0.35 0.25,0.65 h 0.05 l 5,5.05 q 0.3,0.3 0.7,0.3 0.35,0 0.65,-0.3 z"
id="path1673" />
</g>
</defs>
<g
id="dpad-left"
transform="translate(-570,-160)">
<use
xlink:href="#Layer0_46_FILL"
id="use1989" />
</g>
<g
id="dpad-up"
transform="translate(-570,-160)">
<use
xlink:href="#Layer0_47_FILL"
id="use1993" />
</g>
<g
id="dpad-right"
transform="translate(-570,-160)">
<use
xlink:href="#Layer0_48_FILL"
id="use1997" />
</g>
<g
id="dpad-down"
transform="translate(-570,-160)">
<use
xlink:href="#Layer0_49_FILL"
id="use2001" />
</g>
</svg>
</div>
<div id="button-container">
<svg
version="1.1"
preserveAspectRatio="none"
x="0px"
y="0px"
viewBox="0 0 80 80"
id="svg2202"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1791">
<g
id="Layer0_6_FILL">
<path
fill="#383838"
fill-opacity="0.501961"
stroke="none"
d="M 470,470 Q 470,453.45 458.25,441.7 446.55,430 430,430 413.35,430 401.65,441.7 390,453.45 390,470 q 0,16.55 11.65,28.25 Q 413.35,510 430,510 446.55,510 458.25,498.25 470,486.55 470,470 Z"
id="path1521" />
</g>
</defs>
<g id="button-a">
<g
id="g1819"
transform="translate(-390,-430)">
<use
xlink:href="#Layer0_6_FILL"
id="use1817" />
</g>
<g
transform="translate(3,24.05)"
id="g2039">
<clipPath
id="Mask_Mask_4">
<rect
x="-2"
y="-2"
width="76.949997"
height="35.400002"
fill="#ffffff"
stroke="none"
id="rect2032" />
</clipPath>
<g
aria-label="A"
id="text2037"
clip-path="url(#Mask_Mask_4)">
<path
d="M 41.307032,22.38125 H 33.076563 L 31.777735,26.1 H 26.486719 L 34.047266,5.687891 h 6.275391 L 47.883204,26.1 h -5.291016 z m -6.917969,-3.787109 h 5.591797 l -2.789063,-8.121094 z"
style="font-weight:bold;font-size:28px;font-family:Ubuntu_Bold;baseline-shift:0%;fill:#ffffff"
id="path5722" />
</g>
</g>
</g>
</svg>
</div>
</div>
<canvas id="canvas"></canvas>
<p id="wasm-error" hidden="true">
A browser with Wasm GC and tail call support is required to play