Merge pull request #173 from caleb-mabry/trying-to-minimize

Client at 297 lines

14 files changed, 460 insertions, 2 deletions

diff --git a/webAO/client/addTrack.ts b/webAO/client/addTrack.ts
new file mode 100644
index 0000000..247f07e
--- /dev/null
+++ b/webAO/client/addTrack.ts
@@ -0,0 +1,15 @@
+import { client } from "../client";
+import { unescapeChat } from "../encoding";
+import { getFilenameFromPath } from "../utils/paths";
+
+
+export const addTrack = (trackname: string) => {
+    const newentry = <HTMLOptionElement>document.createElement("OPTION");
+    const songName = getFilenameFromPath(trackname);
+    newentry.text = unescapeChat(songName);
+    newentry.value = trackname;
+    (<HTMLSelectElement>(
+        document.getElementById("client_musiclist")
+    )).options.add(newentry);
+    client.musics.push(trackname);
+}
\ No newline at end of file
diff --git a/webAO/client/appendICLog.ts b/webAO/client/appendICLog.ts
new file mode 100644
index 0000000..f8b7852
--- /dev/null
+++ b/webAO/client/appendICLog.ts
@@ -0,0 +1,57 @@
+import { lastICMessageTime, setLastICMessageTime } from "../client";
+
+
+
+/**
+ * Appends a message to the in-character chat log.
+ * @param {string} msg the string to be added
+ * @param {string} name the name of the sender
+ */
+export function appendICLog(
+    msg: string,
+    showname = "",
+    nameplate = "",
+    time = new Date()
+) {
+    const entry = document.createElement("p");
+    const shownameField = document.createElement("span");
+    const nameplateField = document.createElement("span");
+    const textField = document.createElement("span");
+    nameplateField.className = "iclog_name iclog_nameplate";
+    nameplateField.appendChild(document.createTextNode(nameplate));
+
+    shownameField.className = "iclog_name iclog_showname";
+    if (showname === "" || !showname) {
+        shownameField.appendChild(document.createTextNode(nameplate));
+    } else {
+        shownameField.appendChild(document.createTextNode(showname));
+    }
+
+    textField.className = "iclog_text";
+    textField.appendChild(document.createTextNode(msg));
+
+    entry.appendChild(shownameField);
+    entry.appendChild(nameplateField);
+    entry.appendChild(textField);
+
+    // Only put a timestamp if the minute has changed.
+    if (lastICMessageTime.getMinutes() !== time.getMinutes()) {
+        const timeStamp = document.createElement("span");
+        timeStamp.className = "iclog_time";
+        timeStamp.innerText = time.toLocaleTimeString(undefined, {
+            hour: "numeric",
+            minute: "2-digit",
+        });
+        entry.appendChild(timeStamp);
+    }
+
+    const clientLog = document.getElementById("client_log")!;
+    clientLog.appendChild(entry);
+
+    /* This is a little buggy - some troubleshooting might be desirable */
+    if (clientLog.scrollTop > clientLog.scrollHeight - 800) {
+        clientLog.scrollTop = clientLog.scrollHeight;
+    }
+
+    setLastICMessageTime(new Date());
+}
\ No newline at end of file
diff --git a/webAO/client/checkCallword.ts b/webAO/client/checkCallword.ts
new file mode 100644
index 0000000..f6cffbc
--- /dev/null
+++ b/webAO/client/checkCallword.ts
@@ -0,0 +1,17 @@
+import { client } from "../client";
+import { AO_HOST } from "./aoHost";
+
+/**
+ * check if the message contains an entry on our callword list
+ * @param {string} message
+ */
+export function checkCallword(message: string, sfxAudio: HTMLAudioElement) {
+    client.callwords.forEach(testCallword);
+    function testCallword(item: string) {
+        if (item !== "" && message.toLowerCase().includes(item.toLowerCase())) {
+            sfxAudio.pause();
+            sfxAudio.src = `${AO_HOST}sounds/general/sfx-gallery.opus`;
+            sfxAudio.play();
+        }
+    }
+}
\ No newline at end of file
diff --git a/webAO/client/createArea.ts b/webAO/client/createArea.ts
new file mode 100644
index 0000000..63af644
--- /dev/null
+++ b/webAO/client/createArea.ts
@@ -0,0 +1,30 @@
+import { client } from "../client";
+import { area_click } from "../dom/areaClick";
+
+export const createArea = (id: number, name: string) => {
+    const thisarea = {
+        name,
+        players: 0,
+        status: "IDLE",
+        cm: "",
+        locked: "FREE",
+    };
+
+    client.areas.push(thisarea);
+
+    // Create area button
+    const newarea = document.createElement("SPAN");
+    newarea.className = "area-button area-default";
+    newarea.id = `area${id}`;
+    newarea.innerText = thisarea.name;
+    newarea.title =
+        `Players: ${thisarea.players}\n` +
+        `Status: ${thisarea.status}\n` +
+        `CM: ${thisarea.cm}\n` +
+        `Area lock: ${thisarea.locked}`;
+    newarea.onclick = function () {
+        area_click(newarea);
+    };
+
+    document.getElementById("areas")!.appendChild(newarea);
+}
\ No newline at end of file
diff --git a/webAO/client/fetchLists.ts b/webAO/client/fetchLists.ts
new file mode 100644
index 0000000..e9772cb
--- /dev/null
+++ b/webAO/client/fetchLists.ts
@@ -0,0 +1,60 @@
+import { AO_HOST } from "./aoHost";
+import { request } from "../services/request.js";
+
+export const fetchBackgroundList = async () => {
+    try {
+        const bgdata = await request(`${AO_HOST}backgrounds.json`);
+        const bg_array = JSON.parse(bgdata);
+        // the try catch will fail before here when there is no file
+
+        const bg_select = <HTMLSelectElement>document.getElementById("bg_select");
+        bg_select.innerHTML = "";
+
+        bg_select.add(new Option("Custom", "0"));
+        bg_array.forEach((background: string) => {
+            bg_select.add(new Option(background));
+        });
+    } catch (err) {
+        console.warn("there was no backgrounds.json file");
+    }
+}
+
+export const fetchCharacterList = async () => {
+    try {
+        const chardata = await request(`${AO_HOST}characters.json`);
+        const char_array = JSON.parse(chardata);
+        // the try catch will fail before here when there is no file
+
+        const char_select = <HTMLSelectElement>(
+            document.getElementById("client_ininame")
+        );
+        char_select.innerHTML = "";
+
+        char_array.forEach((character: string) => {
+            char_select.add(new Option(character));
+        });
+    } catch (err) {
+        console.warn("there was no characters.json file");
+    }
+}
+
+
+export const fetchEvidenceList = async () => {
+    try {
+        const evidata = await request(`${AO_HOST}evidence.json`);
+        const evi_array = JSON.parse(evidata);
+        // the try catch will fail before here when there is no file
+
+        const evi_select = <HTMLSelectElement>(
+            document.getElementById("evi_select")
+        );
+        evi_select.innerHTML = "";
+
+        evi_array.forEach((evi: string) => {
+            evi_select.add(new Option(evi));
+        });
+        evi_select.add(new Option("Custom", "0"));
+    } catch (err) {
+        console.warn("there was no evidence.json file");
+    }
+}
\ No newline at end of file
diff --git a/webAO/client/fixLastArea.ts b/webAO/client/fixLastArea.ts
new file mode 100644
index 0000000..f1aa99f
--- /dev/null
+++ b/webAO/client/fixLastArea.ts
@@ -0,0 +1,15 @@
+import { client } from "../client";
+import { addTrack } from "./addTrack";
+
+
+/**
+ * Area list fuckery
+ */
+export const fix_last_area = () => {
+    if (client.areas.length > 0) {
+        const malplaced = client.areas.pop().name;
+        const areas = document.getElementById("areas")!;
+        areas.removeChild(areas.lastChild);
+        addTrack(malplaced);
+    }
+}
\ No newline at end of file
diff --git a/webAO/client/handleBans.ts b/webAO/client/handleBans.ts
new file mode 100644
index 0000000..b977fc8
--- /dev/null
+++ b/webAO/client/handleBans.ts
@@ -0,0 +1,17 @@
+/**
+ * Handles the kicked packet
+ * @param {string} type is it a kick or a ban
+ * @param {string} reason why
+ */
+export const handleBans = (type: string, reason: string) => {
+    document.getElementById("client_error")!.style.display = "flex";
+    document.getElementById(
+        "client_errortext"
+    )!.innerHTML = `${type}:<br>${reason.replace(/\n/g, "<br />")}`;
+    (<HTMLElement>(
+        document.getElementsByClassName("client_reconnect")[0]
+    )).style.display = "none";
+    (<HTMLElement>(
+        document.getElementsByClassName("client_reconnect")[1]
+    )).style.display = "none";
+}
\ No newline at end of file
diff --git a/webAO/client/handleCharacterInfo.ts b/webAO/client/handleCharacterInfo.ts
new file mode 100644
index 0000000..9d74a8b
--- /dev/null
+++ b/webAO/client/handleCharacterInfo.ts
@@ -0,0 +1,105 @@
+import { client } from "../client";
+import { safeTags } from "../encoding";
+import iniParse from "../iniParse";
+import request from "../services/request";
+import fileExists from "../utils/fileExists";
+import { AO_HOST } from "./aoHost";
+
+
+/**
+ * Handles the incoming character information, and downloads the sprite + ini for it
+ * @param {Array} chargs packet arguments
+ * @param {Number} charid character ID
+ */
+export const handleCharacterInfo = async (chargs: string[], charid: number) => {
+    const img = <HTMLImageElement>document.getElementById(`demo_${charid}`);
+    if (chargs[0]) {
+        let cini: any = {};
+        const getCharIcon = async () => {
+            const extensions = [".png", ".webp"];
+            img.alt = chargs[0];
+            const charIconBaseUrl = `${AO_HOST}characters/${encodeURI(
+                chargs[0].toLowerCase()
+            )}/char_icon`;
+            for (let i = 0; i < extensions.length; i++) {
+                const fileUrl = charIconBaseUrl + extensions[i];
+                const exists = await fileExists(fileUrl);
+                if (exists) {
+                    img.alt = chargs[0];
+                    img.title = chargs[0];
+                    img.src = fileUrl;
+                    return;
+                }
+            }
+        };
+        getCharIcon();
+
+        // If the ini doesn't exist on the server this will throw an error
+        try {
+            const cinidata = await request(
+                `${AO_HOST}characters/${encodeURI(chargs[0].toLowerCase())}/char.ini`
+            );
+            cini = iniParse(cinidata);
+        } catch (err) {
+            cini = {};
+            img.classList.add("noini");
+            console.warn(`character ${chargs[0]} is missing from webAO`);
+            // If it does, give the user a visual indication that the character is unusable
+        }
+
+        const mute_select = <HTMLSelectElement>(
+            document.getElementById("mute_select")
+        );
+        mute_select.add(new Option(safeTags(chargs[0]), String(charid)));
+        const pair_select = <HTMLSelectElement>(
+            document.getElementById("pair_select")
+        );
+        pair_select.add(new Option(safeTags(chargs[0]), String(charid)));
+
+        // sometimes ini files lack important settings
+        const default_options = {
+            name: chargs[0],
+            showname: chargs[0],
+            side: "def",
+            blips: "male",
+            chat: "",
+            category: "",
+        };
+        cini.options = Object.assign(default_options, cini.options);
+
+        // sometimes ini files lack important settings
+        const default_emotions = {
+            number: 0,
+        };
+        cini.emotions = Object.assign(default_emotions, cini.emotions);
+
+        client.chars[charid] = {
+            name: safeTags(chargs[0]),
+            showname: safeTags(cini.options.showname),
+            desc: safeTags(chargs[1]),
+            blips: safeTags(cini.options.blips).toLowerCase(),
+            gender: safeTags(cini.options.gender).toLowerCase(),
+            side: safeTags(cini.options.side).toLowerCase(),
+            chat:
+                cini.options.chat === ""
+                    ? safeTags(cini.options.category).toLowerCase()
+                    : safeTags(cini.options.chat).toLowerCase(),
+            evidence: chargs[3],
+            icon: img.src,
+            inifile: cini,
+            muted: false,
+        };
+
+        if (
+            client.chars[charid].blips === "male" &&
+            client.chars[charid].gender !== "male" &&
+            client.chars[charid].gender !== ""
+        ) {
+            client.chars[charid].blips = client.chars[charid].gender;
+        }
+
+    } else {
+        console.warn(`missing charid ${charid}`);
+        img.style.display = "none";
+    }
+}
\ No newline at end of file
diff --git a/webAO/client/isAudio.ts b/webAO/client/isAudio.ts
new file mode 100644
index 0000000..430f543
--- /dev/null
+++ b/webAO/client/isAudio.ts
@@ -0,0 +1,6 @@
+export const isAudio = (trackname: string) => {
+    const audioEndings = [".wav", ".mp3", ".ogg", ".opus"];
+    return (
+        audioEndings.filter((ending) => trackname.endsWith(ending)).length === 1
+    );
+}
\ No newline at end of file
diff --git a/webAO/client/isLowMemory.ts b/webAO/client/isLowMemory.ts
new file mode 100644
index 0000000..caa6784
--- /dev/null
+++ b/webAO/client/isLowMemory.ts
@@ -0,0 +1,10 @@
+import { setOldLoading } from '../client'
+export const isLowMemory = () => {
+    if (
+        /webOS|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|PlayStation|Nintendo|Opera Mini/i.test(
+            navigator.userAgent
+        )
+    ) {
+        setOldLoading(true);
+    }
+}
diff --git a/webAO/client/loadResources.ts b/webAO/client/loadResources.ts
new file mode 100644
index 0000000..7039333
--- /dev/null
+++ b/webAO/client/loadResources.ts
@@ -0,0 +1,79 @@
+import getCookie from "../utils/getCookie";
+import vanilla_evidence_arr from "../constants/evidence.js";
+import vanilla_background_arr from "../constants/backgrounds.js";
+import { client } from "../client";
+import { setChatbox } from "../dom/setChatbox";
+import { changeSFXVolume, changeShoutVolume, changeTestimonyVolume } from "../dom/changeVolume";
+import { showname_click } from "../dom/showNameClick";
+
+const version = process.env.npm_package_version;
+/**
+   * Load game resources and stored settings.
+   */
+export const loadResources = () => {
+    document.getElementById("client_version")!.innerText = `version ${version}`;
+    // Load background array to select
+    const background_select = <HTMLSelectElement>(
+        document.getElementById("bg_select")
+    );
+    background_select.add(new Option("Custom", "0"));
+    vanilla_background_arr.forEach((background) => {
+        background_select.add(new Option(background));
+    });
+
+    // Load evidence array to select
+    const evidence_select = <HTMLSelectElement>(
+        document.getElementById("evi_select")
+    );
+    evidence_select.add(new Option("Custom", "0"));
+    vanilla_evidence_arr.forEach((evidence) => {
+        evidence_select.add(new Option(evidence));
+    });
+
+    // Read cookies and set the UI to its values
+    (<HTMLInputElement>document.getElementById("OOC_name")).value =
+        getCookie("OOC_name") ||
+        `web${String(Math.round(Math.random() * 100 + 10))}`;
+
+    // Read cookies and set the UI to its values
+    const cookietheme = getCookie("theme") || "default";
+
+    (<HTMLOptionElement>(
+        document.querySelector(`#client_themeselect [value="${cookietheme}"]`)
+    )).selected = true;
+    client.viewport.reloadTheme();
+
+    const cookiechatbox = getCookie("chatbox") || "dynamic";
+
+    (<HTMLOptionElement>(
+        document.querySelector(`#client_chatboxselect [value="${cookiechatbox}"]`)
+    )).selected = true;
+    setChatbox(cookiechatbox);
+
+    (<HTMLInputElement>document.getElementById("client_mvolume")).value =
+        getCookie("musicVolume") || "1";
+    client.viewport.changeMusicVolume();
+    (<HTMLAudioElement>document.getElementById("client_sfxaudio")).volume =
+        Number(getCookie("sfxVolume")) || 1;
+    changeSFXVolume();
+    (<HTMLAudioElement>document.getElementById("client_shoutaudio")).volume =
+        Number(getCookie("shoutVolume")) || 1;
+    changeShoutVolume();
+    (<HTMLAudioElement>(
+        document.getElementById("client_testimonyaudio")
+    )).volume = Number(getCookie("testimonyVolume")) || 1;
+    changeTestimonyVolume();
+    (<HTMLInputElement>document.getElementById("client_bvolume")).value =
+        getCookie("blipVolume") || "1";
+    client.viewport.changeBlipVolume();
+
+    (<HTMLInputElement>document.getElementById("ic_chat_name")).value =
+        getCookie("ic_chat_name");
+    (<HTMLInputElement>document.getElementById("showname")).checked = Boolean(
+        getCookie("showname")
+    );
+    showname_click(null);
+
+    (<HTMLInputElement>document.getElementById("client_callwords")).value =
+        getCookie("callwords");
+}
\ No newline at end of file
diff --git a/webAO/client/resetICParams.ts b/webAO/client/resetICParams.ts
new file mode 100644
index 0000000..414da27
--- /dev/null
+++ b/webAO/client/resetICParams.ts
@@ -0,0 +1,21 @@
+import { selectedShout, setSelectedShout } from "../client";
+
+/**
+ * Resets the IC parameters for the player to enter a new chat message.
+ * This should only be called when the player's previous chat message
+ * was successfully sent/presented.
+ */
+export function resetICParams() {
+    (<HTMLInputElement>document.getElementById("client_inputbox")).value = "";
+    document.getElementById("button_flash")!.className = "client_button";
+    document.getElementById("button_shake")!.className = "client_button";
+
+    (<HTMLInputElement>document.getElementById("sendpreanim")).checked = false;
+    (<HTMLInputElement>document.getElementById("sendsfx")).checked = false;
+
+    if (selectedShout) {
+        document.getElementById(`button_${selectedShout}`)!.className =
+            "client_button";
+        setSelectedShout(0);
+    }
+}
\ No newline at end of file
diff --git a/webAO/client/saveChatLogHandle.ts b/webAO/client/saveChatLogHandle.ts
new file mode 100644
index 0000000..bcc1075
--- /dev/null
+++ b/webAO/client/saveChatLogHandle.ts
@@ -0,0 +1,26 @@
+import downloadFile from "../services/downloadFile";
+
+export const saveChatlogHandle = async () => {
+    const clientLog = document.getElementById("client_log")!;
+    const icMessageLogs = clientLog.getElementsByTagName("p");
+    const messages: string[] = [];
+
+    for (let i = 0; i < icMessageLogs.length; i++) {
+        const SHOWNAME_POSITION = 0;
+        const TEXT_POSITION = 2;
+        const showname = icMessageLogs[i].children[SHOWNAME_POSITION].innerHTML;
+        const text = icMessageLogs[i].children[TEXT_POSITION].innerHTML;
+        const message = `${showname}: ${text}`;
+        messages.push(message);
+    }
+    const d = new Date();
+    let ye = new Intl.DateTimeFormat("en", { year: "numeric" }).format(d);
+    let mo = new Intl.DateTimeFormat("en", { month: "short" }).format(d);
+    let da = new Intl.DateTimeFormat("en", { day: "2-digit" }).format(d);
+
+    const filename = `chatlog-${da}-${mo}-${ye}`.toLowerCase();
+    downloadFile(messages.join("\n"), filename);
+
+    // Reset Chatbox to Empty
+    (<HTMLInputElement>document.getElementById("client_inputbox")).value = "";
+};
\ No newline at end of file
diff --git a/webAO/client/sender/sendOOC.ts b/webAO/client/sender/sendOOC.ts
index a410b5f..9674ad9 100644
--- a/webAO/client/sender/sendOOC.ts
+++ b/webAO/client/sender/sendOOC.ts
@@ -1,7 +1,7 @@
 import { client } from '../../client'
 import { escapeChat } from '../../encoding';
 import setCookie from '../../utils/setCookie';
-
+import { saveChatlogHandle } from '../../client/saveChatLogHandle'
 /**
  * Sends an out-of-character chat message.
  * @param {string} message the message to send
@@ -17,7 +17,7 @@ export const sendOOC = (message: string) => {
     const oocMessage = `${escapeChat(message)}`;
 
     const commands = {
-        "/save_chatlog": client.saveChatlogHandle,
+        "/save_chatlog": saveChatlogHandle,
     };
     const commandsMap = new Map(Object.entries(commands));