add help section

1 year ago · 193d991d0b
parent 94bdb0a9c8
commit 193d991d0b
3 changed files with 69 additions and 2 deletions
--- a/index.html
+++ b/index.html
@ -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>
--- a/src/App.vue
+++ b/src/App.vue
@ -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>
--- a/src/util/useInput.ts
+++ b/src/util/useInput.ts
@ -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,
  }
 }