diff options
| -rw-r--r-- | test-client/main.ts | 44 | ||||
| -rw-r--r-- | test-client/util.ts | 6 |
2 files changed, 45 insertions, 5 deletions
diff --git a/test-client/main.ts b/test-client/main.ts index b9fb1557..1780b5d7 100644 --- a/test-client/main.ts +++ b/test-client/main.ts @@ -1,7 +1,7 @@ /// <reference lib="dom" /> import { PacketC, PacketS } from "./protocol.ts"; -import { normalize } from "./util.ts"; +import { V2, ceil_v2, floor_v2, lerp_v2_mut, normalize } from "./util.ts"; let ctx: CanvasRenderingContext2D; let canvas: HTMLCanvasElement; @@ -36,7 +36,10 @@ interface Item { x: number; y: number } const items = new Map<number, Item>() interface Tile { x: number; y: number } const tiles = new Map<string, Tile>() + let my_id: number = -1 +const camera: V2 = { x: 0, y: 0 } +let scale = 0 function send(p: PacketS) { ws.send(JSON.stringify(p)) } function packet(p: PacketC) { @@ -86,8 +89,11 @@ function frame_update(dt: number) { x: (+keys_down.has("KeyD") - +keys_down.has("KeyA")), y: (+keys_down.has("KeyS") - +keys_down.has("KeyW")) }) - p.x += input.x * dt * 10 - p.y += input.y * dt * 10 + + p.x += input.x * dt * 5 + p.y += input.y * dt * 5 + + lerp_v2_mut(camera, p, dt * 10.) } function resize() { @@ -123,24 +129,52 @@ function draw_wait(text: string) { ctx.fillText(text, canvas.width / 2, canvas.height / 2) } + +function map_screen_to_world(screen: V2): V2 { + return { + x: ((screen.x - canvas.width / 2) / scale) + camera.x, + y: ((screen.y - canvas.height / 2) / scale) + camera.y, + } +} + function draw_ingame() { ctx.fillStyle = "#111" ctx.fillRect(0, 0, canvas.width, canvas.height) - const scale = Math.min(canvas.width, canvas.height) / 10; + scale = Math.min(canvas.width, canvas.height) / 10; ctx.save() ctx.translate(canvas.width / 2, canvas.height / 2) ctx.scale(scale, scale) + ctx.translate(-camera.x, -camera.y) + + draw_grid() for (const [_, player] of players) { ctx.save() ctx.translate(player.x, player.y) ctx.rotate(player.rot) ctx.fillStyle = "rgb(226, 176, 26)" - ctx.fillRect(-0.5, -0.5, 1, 1) + const psize = 0.6; + ctx.fillRect(-psize / 2, -psize / 2, psize, psize) ctx.restore() } ctx.restore() } +function draw_grid() { + ctx.strokeStyle = "#333" + ctx.lineWidth = 0.01 + ctx.beginPath() + const min = floor_v2(map_screen_to_world({ x: 0, y: 0 })) + const max = ceil_v2(map_screen_to_world({ x: canvas.width, y: canvas.height })) + for (let x = min.x; x < max.x; x++) { + ctx.moveTo(x, min.y) + ctx.lineTo(x, max.y) + } + for (let y = min.y; y < max.y; y++) { + ctx.moveTo(min.x, y) + ctx.lineTo(max.x, y) + } + ctx.stroke() +}
\ No newline at end of file diff --git a/test-client/util.ts b/test-client/util.ts index 994e6acf..99f0c013 100644 --- a/test-client/util.ts +++ b/test-client/util.ts @@ -2,3 +2,9 @@ export interface V2 { x: number, y: number } export function length(p: V2): number { return Math.sqrt(p.x * p.x + p.y * p.y) } export function normalize_mut(p: V2) { const l = length(p); if (l == 0) return; p.x /= l; p.y /= l } export function normalize(p: V2): V2 { let l = length(p); if (l == 0) l = 1; return { x: p.x / l, y: p.y / l } } +export function lerp_v2_mut(current: V2, target: V2, dt: number) { + current.x = target.x + (current.x - target.x) * Math.exp(-dt) + current.y = target.y + (current.y - target.y) * Math.exp(-dt) +} +export function floor_v2(p: V2): V2 { return { x: Math.floor(p.x), y: Math.floor(p.y) } } +export function ceil_v2(p: V2): V2 { return { x: Math.ceil(p.x), y: Math.ceil(p.y) } } |