path: root/test-client/main.ts

/// <reference lib="dom" />

import { Gamedata, ItemIndex, Message, PacketC, PacketS, PlayerID, TileIndex } from "./protocol.ts";
import { V2, add_v2, length, lerp_exp_v2_mut, normalize, aabb_circle_distance, sub_v2, lerp_exp } from "./util.ts";
import { draw_ingame, draw_wait } from "./visual.ts";

export const PLAYER_SIZE = 0.4;

export let ctx: CanvasRenderingContext2D;
export let canvas: HTMLCanvasElement;
let ws: WebSocket;
document.addEventListener("DOMContentLoaded", () => {
    const ws_uri = window.location.protocol.endsWith("s:")
        ? `wss://backend-${window.location.hostname}/`
        : `ws://${window.location.hostname}:27032/`
    ws = new WebSocket(ws_uri)
    ws.onerror = console.error
    ws.onmessage = m => {
        packet(JSON.parse(m.data) as PacketC);
    }
    ws.onclose = () => console.log("close")
    ws.onopen = () => {
        console.log("open")
        send({ type: "join", name: "test", character: Math.floor(Math.random() * 255) })
    }

    canvas = document.createElement("canvas");
    document.body.append(canvas)
    ctx = canvas.getContext("2d")!
    resize()
    globalThis.addEventListener("resize", resize)
    draw()

    document.addEventListener("keydown", ev => keyboard(ev, true))
    document.addEventListener("keyup", ev => keyboard(ev, false))
    document.addEventListener("contextmenu", ev => ev.preventDefault())
    setInterval(tick_update, 1000 / 25);
})

export interface ItemData {
    kind: ItemIndex,
    x: number,
    y: number,
    tracking?: V2,
    progress?: number
    remove_anim?: number
}
export interface PlayerData {
    x: number,
    y: number,
    name: string,
    rot: number,
    item?: ItemData,
    facing: V2,
    character: number,
    vel: { x: number, y: number },
    message?: Message,
}
export interface TileData {
    x: number
    y: number
    kind: TileIndex
    item?: ItemData
}

export const players = new Map<PlayerID, PlayerData>()
export const tiles = new Map<string, TileData>()
export const items_removed = new Set<ItemData>()

export let data: Gamedata = { item_names: [], tile_names: [], spawn: [0, 0], tile_collide: [], tile_interact: [] }


let my_id: PlayerID = -1
export const camera: V2 = { x: 0, y: 0 }
export const interact_target_anim: V2 = { x: 0, y: 0 }
export let interact_possible_anim: number = 0
let interacting: V2 | undefined;

function send(p: PacketS) { ws.send(JSON.stringify(p)) }
function packet(p: PacketC) {
    if (!["position", "set_active", "update_map"].includes(p.type))
        console.log(p);
    switch (p.type) {
        case "init":
            my_id = p.id
            data = p.data
            break;
        case "add_player": {
            players.set(p.id, {
                x: p.position[0],
                y: p.position[1],
                character: p.character,
                name: p.name,
                rot: 0,
                facing: { x: 0, y: 1 },
                vel: { x: 0, y: 0 },
            })
            break;
        }
        case "remove_player":
            players.delete(p.id)
            break;
        case "position": {
            if (p.player == my_id) return; // we know better where we are
            const pl = players.get(p.player)!
            pl.x = p.pos[0]
            pl.y = p.pos[1]
            pl.rot = p.rot
            break;
        }
        case "take_item": {
            const player = players.get(p.player)!
            const tile = tiles.get(p.tile.toString())!
            player.item = tile.item;
            player.item!.tracking = player
            tile.item = undefined
            break;
        }
        case "put_item": {
            const player = players.get(p.player)!
            const tile = tiles.get(p.tile.toString())!
            tile.item = player.item
            tile.item!.tracking = add_v2(tile, 0.5)
            player.item = undefined
            break;
        }
        case "set_tile_item": {
            const tile = tiles.get(p.tile.toString())!
            if (tile.item !== undefined && tile.item !== null) items_removed.add(tile.item)
            tile.item = undefined
            if (p.item !== undefined && p.item !== null) tile.item = { kind: p.item, x: p.tile[0] + 0.5, y: p.tile[1] + 0.5 }
            break;
        }
        case "set_player_item": {
            const player = players.get(p.player)!
            if (player.item !== undefined && player.item !== null) items_removed.add(player.item)
            player.item = undefined
            if (p.item !== undefined && p.item !== null) player.item = { kind: p.item, x: player.x + 0.5, y: player.y + 0.5 }
            break;
        }
        case "set_active": {
            tiles.get(p.tile.toString())!.item!.progress = p.progress
            break;
        }
        case "update_map":
            tiles.set(p.pos.toString(), { x: p.pos[0], y: p.pos[1], kind: p.tile })
            break;
        case "communicate": {
            const player = players.get(p.player)!
            player.message = p.message
            break;
        }
        default:
            console.warn("unknown packet", p);
    }
}

export 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()
    if (down) keys_down.add(ev.code)
    else keys_down.delete(ev.code)
}

export function get_interact_target(): V2 | undefined {
    const me = players.get(my_id)
    if (!me) return
    return {
        x: Math.floor(me.x + Math.sin(me.rot)),
        y: Math.floor(me.y + Math.cos(me.rot))
    }
}

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) {
    const p = players.get(my_id)
    if (!p) return

    const input = normalize({
        x: (+keys_down.has("KeyD") - +keys_down.has("KeyA")),
        y: (+keys_down.has("KeyS") - +keys_down.has("KeyW"))
    })

    if (length(input) > 0.1) lerp_exp_v2_mut(p.facing, input, dt * 10.)
    p.rot = Math.atan2(p.facing.x, p.facing.y)
    p.vel.x += input.x * dt * 0.5
    p.vel.y += input.y * dt * 0.5
    p.x += p.vel.x
    p.y += p.vel.y
    collide_player(p, dt)
    lerp_exp_v2_mut(p.vel, { x: 0, y: 0 }, dt * 5.)

    const update_item = (item: ItemData) => {
        if (item.tracking) lerp_exp_v2_mut(item, item.tracking, dt * 10.)
    }
    for (const [_, player] of players) {
        if (player.item !== undefined && player.item !== null) update_item(player.item)
    }
    for (const [_, tile] of tiles) {
        if (tile.item !== undefined && tile.item !== null) update_item(tile.item)
    }

    const remove = []
    for (const item of items_removed) {
        update_item(item)
        if (item.remove_anim === undefined) item.remove_anim = 0
        item.remove_anim += dt * 4.
        if (item.remove_anim > 1.) remove.push(item)
    }
    remove.forEach(i => items_removed.delete(i))

    lerp_exp_v2_mut(camera, p, dt * 10.)

    const it = get_interact_target() ?? { x: 0, y: 0 };
    const possible = data.tile_interact[tiles.get([it.x, it.y].toString())?.kind ?? 0] ?? false
    lerp_exp_v2_mut(interact_target_anim, it, dt * 15.)
    interact_possible_anim = lerp_exp(interact_possible_anim, +possible, dt * 18.)
}

function resize() {
    canvas.width = globalThis.innerWidth
    canvas.height = globalThis.innerHeight
}

let last_frame = performance.now()
function draw() {
    const now = performance.now()
    frame_update((now - last_frame) / 1000)
    last_frame = now;
    if (ws.readyState == ws.CONNECTING) draw_wait("Connecting...")
    else if (ws.readyState == ws.CLOSING) draw_wait("Closing...")
    else if (ws.readyState == ws.CLOSED) draw_wait("Disconnected")
    else if (ws.readyState == ws.OPEN) draw_ingame()
    else throw new Error(`ws state invalid`);
    requestAnimationFrame(draw)
}

function collide_player(p: PlayerData, dt: number) {
    const tiles_ignored = ["floor", "door", "chair"].map(t => data.tile_names.indexOf(t))
    for (const [_, tile] of tiles) {
        if (tiles_ignored.includes(tile.kind)) continue
        const d = aabb_circle_distance(tile.x, tile.y, tile.x + 1, tile.y + 1, p.x, p.y)
        if (d > PLAYER_SIZE) continue

        const h = 0.01
        const d_sample_x = aabb_circle_distance(tile.x, tile.y, tile.x + 1, tile.y + 1, p.x + h, p.y)
        const d_sample_y = aabb_circle_distance(tile.x, tile.y, tile.x + 1, tile.y + 1, p.x, p.y + h)
        const grad_x = (d_sample_x - d) / h
        const grad_y = (d_sample_y - d) / h

        p.x += (PLAYER_SIZE - d) * grad_x
        p.y += (PLAYER_SIZE - d) * grad_y

        const vdotn = (grad_x * p.vel.x) + (grad_y * p.vel.y)
        p.vel.x -= grad_x * vdotn
        p.vel.y -= grad_y * vdotn
    }

    for (const [_, player] of players) {
        const diff = sub_v2(p, player)
        const d = length(diff)
        if (d < 0.01) continue
        if (d >= PLAYER_SIZE * 2) continue
        const norm = normalize(diff);
        const f = 1 / (1 + d)
        p.vel.x += norm.x * f * dt
        p.vel.y += norm.y * f * dt
    }
}