resource check boxes

ManApart · Dec 9, 2023 · a344666 · a344666
1 parent fd077d5
commit a344666
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 39 deletions.
diff --git a/src/jsMain/kotlin/components/CheckBox.kt b/src/jsMain/kotlin/components/CheckBox.kt
@@ -9,17 +9,6 @@ import org.w3c.dom.HTMLInputElement
 import kotlin.reflect.KMutableProperty0
 import kotlin.reflect.KProperty0
 
-fun TagConsumer<HTMLElement>.checkBox(name: String, getValue: () -> Boolean, onChange: (Boolean) -> Unit = {}) {
-    input(InputType.checkBox, classes = "checkbox") {
-        id = "${name}-checkbox"
-        checked = getValue()
-        onChangeFunction = {
-            val newVal = el<HTMLInputElement>(this.id).checked
-            onChange(newVal)
-        }
-    }
-}
-
 fun TagConsumer<HTMLElement>.checkBox(property: KMutableProperty0<Boolean>, onChange: (Boolean) -> Unit = {}) {
     input(InputType.checkBox, classes = "checkbox") {
         id = "${property.name}-checkbox"
@@ -49,7 +38,7 @@ fun TagConsumer<HTMLElement>.checkBox(
     onChange: (Boolean) -> Unit = {}
 ) {
     input(InputType.checkBox, classes = "checkbox") {
-        id = "${property.name}-checkbox"
+        id = "${property.name}-$index-checkbox"
         checked = property.get().contains(index)
         onChangeFunction = {
             val newVal = el<HTMLInputElement>(this.id).checked

diff --git a/src/jsMain/kotlin/components/ResourcePopup.kt b/src/jsMain/kotlin/components/ResourcePopup.kt
@@ -1,6 +1,7 @@
 package components
 
 import ResourceType
+import doRouting
 import el
 import kotlinx.browser.window
 import kotlinx.dom.addClass
@@ -11,21 +12,60 @@ import kotlinx.html.js.onClickFunction
 import mouseX
 import mouseY
 import org.w3c.dom.HTMLElement
+import persistMemory
+import kotlin.reflect.KProperty0
 
-fun TagConsumer<HTMLElement>.resourceSquares(resources: Set<ResourceType>) {
-    resources.forEach { resourceSquare(it) }
+fun TagConsumer<HTMLElement>.resourceSquares(
+    resources: Set<ResourceType>,
+    checkBoxes: KProperty0<MutableSet<Int>>? = null
+) {
+    if (checkBoxes != null) {
+        resources.forEachIndexed { i, resourceType -> resourceSquare(resourceType, i, checkBoxes) }
+    } else {
+        resources.forEach { resourceSquare(it) }
+    }
 }
 
 fun TagConsumer<HTMLElement>.resourceSquare(resource: ResourceType) {
     div("resource") {
         style = "background-color: #${resource.color}"
         div("resource-inner") {
-            a("https://starfieldwiki.net/wiki/Starfield:${resource.readableName.replace(" ", "_")}", target = "_blank") { +resource.name }
+            a(
+                "https://starfieldwiki.net/wiki/Starfield:${resource.readableName.replace(" ", "_")}",
+                target = "_blank"
+            ) { +resource.name }
+        }
+        title = resource.readableName
+    }
+}
+
+private fun TagConsumer<HTMLElement>.resourceSquare(
+    resource: ResourceType,
+    i: Int,
+    checkBoxes: KProperty0<MutableSet<Int>>
+) {
+    div("resource") {
+        id = "resource-${resource.name}"
+        val color = if(checkBoxes.get().contains(i)) "#" +resource.color else "var(--menu-gray)"
+
+        style = "background-color: $color"
+        div("resource-hover-check") {
+            checkBox(i, checkBoxes) {
+                el("resource-${resource.name}").style.backgroundColor = if(it) "#" +resource.color else "var(--menu-gray)"
+                persistMemory()
+            }
+        }
+        div("resource-inner") {
+            a(
+                "https://starfieldwiki.net/wiki/Starfield:${resource.readableName.replace(" ", "_")}",
+                target = "_blank"
+            ) { +resource.name }
         }
         title = resource.readableName
     }
 }
 
+
 fun showResourcePicker(resources: Set<ResourceType>, result: (ResourceType) -> Unit) {
     val root = el("popup")
     root.removeClass("hidden")

diff --git a/src/jsMain/kotlin/views/system/PlanetView.kt b/src/jsMain/kotlin/views/system/PlanetView.kt
@@ -136,7 +136,7 @@ fun TagConsumer<HTMLElement>.detailView(system: StarSystem, planet: Planet, link
                 }
                 traitsRow(info.scan, traits)
                 organicResourceRow(organicResources)
-                inorganicResourceRow(inorganicResources)
+                inorganicResourceRow(inorganicResources, info.scan::resources)
                 outPostsRow(info.outPosts)
             }
         }

diff --git a/src/jsMain/kotlin/views/system/SystemView.kt b/src/jsMain/kotlin/views/system/SystemView.kt
@@ -31,6 +31,8 @@ import persistMemory
 import replaceElement
 import updateUrl
 import views.*
+import kotlin.reflect.KMutableProperty0
+import kotlin.reflect.KProperty0
 
 
 var currentSystem: StarSystem? = null
@@ -105,14 +107,14 @@ fun TagConsumer<HTMLElement>.organicResourceRow(resources: Set<String>) {
     }
 }
 
-fun TagConsumer<HTMLElement>.inorganicResourceRow(resources: Set<ResourceType>) {
+fun TagConsumer<HTMLElement>.inorganicResourceRow(resources: Set<ResourceType>, checkBoxes: KProperty0<MutableSet<Int>>? = null) {
     tr {
         td("resource-td") { +"Inorganic Resources" }
         td("resource-value-td") {
             if (resources.isEmpty()) {
                 +"None"
             } else {
-                resourceSquares(resources)
+                resourceSquares(resources, checkBoxes)
             }
         }
     }

diff --git a/src/jsMain/resources/css/components.css b/src/jsMain/resources/css/components.css
@@ -83,4 +83,37 @@ input[type="checkbox"]:checked {
 }
 
 .counter {
+}
+
+.resource {
+    position: relative;
+    float: right;
+    text-align: center;
+    width: 50px;
+    height: 50px;
+    border: 1px solid gray;
+    margin: 2px;
+    font-size: medium;
+}
+
+.resource-inner {
+    margin-top: 25%;
+}
+
+.resource-wrapper {
+    height: 55px;
+}
+.resource-wrapper .resource {
+    float: left;
+}
+
+.resource-hover-check{
+    display: none;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+}
+
+.resource:hover .resource-hover-check{
+    display: block;
 }
diff --git a/src/jsMain/resources/css/system.css b/src/jsMain/resources/css/system.css
@@ -44,27 +44,6 @@
     direction: rtl;
 }
 
-.resource {
-    float: right;
-    text-align: center;
-    width: 50px;
-    height: 50px;
-    border: 1px solid gray;
-    margin: 2px;
-    font-size: medium;
-}
-
-.resource-inner {
-    margin-top: 25%;
-}
-
-.resource-wrapper {
-    height: 55px;
-}
-.resource-wrapper .resource {
-    float: left;
-}
-
 #system-map {
     white-space: nowrap;
     overflow-x: scroll;