diff --git a/src/lib.rs b/src/lib.rs index c91d46a..3715621 100644 --- a/src/lib.rs +++ b/src/lib.rs @@ -74,35 +74,34 @@ impl Field { height, players: vec![ Player { - obj: GameObject { id: 1, x: 0 + width / 20, y: height / 2, padding: 0 }, + obj: GameObject { id: 0, x: 0 + width / 20, y: height / 2, padding: 0 }, }, Player { - obj: GameObject { id: 2, x: width - width / 20, y: height / 2, padding: 0 }, + obj: GameObject { id: 1, x: width - width / 20, y: height / 2, padding: 0 }, } ], balls: vec![ Ball { - obj: GameObject {id: 3, x: width / 2, y: width / 2, padding: 0 } + obj: GameObject {id: 2, x: width / 2, y: height / 2, padding: 0 } } ], } } - pub fn tick(&self, inputs_js: &JsValue) { + pub fn tick(&mut self, inputs_js: &JsValue) { let inputs: Vec = inputs_js.into_serde().unwrap(); - // log!("### tick start ###"); for input in inputs.iter() { - let mut obj_opt = self.players.iter().find(|p| p.obj.id == input.obj_id); + let obj_opt = self.players.iter_mut().find(|p| p.obj.id == input.obj_id); if let None = obj_opt { - log!("Could not find player with id {}", input.obj_id); + log!("Could not find player with id {} with players: {:?}", input.obj_id, self.players); continue; } - let obj = obj_opt.unwrap(); + let player = obj_opt.unwrap(); + let mut player_obj = &mut player.obj; match input.input { - InputType::UP => obj.obj.y + 1, - InputType::DOWN => obj.obj.y - 1, + InputType::UP => player_obj.y += 1, + InputType::DOWN => player_obj.y -= 1, }; } - // log!("### tick end ###"); } pub fn objects(&self) -> *const GameObject { diff --git a/www/index.html b/www/index.html index 1dfef1e..710baeb 100644 --- a/www/index.html +++ b/www/index.html @@ -14,6 +14,7 @@ flex-direction: column; align-items: center; justify-content: center; + overflow: hidden; } diff --git a/www/index.js b/www/index.js index 098081c..ad8596e 100644 --- a/www/index.js +++ b/www/index.js @@ -17,16 +17,22 @@ const canvas = document.getElementById('wasm-app-canvas'); canvas.height = height canvas.width = width -console.log(({width, height})) - const ctx = canvas.getContext('2d'); -const renderLoop = () => { - field.tick([]); +let keysDown = new Set(); +const renderLoop = () => { + let actions = getInputActions(); + field.tick(actions); + + render(); + requestAnimationFrame(renderLoop); +} + +const render = () => { + ctx.clearRect(0, 0, canvas.width, canvas.height); drawField(); drawObjects(); - requestAnimationFrame(renderLoop); } const drawField = () => { @@ -64,10 +70,39 @@ const getObjects = () => { } return [...acc.slice(0, -1), [...last, val]] }, []) - .map(([id, x, y, _]) => ({id, x, y})); + .map(([id, x, y, _]) => ({id, x, y: height - y})); return objects; } -drawField(); -drawObjects(); +const listenToKeys = () => { + const relevantKeys = ['ArrowUp', 'ArrowDown'] + document.addEventListener('keydown', (e) => { + if (!relevantKeys.includes(e.code)) { + return; + } + keysDown.add(e.code) + }) + document.addEventListener('keyup', (e) => { + if (!relevantKeys.includes(e.code)) { + return; + } + keysDown.delete(e.code); + }) +} + +const getInputActions = () => { + return [...keysDown].map(key => { + switch(key) { + case 'ArrowUp': + return {input: 'UP', obj_id: 0} + case 'ArrowDown': + return {input: 'DOWN', obj_id: 0} + default: + return null + } + }).filter(it => !!it); +} + +listenToKeys(); +render(); requestAnimationFrame(renderLoop);