~starkingdoms/starkingdoms

ref: 476a4517849fe56f7bffc369bbe6c114587d1906 starkingdoms/starkingdoms-client/src/main.ts -rw-r--r-- 2.7 KiB
476a4517 — core client main page ui 2 years ago 
                                                                                
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

import CONFIG from "./config.json";

const version_string = `StarKingdoms ${APP_VERSION} (${COMMIT_HASH}) made with <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="footer-icon"><path d="M9.653 16.915l-.005-.003-.019-.01a20.759 20.759 0 01-1.162-.682 22.045 22.045 0 01-2.582-1.9C4.045 12.733 2 10.352 2 7.5a4.5 4.5 0 018-2.828A4.5 4.5 0 0118 7.5c0 2.852-2.044 5.233-3.885 6.82a22.049 22.049 0 01-3.744 2.582l-.019.01-.005.003h-.002a.739.739 0 01-.69.001l-.002-.001z" /></svg> by the StarKingdoms team`;
document.getElementById("footer")!.innerHTML = version_string;

// Dropdown stuff
const custom_select = document.querySelector(".fm-select")!;
const custom_select_btn = document.querySelector(".fm-select-button")!;
custom_select_btn.addEventListener("click", (e) => {
    e.preventDefault();
    custom_select.classList.toggle("active");
    custom_select_btn.setAttribute("aria-expanded", custom_select_btn.getAttribute("aria-expanded") === "true" ? "false" : "true");
});

const selected_value = document.querySelector(".fm-selected-value")!;

// Populate the main page server selector
interface ConfigServer {
    name: string;
    url: string;
    api: string;
}

let inverse_server_lookup: {[name: string]: string} = {};

const dropdown = document.getElementById("fm-select-dropdown")!;

for (let server_id in CONFIG.servers) {
    // @ts-ignore not sure why this complains
    let server: ConfigServer = CONFIG.servers[server_id];
    let is_first = Object.keys(inverse_server_lookup).length == 0;
    let html_text = `
    <li>
        <input type="radio" id="${server_id}" name="server" autocomplete="off" ${is_first ? "checked" : ""} />
        <label for="${server_id}">${server.name}</label>
    </li>
    `;
    inverse_server_lookup[server.name] = server_id;
    dropdown.innerHTML += html_text;
    if (is_first) {
        selected_value.textContent = server.name;
    }
}

console.log(inverse_server_lookup);

const options_list = document.querySelectorAll(".fm-select-dropdown li");
options_list.forEach((option) => {
    function handler(e: Event) {
        if (e.type === "click" && (<PointerEvent>e).clientX !== 0 && (<PointerEvent>e).clientY !== 0) {
            // @ts-ignore
            selected_value.textContent = this.children[1].textContent;
            custom_select.classList.remove("active");
        }
        if (e.type === "keyup") {
            console.log((<KeyboardEvent>e).target!);
            // @ts-ignore
            selected_value.textContent = this.textContent;
            custom_select.classList.remove("active");
        }
    }
    option.addEventListener("keyup", handler);
    option.addEventListener("click", handler);
})