chore: tweak jump action

also:
- modify random walker
- tweak UI
- add roads

Author: kt3k

model/character.ts

@@ -278,22 +278,22 @@ export abstract class Character implements IChar {
       }
     } else if (this.#moveType === "jump") {
       this.#movePhase += 2
-      if (this.#movePhase === 2) {
+      if (this.#movePhase <= 2) {
+        this.#d += 6
+      } else if (this.#movePhase <= 4) {
         this.#d += 4
-      } else if (this.#movePhase === 4) {
-        this.#d += 3
-      } else if (this.#movePhase === 6) {
+      } else if (this.#movePhase <= 6) {
+        this.#d += 2
+      } else if (this.#movePhase <= 8) {
         this.#d += 1
-      } else if (this.#movePhase === 8) {
-        this.#d += 0
-      } else if (this.#movePhase === 10) {
-        this.#d -= 0
-      } else if (this.#movePhase === 12) {
+      } else if (this.#movePhase <= 10) {
         this.#d -= 1
-      } else if (this.#movePhase === 14) {
-        this.#d -= 3
-      } else {
+      } else if (this.#movePhase <= 12) {
+        this.#d -= 2
+      } else if (this.#movePhase <= 14) {
         this.#d -= 4
+      } else {
+        this.#d -= 6
       }
       if (this.#movePhase == 16) {
         this.#movePhase = 0
@@ -531,7 +531,9 @@ export class RandomWalkNPC extends Character {
     if (dirs.length === 0) {
       return undefined
     }
-    const { choice } = seed(this.age.toString())
+    const { choice } = seed(
+      this.age.toString() + this.i.toString() + this.j.toString(),
+    )
     return choice(dirs)
   }
 }

player/ui/fps-monitor.ts

@@ -4,13 +4,13 @@ import * as signal from "../../util/signal.ts"
 /** Monitors the current fps number */
 export function FpsMonitor({ el }: Context) {
   signal.fps.subscribe((fps) => {
-    el.textContent = fps.toFixed(2)
+    el.textContent = fps.toFixed(0)
   })
 }
 
 /** Monitors the current v value */
 export function VMonitor({ el }: Context) {
   signal.v.subscribe((v) => {
-    el.textContent = v.toFixed(2)
+    el.textContent = v.toFixed(0)
   })
 }

static/index.html

@@ -40,11 +40,11 @@
       <div
         class="ui-panel js-apple-counter absolute px-0.5 text-sm text-gray-400 font-8bit bg-black right-[8px] top-[8px] h-[64px] w-[64px]"
       >
-        <p class="mt-0.5 flex items-start gap-0.5">
+        <p class="mt-0.5 flex items-start gap-1">
           <img class="inline" src="./item/apple.png" />
           <span class="count-label">0</span>
         </p>
-        <p class="mt-0.5 flex items-start gap-0.5">
+        <p class="mt-0.5 flex items-start gap-1">
           <img class="inline" src="./item/green-apple.png" />
           <span class="green-apple-count-label">0</span>
         </p>
@@ -60,16 +60,13 @@
       class="text-neutral-500 relative text-xs flex items-center justify-between w-full max-w-[450px] font-8bit"
     >
       <div>
-        <span class="px-0.5"
-        >FPS <span class="js-fps-monitor">-</span>(<span class="js-v-monitor"
-          >-</span>)</span>
-        <span class="px-0.5">ACTORS
-          <span class="js-actors-counter">-</span>
+        <span>FPS <span class="js-fps-monitor"></span>/<span
+            class="js-v-monitor"
+          ></span>
         </span>
-        <span class="px-0.5">ITEMS
-          <span class="js-items-counter">-</span>
-        </span>
-        <span>BUILD DATE BUILD_DATE</span>
+        <span>ACTORS <span class="js-actors-counter"></span></span>
+        <span>ITEMS <span class="js-items-counter"></span></span>
+        <span>VERSION BUILD_DATE</span>
       </div>
       <span class="js-loading-indicator hidden">
         <svg
@@ -86,14 +83,14 @@
       </span>
     </div>
     <div
-      class="w-full text-center font-8bit text-neutral-500 text-sm fixed bottom-5 sm:hidden"
+      class="w-full text-center font-8bit text-neutral-500 text-xs fixed bottom-5 sm:hidden"
     >
-      swipe and hold to move
+      SWIPE AND HOLD TO MOVE
     </div>
     <div
-      class="pl-1 font-8bit text-neutral-500 text-sm hidden sm:block"
+      class="font-8bit text-neutral-500 text-xs hidden sm:block"
     >
-      use arrow keys to move
+      USE ARROW KEYS TO MOVE
     </div>
   </body>
   <script type="module" src="./main.js"></script>