diff options
Diffstat (limited to 'test-client/main.ts')
| -rw-r--r-- | test-client/main.ts | 48 |
1 files changed, 34 insertions, 14 deletions
diff --git a/test-client/main.ts b/test-client/main.ts index bfd352b3..20ec2a18 100644 --- a/test-client/main.ts +++ b/test-client/main.ts @@ -19,7 +19,7 @@ document.addEventListener("DOMContentLoaded", () => { ws.onclose = () => console.log("close") ws.onopen = () => { console.log("open") - send({ type: "join", name: "test" }) + send({ type: "join", name: "test", character: Math.floor(Math.random() * 255) }) } canvas = document.createElement("canvas"); @@ -48,6 +48,7 @@ interface PlayerData { rot: number, item?: ItemData, facing: V2, + character: number, vel: { x: number, y: number } } interface TileData { @@ -64,6 +65,7 @@ let data: Gamedata = { item_names: [], tile_names: [], spawn: [0, 0] } let my_id: PlayerID = -1 const camera: V2 = { x: 0, y: 0 } const interact_target_anim: V2 = { x: 0, y: 0 } +let interacting: V2 | undefined; let scale = 0 function send(p: PacketS) { ws.send(JSON.stringify(p)) } @@ -78,7 +80,16 @@ function packet(p: PacketC) { case "add_player": { let item = undefined if (p.item) item = { kind: p.item, x: 0, y: 0 }; - players.set(p.id, { x: data.spawn[0], y: data.spawn[1], name: p.name, rot: 0, item, facing: { x: 0, y: 1 }, vel: { x: 0, y: 0 } }) + players.set(p.id, { + x: p.position[0], + y: p.position[1], + character: p.character, + name: p.name, + rot: 0, + item, + facing: { x: 0, y: 1 }, + vel: { x: 0, y: 0 }, + }) break; } case "remove_player": @@ -131,12 +142,8 @@ const keys_down = new Set(); const HANDLED_KEYS = ["KeyW", "KeyA", "KeyS", "KeyD", "Space"] function keyboard(ev: KeyboardEvent, down: boolean) { if (HANDLED_KEYS.includes(ev.code)) ev.preventDefault() - let change; - if (down) change = !keys_down.has(ev.code) - else change = keys_down.has(ev.code) if (down) keys_down.add(ev.code) else keys_down.delete(ev.code) - if (change && ev.code == "Space") interact(down) } function get_interact_target(): V2 | undefined { @@ -148,16 +155,23 @@ function get_interact_target(): V2 | undefined { } } -function interact(edge: boolean) { - const { x, y } = get_interact_target()!; - send({ type: "interact", pos: [x, y], edge }) -} - function tick_update() { const p = players.get(my_id) if (!p) return send({ type: "position", pos: [p.x, p.y], rot: p.rot }) + + const { x, y } = get_interact_target()!; + if (interacting && !keys_down.has("Space")) { + send({ type: "interact", pos: [interacting.x, interacting.y], edge: false }) + interacting = undefined; + } + if (keys_down.has("Space") && x != interacting?.x && y != interacting?.y) { + if (interacting) + send({ type: "interact", pos: [interacting.x, interacting.y], edge: false }) + send({ type: "interact", pos: [x, y], edge: true }) + interacting = { x, y } + } } function frame_update(dt: number) { @@ -178,7 +192,6 @@ function frame_update(dt: number) { collide_player(p) lerp_exp_v2_mut(p.vel, { x: 0, y: 0 }, dt * 5.) - const update_item = (item: ItemData, parent: V2) => { lerp_exp_v2_mut(item, parent, dt * 10.) } @@ -262,16 +275,23 @@ function draw_ingame() { ctx.translate(player.x, player.y) ctx.rotate(-player.rot) - ctx.fillStyle = "rgb(226, 176, 26)" + ctx.fillStyle = `hsl(${player.character}rad, 50%, 50%)` ctx.beginPath() ctx.arc(0, 0, PLAYER_SIZE, 0, Math.PI * 2) ctx.fill() - ctx.fillStyle = "rgb(103, 79, 7)" + ctx.fillStyle = `hsl(${player.character}rad, 80%, 10%)` ctx.beginPath() ctx.arc(0, -0.2, PLAYER_SIZE, 0, Math.PI * 2) ctx.fill() + ctx.fillStyle = `hsl(${player.character}rad, 80%, 70%)` + ctx.beginPath() + ctx.moveTo(-0.04, 0.35) + ctx.lineTo(0.04, 0.35) + ctx.lineTo(0, 0.5) + ctx.fill() + ctx.restore() if (player.item) draw_item(player.item) |