Refactor

Author: rezigned

examples/wasm/Cargo.toml

@@ -14,7 +14,7 @@ keymap = { path = "../../", default-features = false, features = ["wasm", "deriv
 keymap_parser = { path = "../../keymap_parser" }
 wasm-bindgen = "0.2"
 wasm-bindgen-futures = "0.4"
-web-sys = { version = "0.3", features = ["KeyboardEvent", "console", "Window", "Document", "HtmlElement", "KeyboardEventInit"] }
+web-sys = { version = "0.3", features = ["KeyboardEvent", "Window", "Document", "HtmlElement", "KeyboardEventInit"] }
 serde = { version = "1.0", features = ["derive"] }
 toml = "0.8"
 

examples/wasm/game.js

@@ -1,6 +1,6 @@
 // Configuration constants
 const CONFIG = {
-  GROUND_HEIGHT: 20,
+  GROUND_HEIGHT: 22,
   PLAYER: {
     WIDTH: 80,
     HEIGHT: 40,
@@ -460,6 +460,7 @@ class Game {
     this.gameSpeed = CONFIG.GAME.INITIAL_SPEED;
     this.gameOver = false;
     this.paused = false;
+    this.key = "";
 
     // Delta time approach instead of frame limiting
     this.lastTime = 0;
@@ -475,15 +476,7 @@ class Game {
     canvas.focus();
 
     UI.restartButton.addEventListener("click", () => this.reset());
-    UI.shareButton.addEventListener("click", () => this.share());
-  }
-
-  share() {
-    const text = `I scored ${this.score} in Nyan Jump! Try to beat me!`;
-    const hashtags = "keymap-rs,rust,wasm";
-    const url = `https://x.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(window.location)}&hashtags=${hashtags}`;
-
-    window.open(url, "_blank");
+    UI.shareButton.addEventListener("click", () => share(this.score));
   }
 
   reset() {
@@ -498,6 +491,7 @@ class Game {
     this.gameSpeed = CONFIG.GAME.INITIAL_SPEED;
     this.gameOver = false;
     this.paused = false;
+    this.key = "";
     this._hideGameOverUI();
     this.accumulator = 0; // Ensure game logic runs on first frame after reset
 
@@ -508,6 +502,13 @@ class Game {
     });
   }
 
+  setKey(key, desc) {
+    this.key = [key, desc]
+      .filter(Boolean)
+      .map((s) => s.toLowerCase())
+      .join(" - ");
+  }
+
   togglePause() {
     this.paused = !this.paused;
     if (!this.paused) {
@@ -539,6 +540,18 @@ class Game {
     ctx.fillText(`Score: ${this.score}`, 10, 20);
   }
 
+  _drawKey() {
+    let fontSize = 10;
+    ctx.fillStyle = "#ccc";
+    ctx.font = `${fontSize}px "${CONFIG.GAME.FONT_FACE}"`;
+    ctx.textAlign = "center";
+    ctx.fillText(
+      this.key,
+      canvas.width / 2,
+      GROUND_Y + CONFIG.GROUND_HEIGHT - (CONFIG.GROUND_HEIGHT - fontSize) / 2,
+    );
+  }
+
   _handleScoring() {
     this.obstacleManager.updateScoring(this.player, () => {
       this.score++;
@@ -619,12 +632,21 @@ class Game {
     this.rainbowTrail.draw();
     this.obstacleManager.draw();
     this._drawScore();
+    this._drawKey();
 
     // Update and draw FPS
     this.fpsCounter.draw();
   }
 }
 
+function share(score) {
+  const text = `I scored ${score} in Nyan Jump! Try to beat me!`;
+  const hashtags = "keymap-rs,rust,wasm";
+  const url = `https://x.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(window.location)}&hashtags=${hashtags}`;
+
+  window.open(url, "_blank");
+}
+
 // Game instance
 let game = new Game();
 
@@ -655,12 +677,12 @@ export function isGameOver() {
   return game.gameOver;
 }
 
-export function setGameOver() {
-  game.gameOver = true;
-}
-
 export function pauseGame() {
   if (!game.gameOver) {
     game.togglePause();
   }
 }
+
+export function setKey(key, description) {
+  game.setKey(key, description);
+}

examples/wasm/src/lib.rs

@@ -3,17 +3,17 @@ use keymap::DerivedConfig;
 use serde::Deserialize;
 use wasm_bindgen::prelude::*;
 use wasm_bindgen::JsCast;
-use web_sys::{console, window, KeyboardEvent};
+use web_sys::{window, KeyboardEvent};
 
 #[wasm_bindgen(module = "/game.js")]
 extern "C" {
     fn jump();
     fn moveLeft(is_moving: bool);
     fn moveRight(is_moving: bool);
     fn isGameOver() -> bool;
-    fn setGameOver();
     fn resetGame();
     fn pauseGame();
+    fn setKey(key: String, desc: String);
 }
 
 #[derive(Debug, Clone, keymap::KeyMap, Deserialize, Hash, PartialEq, Eq)]
@@ -60,11 +60,7 @@ pub fn get_keymap_as_json() -> String {
         .items
         .iter()
         .map(|(action, entry)| {
-            let keys: Vec<String> = entry
-                .keys
-                .iter()
-                .map(|k| format!("\"{}\"", k))
-                .collect();
+            let keys: Vec<String> = entry.keys.iter().map(|k| format!("\"{}\"", k)).collect();
             let description = entry.description.clone();
             format!(
                 "{{ \"action\": \"{:?}\", \"keys\": [{}], \"description\": \"{}\" }}",
@@ -74,6 +70,7 @@ pub fn get_keymap_as_json() -> String {
             )
         })
         .collect();
+
     format!("[{}]", keymap_info.join(","))
 }
 
@@ -102,18 +99,23 @@ pub fn init_game() {
 }
 
 pub fn handle_key_event(event: &KeyboardEvent, is_keydown: bool) {
+    let config = derived_config();
+
     // Log the key that was pressed
     if is_keydown {
         let key = event.to_keymap().unwrap();
-        console::log_1(&key.to_string().into());
+        let mut desc = String::new();
+        if let Some((_, item)) = config.get_item(event) {
+            desc = item.description.clone();
+        };
+
+        setKey(key.to_string(), desc);
     }
 
     if isGameOver() {
         return;
     }
 
-    let config = derived_config();
-
     if let Some(action) = config.get(event) {
         match action {
             Action::Jump => {