import createDebug from "debug";
import type {
DespawnPartPacket,
MessagePacket,
Packet,
PartPositionsPacket,
PlanetPositionsPacket,
PlayerLeavePacket,
PlayerListPacket,
SpawnPartPacket,
SpawnPlayerPacket,
} from "./protocol.ts";
import { MessageType, PacketType } from "./protocol.ts";
import { appendPacket } from "./packet_ui.ts";
import { global } from "./globals.ts";
import { startRender } from "./rendering.ts";
import { ButtonType } from "./protocol.ts";
import type Chatbox from "./components/Chatbox.svelte";
import { part_texture_url } from "./textures.js";
import * as PIXI from "pixi.js";
const logger = createDebug("hub");
export interface ClientHub {
socket: WebSocket;
}
export function sendPacket(client: ClientHub, packet: Packet) {
client.socket.send(JSON.stringify(packet));
appendPacket(packet);
}
export async function hub_connect(
url: string,
username: string,
chatbox: Chatbox,
): Promise<ClientHub | null> {
logger("connecting to client hub at " + url);
let ws = new WebSocket(url);
ws.onerror = (e) => {
console.error(e);
throw e;
};
ws.onopen = () => {
logger("connected to client hub, sending username and auth details");
let client: ClientHub = {
socket: ws,
};
global.client = client;
let packet: Packet = {
t: PacketType.ClientLogin,
c: {
username,
jwt: null,
},
};
sendPacket(client, packet);
// input
document.onkeydown = (e) => {
// currently, input packet is sent on any key down. fix that
if (e.key == "ArrowUp" || e.key == "w") {
global.up = true;
}
if (e.key == "ArrowDown" || e.key == "s") {
global.down = true;
}
if (e.key == "ArrowLeft" || e.key == "a") {
global.left = true;
}
if (e.key == "ArrowRight" || e.key == "d") {
global.right = true;
}
let input_packet: Packet = {
t: PacketType.PlayerInput,
c: {
up: global.up,
down: global.down,
left: global.left,
right: global.right,
},
};
sendPacket(client, input_packet);
};
document.onkeyup = (e) => {
if (e.key == "ArrowUp" || e.key == "w") {
global.up = false;
}
if (e.key == "ArrowDown" || e.key == "s") {
global.down = false;
}
if (e.key == "ArrowLeft" || e.key == "a") {
global.left = false;
}
if (e.key == "ArrowRight" || e.key == "d") {
global.right = false;
}
let input_packet: Packet = {
t: PacketType.PlayerInput,
c: {
up: global.up,
down: global.down,
left: global.left,
right: global.right,
},
};
sendPacket(client, input_packet);
};
document.onmousedown = (e) => {
if (global.me !== null) {
let me_transform = global.parts_map.get(global.me?.part_id)!.transform;
let x = e.clientX - window.innerWidth / 2 + me_transform.x;
let y = e.clientY - window.innerHeight / 2 + me_transform.y;
let button: ButtonType;
if (e.button == 0) {
button = ButtonType.Left;
} else if (e.button == 1) {
button = ButtonType.Middle;
} else if (e.button == 2) {
button = ButtonType.Right;
}
let packet: Packet = {
t: PacketType.PlayerMouseInput,
c: {
x: x,
y: y,
button: button!,
released: false,
},
};
sendPacket(client, packet);
}
};
document.onmouseup = (e) => {
if (global.me !== null) {
let me_transform = global.parts_map.get(global.me?.part_id)!.transform;
let x = e.clientX - window.innerWidth / 2 + me_transform.x;
let y = e.clientY - window.innerHeight / 2 + me_transform.y;
let button: ButtonType;
if (e.button == 0) {
button = ButtonType.Left;
} else if (e.button == 1) {
button = ButtonType.Middle;
} else if (e.button == 2) {
button = ButtonType.Right;
}
let packet: Packet = {
t: PacketType.PlayerMouseInput,
c: {
x: x,
y: y,
button: button!,
released: true,
},
};
sendPacket(client, packet);
}
};
ws.onmessage = (e) => {
let packet: Packet = JSON.parse(e.data);
appendPacket(packet);
if (packet.t == PacketType.SpawnPlayer) {
let p = <SpawnPlayerPacket>packet.c;
if (p.username === username) {
global.me = {
username: p.username,
part_id: p.id,
};
logger(`client spawned (username=${p.username} part_id=${p.id})`);
startRender();
} else {
global.players_map.set(p.id, p.username);
global.inverse_players_map.set(p.username, p.id);
logger(`player joined (username=${p.username} part_id=${p.id})`);
}
} else if (packet.t == PacketType.PlayerList) {
let p = <PlayerListPacket>packet.c;
for (let i = 0; i < p.players.length; i++) {
global.players_map.set(p.players[i][0], p.players[i][1]);
global.inverse_players_map.set(p.players[i][1], p.players[i][0]);
}
logger(`added ${p.players.length} existing players to player list`);
} else if (packet.t == PacketType.PlanetPositions) {
let p = <PlanetPositionsPacket>packet.c;
for (let i = 0; i < p.planets.length; i++) {
global.planets_map.set(p.planets[i][0], p.planets[i][1]);
}
} else if (packet.t == PacketType.PartPositions) {
let p = <PartPositionsPacket>packet.c;
for (let i = 0; i < p.parts.length; i++) {
let id = p.parts[i][0];
let new_part = p.parts[i][1];
global.parts_map.set(id, new_part);
if (id === global.me?.part_id) {
document.getElementById("pos-val-x")!.innerText = Math.round(
new_part.transform.x,
).toString();
document.getElementById("pos-val-y")!.innerText = Math.round(
new_part.transform.y,
).toString();
}
}
} else if (packet.t == PacketType.SpawnPart) {
let p = <SpawnPartPacket>packet.c;
let id = p.id;
let part = p.part;
global.parts_map.set(id, part);
logger(`spawn part`);
let part_sprite = PIXI.Sprite.from(part_texture_url(part.part_type));
global.rendering!.part_sprite_map.set(id, part_sprite);
global.rendering!.app.stage.addChild(part_sprite);
} else if (packet.t == PacketType.DespawnPart) {
let p = <DespawnPartPacket>packet.c;
let id = p.id;
let part_sprite = global.rendering!.part_sprite_map.get(id)!;
global.rendering!.app.stage.removeChild(part_sprite);
global.rendering!.part_sprite_map.delete(id);
global.parts_map.delete(id);
} else if (packet.t == PacketType.PlayerLeave) {
let p = <PlayerLeavePacket>packet.c;
let username = global.players_map.get(p.id)!;
global.inverse_players_map.delete(username);
global.players_map.delete(p.id);
logger(`player removed (id=${p.id})`);
} else if (packet.t == PacketType.Message) {
let p = <MessagePacket>packet.c;
logger(
`message type=${p.message_type} actor=${p.actor} content=${p.content}`,
);
if (p.message_type == MessageType.Server) {
chatbox.addMessage("server-message", `[SERVER] ${p.content}`);
} else if (p.message_type == MessageType.Chat) {
chatbox.addMessage("global-message", `${p.actor}: ${p.content}`);
} else if (p.message_type == MessageType.Direct) {
// actor is who sent the message. destination is not included in this packet
if (p.actor === global.me!.username) {
// skip (shown above)
} else {
chatbox.addMessage(
"direct-message",
`${p.actor} -> you: ${p.content}`,
);
}
} else {
chatbox.addMessage("server-error", `${p.content}`);
}
} else {
logger(`unrecognized packet type ${packet.t}`);
}
};
return client;
};
return null;
}