diff --git a/lib/src/commonTest/kotlin/world/phantasmal/lib/compression/prs/PrsCompressTests.kt b/lib/src/commonTest/kotlin/world/phantasmal/lib/compression/prs/PrsCompressTests.kt index e271793a..ff7d7748 100644 --- a/lib/src/commonTest/kotlin/world/phantasmal/lib/compression/prs/PrsCompressTests.kt +++ b/lib/src/commonTest/kotlin/world/phantasmal/lib/compression/prs/PrsCompressTests.kt @@ -3,7 +3,6 @@ package world.phantasmal.lib.compression.prs import world.phantasmal.lib.buffer.Buffer import world.phantasmal.lib.cursor.cursor import kotlin.random.Random -import kotlin.random.nextUInt import kotlin.test.Test import kotlin.test.assertEquals diff --git a/observable/src/commonMain/kotlin/world/phantasmal/observable/value/FlatTransformedVal.kt b/observable/src/commonMain/kotlin/world/phantasmal/observable/value/FlatTransformedVal.kt index 82f706b9..bb7c23cc 100644 --- a/observable/src/commonMain/kotlin/world/phantasmal/observable/value/FlatTransformedVal.kt +++ b/observable/src/commonMain/kotlin/world/phantasmal/observable/value/FlatTransformedVal.kt @@ -16,7 +16,7 @@ class FlatTransformedVal( return if (hasNoObservers()) { super.value } else { - computedVal.unsafeToNonNull>().value + computedVal.unsafeToNonNull().value } } diff --git a/observable/src/commonTest/kotlin/world/phantasmal/observable/ObservableTests.kt b/observable/src/commonTest/kotlin/world/phantasmal/observable/ObservableTests.kt index 53bc12ba..01eab244 100644 --- a/observable/src/commonTest/kotlin/world/phantasmal/observable/ObservableTests.kt +++ b/observable/src/commonTest/kotlin/world/phantasmal/observable/ObservableTests.kt @@ -14,7 +14,7 @@ abstract class ObservableTests : TestSuite() { protected abstract fun create(): ObservableAndEmit @Test - fun observable_calls_observers_when_events_are_emitted() { + fun observable_calls_observers_when_events_are_emitted() = test { val (observable, emit) = create() var changes = 0 @@ -36,7 +36,7 @@ abstract class ObservableTests : TestSuite() { } @Test - fun observable_does_not_call_observers_after_they_are_disposed() { + fun observable_does_not_call_observers_after_they_are_disposed() = test { val (observable, emit) = create() var changes = 0 diff --git a/observable/src/commonTest/kotlin/world/phantasmal/observable/value/FlatTransformedValDependentValEmitsTests.kt b/observable/src/commonTest/kotlin/world/phantasmal/observable/value/FlatTransformedValDependentValEmitsTests.kt index d4fda004..8ef83a11 100644 --- a/observable/src/commonTest/kotlin/world/phantasmal/observable/value/FlatTransformedValDependentValEmitsTests.kt +++ b/observable/src/commonTest/kotlin/world/phantasmal/observable/value/FlatTransformedValDependentValEmitsTests.kt @@ -13,7 +13,7 @@ class FlatTransformedValDependentValEmitsTests : RegularValTests() { * same. */ @Test - fun emits_a_change_when_its_direct_val_dependency_changes() { + fun emits_a_change_when_its_direct_val_dependency_changes() = test { val v = SimpleVal(SimpleVal(7)) val fv = FlatTransformedVal(listOf(v)) { v.value } var observedValue: Int? = null diff --git a/observable/src/commonTest/kotlin/world/phantasmal/observable/value/RegularValTests.kt b/observable/src/commonTest/kotlin/world/phantasmal/observable/value/RegularValTests.kt index 2de2f621..e3d41650 100644 --- a/observable/src/commonTest/kotlin/world/phantasmal/observable/value/RegularValTests.kt +++ b/observable/src/commonTest/kotlin/world/phantasmal/observable/value/RegularValTests.kt @@ -13,7 +13,7 @@ abstract class RegularValTests : ValTests() { protected abstract fun createBoolean(bool: Boolean): ValAndEmit @Test - fun val_boolean_extensions() { + fun val_boolean_extensions() = test { listOf(true, false).forEach { bool -> val (value) = createBoolean(bool) diff --git a/observable/src/commonTest/kotlin/world/phantasmal/observable/value/StaticValTests.kt b/observable/src/commonTest/kotlin/world/phantasmal/observable/value/StaticValTests.kt index 5730d3cb..2a303ed9 100644 --- a/observable/src/commonTest/kotlin/world/phantasmal/observable/value/StaticValTests.kt +++ b/observable/src/commonTest/kotlin/world/phantasmal/observable/value/StaticValTests.kt @@ -5,7 +5,7 @@ import kotlin.test.Test class StaticValTests : TestSuite() { @Test - fun observing_StaticVal_should_never_create_leaks() { + fun observing_StaticVal_should_never_create_leaks() = test { val static = StaticVal("test value") static.observe {} diff --git a/observable/src/commonTest/kotlin/world/phantasmal/observable/value/ValCreationTests.kt b/observable/src/commonTest/kotlin/world/phantasmal/observable/value/ValCreationTests.kt index aecb82e7..7841d97c 100644 --- a/observable/src/commonTest/kotlin/world/phantasmal/observable/value/ValCreationTests.kt +++ b/observable/src/commonTest/kotlin/world/phantasmal/observable/value/ValCreationTests.kt @@ -5,27 +5,27 @@ import kotlin.test.* class ValCreationTests : TestSuite() { @Test - fun test_value() { + fun test_value() = test { assertEquals(7, value(7).value) } @Test - fun test_trueVal() { + fun test_trueVal() = test { assertTrue(trueVal().value) } @Test - fun test_falseVal() { + fun test_falseVal() = test { assertFalse(falseVal().value) } @Test - fun test_nullVal() { + fun test_nullVal() = test { assertNull(nullVal().value) } @Test - fun test_mutableVal_with_initial_value() { + fun test_mutableVal_with_initial_value() = test { val v = mutableVal(17) assertEquals(17, v.value) @@ -36,7 +36,7 @@ class ValCreationTests : TestSuite() { } @Test - fun test_mutableVal_with_getter_and_setter() { + fun test_mutableVal_with_getter_and_setter() = test { var x = 17 val v = mutableVal({ x }, { x = it }) diff --git a/observable/src/commonTest/kotlin/world/phantasmal/observable/value/ValTests.kt b/observable/src/commonTest/kotlin/world/phantasmal/observable/value/ValTests.kt index 83178141..6e680e29 100644 --- a/observable/src/commonTest/kotlin/world/phantasmal/observable/value/ValTests.kt +++ b/observable/src/commonTest/kotlin/world/phantasmal/observable/value/ValTests.kt @@ -19,7 +19,7 @@ abstract class ValTests : ObservableTests() { * Otherwise it should only call the observer when it changes. */ @Test - fun val_respects_call_now_argument() { + fun val_respects_call_now_argument() = test { val (value, emit) = create() var changes = 0 diff --git a/observable/src/commonTest/kotlin/world/phantasmal/observable/value/list/ListValTests.kt b/observable/src/commonTest/kotlin/world/phantasmal/observable/value/list/ListValTests.kt index 7c191a45..c3b97256 100644 --- a/observable/src/commonTest/kotlin/world/phantasmal/observable/value/list/ListValTests.kt +++ b/observable/src/commonTest/kotlin/world/phantasmal/observable/value/list/ListValTests.kt @@ -14,7 +14,7 @@ abstract class ListValTests : ValTests() { abstract override fun create(): ListValAndAdd @Test - fun listVal_updates_sizeVal_correctly() { + fun listVal_updates_sizeVal_correctly() = test { val (list: List<*>, add) = create() assertEquals(0, list.sizeVal.value) diff --git a/test-utils/build.gradle.kts b/test-utils/build.gradle.kts index 76366fcd..ac807f02 100644 --- a/test-utils/build.gradle.kts +++ b/test-utils/build.gradle.kts @@ -2,6 +2,8 @@ plugins { kotlin("multiplatform") } +val coroutinesVersion: String by project.ext + kotlin { js { browser {} @@ -13,10 +15,11 @@ kotlin { api(project(":core")) api(kotlin("test-common")) api(kotlin("test-annotations-common")) + api("org.jetbrains.kotlinx:kotlinx-coroutines-core:$coroutinesVersion") } } - val jsMain by getting { + named("jsMain") { dependencies { api(kotlin("test-js")) } diff --git a/test-utils/src/commonMain/kotlin/world/phantasmal/testUtils/TestSuite.kt b/test-utils/src/commonMain/kotlin/world/phantasmal/testUtils/TestSuite.kt index 7f0e6e80..935d6462 100644 --- a/test-utils/src/commonMain/kotlin/world/phantasmal/testUtils/TestSuite.kt +++ b/test-utils/src/commonMain/kotlin/world/phantasmal/testUtils/TestSuite.kt @@ -4,31 +4,23 @@ import kotlinx.coroutines.CoroutineScope import kotlinx.coroutines.Job import world.phantasmal.core.disposable.Disposer import world.phantasmal.core.disposable.TrackedDisposable -import kotlin.test.AfterTest -import kotlin.test.BeforeTest import kotlin.test.assertEquals abstract class TestSuite { - private var initialDisposableCount: Int = 0 - private var _disposer: Disposer? = null + fun test(block: TestContext.() -> Unit) { + val initialDisposableCount = TrackedDisposable.disposableCount + val disposer = Disposer() - protected val disposer: Disposer get() = _disposer!! - - protected val scope: CoroutineScope = object : CoroutineScope { - override val coroutineContext = Job() - } - - @BeforeTest - fun before() { - initialDisposableCount = TrackedDisposable.disposableCount - _disposer = Disposer() - } - - @AfterTest - fun after() { - _disposer!!.dispose() + block(TestContext(disposer)) + disposer.dispose() val leakCount = TrackedDisposable.disposableCount - initialDisposableCount assertEquals(0, leakCount, "TrackedDisposables were leaked") } + + class TestContext(val disposer: Disposer) { + val scope: CoroutineScope = object : CoroutineScope { + override val coroutineContext = Job() + } + } } diff --git a/web/src/main/kotlin/world/phantasmal/web/application/widgets/ApplicationWidget.kt b/web/src/main/kotlin/world/phantasmal/web/application/widgets/ApplicationWidget.kt index 787f28a8..a34e4059 100644 --- a/web/src/main/kotlin/world/phantasmal/web/application/widgets/ApplicationWidget.kt +++ b/web/src/main/kotlin/world/phantasmal/web/application/widgets/ApplicationWidget.kt @@ -9,28 +9,34 @@ class ApplicationWidget( scope: CoroutineScope, private val navigationWidget: NavigationWidget, private val mainContentWidget: MainContentWidget, -) : Widget(scope, listOf(::style)) { +) : Widget(scope) { override fun Node.createElement() = - div(className = "pw-application-application") { + div { + className = "pw-application-application" + addChild(navigationWidget) addChild(mainContentWidget) } -} -@Suppress("CssUnusedSymbol") -// language=css -private fun style() = """ -.pw-application-application { - position: fixed; - top: 0; - bottom: 0; - left: 0; - right: 0; - display: flex; - flex-direction: column; + companion object { + init { + @Suppress("CssUnusedSymbol") + // language=css + style(""" + .pw-application-application { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + display: flex; + flex-direction: column; + } + .pw-application-application .pw-application-main-content { + flex-grow: 1; + overflow: hidden; + } + """.trimIndent()) + } + } } -.pw-application-application .pw-application-main-content { - flex-grow: 1; - overflow: hidden; -} -""" diff --git a/web/src/main/kotlin/world/phantasmal/web/application/widgets/MainContentWidget.kt b/web/src/main/kotlin/world/phantasmal/web/application/widgets/MainContentWidget.kt index c7a4f853..5004bae3 100644 --- a/web/src/main/kotlin/world/phantasmal/web/application/widgets/MainContentWidget.kt +++ b/web/src/main/kotlin/world/phantasmal/web/application/widgets/MainContentWidget.kt @@ -13,27 +13,33 @@ class MainContentWidget( scope: CoroutineScope, private val ctrl: MainContentController, private val toolViews: Map Widget>, -) : Widget(scope, listOf(::style)) { +) : Widget(scope) { override fun Node.createElement() = - div(className = "pw-application-main-content") { + div { + className = "pw-application-main-content" + ctrl.tools.forEach { (tool, active) -> toolViews[tool]?.let { createWidget -> addChild(LazyLoader(scope, hidden = !active, createWidget = createWidget)) } } } -} -@Suppress("CssUnusedSymbol") -// language=css -private fun style() = """ -.pw-application-main-content { - display: flex; - flex-direction: column; -} + companion object { + init { + @Suppress("CssUnusedSymbol") + // language=css + style(""" + .pw-application-main-content { + display: flex; + flex-direction: column; + } -.pw-application-main-content > * { - flex-grow: 1; - overflow: hidden; + .pw-application-main-content > * { + flex-grow: 1; + overflow: hidden; + } + """.trimIndent()) + } + } } -""" diff --git a/web/src/main/kotlin/world/phantasmal/web/application/widgets/NavigationWidget.kt b/web/src/main/kotlin/world/phantasmal/web/application/widgets/NavigationWidget.kt index 1b00d2e9..4964dec5 100644 --- a/web/src/main/kotlin/world/phantasmal/web/application/widgets/NavigationWidget.kt +++ b/web/src/main/kotlin/world/phantasmal/web/application/widgets/NavigationWidget.kt @@ -7,56 +7,62 @@ import world.phantasmal.webui.dom.div import world.phantasmal.webui.widgets.Widget class NavigationWidget(scope: CoroutineScope, private val ctrl: NavigationController) : - Widget(scope, listOf(::style)) { + Widget(scope) { override fun Node.createElement() = - div(className = "pw-application-navigation") { + div { + className = "pw-application-navigation" + ctrl.tools.forEach { (tool, active) -> addChild(PwToolButton(scope, tool, active) { ctrl.setCurrentTool(tool) }) } } -} -@Suppress("CssUnusedSymbol", "CssUnresolvedCustomProperty") -// language=css -private fun style() = """ -.pw-application-navigation { - box-sizing: border-box; - display: flex; - flex-direction: row; - align-items: stretch; - background-color: hsl(0, 0%, 10%); - border-bottom: solid 2px var(--pw-bg-color); + companion object { + init { + @Suppress("CssUnusedSymbol", "CssUnresolvedCustomProperty") + // language=css + style(""" + .pw-application-navigation { + box-sizing: border-box; + display: flex; + flex-direction: row; + align-items: stretch; + background-color: hsl(0, 0%, 10%); + border-bottom: solid 2px var(--pw-bg-color); + } + + .pw-application-navigation-spacer { + flex-grow: 1; + } + + .pw-application-navigation-server { + display: flex; + align-items: center; + } + + .pw-application-navigation-server > * { + margin: 0 2px; + } + + .pw-application-navigation-time { + display: flex; + align-items: center; + } + + .pw-application-navigation-github { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + width: 30px; + font-size: 16px; + color: var(--pw-control-text-color); + } + + .pw-application-navigation-github:hover { + color: var(--pw-control-text-color-hover); + } + """.trimIndent()) + } + } } - -.pw-application-navigation-spacer { - flex-grow: 1; -} - -.pw-application-navigation-server { - display: flex; - align-items: center; -} - -.pw-application-navigation-server > * { - margin: 0 2px; -} - -.pw-application-navigation-time { - display: flex; - align-items: center; -} - -.pw-application-navigation-github { - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - width: 30px; - font-size: 16px; - color: var(--pw-control-text-color); -} - -.pw-application-navigation-github:hover { - color: var(--pw-control-text-color-hover); -} -""" diff --git a/web/src/main/kotlin/world/phantasmal/web/application/widgets/PwToolButton.kt b/web/src/main/kotlin/world/phantasmal/web/application/widgets/PwToolButton.kt index c8e75815..1d4108aa 100644 --- a/web/src/main/kotlin/world/phantasmal/web/application/widgets/PwToolButton.kt +++ b/web/src/main/kotlin/world/phantasmal/web/application/widgets/PwToolButton.kt @@ -14,47 +14,56 @@ class PwToolButton( private val tool: PwTool, private val toggled: Observable, private val mouseDown: () -> Unit, -) : Control(scope, listOf(::style)) { +) : Control(scope) { private val inputId = "pw-application-pw-tool-button-${tool.name.toLowerCase()}" override fun Node.createElement() = - span(className = "pw-application-pw-tool-button") { - input(type = "radio", id = inputId) { + span { + className = "pw-application-pw-tool-button" + + input { + type = "radio" + id = inputId name = "pw-application-pw-tool-button" observe(toggled) { checked = it } } - label(htmlFor = inputId) { + label { + htmlFor = inputId textContent = tool.uiName onmousedown = { mouseDown() } } } -} -@Suppress("CssUnresolvedCustomProperty") -// language=css -private fun style() = """ -.pw-application-pw-tool-button input { - display: none; + companion object { + init { + @Suppress("CssUnresolvedCustomProperty") + // language=css + style(""" + .pw-application-pw-tool-button input { + display: none; + } + + .pw-application-pw-tool-button label { + box-sizing: border-box; + display: inline-flex; + flex-direction: row; + align-items: center; + font-size: 13px; + height: 100%; + padding: 0 20px; + color: hsl(0, 0%, 65%); + } + + .pw-application-pw-tool-button label:hover { + color: hsl(0, 0%, 85%); + background-color: hsl(0, 0%, 12%); + } + + .pw-application-pw-tool-button input:checked + label { + color: hsl(0, 0%, 85%); + background-color: var(--pw-bg-color); + } + """.trimIndent()) + } + } } - -.pw-application-pw-tool-button label { - box-sizing: border-box; - display: inline-flex; - flex-direction: row; - align-items: center; - font-size: 13px; - height: 100%; - padding: 0 20px; - color: hsl(0, 0%, 65%); -} - -.pw-application-pw-tool-button label:hover { - color: hsl(0, 0%, 85%); - background-color: hsl(0, 0%, 12%); -} - -.pw-application-pw-tool-button input:checked + label { - color: hsl(0, 0%, 85%); - background-color: var(--pw-bg-color); -} -""" diff --git a/web/src/main/kotlin/world/phantasmal/web/core/widgets/DockWidget.kt b/web/src/main/kotlin/world/phantasmal/web/core/widgets/DockWidget.kt index 129f2873..54dab99b 100644 --- a/web/src/main/kotlin/world/phantasmal/web/core/widgets/DockWidget.kt +++ b/web/src/main/kotlin/world/phantasmal/web/core/widgets/DockWidget.kt @@ -46,7 +46,7 @@ class DockWidget( scope: CoroutineScope, hidden: Val = falseVal(), private val item: DockedItem, -) : Widget(scope, listOf(::style), hidden) { +) : Widget(scope, hidden) { private lateinit var goldenLayout: GoldenLayout init { @@ -56,7 +56,9 @@ class DockWidget( } override fun Node.createElement() = - div(className = "pw-core-dock") { + div { + className = "pw-core-dock" + val idToCreate = mutableMapOf Widget>() val config = newJsObject { @@ -141,101 +143,105 @@ class DockWidget( } } } -} -// Use #pw-root for higher specificity than the default GoldenLayout CSS. -@Suppress("CssUnusedSymbol", "CssUnresolvedCustomProperty") -// language=css -private fun style() = """ -.pw-core-dock { - width: 100%; - height: 100%; + companion object { + init { + // Use #pw-root for higher specificity than the default GoldenLayout CSS. + @Suppress("CssUnusedSymbol", "CssUnresolvedCustomProperty") + // language=css + style(""" + .pw-core-dock { + width: 100%; + height: 100%; + } + + #pw-root .lm_header { + box-sizing: border-box; + height: ${HEADER_HEIGHT + 4}px; + padding: 3px 0 0 0; + border-bottom: var(--pw-border); + } + + #pw-root .lm_header .lm_tabs { + padding: 0 3px; + } + + #pw-root .lm_header .lm_tabs .lm_tab { + cursor: default; + display: inline-flex; + align-items: center; + height: 23px; + padding: 0 10px; + border: var(--pw-border); + margin: 0 1px -1px 1px; + background-color: hsl(0, 0%, 12%); + color: hsl(0, 0%, 75%); + font-size: 13px; + } + + #pw-root .lm_header .lm_tabs .lm_tab:hover { + background-color: hsl(0, 0%, 18%); + color: hsl(0, 0%, 85%); + } + + #pw-root .lm_header .lm_tabs .lm_tab.lm_active { + background-color: var(--pw-bg-color); + color: hsl(0, 0%, 90%); + border-bottom-color: var(--pw-bg-color); + } + + #pw-root .lm_header .lm_controls > li { + cursor: default; + } + + #pw-root .lm_header .lm_controls .lm_close { + /* a white 9x9 X shape */ + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQUlEQVR4nHXOQQ4AMAgCQeT/f6aXpsGK3jSTuCVJAAr7iBdoAwCKd0nwfaAdHbYERw5b44+E8JoBjEYGMBq5gAYP3usUDu2IvoUAAAAASUVORK5CYII=); + background-position: center center; + background-repeat: no-repeat; + cursor: pointer; + opacity: 0.4; + transition: opacity 300ms ease; + } + + #pw-root .lm_header .lm_controls .lm_close:hover { + opacity: 1; + } + + #pw-root .lm_content > * { + width: 100%; + /* Subtract HEADER_HEIGHT_DIFF px as workaround for bug related to headerHeight. */ + height: calc(100% - ${HEADER_HEIGHT_DIFF}px); + } + + #pw-root .lm_splitter { + box-sizing: border-box; + background-color: hsl(0, 0%, 20%); + } + + #pw-root .lm_splitter.lm_vertical { + border-top: var(--pw-border); + border-bottom: var(--pw-border); + } + + #pw-root .lm_splitter.lm_horizontal { + border-left: var(--pw-border); + border-right: var(--pw-border); + } + + #pw-root .lm_dragProxy > .lm_content { + box-sizing: border-box; + background-color: var(--pw-bg-color); + border-left: var(--pw-border); + border-right: var(--pw-border); + border-bottom: var(--pw-border); + } + + #pw-root .lm_dropTargetIndicator { + box-sizing: border-box; + background-color: hsla(0, 0%, 50%, 0.2); + } + """.trimIndent()) + } + } } - -#pw-root .lm_header { - box-sizing: border-box; - height: ${HEADER_HEIGHT + 4}px; - padding: 3px 0 0 0; - border-bottom: var(--pw-border); -} - -#pw-root .lm_header .lm_tabs { - padding: 0 3px; -} - -#pw-root .lm_header .lm_tabs .lm_tab { - cursor: default; - display: inline-flex; - align-items: center; - height: 23px; - padding: 0 10px; - border: var(--pw-border); - margin: 0 1px -1px 1px; - background-color: hsl(0, 0%, 12%); - color: hsl(0, 0%, 75%); - font-size: 13px; -} - -#pw-root .lm_header .lm_tabs .lm_tab:hover { - background-color: hsl(0, 0%, 18%); - color: hsl(0, 0%, 85%); -} - -#pw-root .lm_header .lm_tabs .lm_tab.lm_active { - background-color: var(--pw-bg-color); - color: hsl(0, 0%, 90%); - border-bottom-color: var(--pw-bg-color); -} - -#pw-root .lm_header .lm_controls > li { - cursor: default; -} - -#pw-root .lm_header .lm_controls .lm_close { - /* a white 9x9 X shape */ - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQUlEQVR4nHXOQQ4AMAgCQeT/f6aXpsGK3jSTuCVJAAr7iBdoAwCKd0nwfaAdHbYERw5b44+E8JoBjEYGMBq5gAYP3usUDu2IvoUAAAAASUVORK5CYII=); - background-position: center center; - background-repeat: no-repeat; - cursor: pointer; - opacity: 0.4; - transition: opacity 300ms ease; -} - -#pw-root .lm_header .lm_controls .lm_close:hover { - opacity: 1; -} - -#pw-root .lm_content > * { - width: 100%; - /* Subtract HEADER_HEIGHT_DIFF px as workaround for bug related to headerHeight. */ - height: calc(100% - ${HEADER_HEIGHT_DIFF}px); -} - -#pw-root .lm_splitter { - box-sizing: border-box; - background-color: hsl(0, 0%, 20%); -} - -#pw-root .lm_splitter.lm_vertical { - border-top: var(--pw-border); - border-bottom: var(--pw-border); -} - -#pw-root .lm_splitter.lm_horizontal { - border-left: var(--pw-border); - border-right: var(--pw-border); -} - -#pw-root .lm_dragProxy > .lm_content { - box-sizing: border-box; - background-color: var(--pw-bg-color); - border-left: var(--pw-border); - border-right: var(--pw-border); - border-bottom: var(--pw-border); -} - -#pw-root .lm_dropTargetIndicator { - box-sizing: border-box; - background-color: hsla(0, 0%, 50%, 0.2); -} -""" diff --git a/web/src/main/kotlin/world/phantasmal/web/core/widgets/RendererWidget.kt b/web/src/main/kotlin/world/phantasmal/web/core/widgets/RendererWidget.kt index c3455d2e..e341d0b8 100644 --- a/web/src/main/kotlin/world/phantasmal/web/core/widgets/RendererWidget.kt +++ b/web/src/main/kotlin/world/phantasmal/web/core/widgets/RendererWidget.kt @@ -12,9 +12,11 @@ import kotlin.math.floor class RendererWidget( scope: CoroutineScope, private val createEngine: (HTMLCanvasElement) -> Engine, -) : Widget(scope, listOf(::style)) { +) : Widget(scope) { override fun Node.createElement() = - canvas(className = "pw-core-renderer") { + canvas { + className = "pw-core-renderer" + observeResize() addDisposable(QuestRenderer(this, createEngine)) } @@ -24,13 +26,17 @@ class RendererWidget( canvas.width = floor(width).toInt() canvas.height = floor(height).toInt() } -} -@Suppress("CssUnusedSymbol") -// language=css -private fun style() = """ -.pw-core-renderer { - width: 100%; - height: 100%; + companion object { + init { + @Suppress("CssUnusedSymbol") + // language=css + style(""" + .pw-core-renderer { + width: 100%; + height: 100%; + } + """.trimIndent()) + } + } } -""" diff --git a/web/src/main/kotlin/world/phantasmal/web/core/widgets/UnavailableWidget.kt b/web/src/main/kotlin/world/phantasmal/web/core/widgets/UnavailableWidget.kt new file mode 100644 index 00000000..d4f510c6 --- /dev/null +++ b/web/src/main/kotlin/world/phantasmal/web/core/widgets/UnavailableWidget.kt @@ -0,0 +1,39 @@ +package world.phantasmal.web.core.widgets + +import kotlinx.coroutines.CoroutineScope +import org.w3c.dom.Node +import world.phantasmal.observable.value.Val +import world.phantasmal.observable.value.trueVal +import world.phantasmal.webui.dom.div +import world.phantasmal.webui.widgets.Label +import world.phantasmal.webui.widgets.Widget + +class UnavailableWidget( + scope: CoroutineScope, + hidden: Val, + private val message: String, +) : Widget(scope, hidden) { + override fun Node.createElement() = + div { + className = "pw-core-unavailable" + + addWidget(Label(scope, disabled = trueVal(), text = message)) + } + + companion object { + init { + @Suppress("CssUnusedSymbol") + // language=css + style(""" + .pw-core-unavailable { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + text-align: center; + } + """.trimIndent()) + } + } +} diff --git a/web/src/main/kotlin/world/phantasmal/web/huntOptimizer/widgets/HelpWidget.kt b/web/src/main/kotlin/world/phantasmal/web/huntOptimizer/widgets/HelpWidget.kt index b24699f0..a8ef1265 100644 --- a/web/src/main/kotlin/world/phantasmal/web/huntOptimizer/widgets/HelpWidget.kt +++ b/web/src/main/kotlin/world/phantasmal/web/huntOptimizer/widgets/HelpWidget.kt @@ -6,9 +6,11 @@ import world.phantasmal.webui.dom.div import world.phantasmal.webui.dom.p import world.phantasmal.webui.widgets.Widget -class HelpWidget(scope: CoroutineScope) : Widget(scope, listOf(::style)) { +class HelpWidget(scope: CoroutineScope) : Widget(scope) { override fun Node.createElement() = - div(className = "pw-hunt-optimizer-help") { + div { + className = "pw-hunt-optimizer-help" + p { textContent = "Add some items with the combo box on the left to see the optimal combination of hunt methods on the right." @@ -25,18 +27,22 @@ class HelpWidget(scope: CoroutineScope) : Widget(scope, listOf(::style)) { "The optimal result is calculated using linear optimization. The optimizer takes into account rare enemies and the fact that pan arms can be split in two." } } -} -@Suppress("CssUnusedSymbol") -// language=css -private fun style() = """ -.pw-hunt-optimizer-help { - cursor: initial; - user-select: text; + companion object { + init { + @Suppress("CssUnusedSymbol") + // language=css + style(""" + .pw-hunt-optimizer-help { + cursor: initial; + user-select: text; + } + + .pw-hunt-optimizer-help p { + margin: 1em; + max-width: 600px; + } + """.trimIndent()) + } + } } - -.pw-hunt-optimizer-help p { - margin: 1em; - max-width: 600px; -} -""" diff --git a/web/src/main/kotlin/world/phantasmal/web/huntOptimizer/widgets/HuntOptimizerWidget.kt b/web/src/main/kotlin/world/phantasmal/web/huntOptimizer/widgets/HuntOptimizerWidget.kt index da007da0..1417f79d 100644 --- a/web/src/main/kotlin/world/phantasmal/web/huntOptimizer/widgets/HuntOptimizerWidget.kt +++ b/web/src/main/kotlin/world/phantasmal/web/huntOptimizer/widgets/HuntOptimizerWidget.kt @@ -12,37 +12,44 @@ class HuntOptimizerWidget( scope: CoroutineScope, private val ctrl: HuntOptimizerController, private val createMethodsWidget: (CoroutineScope) -> MethodsWidget, -) : Widget(scope, listOf(::style)) { - override fun Node.createElement() = div(className = "pw-hunt-optimizer-hunt-optimizer") { - addChild(TabContainer( - scope, - ctrl = ctrl, - createWidget = { scope, tab -> - when (tab.path) { - HuntOptimizerUrls.optimize -> object : Widget(scope) { - override fun Node.createElement() = div { - textContent = "TODO" +) : Widget(scope) { + override fun Node.createElement() = + div { + className = "pw-hunt-optimizer-hunt-optimizer" + + addChild(TabContainer( + scope, + ctrl = ctrl, + createWidget = { scope, tab -> + when (tab.path) { + HuntOptimizerUrls.optimize -> object : Widget(scope) { + override fun Node.createElement() = div { + textContent = "TODO" + } } + HuntOptimizerUrls.methods -> createMethodsWidget(scope) + HuntOptimizerUrls.help -> HelpWidget(scope) + else -> error("""Unknown tab "${tab.title}".""") } - HuntOptimizerUrls.methods -> createMethodsWidget(scope) - HuntOptimizerUrls.help -> HelpWidget(scope) - else -> error("""Unknown tab "${tab.title}".""") } - } - )) + )) + } + + companion object { + init { + @Suppress("CssUnusedSymbol") + // language=css + style(""" + .pw-hunt-optimizer-hunt-optimizer { + display: flex; + flex-direction: column; + } + + .pw-hunt-optimizer-hunt-optimizer > * { + flex-grow: 1; + overflow: hidden; + } + """.trimIndent()) + } } } - -@Suppress("CssUnusedSymbol") -// language=css -private fun style() = """ -.pw-hunt-optimizer-hunt-optimizer { - display: flex; - flex-direction: column; -} - -.pw-hunt-optimizer-hunt-optimizer > * { - flex-grow: 1; - overflow: hidden; -} -""" diff --git a/web/src/main/kotlin/world/phantasmal/web/huntOptimizer/widgets/MethodsForEpisodeWidget.kt b/web/src/main/kotlin/world/phantasmal/web/huntOptimizer/widgets/MethodsForEpisodeWidget.kt index e9798d59..103c662c 100644 --- a/web/src/main/kotlin/world/phantasmal/web/huntOptimizer/widgets/MethodsForEpisodeWidget.kt +++ b/web/src/main/kotlin/world/phantasmal/web/huntOptimizer/widgets/MethodsForEpisodeWidget.kt @@ -11,19 +11,25 @@ class MethodsForEpisodeWidget( scope: CoroutineScope, private val ctrl: MethodsController, private val episode: Episode, -) : Widget(scope, listOf(::style)) { +) : Widget(scope) { override fun Node.createElement() = - div(className = "pw-hunt-optimizer-methods-for-episode") { + div { + className = "pw-hunt-optimizer-methods-for-episode" + bindChildrenTo(ctrl.episodeToMethods.getValue(episode)) { method, _ -> div { textContent = method.name } } } -} -@Suppress("CssUnusedSymbol") -// language=css -private fun style() = """ -.pw-hunt-optimizer-methods-for-episode { - overflow: auto; + companion object { + init { + @Suppress("CssUnusedSymbol") + // language=css + style(""" + .pw-hunt-optimizer-methods-for-episode { + overflow: auto; + } + """.trimIndent()) + } + } } -""" diff --git a/web/src/main/kotlin/world/phantasmal/web/huntOptimizer/widgets/MethodsWidget.kt b/web/src/main/kotlin/world/phantasmal/web/huntOptimizer/widgets/MethodsWidget.kt index 5576d2f1..a4ffa13b 100644 --- a/web/src/main/kotlin/world/phantasmal/web/huntOptimizer/widgets/MethodsWidget.kt +++ b/web/src/main/kotlin/world/phantasmal/web/huntOptimizer/widgets/MethodsWidget.kt @@ -10,25 +10,31 @@ import world.phantasmal.webui.widgets.Widget class MethodsWidget( scope: CoroutineScope, private val ctrl: MethodsController, -) : Widget(scope, listOf(::style)) { +) : Widget(scope) { override fun Node.createElement() = - div(className = "pw-hunt-optimizer-methods") { + div { + className = "pw-hunt-optimizer-methods" + addChild(TabContainer(scope, ctrl = ctrl, createWidget = { scope, tab -> MethodsForEpisodeWidget(scope, ctrl, tab.episode) })) } -} -@Suppress("CssUnusedSymbol") -// language=css -private fun style() = """ -.pw-hunt-optimizer-methods { - display: flex; - flex-direction: column; + companion object { + init { + @Suppress("CssUnusedSymbol") + // language=css + style(""" + .pw-hunt-optimizer-methods { + display: flex; + flex-direction: column; + } + + .pw-hunt-optimizer-methods > * { + flex-grow: 1; + overflow: hidden; + } + """.trimIndent()) + } + } } - -.pw-hunt-optimizer-methods > * { - flex-grow: 1; - overflow: hidden; -} -""" diff --git a/web/src/main/kotlin/world/phantasmal/web/questEditor/controllers/QuestInfoController.kt b/web/src/main/kotlin/world/phantasmal/web/questEditor/controllers/QuestInfoController.kt index 2a6ab304..06a28673 100644 --- a/web/src/main/kotlin/world/phantasmal/web/questEditor/controllers/QuestInfoController.kt +++ b/web/src/main/kotlin/world/phantasmal/web/questEditor/controllers/QuestInfoController.kt @@ -7,5 +7,8 @@ import world.phantasmal.web.questEditor.stores.QuestEditorStore import world.phantasmal.webui.controllers.Controller class QuestInfoController(scope: CoroutineScope, store: QuestEditorStore) : Controller(scope) { + val unavailable = store.currentQuest.transform { it == null } + val episode: Val = store.currentQuest.transform { it?.episode?.name ?: "" } val id: Val = store.currentQuest.flatTransform { it?.id ?: value(0) } + val name: Val = store.currentQuest.flatTransform { it?.name ?: value("") } } diff --git a/web/src/main/kotlin/world/phantasmal/web/questEditor/models/QuestModel.kt b/web/src/main/kotlin/world/phantasmal/web/questEditor/models/QuestModel.kt index 990d4ed2..1d422b7e 100644 --- a/web/src/main/kotlin/world/phantasmal/web/questEditor/models/QuestModel.kt +++ b/web/src/main/kotlin/world/phantasmal/web/questEditor/models/QuestModel.kt @@ -1,5 +1,6 @@ package world.phantasmal.web.questEditor.models +import world.phantasmal.lib.fileFormats.quest.Episode import world.phantasmal.observable.value.Val import world.phantasmal.observable.value.mutableVal @@ -9,6 +10,7 @@ class QuestModel( name: String, shortDescription: String, longDescription: String, + val episode: Episode, ) { private val _id = mutableVal(0) private val _language = mutableVal(0) diff --git a/web/src/main/kotlin/world/phantasmal/web/questEditor/stores/ModelConversion.kt b/web/src/main/kotlin/world/phantasmal/web/questEditor/stores/ModelConversion.kt index 07d4f52f..b5871e55 100644 --- a/web/src/main/kotlin/world/phantasmal/web/questEditor/stores/ModelConversion.kt +++ b/web/src/main/kotlin/world/phantasmal/web/questEditor/stores/ModelConversion.kt @@ -9,6 +9,7 @@ fun convertQuestToModel(quest: Quest): QuestModel { quest.language, quest.name, quest.shortDescription, - quest.longDescription + quest.longDescription, + quest.episode, ) } diff --git a/web/src/main/kotlin/world/phantasmal/web/questEditor/widgets/QuestEditorToolbar.kt b/web/src/main/kotlin/world/phantasmal/web/questEditor/widgets/QuestEditorToolbar.kt index 9809bbc1..11f106af 100644 --- a/web/src/main/kotlin/world/phantasmal/web/questEditor/widgets/QuestEditorToolbar.kt +++ b/web/src/main/kotlin/world/phantasmal/web/questEditor/widgets/QuestEditorToolbar.kt @@ -12,18 +12,21 @@ class QuestEditorToolbar( scope: CoroutineScope, private val ctrl: QuestEditorToolbarController, ) : Widget(scope) { - override fun Node.createElement() = div(className = "pw-quest-editor-toolbar") { - addChild(Toolbar( - scope, - children = listOf( - FileButton( - scope, - text = "Open file...", - accept = ".bin, .dat, .qst", - multiple = true, - filesSelected = ctrl::openFiles + override fun Node.createElement() = + div { + className = "pw-quest-editor-toolbar" + + addChild(Toolbar( + scope, + children = listOf( + FileButton( + scope, + text = "Open file...", + accept = ".bin, .dat, .qst", + multiple = true, + filesSelected = ctrl::openFiles + ) ) - ) - )) - } + )) + } } diff --git a/web/src/main/kotlin/world/phantasmal/web/questEditor/widgets/QuestEditorWidget.kt b/web/src/main/kotlin/world/phantasmal/web/questEditor/widgets/QuestEditorWidget.kt index 6b0e2510..732d06b7 100644 --- a/web/src/main/kotlin/world/phantasmal/web/questEditor/widgets/QuestEditorWidget.kt +++ b/web/src/main/kotlin/world/phantasmal/web/questEditor/widgets/QuestEditorWidget.kt @@ -22,9 +22,11 @@ open class QuestEditorWidget( private val toolbar: Widget, private val createQuestInfoWidget: (CoroutineScope) -> Widget, private val createQuestRendererWidget: (CoroutineScope) -> Widget, -) : Widget(scope, listOf(::style)) { +) : Widget(scope) { override fun Node.createElement() = - div(className = "pw-quest-editor-quest-editor") { + div { + className = "pw-quest-editor-quest-editor" + addChild(toolbar) addChild(DockWidget( scope, @@ -93,17 +95,21 @@ open class QuestEditorWidget( ) )) } -} -@Suppress("CssUnusedSymbol") -// language=css -private fun style() = """ -.pw-quest-editor-quest-editor { - display: flex; - flex-direction: column; - overflow: hidden; + companion object { + init { + @Suppress("CssUnusedSymbol") + // language=css + style(""" + .pw-quest-editor-quest-editor { + display: flex; + flex-direction: column; + overflow: hidden; + } + .pw-quest-editor-quest-editor > * { + flex-grow: 1; + } + """.trimIndent()) + } + } } -.pw-quest-editor-quest-editor > * { - flex-grow: 1; -} -""" diff --git a/web/src/main/kotlin/world/phantasmal/web/questEditor/widgets/QuestInfoWidget.kt b/web/src/main/kotlin/world/phantasmal/web/questEditor/widgets/QuestInfoWidget.kt index c038aebb..63e752be 100644 --- a/web/src/main/kotlin/world/phantasmal/web/questEditor/widgets/QuestInfoWidget.kt +++ b/web/src/main/kotlin/world/phantasmal/web/questEditor/widgets/QuestInfoWidget.kt @@ -2,21 +2,29 @@ package world.phantasmal.web.questEditor.widgets import kotlinx.coroutines.CoroutineScope import org.w3c.dom.Node +import world.phantasmal.observable.value.not +import world.phantasmal.web.core.widgets.UnavailableWidget import world.phantasmal.web.questEditor.controllers.QuestInfoController import world.phantasmal.webui.dom.* import world.phantasmal.webui.widgets.IntInput +import world.phantasmal.webui.widgets.TextInput import world.phantasmal.webui.widgets.Widget class QuestInfoWidget( scope: CoroutineScope, private val ctrl: QuestInfoController, -) : Widget(scope, listOf(::style)) { +) : Widget(scope) { override fun Node.createElement() = - div(className = "pw-quest-editor-quest-info", tabIndex = -1) { + div { + className = "pw-quest-editor-quest-info" + tabIndex = -1 + table { + hidden(ctrl.unavailable) + tr { th { textContent = "Episode:" } - td() + td { text(ctrl.episode) } } tr { th { textContent = "ID:" } @@ -25,41 +33,60 @@ class QuestInfoWidget( this@QuestInfoWidget.scope, valueVal = ctrl.id, min = 0, - step = 0 + step = 1 + )) + } + } + tr { + th { textContent = "Name:" } + td { + addChild(TextInput( + this@QuestInfoWidget.scope, + valueVal = ctrl.name, + maxLength = 32 )) } } } + addChild(UnavailableWidget( + scope, + hidden = !ctrl.unavailable, + message = "No quest loaded." + )) } -} -@Suppress("CssUnusedSymbol") -// language=css -private fun style() = """ -.pw-quest-editor-quest-info { - box-sizing: border-box; - padding: 3px; - overflow: auto; - outline: none; + companion object { + init { + @Suppress("CssUnusedSymbol") + // language=css + style(""" + .pw-quest-editor-quest-info { + box-sizing: border-box; + padding: 3px; + overflow: auto; + outline: none; + } + + .pw-quest-editor-quest-info table { + width: 100%; + } + + .pw-quest-editor-quest-info th { + text-align: left; + } + + .pw-quest-editor-quest-info .pw-text-input { + width: 100%; + } + + .pw-quest-editor-quest-info .pw-text-area { + width: 100%; + } + + .pw-quest-editor-quest-info textarea { + width: 100%; + } + """.trimIndent()) + } + } } - -.pw-quest-editor-quest-info table { - width: 100%; -} - -.pw-quest-editor-quest-info th { - text-align: left; -} - -.pw-quest-editor-quest-info .pw-text-input { - width: 100%; -} - -.pw-quest-editor-quest-info .pw-text-area { - width: 100%; -} - -.pw-quest-editor-quest-info textarea { - width: 100%; -} -""" diff --git a/web/src/main/kotlin/world/phantasmal/web/questEditor/widgets/QuestRendererWidget.kt b/web/src/main/kotlin/world/phantasmal/web/questEditor/widgets/QuestRendererWidget.kt index e4554a7d..d5079a2d 100644 --- a/web/src/main/kotlin/world/phantasmal/web/questEditor/widgets/QuestRendererWidget.kt +++ b/web/src/main/kotlin/world/phantasmal/web/questEditor/widgets/QuestRendererWidget.kt @@ -11,20 +11,27 @@ import world.phantasmal.webui.widgets.Widget abstract class QuestRendererWidget( scope: CoroutineScope, private val createEngine: (HTMLCanvasElement) -> Engine, -) : Widget(scope, listOf(::style)) { - override fun Node.createElement() = div(className = "pw-quest-editor-quest-renderer") { - addChild(RendererWidget(scope, createEngine)) +) : Widget(scope) { + override fun Node.createElement() = + div { + className = "pw-quest-editor-quest-renderer" + + addChild(RendererWidget(scope, createEngine)) + } + + companion object { + init { + @Suppress("CssUnusedSymbol") + // language=css + style(""" + .pw-quest-editor-quest-renderer { + display: flex; + overflow: hidden; + } + .pw-quest-editor-quest-renderer > * { + flex-grow: 1; + } + """.trimIndent()) + } } } - -@Suppress("CssUnusedSymbol") -// language=css -private fun style() = """ -.pw-quest-editor-quest-renderer { - display: flex; - overflow: hidden; -} -.pw-quest-editor-quest-renderer > * { - flex-grow: 1; -} -""" diff --git a/web/src/test/kotlin/world/phantasmal/web/application/ApplicationTests.kt b/web/src/test/kotlin/world/phantasmal/web/application/ApplicationTests.kt index e5bbfbea..3f9abafd 100644 --- a/web/src/test/kotlin/world/phantasmal/web/application/ApplicationTests.kt +++ b/web/src/test/kotlin/world/phantasmal/web/application/ApplicationTests.kt @@ -17,7 +17,7 @@ import kotlin.test.Test class ApplicationTests : TestSuite() { @Test - fun initialization_and_shutdown_should_succeed_without_throwing() { + fun initialization_and_shutdown_should_succeed_without_throwing() = test { (listOf(null) + PwTool.values().toList()).forEach { tool -> Disposer().use { disposer -> val httpClient = HttpClient { diff --git a/web/src/test/kotlin/world/phantasmal/web/core/controllers/PathAwareTabControllerTests.kt b/web/src/test/kotlin/world/phantasmal/web/core/controllers/PathAwareTabControllerTests.kt index ac2d55b1..20729000 100644 --- a/web/src/test/kotlin/world/phantasmal/web/core/controllers/PathAwareTabControllerTests.kt +++ b/web/src/test/kotlin/world/phantasmal/web/core/controllers/PathAwareTabControllerTests.kt @@ -10,7 +10,7 @@ import kotlin.test.assertFalse class PathAwareTabControllerTests : TestSuite() { @Test - fun activeTab_is_initialized_correctly() { + fun activeTab_is_initialized_correctly() = test { setup { ctrl, appUrl -> assertEquals("/b", ctrl.activeTab.value?.path) assertFalse(appUrl.canGoBack) @@ -19,7 +19,7 @@ class PathAwareTabControllerTests : TestSuite() { } @Test - fun applicationUrl_changes_when_activeTab_changes() { + fun applicationUrl_changes_when_activeTab_changes() = test { setup { ctrl, appUrl -> ctrl.setActiveTab(ctrl.tabs[2]) @@ -30,7 +30,7 @@ class PathAwareTabControllerTests : TestSuite() { } @Test - fun activeTab_changes_when_applicationUrl_changes() { + fun activeTab_changes_when_applicationUrl_changes() = test { setup { ctrl, applicationUrl -> applicationUrl.pushUrl("/${PwTool.HuntOptimizer.slug}/c") @@ -39,7 +39,7 @@ class PathAwareTabControllerTests : TestSuite() { } @Test - fun applicationUrl_changes_when_switch_to_tool_with_tabs() { + fun applicationUrl_changes_when_switch_to_tool_with_tabs() = test { val appUrl = TestApplicationUrl("/") val uiStore = disposer.add(UiStore(scope, appUrl)) @@ -66,7 +66,7 @@ class PathAwareTabControllerTests : TestSuite() { assertEquals("/${uiStore.defaultTool.slug}", appUrl.url.value) } - private fun setup( + private fun TestContext.setup( block: (PathAwareTabController, applicationUrl: TestApplicationUrl) -> Unit, ) { val applicationUrl = TestApplicationUrl("/${PwTool.HuntOptimizer.slug}/b") diff --git a/web/src/test/kotlin/world/phantasmal/web/core/store/UiStoreTests.kt b/web/src/test/kotlin/world/phantasmal/web/core/store/UiStoreTests.kt index 3cd02921..877f4ad4 100644 --- a/web/src/test/kotlin/world/phantasmal/web/core/store/UiStoreTests.kt +++ b/web/src/test/kotlin/world/phantasmal/web/core/store/UiStoreTests.kt @@ -9,7 +9,7 @@ import kotlin.test.assertEquals class UiStoreTests : TestSuite() { @Test - fun applicationUrl_is_initialized_correctly() { + fun applicationUrl_is_initialized_correctly() = test { val applicationUrl = TestApplicationUrl("/") val uiStore = disposer.add(UiStore(scope, applicationUrl)) @@ -18,7 +18,7 @@ class UiStoreTests : TestSuite() { } @Test - fun applicationUrl_changes_when_tool_changes() { + fun applicationUrl_changes_when_tool_changes() = test { val applicationUrl = TestApplicationUrl("/") val uiStore = disposer.add(UiStore(scope, applicationUrl)) @@ -31,7 +31,7 @@ class UiStoreTests : TestSuite() { } @Test - fun applicationUrl_changes_when_path_changes() { + fun applicationUrl_changes_when_path_changes() = test { val applicationUrl = TestApplicationUrl("/") val uiStore = disposer.add(UiStore(scope, applicationUrl)) @@ -46,7 +46,7 @@ class UiStoreTests : TestSuite() { } @Test - fun currentTool_and_path_change_when_applicationUrl_changes() { + fun currentTool_and_path_change_when_applicationUrl_changes() = test { val applicationUrl = TestApplicationUrl("/") val uiStore = disposer.add(UiStore(scope, applicationUrl)) @@ -61,7 +61,7 @@ class UiStoreTests : TestSuite() { } @Test - fun browser_navigation_stack_is_manipulated_correctly() { + fun browser_navigation_stack_is_manipulated_correctly() = test { val appUrl = TestApplicationUrl("/") val uiStore = disposer.add(UiStore(scope, appUrl)) diff --git a/web/src/test/kotlin/world/phantasmal/web/huntOptimizer/HuntOptimizerTests.kt b/web/src/test/kotlin/world/phantasmal/web/huntOptimizer/HuntOptimizerTests.kt index 3160430b..db4894a0 100644 --- a/web/src/test/kotlin/world/phantasmal/web/huntOptimizer/HuntOptimizerTests.kt +++ b/web/src/test/kotlin/world/phantasmal/web/huntOptimizer/HuntOptimizerTests.kt @@ -14,7 +14,7 @@ import kotlin.test.Test class HuntOptimizerTests : TestSuite() { @Test - fun initialization_and_shutdown_should_succeed_without_throwing() { + fun initialization_and_shutdown_should_succeed_without_throwing() = test { val httpClient = HttpClient { install(JsonFeature) { serializer = KotlinxSerializer(kotlinx.serialization.json.Json { diff --git a/web/src/test/kotlin/world/phantasmal/web/questEditor/QuestEditorTests.kt b/web/src/test/kotlin/world/phantasmal/web/questEditor/QuestEditorTests.kt index f4262bed..0e8cf40f 100644 --- a/web/src/test/kotlin/world/phantasmal/web/questEditor/QuestEditorTests.kt +++ b/web/src/test/kotlin/world/phantasmal/web/questEditor/QuestEditorTests.kt @@ -14,7 +14,7 @@ import kotlin.test.Test class QuestEditorTests : TestSuite() { @Test - fun initialization_and_shutdown_should_succeed_without_throwing() { + fun initialization_and_shutdown_should_succeed_without_throwing() = test { val httpClient = HttpClient { install(JsonFeature) { serializer = KotlinxSerializer(kotlinx.serialization.json.Json { diff --git a/webui/src/main/kotlin/world/phantasmal/webui/dom/Dom.kt b/webui/src/main/kotlin/world/phantasmal/webui/dom/Dom.kt index b01485a9..f02555f7 100644 --- a/webui/src/main/kotlin/world/phantasmal/webui/dom/Dom.kt +++ b/webui/src/main/kotlin/world/phantasmal/webui/dom/Dom.kt @@ -2,14 +2,13 @@ package world.phantasmal.webui.dom import kotlinx.browser.document import kotlinx.dom.appendText -import kotlinx.dom.clear -import org.w3c.dom.* +import org.w3c.dom.AddEventListenerOptions +import org.w3c.dom.HTMLElement +import org.w3c.dom.HTMLStyleElement import org.w3c.dom.events.Event import org.w3c.dom.events.EventTarget import world.phantasmal.core.disposable.Disposable import world.phantasmal.core.disposable.disposable -import world.phantasmal.observable.value.list.ListVal -import world.phantasmal.observable.value.list.ListValChangeEvent fun disposableListener( target: EventTarget, diff --git a/webui/src/main/kotlin/world/phantasmal/webui/dom/DomCreation.kt b/webui/src/main/kotlin/world/phantasmal/webui/dom/DomCreation.kt index e051b60c..a23fbf64 100644 --- a/webui/src/main/kotlin/world/phantasmal/webui/dom/DomCreation.kt +++ b/webui/src/main/kotlin/world/phantasmal/webui/dom/DomCreation.kt @@ -3,227 +3,68 @@ package world.phantasmal.webui.dom import kotlinx.browser.document import org.w3c.dom.* -fun Node.a( - href: String? = null, - id: String? = null, - className: String? = null, - title: String? = null, - tabIndex: Int? = null, - block: HTMLAnchorElement.() -> Unit = {}, -): HTMLAnchorElement = - appendHtmlEl("A", id, className, title, tabIndex) { - if (href != null) this.href = href - block() - } +fun Node.a(block: HTMLAnchorElement.() -> Unit = {}): HTMLAnchorElement = + appendHtmlEl("A", block) -fun Node.button( - type: String? = null, - id: String? = null, - className: String? = null, - title: String? = null, - tabIndex: Int? = null, - block: HTMLButtonElement.() -> Unit = {}, -): HTMLButtonElement = - appendHtmlEl("BUTTON", id, className, title, tabIndex) { - if (type != null) this.type = type - block() - } +fun Node.button(block: HTMLButtonElement.() -> Unit = {}): HTMLButtonElement = + appendHtmlEl("BUTTON", block) -fun Node.canvas( - id: String? = null, - className: String? = null, - title: String? = null, - tabIndex: Int? = null, - block: HTMLCanvasElement.() -> Unit = {}, -): HTMLCanvasElement = - appendHtmlEl("CANVAS", id, className, title, tabIndex, block) +fun Node.canvas(block: HTMLCanvasElement.() -> Unit = {}): HTMLCanvasElement = + appendHtmlEl("CANVAS", block) -fun Node.div( - id: String? = null, - className: String? = null, - title: String? = null, - tabIndex: Int? = null, - block: HTMLDivElement .() -> Unit = {}, -): HTMLDivElement = - appendHtmlEl("DIV", id, className, title, tabIndex, block) +fun Node.div(block: HTMLDivElement .() -> Unit = {}): HTMLDivElement = + appendHtmlEl("DIV", block) -fun Node.form( - id: String? = null, - className: String? = null, - title: String? = null, - tabIndex: Int? = null, - block: HTMLFormElement.() -> Unit = {}, -): HTMLFormElement = - appendHtmlEl("FORM", id, className, title, tabIndex, block) +fun Node.form(block: HTMLFormElement.() -> Unit = {}): HTMLFormElement = + appendHtmlEl("FORM", block) -fun Node.h1( - id: String? = null, - className: String? = null, - title: String? = null, - tabIndex: Int? = null, - block: HTMLHeadingElement.() -> Unit = {}, -): HTMLHeadingElement = - appendHtmlEl("H1", id, className, title, tabIndex, block) +fun Node.h1(block: HTMLHeadingElement.() -> Unit = {}): HTMLHeadingElement = + appendHtmlEl("H1", block) -fun Node.h2( - id: String? = null, - className: String? = null, - title: String? = null, - tabIndex: Int? = null, - block: HTMLHeadingElement.() -> Unit = {}, -): HTMLHeadingElement = - appendHtmlEl("H2", id, className, title, tabIndex, block) +fun Node.h2(block: HTMLHeadingElement.() -> Unit = {}): HTMLHeadingElement = + appendHtmlEl("H2", block) -fun Node.header( - id: String? = null, - className: String? = null, - title: String? = null, - tabIndex: Int? = null, - block: HTMLElement.() -> Unit = {}, -): HTMLElement = - appendHtmlEl("HEADER", id, className, title, tabIndex, block) +fun Node.header(block: HTMLElement.() -> Unit = {}): HTMLElement = + appendHtmlEl("HEADER", block) -fun Node.img( - src: String? = null, - width: Int? = null, - height: Int? = null, - alt: String? = null, - id: String? = null, - className: String? = null, - title: String? = null, - tabIndex: Int? = null, - block: HTMLImageElement.() -> Unit = {}, -): HTMLImageElement = - appendHtmlEl("IMG", id, className, title, tabIndex) { - if (src != null) this.src = src - if (width != null) this.width = width - if (height != null) this.height = height - if (alt != null) this.alt = alt - block() - } +fun Node.img(block: HTMLImageElement.() -> Unit = {}): HTMLImageElement = + appendHtmlEl("IMG", block) -fun Node.input( - type: String? = null, - id: String? = null, - className: String? = null, - title: String? = null, - tabIndex: Int? = null, - block: HTMLInputElement.() -> Unit = {}, -): HTMLInputElement = - appendHtmlEl("INPUT", id, className, title, tabIndex) { - if (type != null) this.type = type - block() - } +fun Node.input(block: HTMLInputElement.() -> Unit = {}): HTMLInputElement = + appendHtmlEl("INPUT", block) -fun Node.label( - htmlFor: String? = null, - id: String? = null, - className: String? = null, - title: String? = null, - tabIndex: Int? = null, - block: HTMLLabelElement.() -> Unit = {}, -): HTMLLabelElement = - appendHtmlEl("LABEL", id, className, title, tabIndex) { - if (htmlFor != null) this.htmlFor = htmlFor - block() - } +fun Node.label(block: HTMLLabelElement.() -> Unit = {}): HTMLLabelElement = + appendHtmlEl("LABEL", block) -fun Node.main( - id: String? = null, - className: String? = null, - title: String? = null, - tabIndex: Int? = null, - block: HTMLElement.() -> Unit = {}, -): HTMLElement = - appendHtmlEl("MAIN", id, className, title, tabIndex, block) +fun Node.main(block: HTMLElement.() -> Unit = {}): HTMLElement = + appendHtmlEl("MAIN", block) -fun Node.p( - id: String? = null, - className: String? = null, - title: String? = null, - tabIndex: Int? = null, - block: HTMLParagraphElement.() -> Unit = {}, -): HTMLParagraphElement = - appendHtmlEl("P", id, className, title, tabIndex, block) +fun Node.p(block: HTMLParagraphElement.() -> Unit = {}): HTMLParagraphElement = + appendHtmlEl("P", block) -fun Node.span( - id: String? = null, - className: String? = null, - title: String? = null, - tabIndex: Int? = null, - block: HTMLSpanElement.() -> Unit = {}, -): HTMLSpanElement = - appendHtmlEl("SPAN", id, className, title, tabIndex, block) +fun Node.span(block: HTMLSpanElement.() -> Unit = {}): HTMLSpanElement = + appendHtmlEl("SPAN", block) -fun Node.table( - id: String? = null, - className: String? = null, - title: String? = null, - tabIndex: Int? = null, - block: HTMLTableElement.() -> Unit = {}, -): HTMLTableElement = - appendHtmlEl("TABLE", id, className, title, tabIndex, block) +fun Node.table(block: HTMLTableElement.() -> Unit = {}): HTMLTableElement = + appendHtmlEl("TABLE", block) -fun Node.td( - id: String? = null, - className: String? = null, - title: String? = null, - tabIndex: Int? = null, - block: HTMLTableCellElement.() -> Unit = {}, -): HTMLTableCellElement = - appendHtmlEl("TD", id, className, title, tabIndex, block) +fun Node.td(block: HTMLTableCellElement.() -> Unit = {}): HTMLTableCellElement = + appendHtmlEl("TD", block) -fun Node.th( - id: String? = null, - className: String? = null, - title: String? = null, - tabIndex: Int? = null, - block: HTMLTableCellElement.() -> Unit = {}, -): HTMLTableCellElement = - appendHtmlEl("TH", id, className, title, tabIndex, block) +fun Node.th(block: HTMLTableCellElement.() -> Unit = {}): HTMLTableCellElement = + appendHtmlEl("TH", block) -fun Node.tr( - id: String? = null, - className: String? = null, - title: String? = null, - tabIndex: Int? = null, - block: HTMLTableRowElement.() -> Unit = {}, -): HTMLTableRowElement = - appendHtmlEl("TR", id, className, title, tabIndex, block) +fun Node.tr(block: HTMLTableRowElement.() -> Unit = {}): HTMLTableRowElement = + appendHtmlEl("TR", block) -fun Node.appendHtmlEl( - tagName: String, - id: String? = null, - className: String? = null, - title: String? = null, - tabIndex: Int? = null, - block: T.() -> Unit, -): T = - appendChild(newHtmlEl(tagName, id, className, title, tabIndex, block)).unsafeCast() +fun Node.appendHtmlEl(tagName: String, block: T.() -> Unit): T = + appendChild(newHtmlEl(tagName, block)).unsafeCast() -fun newHtmlEl( - tagName: String, - id: String? = null, - className: String? = null, - title: String? = null, - tabIndex: Int? = null, - block: T.() -> Unit, -): T = - newEl(tagName, id, className) { - if (title != null) this.title = title - if (tabIndex != null) this.tabIndex = tabIndex - block() - } +fun newHtmlEl(tagName: String, block: T.() -> Unit): T = + newEl(tagName, block) -private fun newEl( - tagName: String, - id: String? = null, - className: String?, - block: T.() -> Unit, -): T { +private fun newEl(tagName: String, block: T.() -> Unit): T { val el = document.createElement(tagName).unsafeCast() - if (id != null) el.id = id - if (className != null) el.className = className el.block() return el } diff --git a/webui/src/main/kotlin/world/phantasmal/webui/widgets/Button.kt b/webui/src/main/kotlin/world/phantasmal/webui/widgets/Button.kt index 08ca334a..3354bde8 100644 --- a/webui/src/main/kotlin/world/phantasmal/webui/widgets/Button.kt +++ b/webui/src/main/kotlin/world/phantasmal/webui/widgets/Button.kt @@ -15,13 +15,18 @@ open class Button( private val text: String? = null, private val textVal: Val? = null, private val onclick: ((MouseEvent) -> Unit)? = null, -) : Control(scope, listOf(::style), hidden, disabled) { +) : Control(scope, hidden, disabled) { override fun Node.createElement() = - button(className = "pw-button") { + button { + className = "pw-button" onclick = this@Button.onclick - span(className = "pw-button-inner") { - span(className = "pw-button-center") { + span { + className = "pw-button-inner" + + span { + className = "pw-button-center" + if (textVal != null) { observe(textVal) { textContent = it @@ -35,79 +40,83 @@ open class Button( } } } -} -@Suppress("CssUnusedSymbol", "CssUnresolvedCustomProperty") + companion object { + init { + @Suppress("CssUnusedSymbol", "CssUnresolvedCustomProperty") // language=css -private fun style() = """ -.pw-button { - display: inline-flex; - flex-direction: row; - align-items: stretch; - align-content: stretch; - box-sizing: border-box; - height: 26px; - padding: 0; - border: var(--pw-control-border); - color: var(--pw-control-text-color); - outline: none; - font-size: 13px; - font-family: var(--pw-font-family), sans-serif; - overflow: hidden; -} + style(""" + .pw-button { + display: inline-flex; + flex-direction: row; + align-items: stretch; + align-content: stretch; + box-sizing: border-box; + height: 26px; + padding: 0; + border: var(--pw-control-border); + color: var(--pw-control-text-color); + outline: none; + font-size: 13px; + font-family: var(--pw-font-family), sans-serif; + overflow: hidden; + } -.pw-button .pw-button-inner { - flex-grow: 1; - display: inline-flex; - flex-direction: row; - align-items: center; - box-sizing: border-box; - background-color: var(--pw-control-bg-color); - height: 24px; - padding: 3px 5px; - border: var(--pw-control-inner-border); - overflow: hidden; -} + .pw-button .pw-button-inner { + flex-grow: 1; + display: inline-flex; + flex-direction: row; + align-items: center; + box-sizing: border-box; + background-color: var(--pw-control-bg-color); + height: 24px; + padding: 3px 5px; + border: var(--pw-control-inner-border); + overflow: hidden; + } -.pw-button:hover .pw-button-inner { - background-color: var(--pw-control-bg-color-hover); - border-color: hsl(0, 0%, 40%); - color: var(--pw-control-text-color-hover); -} + .pw-button:hover .pw-button-inner { + background-color: var(--pw-control-bg-color-hover); + border-color: hsl(0, 0%, 40%); + color: var(--pw-control-text-color-hover); + } -.pw-button:active .pw-button-inner { - background-color: hsl(0, 0%, 20%); - border-color: hsl(0, 0%, 30%); - color: hsl(0, 0%, 75%); -} + .pw-button:active .pw-button-inner { + background-color: hsl(0, 0%, 20%); + border-color: hsl(0, 0%, 30%); + color: hsl(0, 0%, 75%); + } -.pw-button:focus-within .pw-button-inner { - border: var(--pw-control-inner-border-focus); -} + .pw-button:focus-within .pw-button-inner { + border: var(--pw-control-inner-border-focus); + } -.pw-button:disabled .pw-button-inner { - background-color: hsl(0, 0%, 15%); - border-color: hsl(0, 0%, 25%); - color: hsl(0, 0%, 55%); -} + .pw-button:disabled .pw-button-inner { + background-color: hsl(0, 0%, 15%); + border-color: hsl(0, 0%, 25%); + color: hsl(0, 0%, 55%); + } -.pw-button-inner > * { - display: inline-block; - margin: 0 3px; -} + .pw-button-inner > * { + display: inline-block; + margin: 0 3px; + } -.pw-button-center { - flex-grow: 1; - text-align: left; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} + .pw-button-center { + flex-grow: 1; + text-align: left; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } -.pw-button-left, -.pw-button-right { - display: inline-flex; - align-content: center; - font-size: 11px; + .pw-button-left, + .pw-button-right { + display: inline-flex; + align-content: center; + font-size: 11px; + } + """.trimIndent()) + } + } } -""" diff --git a/webui/src/main/kotlin/world/phantasmal/webui/widgets/Control.kt b/webui/src/main/kotlin/world/phantasmal/webui/widgets/Control.kt index b9f3dca9..6f32f06e 100644 --- a/webui/src/main/kotlin/world/phantasmal/webui/widgets/Control.kt +++ b/webui/src/main/kotlin/world/phantasmal/webui/widgets/Control.kt @@ -10,7 +10,6 @@ import world.phantasmal.observable.value.falseVal */ abstract class Control( scope: CoroutineScope, - styles: List<() -> String>, hidden: Val = falseVal(), disabled: Val = falseVal(), -) : Widget(scope, styles, hidden, disabled) +) : Widget(scope, hidden, disabled) diff --git a/webui/src/main/kotlin/world/phantasmal/webui/widgets/Input.kt b/webui/src/main/kotlin/world/phantasmal/webui/widgets/Input.kt index 4c047bf3..04a8fa47 100644 --- a/webui/src/main/kotlin/world/phantasmal/webui/widgets/Input.kt +++ b/webui/src/main/kotlin/world/phantasmal/webui/widgets/Input.kt @@ -9,7 +9,6 @@ import world.phantasmal.webui.dom.span abstract class Input( scope: CoroutineScope, - styles: List<() -> String>, hidden: Val, disabled: Val, label: String?, @@ -21,12 +20,12 @@ abstract class Input( private val value: T?, private val valueVal: Val?, private val setValue: ((T) -> Unit)?, + private val maxLength: Int?, private val min: Int?, private val max: Int?, private val step: Int?, ) : LabelledControl( scope, - styles + ::style, hidden, disabled, label, @@ -34,11 +33,12 @@ abstract class Input( preferredLabelPosition, ) { override fun Node.createElement() = - span(className = "pw-input") { - classList.add(className) + span { + classList.add("pw-input", this@Input.className) - input(className = "pw-input-inner", type = inputType) { - classList.add(inputClassName) + input { + classList.add("pw-input-inner", inputClassName) + type = inputType observe(this@Input.disabled) { disabled = it } @@ -58,61 +58,58 @@ abstract class Input( setInputValue(this, this@Input.value) } - if (this@Input.min != null) { - min = this@Input.min.toString() - } - - if (this@Input.max != null) { - max = this@Input.max.toString() - } - - if (this@Input.step != null) { - step = this@Input.step.toString() - } + this@Input.maxLength?.let { maxLength = it } + this@Input.min?.let { min = it.toString() } + this@Input.max?.let { max = it.toString() } + this@Input.step?.let { step = it.toString() } } } protected abstract fun getInputValue(input: HTMLInputElement): T protected abstract fun setInputValue(input: HTMLInputElement, value: T) -} -@Suppress("CssUnusedSymbol", "CssUnresolvedCustomProperty") -// language=css -private fun style() = """ -.pw-input { - display: inline-block; - box-sizing: border-box; - height: 24px; - border: var(--pw-input-border); -} + companion object { + init { + @Suppress("CssUnusedSymbol", "CssUnresolvedCustomProperty") + // language=css + style(""" + .pw-input { + display: inline-block; + box-sizing: border-box; + height: 24px; + border: var(--pw-input-border); + } -.pw-input .pw-input-inner { - box-sizing: border-box; - width: 100%; - height: 100%; - padding: 0 3px; - border: var(--pw-input-inner-border); - background-color: var(--pw-input-bg-color); - color: var(--pw-input-text-color); - outline: none; - font-size: 13px; -} + .pw-input .pw-input-inner { + box-sizing: border-box; + width: 100%; + height: 100%; + padding: 0 3px; + border: var(--pw-input-inner-border); + background-color: var(--pw-input-bg-color); + color: var(--pw-input-text-color); + outline: none; + font-size: 13px; + } -.pw-input:hover { - border: var(--pw-input-border-hover); -} + .pw-input:hover { + border: var(--pw-input-border-hover); + } -.pw-input:focus-within { - border: var(--pw-input-border-focus); -} + .pw-input:focus-within { + border: var(--pw-input-border-focus); + } -.pw-input.disabled { - border: var(--pw-input-border-disabled); -} + .pw-input.disabled { + border: var(--pw-input-border-disabled); + } -.pw-input.disabled .pw-input-inner { - color: var(--pw-input-text-color-disabled); - background-color: var(--pw-input-bg-color-disabled); + .pw-input.disabled .pw-input-inner { + color: var(--pw-input-text-color-disabled); + background-color: var(--pw-input-bg-color-disabled); + } + """.trimIndent()) + } + } } -""" diff --git a/webui/src/main/kotlin/world/phantasmal/webui/widgets/Label.kt b/webui/src/main/kotlin/world/phantasmal/webui/widgets/Label.kt index 6620fc80..d4f9921b 100644 --- a/webui/src/main/kotlin/world/phantasmal/webui/widgets/Label.kt +++ b/webui/src/main/kotlin/world/phantasmal/webui/widgets/Label.kt @@ -12,22 +12,29 @@ class Label( disabled: Val = falseVal(), private val text: String? = null, private val textVal: Val? = null, - private val htmlFor: String?, -) : Widget(scope, listOf(::style), hidden, disabled) { + private val htmlFor: String? = null, +) : Widget(scope, hidden, disabled) { override fun Node.createElement() = - label(htmlFor) { + label { + className = "pw-label" + this@Label.htmlFor?.let { htmlFor = it } + if (textVal != null) { - observe(textVal) { textContent = it } + text(textVal) } else if (text != null) { textContent = text } } -} -@Suppress("CssUnusedSymbol", "CssUnresolvedCustomProperty") -// language=css -private fun style() = """ -.pw-label.disabled { - color: var(--pw-text-color-disabled); + companion object{ + init { + @Suppress("CssUnusedSymbol", "CssUnresolvedCustomProperty") + // language=css + style(""" + .pw-label.pw-disabled { + color: var(--pw-text-color-disabled); + } + """.trimIndent()) + } + } } -""" diff --git a/webui/src/main/kotlin/world/phantasmal/webui/widgets/LabelledControl.kt b/webui/src/main/kotlin/world/phantasmal/webui/widgets/LabelledControl.kt index 9210d695..df6782f3 100644 --- a/webui/src/main/kotlin/world/phantasmal/webui/widgets/LabelledControl.kt +++ b/webui/src/main/kotlin/world/phantasmal/webui/widgets/LabelledControl.kt @@ -11,13 +11,12 @@ enum class LabelPosition { abstract class LabelledControl( scope: CoroutineScope, - styles: List<() -> String>, hidden: Val = falseVal(), disabled: Val = falseVal(), label: String? = null, labelVal: Val? = null, val preferredLabelPosition: LabelPosition, -) : Control(scope, styles, hidden, disabled) { +) : Control(scope, hidden, disabled) { val label: Label? by lazy { if (label == null && labelVal == null) { null diff --git a/webui/src/main/kotlin/world/phantasmal/webui/widgets/LazyLoader.kt b/webui/src/main/kotlin/world/phantasmal/webui/widgets/LazyLoader.kt index e92643c6..6318a874 100644 --- a/webui/src/main/kotlin/world/phantasmal/webui/widgets/LazyLoader.kt +++ b/webui/src/main/kotlin/world/phantasmal/webui/widgets/LazyLoader.kt @@ -11,11 +11,13 @@ class LazyLoader( hidden: Val = falseVal(), disabled: Val = falseVal(), private val createWidget: (CoroutineScope) -> Widget, -) : Widget(scope, listOf(::style), hidden, disabled) { +) : Widget(scope, hidden, disabled) { private var initialized = false override fun Node.createElement() = - div(className = "pw-lazy-loader") { + div { + className = "pw-lazy-loader" + observe(this@LazyLoader.hidden) { h -> if (!h && !initialized) { initialized = true @@ -23,19 +25,23 @@ class LazyLoader( } } } -} -@Suppress("CssUnusedSymbol") -// language=css -private fun style() = """ -.pw-lazy-loader { - display: flex; - flex-direction: column; - align-items: stretch; -} + companion object { + init { + @Suppress("CssUnusedSymbol") + // language=css + style(""" + .pw-lazy-loader { + display: flex; + flex-direction: column; + align-items: stretch; + } -.pw-lazy-loader > * { - flex-grow: 1; - overflow: hidden; + .pw-lazy-loader > * { + flex-grow: 1; + overflow: hidden; + } + """.trimIndent()) + } + } } -""" diff --git a/webui/src/main/kotlin/world/phantasmal/webui/widgets/NumberInput.kt b/webui/src/main/kotlin/world/phantasmal/webui/widgets/NumberInput.kt index c3785828..ffcfdca7 100644 --- a/webui/src/main/kotlin/world/phantasmal/webui/widgets/NumberInput.kt +++ b/webui/src/main/kotlin/world/phantasmal/webui/widgets/NumberInput.kt @@ -18,7 +18,6 @@ abstract class NumberInput( step: Int?, ) : Input( scope, - listOf(::style), hidden, disabled, label, @@ -30,19 +29,24 @@ abstract class NumberInput( value, valueVal, setValue, + maxLength = null, min, max, step, -) +) { + companion object { + init { + @Suppress("CssUnusedSymbol") + // language=css + style(""" + .pw-number-input { + width: 54px; + } -@Suppress("CssUnusedSymbol") -// language=css -private fun style() = """ -.pw-number-input { - width: 54px; + .pw-number-input .pw-number-input-inner { + padding-right: 1px; + } + """.trimIndent()) + } + } } - -.pw-number-input .pw-number-input-inner { - padding-right: 1px; -} -""" diff --git a/webui/src/main/kotlin/world/phantasmal/webui/widgets/TabContainer.kt b/webui/src/main/kotlin/world/phantasmal/webui/widgets/TabContainer.kt index 5b1cfb20..e0c62031 100644 --- a/webui/src/main/kotlin/world/phantasmal/webui/widgets/TabContainer.kt +++ b/webui/src/main/kotlin/world/phantasmal/webui/widgets/TabContainer.kt @@ -15,15 +15,18 @@ class TabContainer( disabled: Val = falseVal(), private val ctrl: TabController, private val createWidget: (CoroutineScope, T) -> Widget, -) : Widget(scope, listOf(::style), hidden, disabled) { +) : Widget(scope, hidden, disabled) { override fun Node.createElement() = - div(className = "pw-tab-container") { - div(className = "pw-tab-container-bar") { + div { + className = "pw-tab-container" + + div { + className = "pw-tab-container-bar" + for (tab in ctrl.tabs) { - span( - className = "pw-tab-container-tab", - title = tab.title, - ) { + span { + className = "pw-tab-container-tab" + title = tab.title textContent = tab.title observe(ctrl.activeTab) { @@ -38,7 +41,9 @@ class TabContainer( } } } - div(className = "pw-tab-container-panes") { + div { + className = "pw-tab-container-panes" + for (tab in ctrl.tabs) { addChild( LazyLoader( @@ -57,57 +62,59 @@ class TabContainer( companion object { private const val ACTIVE_CLASS = "pw-active" + + init { + @Suppress("CssUnresolvedCustomProperty", "CssUnusedSymbol") + // language=css + style(""" + .pw-tab-container { + display: flex; + flex-direction: column; + } + + .pw-tab-container-bar { + box-sizing: border-box; + height: 28px; + min-height: 28px; /* To avoid bar from getting squished when pane content gets larger than pane in Firefox. */ + padding: 3px 3px 0 3px; + border-bottom: var(--pw-border); + } + + .pw-tab-container-tab { + box-sizing: border-box; + display: inline-flex; + align-items: center; + height: calc(100% + 1px); + padding: 0 10px; + border: var(--pw-border); + margin: 0 1px -1px 1px; + background-color: var(--pw-tab-bg-color); + color: var(--pw-tab-text-color); + font-size: 13px; + } + + .pw-tab-container-tab:hover { + background-color: var(--pw-tab-bg-color-hover); + color: var(--pw-tab-text-color-hover); + } + + .pw-tab-container-tab.pw-active { + background-color: var(--pw-tab-bg-color-active); + color: var(--pw-tab-text-color-active); + border-bottom-color: var(--pw-tab-bg-color-active); + } + + .pw-tab-container-panes { + flex-grow: 1; + display: flex; + flex-direction: row; + overflow: hidden; + } + + .pw-tab-container-panes > * { + flex-grow: 1; + } + """.trimIndent()) + } } } - -@Suppress("CssUnresolvedCustomProperty", "CssUnusedSymbol") -// language=css -private fun style() = """ -.pw-tab-container { - display: flex; - flex-direction: column; -} - -.pw-tab-container-bar { - box-sizing: border-box; - height: 28px; - min-height: 28px; /* To avoid bar from getting squished when pane content gets larger than pane in Firefox. */ - padding: 3px 3px 0 3px; - border-bottom: var(--pw-border); -} - -.pw-tab-container-tab { - box-sizing: border-box; - display: inline-flex; - align-items: center; - height: calc(100% + 1px); - padding: 0 10px; - border: var(--pw-border); - margin: 0 1px -1px 1px; - background-color: var(--pw-tab-bg-color); - color: var(--pw-tab-text-color); - font-size: 13px; -} - -.pw-tab-container-tab:hover { - background-color: var(--pw-tab-bg-color-hover); - color: var(--pw-tab-text-color-hover); -} - -.pw-tab-container-tab.pw-active { - background-color: var(--pw-tab-bg-color-active); - color: var(--pw-tab-text-color-active); - border-bottom-color: var(--pw-tab-bg-color-active); -} - -.pw-tab-container-panes { - flex-grow: 1; - display: flex; - flex-direction: row; - overflow: hidden; -} - -.pw-tab-container-panes > * { - flex-grow: 1; -} -""" diff --git a/webui/src/main/kotlin/world/phantasmal/webui/widgets/TextInput.kt b/webui/src/main/kotlin/world/phantasmal/webui/widgets/TextInput.kt new file mode 100644 index 00000000..0c56592d --- /dev/null +++ b/webui/src/main/kotlin/world/phantasmal/webui/widgets/TextInput.kt @@ -0,0 +1,42 @@ +package world.phantasmal.webui.widgets + +import kotlinx.coroutines.CoroutineScope +import org.w3c.dom.HTMLInputElement +import world.phantasmal.observable.value.Val +import world.phantasmal.observable.value.falseVal + +class TextInput( + scope: CoroutineScope, + hidden: Val = falseVal(), + disabled: Val = falseVal(), + label: String? = null, + labelVal: Val? = null, + preferredLabelPosition: LabelPosition = LabelPosition.Before, + value: String? = null, + valueVal: Val? = null, + setValue: ((String) -> Unit)? = null, + maxLength: Int? = null +) : Input( + scope, + hidden, + disabled, + label, + labelVal, + preferredLabelPosition, + className = "pw-text-input", + inputClassName = "pw-number-text-inner", + inputType = "text", + value, + valueVal, + setValue, + maxLength, + min = null, + max = null, + step = null +) { + override fun getInputValue(input: HTMLInputElement): String = input.value + + override fun setInputValue(input: HTMLInputElement, value: String) { + input.value = value + } +} diff --git a/webui/src/main/kotlin/world/phantasmal/webui/widgets/Toolbar.kt b/webui/src/main/kotlin/world/phantasmal/webui/widgets/Toolbar.kt index b4c58930..b0249ebe 100644 --- a/webui/src/main/kotlin/world/phantasmal/webui/widgets/Toolbar.kt +++ b/webui/src/main/kotlin/world/phantasmal/webui/widgets/Toolbar.kt @@ -11,15 +11,19 @@ class Toolbar( hidden: Val = falseVal(), disabled: Val = falseVal(), children: List, -) : Widget(scope, listOf(::style), hidden, disabled) { +) : Widget(scope, hidden, disabled) { private val childWidgets = children override fun Node.createElement() = - div(className = "pw-toolbar") { + div { + className = "pw-toolbar" + childWidgets.forEach { child -> // Group labelled controls and their labels together. if (child is LabelledControl && child.label != null) { - div(className = "pw-toolbar-group") { + div { + className = "pw-toolbar-group" + when (child.preferredLabelPosition) { LabelPosition.Before -> { addChild(child.label!!) @@ -36,36 +40,40 @@ class Toolbar( } } } -} -@Suppress("CssUnusedSymbol", "CssUnresolvedCustomProperty") -// language=css -private fun style() = """ -.pw-toolbar { - box-sizing: border-box; - display: flex; - flex-direction: row; - align-items: center; - border-bottom: var(--pw-border); - padding: 0 2px; -} + companion object { + init { + @Suppress("CssUnusedSymbol", "CssUnresolvedCustomProperty") + // language=css + style(""" + .pw-toolbar { + box-sizing: border-box; + display: flex; + flex-direction: row; + align-items: center; + border-bottom: var(--pw-border); + padding: 0 2px; + } -.pw-toolbar > * { - margin: 2px 1px; -} + .pw-toolbar > * { + margin: 2px 1px; + } -.pw-toolbar > .pw-toolbar-group { - margin: 2px 3px; - display: flex; - flex-direction: row; - align-items: center; -} + .pw-toolbar > .pw-toolbar-group { + margin: 2px 3px; + display: flex; + flex-direction: row; + align-items: center; + } -.pw-toolbar > .pw-toolbar-group > * { - margin: 0 2px; -} + .pw-toolbar > .pw-toolbar-group > * { + margin: 0 2px; + } -.pw-toolbar .pw-input { - height: 26px; + .pw-toolbar .pw-input { + height: 26px; + } + """.trimIndent()) + } + } } -""" diff --git a/webui/src/main/kotlin/world/phantasmal/webui/widgets/Widget.kt b/webui/src/main/kotlin/world/phantasmal/webui/widgets/Widget.kt index 7d837b8e..7427dc18 100644 --- a/webui/src/main/kotlin/world/phantasmal/webui/widgets/Widget.kt +++ b/webui/src/main/kotlin/world/phantasmal/webui/widgets/Widget.kt @@ -2,10 +2,10 @@ package world.phantasmal.webui.widgets import kotlinx.browser.document import kotlinx.coroutines.CoroutineScope -import kotlinx.dom.appendText import kotlinx.dom.clear import org.w3c.dom.* import world.phantasmal.core.disposable.disposable +import world.phantasmal.observable.Observable import world.phantasmal.observable.value.Val import world.phantasmal.observable.value.falseVal import world.phantasmal.observable.value.list.ListVal @@ -16,7 +16,6 @@ import world.phantasmal.webui.DisposableContainer abstract class Widget( protected val scope: CoroutineScope, - private val styles: List<() -> String> = emptyList(), /** * By default determines the hidden attribute of its [element]. */ @@ -33,13 +32,6 @@ abstract class Widget( private var resizeObserverInitialized = false private val elementDelegate = lazy { - // Add CSS declarations to stylesheet if this is the first time we're encountering them. - styles.forEach { style -> - if (STYLES_ADDED.add(style)) { - STYLE_EL.appendText(style()) - } - } - val el = document.createDocumentFragment().createElement() observe(hidden) { hidden -> @@ -101,6 +93,23 @@ abstract class Widget( super.internalDispose() } + protected fun Node.text(observable: Observable) { + observe(observable) { textContent = it } + } + + protected fun HTMLElement.hidden(observable: Observable) { + observe(observable) { hidden = it } + } + + /** + * Appends a widget's element to the receiving node. + */ + protected fun Node.addWidget(widget: T): T { + addDisposable(widget) + appendChild(widget.element) + return widget + } + /** * Adds a child widget to [children] and appends its element to the receiving node. */ @@ -112,7 +121,7 @@ abstract class Widget( return child } - fun Node.bindChildrenTo( + protected fun Node.bindChildrenTo( list: ListVal, createChild: (T, Int) -> Node, ) { @@ -198,7 +207,10 @@ abstract class Widget( document.head!!.append(el) el } - private val STYLES_ADDED: MutableSet<() -> String> = mutableSetOf() + + protected fun style(style: String) { + STYLE_EL.append(style) + } protected fun setAncestorHidden(widget: Widget, hidden: Boolean) { widget._ancestorHidden.value = hidden diff --git a/webui/src/test/kotlin/world/phantasmal/webui/widgets/WidgetTests.kt b/webui/src/test/kotlin/world/phantasmal/webui/widgets/WidgetTests.kt index 67debded..d3e4665c 100644 --- a/webui/src/test/kotlin/world/phantasmal/webui/widgets/WidgetTests.kt +++ b/webui/src/test/kotlin/world/phantasmal/webui/widgets/WidgetTests.kt @@ -1,5 +1,6 @@ package world.phantasmal.webui.widgets +import kotlinx.coroutines.CoroutineScope import org.w3c.dom.Node import world.phantasmal.observable.value.Val import world.phantasmal.observable.value.falseVal @@ -10,15 +11,16 @@ import world.phantasmal.webui.dom.div import kotlin.test.Test import kotlin.test.assertFalse import kotlin.test.assertTrue +import kotlin.test.fail class WidgetTests : TestSuite() { @Test - fun ancestorHidden_and_selfOrAncestorHidden_should_update_when_hidden_changes() { + fun ancestorHidden_and_selfOrAncestorHidden_should_update_when_hidden_changes() = test { val parentHidden = mutableVal(false) val childHidden = mutableVal(false) - val grandChild = DummyWidget() - val child = DummyWidget(childHidden, grandChild) - val parent = disposer.add(DummyWidget(parentHidden, child)) + val grandChild = DummyWidget(scope) + val child = DummyWidget(scope, childHidden, grandChild) + val parent = disposer.add(DummyWidget(scope, parentHidden, child)) parent.element // Ensure widgets are fully initialized. @@ -50,17 +52,19 @@ class WidgetTests : TestSuite() { } @Test - fun added_child_widgets_should_have_ancestorHidden_and_selfOrAncestorHidden_set_correctly() { - val parent = disposer.add(DummyWidget(hidden = trueVal())) - val child = parent.addChild(DummyWidget()) + fun added_child_widgets_should_have_ancestorHidden_and_selfOrAncestorHidden_set_correctly() = + test { + val parent = disposer.add(DummyWidget(scope, hidden = trueVal())) + val child = parent.addChild(DummyWidget(scope)) - assertFalse(parent.ancestorHidden.value) - assertTrue(parent.selfOrAncestorHidden.value) - assertTrue(child.ancestorHidden.value) - assertTrue(child.selfOrAncestorHidden.value) - } + assertFalse(parent.ancestorHidden.value) + assertTrue(parent.selfOrAncestorHidden.value) + assertTrue(child.ancestorHidden.value) + assertTrue(child.selfOrAncestorHidden.value) + } private inner class DummyWidget( + scope: CoroutineScope, hidden: Val = falseVal(), private val child: Widget? = null, ) : Widget(scope, hidden = hidden) {