From 9fd69abc263ddf3b8ce24f045861dd51631c0004 Mon Sep 17 00:00:00 2001 From: Thilo Behnke Date: Mon, 2 May 2022 13:15:21 +0200 Subject: [PATCH] show debug info in canvas --- pong/src/game_field.rs | 4 ++-- src/lib.rs | 37 ++++++++++++++--------------------- www/index.html | 3 +++ www/index.js | 44 +++++++++++++++++++++++------------------- 4 files changed, 43 insertions(+), 45 deletions(-) diff --git a/pong/src/game_field.rs b/pong/src/game_field.rs index 1116eea..2d6e2f1 100644 --- a/pong/src/game_field.rs +++ b/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; } }; diff --git a/src/lib.rs b/src/lib.rs index fe58a5c..b1d9ed5 100644 --- a/src/lib.rs +++ b/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 = 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::>(); - 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() } } diff --git a/www/index.html b/www/index.html index e3b46e5..81c5df8 100644 --- a/www/index.html +++ b/www/index.html @@ -30,6 +30,9 @@ + diff --git a/www/index.js b/www/index.js index 0ca4a7f..e870258 100644 --- a/www/index.js +++ b/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 = () => {