n/vue-shovel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add help section

Browse source
This commit is contained in:
Norman Köhring 2023-02-12 23:30:47 +01:00
parent 94bdb0a9c8
commit 193d991d0b
3 changed files with 69 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
index.html
View file

@ -49,6 +49,30 @@
right: 0;
color: white;
}
#help {
position: absolute;
top: 0;
left: 0;
height: calc(100% - 2em);
padding: 1em;
background: transparent;
color: white;
column-count: 2;
column-gap: 40px;
column-rule: 1px dotted gray;
backdrop-filter: blur(5px) sepia(.8) brightness(0.4);
}
header {
column-span: all;
}
h2 {
font-size: 1rem;
font-weight: bold;
}
p {
line-height: 2;
margin: 0;
}
</style>
</head>
<body>

35
src/App.vue
View file

@ -9,7 +9,7 @@ import usePlayer from './util/usePlayer'
const { updateTime, timeOfDay, clock } = useTime()
const { player, direction, dx, dy } = usePlayer()
const { inputX, inputY, running, digging, paused } = useInput()
const { inputX, inputY, running, digging, paused, help } = useInput()
const level = createLevel(STAGE_WIDTH + 2, STAGE_HEIGHT + 2)
let animationFrame = 0
@ -125,5 +125,38 @@ onMounted(() => {
<template v-else>({{ clock }})</template>
<div>{{ player.vx }}, {{ player.vy }}</div>
</div>
<div id="help" v-if="help">
<header>
<h1>How to play</h1>
</header>
<section>
<h2>Walk around: WASD or Arrow Keys</h2>
<p>A / Left: walk left</p>
<p>D / Right: walk right</p>
<p>W / Up: jump or climb up</p>
<p>S / Down: climb down</p>
<p>Hold Shift, to run.</p>
</section>
<section>
<h2>Dig Blocks: Left Mouse Key</h2>
<p>To dig a block, click on it with your left mouse key. Only adjacent blocks can be digged.</p>
<p><i>(not implemented, yet)</i></p>
</section>
<section>
<h2>Build / Set Blocks: Right Mouse Key</h2>
<p>To set a block, right click an empty position close to you.</p>
<p><i>(not implemented, yet)</i></p>
</section>
<section>
<h2>Inventory: I</h2>
<p>Press I to open the inventory and use the mouse to select an item. This item can then be put into the world with a right click.</p>
<p><i>(not implemented, yet)</i></p>
</section>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
</div>
</template>

12
src/util/useInput.ts
View file

@ -6,6 +6,9 @@ export default function useInput() {
let running = ref(false)
let digging = ref(false)
let paused = ref(false)
let help = ref(false)
let wasPaused = false
function handleKeyDown(event: KeyboardEvent) {
switch (event.key) {
@ -25,11 +28,17 @@ export default function useInput() {
inputX.value = -1
break
case 'p':
paused.value = !paused.value
if (!help.value) paused.value = !paused.value
if (wasPaused && !paused.value) wasPaused = false
break
case ' ':
digging.value = true
break
case '?':
if (paused.value && !help.value) wasPaused = true
help.value = !help.value
paused.value = help.value || wasPaused
break
}
}
@ -67,5 +76,6 @@ export default function useInput() {
running,
digging,
paused,
help,
}
}