M starkingdoms-client/play/index.html => starkingdoms-client/play/index.html +24 -0
@@ 36,6 36,30 @@
<div class="popup chat-container" id="chat">
<h1>Chat</h1>
+ <div class="chat-minimax" id="chat-minimax">
+ <svg
+ width="16"
+ height="2"
+ viewBox="0 0 4.2333332 0.52916663"
+ version="1.1"
+ id="svg1"
+ style="position: absolute; top: 14px; left: 7px"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ >
+ <defs id="defs1" />
+ <g id="layer1" transform="translate(0,-1.8520833)">
+ <rect
+ style="fill: #f9f9f9; stroke-width: 0"
+ id="rect1"
+ width="4.2333331"
+ height="0.52916664"
+ x="0"
+ y="1.8520833"
+ />
+ </g>
+ </svg>
+ </div>
<div id="chatbox" class="chat-table mono">
<!-- Filled by script -->
</div>
M starkingdoms-client/src/chat.ts => starkingdoms-client/src/chat.ts +42 -2
@@ 1,9 1,49 @@
export function addMessage(classname: string, message: string) {
+ let chatbox = document.getElementById("chatbox");
+ let should_scroll =
+ chatbox!.scrollTop == chatbox!.scrollHeight - chatbox!.offsetHeight;
let p = document.createElement("p");
p.innerText = message;
p.classList.add("message");
p.classList.add(classname);
- let chatbox = document.getElementById("chatbox");
+ if (chatbox.children.length > 128) {
+ chatbox.children[0]!.remove();
+ }
chatbox!.appendChild(p);
- chatbox!.scrollTop = chatbox!.scrollHeight;
+ if (should_scroll) {
+ chatbox!.scrollTop = chatbox!.scrollHeight;
+ }
+}
+
+/* I'm sorry for this code lmao */
+export function chatViewToggle() {
+ let el = document.getElementById("chat-minimax");
+ let chat_modal = document.getElementById("chat");
+ console.log("clickl");
+ let to_hide = [
+ document.getElementById("chatbox"),
+ document.getElementById("chatentry"),
+ ];
+ if (el.hasAttribute("minimised")) {
+ chat_modal.style.width = "";
+ chat_modal.style.paddingRight = "";
+ for (let element of to_hide) {
+ element.style.display = "";
+ }
+ } else {
+ chat_modal.style.width = "unset";
+ chat_modal.style.paddingRight = "4em"; /* magical number. don't touch >:( */
+ for (let element of to_hide) {
+ element.style.display = "none";
+ }
+ }
+
+ /* inject that live svg hell yeah */
+ if (el.hasAttribute("minimised")) {
+ el.removeAttribute("minimised");
+ el.innerHTML = `<svg height=16 style=position:absolute;top:7px;left:7px version=1.1 viewBox="0 0 4.2333332 0.52916663"width=16 xmlns=http://www.w3.org/2000/svg xmlns:svg=http://www.w3.org/2000/svg><defs id=defs1></defs><g id=layer1 transform=translate(0,-1.8520833)><rect height=0.52916664 id=rect1 style=fill:#f9f9f9;stroke-width:0 width=4.2333331 x=0 y=1.8520833></rect></g></svg>`;
+ } else {
+ el.setAttribute("minimised", "");
+ el.innerHTML = `<svg height=16 width=16 style=position:absolute;top:7px;left:7px version=1.1 viewBox="0 0 4.2333332 4.233333"width=16 xmlns=http://www.w3.org/2000/svg xmlns:svg=http://www.w3.org/2000/svg><defs id=defs1 /><g id=layer1><rect height=0.52916664 id=rect1 style=fill:#f9f9f9;stroke-width:0 width=4.2333331 x=0 y=1.8520833 /><rect height=0.52916664 id=rect1-5 style=fill:#f9f9f9;stroke-width:0 width=4.2333331 x=-4.2333331 y=1.8520833 transform=rotate(-90) /></g></svg>`;
+ }
}
M starkingdoms-client/src/css/chat.scss => starkingdoms-client/src/css/chat.scss +24 -1
@@ 10,10 10,17 @@
height: min-content;
font-weight: 500;
}
+.chat-container:hover {
+ opacity: 100%;
+}
+.chat-container > h1 {
+ margin: 2px 0 2px 0;
+}
.chat-table {
- height: 23vh;
+ height: 23vh; /* explain this? */
display: block;
overflow: auto;
+ margin: 1em 0 1em 0;
}
.chat-box {
appearance: none;
@@ 30,6 37,22 @@
outline: none;
background-color: var(--links-ultratransparent);
}
+.chat-minimax {
+ cursor: pointer;
+ position: absolute;
+ width: 2rem;
+ height: 2rem;
+ right: 1em;
+ top: 1em;
+ border: 1px solid var(--links);
+ border-radius: 0.25rem;
+}
+.chat-minimax-icon {
+ position: absolute;
+ /* Correct for 1px border on parent */
+ top: 14px;
+ left: 7px;
+}
.message {
padding-top: 0;
padding-bottom: 0;
M starkingdoms-client/src/hub.ts => starkingdoms-client/src/hub.ts +49 -49
@@ 14,7 14,7 @@ import { appendPacket } from "./packet_ui.ts";
import { global } from "./routes/ingame/main.ts";
import { startRender } from "./rendering.ts";
import { addMessage } from "./chat.ts";
-import {ButtonType} from "./protocol";
+import { ButtonType } from "./protocol";
const logger = createDebug("hub");
@@ 107,59 107,59 @@ export async function hub_connect(
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;
+ 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);
- console.log(packet);
+ 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);
+ console.log(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;
+ 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);
- console.log(packet);
+ 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);
+ console.log(packet);
+ }
+ };
document.getElementById("chatentry")!.onkeydown = (e) => {
if (e.key === "Enter") {
M starkingdoms-client/src/protocol.ts => starkingdoms-client/src/protocol.ts +7 -7
@@ 11,9 11,9 @@ export enum PartType {
Cargo = "Cargo",
}
export enum ButtonType {
- Left = "Left",
- Middle = "Middle",
- Right = "Right",
+ Left = "Left",
+ Middle = "Middle",
+ Right = "Right",
}
export interface Planet {
planet_type: PlanetType;
@@ 45,10 45,10 @@ export interface PlayerInputPacket {
right: boolean;
}
export interface PlayerMouseInputPacket {
- x: number,
- y: number,
- released: boolean,
- button: ButtonType,
+ x: number;
+ y: number;
+ released: boolean;
+ button: ButtonType;
}
export interface PlayerListPacket {
players: [number, string][];
M starkingdoms-client/src/routes/ingame/main.ts => starkingdoms-client/src/routes/ingame/main.ts +2 -1
@@ 4,7 4,7 @@ import "../../css/style.scss";
import "../../css/themes/catppuccin-mocha.scss";
import { Part, Planet } from "../../protocol.ts";
import * as PIXI from "pixi.js";
-import { addMessage } from "../../chat.ts";
+import { addMessage, chatViewToggle } from "../../chat.ts";
import { loadConfig } from "../../config.ts";
export interface GlobalData {
@@ 67,6 67,7 @@ async function init() {
document.getElementById("footer-left")!.innerHTML =
`StarKingdoms Client ${APP_VERSION} (${COMMIT_HASH})`;
+ document.getElementById("chat-minimax")!.onclick = chatViewToggle;
addMessage("server-message", "Connecting to the game server...");