1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
/// <reference lib="dom" />
import { PacketC, PacketS } from "./protocol.ts";
let ctx: CanvasRenderingContext2D;
let canvas: HTMLCanvasElement;
let ws: WebSocket
document.addEventListener("DOMContentLoaded", () => {
ws = new WebSocket(`${window.location.protocol.endsWith("s:") ? "wss" : "ws"}://${window.location.hostname}:27032/`)
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({ join: { name: "test" } })
}
canvas = document.createElement("canvas");
document.body.append(canvas)
ctx = canvas.getContext("2d")!
resize()
globalThis.addEventListener("resize", resize)
draw()
})
interface Player { x: number; y: number, name: string, rot: number }
const players = new Map<number, Player>()
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 = undefined
function send(p: PacketS) { ws.send(JSON.stringify(p)) }
function packet(p: PacketC) {
if ("joined" in p) {
my_id = p.joined.id
} else if ("add_player" in p) {
players.set(p.add_player.id, { x: 0, y: 0, name: p.add_player.name, rot: 0 })
} else if ("remove_player" in p) {
players.delete(p.remove_player.id)
} else if ("position" in p) {
const pl = players.get(p.position.player)!
pl.x = p.position.pos[0]
pl.y = p.position.pos[1]
pl.rot = p.position.rot
} else if ("take_item" in p) {
} else if ("put_item" in p) {
} else if ("produce_item" in p) {
} else if ("consume_item" in p) {
} else if ("set_active" in p) {
} else if ("update_map" in p) {
} else console.warn("unknown packet", p);
}
function resize() {
canvas.width = globalThis.innerWidth
canvas.height = globalThis.innerHeight
}
function draw() {
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 draw_wait(text: string) {
ctx.fillStyle = "gray"
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.fillStyle = "#555"
ctx.font = "50px sans-serif"
ctx.strokeStyle = "black"
ctx.fillStyle = "white"
ctx.lineWidth = 10
ctx.textAlign = "center"
ctx.textBaseline = "middle"
ctx.strokeText(text, canvas.width / 2, canvas.height / 2)
ctx.fillText(text, canvas.width / 2, canvas.height / 2)
}
function draw_ingame() {
ctx.fillStyle = "#111"
ctx.fillRect(0, 0, canvas.width, canvas.height)
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)
ctx.restore()
}
}
|
