fix: sharpen web canvas and gate input

Author: trevarj

src/lib.rs

@@ -23,6 +23,7 @@ struct SkiFree {
     status: GameStatus,
     gate_combo: u16,
     trick_combo: u16,
+    input: InputRepeat,
 }
 
 impl SkiFree {
@@ -38,6 +39,7 @@ impl SkiFree {
             status: GameStatus::Ready,
             gate_combo: 0,
             trick_combo: 0,
+            input: InputRepeat::default(),
         }
     }
 
@@ -48,6 +50,7 @@ impl SkiFree {
         self.status = GameStatus::Ready;
         self.gate_combo = 0;
         self.trick_combo = 0;
+        self.input = InputRepeat::default();
     }
 
     fn start(&mut self) {
@@ -71,18 +74,18 @@ impl SkiFree {
             self.start();
         }
 
-        if is_key_pressed(KeyCode::Left) {
+        if self.input.consume(KeyCode::Left) {
             self.start();
             self.player.left();
         }
-        if is_key_pressed(KeyCode::Right) {
+        if self.input.consume(KeyCode::Right) {
             self.start();
             self.player.right();
         }
-        if is_key_pressed(KeyCode::Up) {
+        if is_key_down(KeyCode::Up) {
             self.player.brake();
         }
-        if is_key_pressed(KeyCode::Down) {
+        if is_key_down(KeyCode::Down) {
             self.start();
             self.player.down();
         }
@@ -239,6 +242,46 @@ enum GameStatus {
     Eaten,
 }
 
+#[derive(Default)]
+struct InputRepeat {
+    left: KeyRepeat,
+    right: KeyRepeat,
+}
+
+impl InputRepeat {
+    fn consume(&mut self, key: KeyCode) -> bool {
+        match key {
+            KeyCode::Left => self.left.consume(key),
+            KeyCode::Right => self.right.consume(key),
+            _ => false,
+        }
+    }
+}
+
+#[derive(Default)]
+struct KeyRepeat {
+    held_frames: u8,
+}
+
+impl KeyRepeat {
+    const INITIAL_DELAY_FRAMES: u8 = 8;
+    const REPEAT_FRAMES: u8 = 5;
+
+    fn consume(&mut self, key: KeyCode) -> bool {
+        if !is_key_down(key) {
+            self.held_frames = 0;
+            return false;
+        }
+
+        let should_fire = self.held_frames == 0
+            || (self.held_frames >= Self::INITIAL_DELAY_FRAMES
+                && (self.held_frames - Self::INITIAL_DELAY_FRAMES)
+                    .is_multiple_of(Self::REPEAT_FRAMES));
+        self.held_frames = self.held_frames.saturating_add(1);
+        should_fire
+    }
+}
+
 struct OverlayLine {
     text: &'static str,
     y_offset: f32,

src/main.rs

@@ -7,6 +7,8 @@ fn window_conf() -> Conf {
         window_height: skifree_rs::WINDOW_HEIGHT as i32,
         window_resizable: false,
         fullscreen: false,
+        high_dpi: false,
+        sample_count: 1,
         ..Default::default()
     }
 }

src/map.rs

@@ -650,7 +650,7 @@ impl Gate {
         camera: Camera,
         player: &Player,
     ) -> Option<MapEvent> {
-        if self.passed {
+        if self.passed || !self.is_visible(camera) {
             return None;
         }
 
@@ -675,6 +675,10 @@ impl Gate {
     }
 
     fn check_collision(&mut self, camera: Camera, player: &Player) -> Option<CollisionAction> {
+        if self.passed {
+            return None;
+        }
+
         for object in [&mut self.left, &mut self.right] {
             if camera.object_hitbox(object).overlaps(&player.hitbox()) {
                 return Some(object.collide());
@@ -684,6 +688,10 @@ impl Gate {
     }
 
     fn draw(&self, camera: Camera) {
+        if self.passed {
+            return;
+        }
+
         for object in [&self.left, &self.right] {
             let position = camera.world_to_screen(object.position);
             if position.x >= 0. - 100.
@@ -697,6 +705,13 @@ impl Gate {
             }
         }
     }
+
+    fn is_visible(&self, camera: Camera) -> bool {
+        [&self.left, &self.right].into_iter().any(|object| {
+            let position = camera.world_to_screen(object.position);
+            position.x >= 0. - 100. && position.x <= WINDOW_WIDTH + 100.
+        })
+    }
 }
 
 struct FinishLine {

web/index.html

@@ -16,14 +16,18 @@
 
       body {
         display: grid;
+        overflow: auto;
         min-height: 100vh;
         place-items: center;
       }
 
       canvas {
         display: block;
-        width: min(480px, 100vw);
-        height: min(640px, 100vh);
+        width: 480px;
+        height: 640px;
+        aspect-ratio: 3 / 4;
+        outline: none;
+        image-rendering: crisp-edges;
         image-rendering: pixelated;
       }
 
@@ -37,7 +41,7 @@
   </head>
   <body>
     <div id="status">Loading SkiFree...</div>
-    <canvas id="glcanvas" tabindex="1"></canvas>
+    <canvas id="glcanvas" width="480" height="640" tabindex="1"></canvas>
     <script src="https://not-fl3.github.io/miniquad-samples/mq_js_bundle.js"></script>
     <script>
       startGame().catch(showError);