diff options
| -rw-r--r-- | test-client/main.ts | 42 | ||||
| -rw-r--r-- | test-client/visual.ts | 16 |
2 files changed, 32 insertions, 26 deletions
diff --git a/test-client/main.ts b/test-client/main.ts index 831513fc..c2619f6e 100644 --- a/test-client/main.ts +++ b/test-client/main.ts @@ -22,6 +22,16 @@ import { Gamedata, ItemIndex, Message, PacketC, PacketS, PlayerID, TileIndex } f import { V2, add_v2, lerp_exp_v2_mut, normalize, lerp_exp, sub_v2, length } from "./util.ts"; import { draw_ingame, draw_wait } from "./visual.ts"; +const KEY_INTERACT = "KeyJ" +const KEY_BOOST = "KeyK" +const KEY_UP = "KeyW" +const KEY_DOWN = "KeyS" +const KEY_LEFT = "KeyA" +const KEY_RIGHT = "KeyD" +const KEY_CHAT = "Enter" +const KEY_CLOSE = "Escape" +const HANDLED_KEYS = [KEY_BOOST, KEY_CHAT, KEY_CLOSE, KEY_DOWN, KEY_UP, KEY_LEFT, KEY_RIGHT] + export let ctx: CanvasRenderingContext2D; export let canvas: HTMLCanvasElement; let ws: WebSocket; @@ -90,6 +100,7 @@ export let data: Gamedata = { item_names: [], tile_names: [], spawn: [0, 0], til export let my_id: PlayerID = -1 export const camera: V2 = { x: 0, y: 0 } +export let camera_scale = 0.05; export const interact_target_anim: V2 = { x: 0, y: 0 } export let interact_possible_anim: number = 0 export let interact_active_anim: number = 0 @@ -108,14 +119,11 @@ function packet(p: PacketC) { break; case "add_player": { players.set(p.id, { - position: { - x: p.position[0], - y: p.position[1], - }, + position: { x: p.position[0], y: p.position[1], }, + anim_position: { x: p.position[0], y: p.position[1] }, character: p.character, name: p.name, rot: 0, - anim_position: { x: 0, y: 1 }, facing: { x: 0, y: 1 }, vel: { x: 0, y: 0 }, stamina: 0, @@ -130,6 +138,7 @@ function packet(p: PacketC) { const pl = players.get(p.player)! const pos = { x: p.pos[0], y: p.pos[1] } const dist = length(sub_v2(pl.position, pos)); + // TODO this is actually not a good idea if latency is too high if (p.player == my_id && dist < 3) return; // we know better where we are pl.position.x = pos.x pl.position.y = pos.y @@ -193,16 +202,16 @@ function packet(p: PacketC) { export let chat: null | HTMLInputElement = null; export const keys_down = new Set(); -const HANDLED_KEYS = ["KeyW", "KeyA", "KeyS", "KeyD", "Space"] function keyboard(ev: KeyboardEvent, down: boolean) { - if (down && ev.code == "Enter") return toggle_chat() - else if (down && ev.code == "Escape" && chat) return close_chat() + if (down && ev.code == KEY_CHAT) return toggle_chat() + else if (down && ev.code == KEY_CLOSE && chat) return close_chat() else if (chat) return if (HANDLED_KEYS.includes(ev.code)) ev.preventDefault() - if (!keys_down.has("Space") && ev.code == "Space" && down) set_interact(true) - if (keys_down.has("Space") && ev.code == "Space" && !down) set_interact(false) - if (down && !ev.shiftKey && ev.code == "KeyK") send({ type: "communicate", message: { text: "/start" } }) - if (down && ev.shiftKey && ev.code == "KeyK") send({ type: "communicate", message: { text: "/end" } }) + if (!keys_down.has(KEY_INTERACT) && ev.code == KEY_INTERACT && down) set_interact(true) + if (keys_down.has(KEY_INTERACT) && ev.code == KEY_INTERACT && !down) set_interact(false) + if (down && ev.code == "Numpad1") send({ type: "communicate", message: { text: "/start default-small-default" } }) + if (down && ev.code == "Numpad2") send({ type: "communicate", message: { text: "/start default-big-default" } }) + if (down && ev.code == "Numpad0") send({ type: "communicate", message: { text: "/end" } }) if (down) keys_down.add(ev.code) else keys_down.delete(ev.code) } @@ -256,11 +265,11 @@ function frame_update(dt: number) { if (!p) return const input = normalize({ - x: (+keys_down.has("KeyD") - +keys_down.has("KeyA")), - y: (+keys_down.has("KeyS") - +keys_down.has("KeyW")) + x: (+keys_down.has(KEY_RIGHT) - +keys_down.has(KEY_LEFT)), + y: (+keys_down.has(KEY_DOWN) - +keys_down.has(KEY_UP)) }) if (interacting) input.x *= 0, input.y *= 0 - update_movement(p, dt, input, keys_down.has("KeyN")) + update_movement(p, dt, input, keys_down.has("KeyK")) const update_item = (item: ItemData) => { if (item.tracking) lerp_exp_v2_mut(item, item.tracking, dt * 10.) @@ -291,6 +300,9 @@ function frame_update(dt: number) { lerp_exp_v2_mut(interact_target_anim, it, dt * 15.) interact_possible_anim = lerp_exp(interact_possible_anim, +possible, dt * 18.) interact_active_anim = lerp_exp(interact_active_anim, +!!interacting, dt * 15.) + + const zoom_target = Math.min(canvas.width, canvas.height) * (keys_down.has("KeyL") ? 0.05 : 0.1) + camera_scale = lerp_exp(camera_scale, zoom_target, dt * 5) } function resize() { diff --git a/test-client/visual.ts b/test-client/visual.ts index fbe9ad10..6a02dbee 100644 --- a/test-client/visual.ts +++ b/test-client/visual.ts @@ -15,14 +15,11 @@ along with this program. If not, see <https://www.gnu.org/licenses/>. */ -import { ItemData, MessageData, PlayerData, TileData, camera, canvas, ctx, data, get_interact_target, interact_active_anim, interact_possible_anim, interact_target_anim, items_removed, keys_down, my_id, players, tiles } from "./main.ts"; +import { ItemData, MessageData, PlayerData, TileData, camera, camera_scale, canvas, ctx, data, get_interact_target, interact_active_anim, interact_possible_anim, interact_target_anim, items_removed, keys_down, my_id, players, tiles } from "./main.ts"; import { PLAYER_SIZE } from "./movement.ts"; import { FALLBACK_TILE, ITEMS, TILES, FALLBACK_ITEM } from "./tiles.ts"; import { V2, ceil_v2, floor_v2 } from "./util.ts"; -let camera_zoom = 0.1 -let scale = 0 - export function draw_wait(text: string) { ctx.fillStyle = "#444" ctx.fillRect(0, 0, canvas.width, canvas.height) @@ -44,11 +41,9 @@ export function draw_ingame() { ctx.fillStyle = "#111" ctx.fillRect(0, 0, canvas.width, canvas.height) - scale = Math.min(canvas.width, canvas.height) * camera_zoom; - ctx.save() ctx.translate(canvas.width / 2, canvas.height / 2) - ctx.scale(scale, scale) + ctx.scale(camera_scale, camera_scale) ctx.translate(-camera.x, -camera.y) draw_grid() @@ -80,9 +75,8 @@ export function draw_ingame() { ctx.restore() if (keys_down.has("KeyP")) { - camera_zoom = 0.05 draw_debug() - } else { camera_zoom = 0.1 } + } } function draw_debug() { @@ -202,8 +196,8 @@ function draw_message(m: MessageData) { 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, + x: ((screen.x - canvas.width / 2) / camera_scale) + camera.x, + y: ((screen.y - canvas.height / 2) / camera_scale) + camera.y, } } |