show debug info in canvas

pong/src/game_field.rs

@@ -135,11 +135,11 @@ impl Field {
                 let input = input_opt.unwrap();
                 match input.input {
                     InputType::UP => {
-                        let updated_vel_y = (obj_mut.vel().y + 1.).min(1.);
+                        let updated_vel_y = (obj_mut.vel().y - 1.).max(-1.);
                         obj_mut.vel_mut().y = updated_vel_y;
                     }
                     InputType::DOWN => {
-                        let updated_vel_y = (obj_mut.vel().y - 1.).max(-1.);
+                        let updated_vel_y = (obj_mut.vel().y + 1.).min(1.);
                         obj_mut.vel_mut().y = updated_vel_y;
                     }
                 };

src/lib.rs

@@ -30,12 +30,15 @@ macro_rules! log {
 static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;
 
 #[wasm_bindgen]
-#[repr(packed)]
-#[derive(Clone, Copy, Debug, PartialEq, Eq, Serialize)]
+#[derive(Clone, Copy, Debug, PartialEq, Serialize)]
 pub struct GameObjectDTO {
     pub id: u16,
     pub x: u16,
     pub y: u16,
+    pub orientation_x: f64,
+    pub orientation_y: f64,
+    pub vel_x: f64,
+    pub vel_y: f64,
     pub shape_param_1: u16,
     pub shape_param_2: u16,
 }
@@ -45,11 +48,17 @@ impl GameObjectDTO {
         let obj = RefCell::borrow(obj);
 
         let pos = obj.pos();
+        let orientation = obj.orientation();
+        let vel = obj.vel();
         let shape = obj.shape();
         return GameObjectDTO {
             id: obj.id(),
             x: pos.x as u16,
             y: pos.y as u16,
+            orientation_x: orientation.x,
+            orientation_y: orientation.y,
+            vel_x: vel.x,
+            vel_y: vel.y,
             shape_param_1: match shape {
                 ShapeType::Rect(_, width, _) => *width as u16,
                 ShapeType::Circle(_, radius) => *radius as u16,
@@ -114,14 +123,6 @@ impl FieldWrapper {
         self.field.height
     }
 
-    pub fn pause(&mut self) {
-        self.paused = true
-    }
-
-    pub fn resume(&mut self) {
-        self.paused = false
-    }
-
     pub fn tick(&mut self, inputs_js: &JsValue) {
         let input_dtos: Vec<InputDTO> = inputs_js.into_serde().unwrap();
         let inputs = input_dtos
@@ -132,24 +133,14 @@ impl FieldWrapper {
         // log!("{:?}", self.field.collisions);
     }
 
-    pub fn objects(&self) -> *const GameObjectDTO {
-        let mut objs = self
+    pub fn objects(&self) -> String {
+        let objs = self
             .field
             .objs()
             .into_iter()
             .map(|o| GameObjectDTO::from(o))
             .collect::<Vec<GameObjectDTO>>();
-        objs.as_ptr()
-    }
-
-    pub fn get_state(&self) -> String {
-        let json = json!(GameObjectDTO {
-            shape_param_1: 0,
-            shape_param_2: 0,
-            x: 10,
-            y: 10,
-            id: 1
-        });
+        let json = json!(objs);
         serde_json::to_string(&json).unwrap()
     }
 }

www/index.html

@@ -30,6 +30,9 @@
       <button id="tick-btn" onclick="WASM_PONG.oneTick()" disabled>
         Tick
       </button>
+      <button id="debug-btn" onclick="WASM_PONG.toggleDebug()">
+        Debug
+      </button>
     </div>
     <canvas id="wasm-app-canvas"></canvas>
     <script src="./bootstrap.js"></script>

www/index.js

@@ -15,6 +15,7 @@ canvas.width = width
 const ctx = canvas.getContext('2d');
 
 let paused = false;
+let debug = false;
 let keysDown = new Set();
 let actions = [];
 
@@ -64,46 +65,49 @@ window.WASM_PONG.oneTick = () => {
     tick()
 }
 
+window.WASM_PONG.toggleDebug = () => {
+    debug = !debug
+}
+
 const drawObjects = () => {
     const objects = getObjects();
-    ctx.beginPath();
 
     objects.forEach(obj => {
+        ctx.beginPath();
         ctx.strokeStyle = GRID_COLOR;
 
         // rect
-        if (obj.shape_2) {
+        if (obj.shape_param_2) {
             ctx.moveTo(obj.x, obj.y)
             ctx.arc(obj.x, obj.y, 10, 0, 2 * Math.PI);
-            ctx.rect(obj.x - obj.shape_1 / 2, obj.y - obj.shape_2 / 2, obj.shape_1, obj.shape_2);
+            ctx.rect(obj.x - obj.shape_param_1 / 2, obj.y - obj.shape_param_2 / 2, obj.shape_param_1, obj.shape_param_2);
         }
         // circle
         else {
             ctx.moveTo(obj.x, obj.y);
-            ctx.arc(obj.x, obj.y, obj.shape_1, 0, 2 * Math.PI);
+            ctx.arc(obj.x, obj.y, obj.shape_param_1, 0, 2 * Math.PI);
+        }
+        ctx.stroke();
+
+        if (debug) {
+            // velocity
+            drawLine(ctx, obj.x, obj.y, obj.x + obj.vel_x * 20, obj.y + obj.vel_y * 20, 'red')
+            // orientation
+            drawLine(ctx, obj.x, obj.y, obj.x + obj.orientation_x * 20, obj.y + obj.orientation_y * 20, 'blue')
         }
     })
+}
 
+const drawLine = (ctx, from_x, from_y, to_x, to_y, color) => {
+    ctx.beginPath();
+    ctx.moveTo(from_x, from_y);
+    ctx.strokeStyle = color;
+    ctx.lineTo(to_x, to_y);
     ctx.stroke();
 }
 
 const getObjects = () => {
-    const objectsPtr = field.objects();
-    const objects = new Uint16Array(memory.buffer, objectsPtr, 3 * 5 + 4 * 5) // player1, player2, ball + 4x bounds
-        .reduce((acc, val) => {
-            if (!acc.length) {
-                return [[val]]
-            }
-            const last = acc[acc.length - 1]
-            if (last.length === 5) {
-                return [...acc, [val]]
-            }
-            return [...acc.slice(0, -1), [...last, val]]
-        }, [])
-        .map(([id, x, y, shape_1, shape_2]) => {
-            return {id, x, y: height - y, shape_1, shape_2};
-        });
-    return objects;
+    return JSON.parse(field.objects());
 }
 
 const listenToKeys = () => {