feat: migrate to statically generated html

Author: Chase22

calculator/build.gradle.kts

@@ -1,3 +1,5 @@
+import de.chasenet.foxhole.DownloadJsonDataTask
+import de.chasenet.foxhole.GenerateIndexFileTask
 import groovy.json.JsonSlurper
 
 plugins {

calculator/src/HtmlUtils.ts

@@ -1,18 +1,3 @@
-export function also<T>(value: T, body: (obj: T) => void): T {
-    body(value)
-    return value
-}
-
-
-export function createElement<K extends keyof HTMLElementTagNameMap>(tagName: K, block: (elem: HTMLElementTagNameMap[K]) => void): HTMLElementTagNameMap[K] {
-    return also(document.createElement(tagName), block)
-}
-
-export function appendChild<K extends keyof HTMLElementTagNameMap, T extends Node>(element: T, tagName: K, block: (elem: HTMLElementTagNameMap[K]) => void = undefined): T {
-    if (block) {
-        element.appendChild(createElement(tagName, block))
-    } else {
-        element.appendChild(document.createElement(tagName))
-    }
-    return element
+export function as<T extends Element>(element: Element): T {
+    return element as T
 }

calculator/src/LocalStorage.ts

@@ -9,7 +9,7 @@ export function setPlayerFaction(faction: PlayerFaction) {
 }
 
 export function getPlayerFaction(): PlayerFaction {
-    return localStorage.getItem(FACTION_KEY) as PlayerFaction | "colonial"
+    return localStorage.getItem(FACTION_KEY) as PlayerFaction ?? "colonial"
 }
 
 export function getSavedSelectedItemName(category: Category): string {

calculator/src/Models.ts

@@ -1,19 +1,19 @@
 import {Cost} from "./Cost";
 
-export type PlayerFaction = "colonial" | "warden"
+export const playerFactions = [
+    "colonial", "warden"
+] as const
+
+export type PlayerFaction = typeof playerFactions[number]
 export type Faction = "neutral" | PlayerFaction
 
-export const categories = [
-    "heavy_ammunition",
-    "heavy_arms",
-    "shipables",
-    "small_arms",
-    "supplies",
-    "uniforms",
+export type Category = "heavy_ammunition" |
+    "heavy_arms" |
+    "shipables" |
+    "small_arms" |
+    "supplies" |
+    "uniforms" |
     "vehicles"
-] as const
-
-export type Category = typeof categories[number]
 
 export const CratePerQueue: Record<Category, number> = {
     heavy_ammunition: 9,

calculator/src/index.ts

@@ -2,131 +2,90 @@ import '@fontsource/jost';
 import loadData from "./loadData";
 import {groupBy} from "./ArrayUtils";
 import {Category, Item} from './Models'
-import {appendChild, createElement} from "./HtmlUtils";
+import {as} from "./HtmlUtils";
 import {combineLatest, concat, fromEvent, map, Observable, of, tap} from "rxjs";
-import {add, asCrates, calculateItemQueueCost, Cost, ZERO_COST} from "./Cost";
-import {getSavedSelectedItemName, setSavedSelectedItemName} from "./LocalStorage";
+import {add, asCrates, calculateItemQueueCost, Cost} from "./Cost";
+import {getPlayerFaction, getSavedSelectedItemName, setSavedSelectedItemName} from "./LocalStorage";
 
-const items = loadData().filter(value => value.faction.indexOf("colonial") > 0)
+const items = loadData()
 
 const itemsByCategory = groupBy(items, item => item.itemCategory)
 
-const costObservables: Record<Category, Observable<Cost> | undefined> = {
-    heavy_ammunition: undefined,
-    heavy_arms: undefined,
-    shipables: undefined,
-    small_arms: undefined,
-    supplies: undefined,
-    uniforms: undefined,
-    vehicles: undefined
-}
-
-const mpfSelectionTable = document.getElementById("mpf-selection")
-
-const headRow = mpfSelectionTable.getElementsByTagName("tr").item(0)
-
-for (const costKey in ZERO_COST) {
-    appendChild(headRow, "th", (th) => {
-        th.innerText = costKey
-    })
-}
+const costObservables = new Map<Category, Observable<Cost>>()
 
-for (const [category, items] of Object.entries(itemsByCategory)) {
-    const selectedItemName = getSavedSelectedItemName(category as Category)
-
-    appendChild(mpfSelectionTable, "tr", tr => {
-        appendChild(tr, "td", (td) => {
-            td.innerText = capitalize(category)
-        })
+Array.from(document.getElementsByClassName("queue-select"))
+    .map(select => select as HTMLSelectElement)
+    .map(select => {
+        const category: Category = select.getAttribute("data-category") as Category
 
-        appendChild(tr, "td", (td) => {
-            appendChild(td, "select", (select) => {
-                let option = makeOption("");
-                option.selected = selectedItemName === ""
+        const selectedItemName = getSavedSelectedItemName(category)
 
-                select.append(option)
-                items.sort((a, b) => a.itemName > b.itemName ? 1 : -1).forEach(item => {
-                    let option = makeOption(item.itemName);
-                    option.selected = selectedItemName === item.itemName
+        Array.from(select.children)
+            .map(option => option as HTMLOptionElement)
+            .forEach(option => {
+                option.selected = option.value === selectedItemName
+            })
 
-                    select.append(option)
-                })
+        costObservables[category] = concat(
+            of(calculateItemQueueCost(getItem(category, getSavedSelectedItemName(category as Category)))),
+            fromEvent(select, "change")
+                .pipe(tap(() => setSavedSelectedItemName(category as Category, select.value)))
+                .pipe(map(() => getItem(category, select.value)))
+                .pipe(map((item) => calculateItemQueueCost(item))))
+    })
 
-                costObservables[category] = concat(
-                    of(calculateItemQueueCost(getItem(category, getSavedSelectedItemName(category as Category)))),
-                    fromEvent(select, "change")
-                        .pipe(tap(() => setSavedSelectedItemName(category as Category, select.value)))
-                        .pipe(map(() => getItem(category, select.value)))
-                        .pipe(map((item) => calculateItemQueueCost(item))))
+Array.from(document.getElementsByClassName("cost-cell"))
+    .map(td => td as HTMLTableCellElement)
+    .forEach(td => {
+        const category = td.getAttribute("data-category")
+        const resource = td.getAttribute("data-resource")
 
-            })
+        costObservables[category].subscribe(cost => {
+            td.innerText = cost[resource]
         })
-
-        for (const costKey in ZERO_COST) {
-            appendChild(tr, "td", (td) => {
-                td.id = `${category}-cost-${costKey}`
-                td.innerText = "0"
-
-                costObservables[category].subscribe(cost => {
-                    td.innerText = cost[costKey].toString()
-                })
-            })
-        }
     })
-}
 
 const totalCostObservable = combineLatest(Object.values(costObservables) as Observable<Cost>[])
     .pipe(map(value => value.reduce((acc, curr) => add(acc, curr))))
 
 const totalCrateCostObservable = totalCostObservable.pipe(map(asCrates))
 
-appendChild(mpfSelectionTable, "tr", tr => {
-    appendChild(tr, "td")
-    appendChild(tr, "td", td => {
-        td.innerText = "Total"
+Array.from(document.getElementsByClassName("total-cost-cell"))
+    .map(td => td as HTMLTableCellElement)
+    .forEach(td => {
+        const resource = td.getAttribute("data-resource")
+
+        totalCostObservable.subscribe(cost => {
+            td.innerText = cost[resource]
+        })
     })
-    for (const costKey in ZERO_COST) {
-        appendChild(tr, "td", (td) => {
-            td.id = `total-cost-${costKey}`
-            td.innerText = "0"
 
-            totalCostObservable.subscribe(totalCost => {
-                td.innerText = totalCost[costKey]
-            })
+Array.from(document.getElementsByClassName("total-crate-cell"))
+    .map(td => td as HTMLTableCellElement)
+    .forEach(td => {
+        const resource = td.getAttribute("data-resource")
 
+        totalCrateCostObservable.subscribe(cost => {
+            td.innerText = cost[resource]
         })
-    }
-})
-
-appendChild(mpfSelectionTable, "tr", tr => {
-    appendChild(tr, "td")
-    appendChild(tr, "td", td => {
-        td.innerText = "Crates"
     })
-    for (const costKey in ZERO_COST) {
-        appendChild(tr, "td", (td) => {
-            td.id = `total-cost-crates-${costKey}`
-            td.innerText = "0"
 
-            totalCrateCostObservable.subscribe(totalCost => {
-                td.innerText = totalCost[costKey]
-            })
-        })
-    }
+const playerFaction = getPlayerFaction()
+
+Array.from(document.getElementsByClassName("item-option")).map(as<HTMLOptionElement>).forEach(option => {
+    const factions = option.dataset["faction"].split(",").map(faction => faction.trim())
+
+    option.hidden = !factions.includes(playerFaction)
 })
 
 function getItem(category: string, itemName: string): Item | undefined {
+    if (itemName === "") return undefined
+
     const items = itemsByCategory[category] as Item[]
-    return items.find(item => item.itemName === itemName)
-}
+    const item = items.find(item => item.itemName === itemName);
 
-function makeOption(label: string) {
-    return createElement("option", (option) => {
-        option.label = label
-        option.value = label
-    })
+    if (item == undefined) {
+        console.warn(`No item named ${itemName} found in category ${category}`)
+    }
+    return item
 }
-
-function capitalize(value: string): string {
-    return value.split("_").map((it) => it.charAt(0).toUpperCase() + it.substring(1)).join(" ")
-}

html/build.gradle.kts

@@ -1,6 +1,8 @@
 plugins {
     `java-gradle-plugin`
     `kotlin-dsl`
+
+    kotlin("plugin.serialization") version "2.0.20"
 }
 
 repositories {
@@ -9,13 +11,14 @@ repositories {
 
 dependencies {
     implementation("org.jetbrains.kotlinx:kotlinx-html-jvm:0.11.0")
+    implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.7.3")
 }
 
 gradlePlugin {
     plugins {
         register("html-builder") {
             id = "html-builder"
-            implementationClass = "HtmlBuilderPlugin"
+            implementationClass = "de.chasenet.foxhole.HtmlBuilderPlugin"
         }
     }
 }

html/src/main/kotlin/de/chasenet/foxhole/IndexFile.kt

@@ -1,8 +1,15 @@
 package de.chasenet.foxhole
 
+import de.chasenet.foxhole.model.ItemCategory
+import de.chasenet.foxhole.model.LogiItem
+import de.chasenet.foxhole.model.resources
 import kotlinx.html.*
+import kotlinx.serialization.ExperimentalSerializationApi
+import kotlinx.serialization.json.Json
+import kotlinx.serialization.json.decodeFromStream
 import org.gradle.api.file.RegularFileProperty
 import org.gradle.api.tasks.InputFile
+import org.gradle.internal.extensions.stdlib.capitalized
 
 abstract class GenerateIndexFileTask : GenerateHtmlTask() {
     @get:InputFile
@@ -14,7 +21,21 @@ abstract class GenerateIndexFileTask : GenerateHtmlTask() {
         )
     }
 
+    @OptIn(ExperimentalSerializationApi::class)
     override fun TagConsumer<*>.generate() {
+        val items = Json {
+            ignoreUnknownKeys = true
+        }.decodeFromStream<List<LogiItem>>(foxholeJsonDataFile.asFile.get().inputStream())
+
+        items.filter { it.isMpfCraftable }.also {
+            it.filter { it.itemCategory == null }
+                .takeIf { it.isNotEmpty() }
+                ?.joinToString { it.itemName }
+                ?.also { throw IllegalArgumentException("Items without item category found: $it") }
+        }
+
+        val itemsByCategory = items.filter { it.isMpfCraftable }.groupBy { it.itemCategory }
+
         html {
             lang = "en"
             head {
@@ -39,7 +60,71 @@ abstract class GenerateIndexFileTask : GenerateHtmlTask() {
                             tr {
                                 th { text("Queue") }
                                 th { text("Item") }
+                                th { text("Bmat") }
+                                th { text("Rmat") }
+                                th { text("Emat") }
+                                th { text("Hemat") }
+                            }
+
+                            ItemCategory.values().forEach { category ->
+                                tr {
+                                    td {
+                                        text(category.name.split("_").joinToString(" ") { it.capitalized() })
+                                    }
+                                    td {
+                                        select("queue-select") {
+                                            attributes["data-category"] = category.name
+                                            
+                                            option {
+                                                text("")
+                                            }
+                                            itemsByCategory[category]!!.sortedBy { it.itemName }.forEach { item ->
+                                                option("item-option") {
+                                                    label = item.itemName
+                                                    value = item.itemName
+                                                    attributes["data-faction"] = item.faction.joinToString()
+                                                }
+                                            }
+                                        }
+                                    }
+
+                                    resources.forEach { resource ->
+                                        td {
+                                            attributes["data-resource"] = resource
+                                            attributes["data-category"] = category.name
+                                            classes = setOf("cost-cell")
+                                            text(0)
+                                        }
+                                    }
+                                }
                             }
+
+                            tr {
+                                td()
+                                td {
+                                    text("Total")
+                                }
+                                resources.forEach { resource ->
+                                    td("total-cost-cell") {
+                                        attributes["data-resource"] = resource
+                                        text(0)
+                                    }
+                                }
+                            }
+
+                            tr {
+                                td()
+                                td {
+                                    text("Crates")
+                                }
+                                resources.forEach { resource ->
+                                    td("total-crate-cell") {
+                                        attributes["data-resource"] = resource
+                                        text(0)
+                                    }
+                                }
+                            }
+
                         }
                     }
                 }