Sancaros/phantasmal-world
1
0
Fork 0
mirror of https://github.com/DaanVandenBosch/phantasmal-world.git synced 2025-04-04 22:58:29 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fixed an issue with the way CSS was added to the DOM. Moved @AfterTest checks to utility function so test failures aren't hidden by @AfterTest failures.

Browse Source
This commit is contained in:
Daan Vanden Bosch 2020-10-29 21:15:57 +01:00
parent fdb3d5bbb6
commit e6d6f292f4
48 changed files with 971 additions and 891 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
lib/src/commonTest/kotlin/world/phantasmal/lib/compression/prs/PrsCompressTests.kt
View File

@ -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

2
observable/src/commonMain/kotlin/world/phantasmal/observable/value/FlatTransformedVal.kt
View File

@ -16,7 +16,7 @@ class FlatTransformedVal<T>(
return if (hasNoObservers()) {
super.value
} else {
computedVal.unsafeToNonNull<Val<T>>().value
computedVal.unsafeToNonNull().value
}
}

4
observable/src/commonTest/kotlin/world/phantasmal/observable/ObservableTests.kt
View File

@ -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

2
observable/src/commonTest/kotlin/world/phantasmal/observable/value/FlatTransformedValDependentValEmitsTests.kt
View File

@ -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

2
observable/src/commonTest/kotlin/world/phantasmal/observable/value/RegularValTests.kt
View File

@ -13,7 +13,7 @@ abstract class RegularValTests : ValTests() {
protected abstract fun createBoolean(bool: Boolean): ValAndEmit<Boolean>
@Test
fun val_boolean_extensions() {
fun val_boolean_extensions() = test {
listOf(true, false).forEach { bool ->
val (value) = createBoolean(bool)

2
observable/src/commonTest/kotlin/world/phantasmal/observable/value/StaticValTests.kt
View File

@ -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 {}

12
observable/src/commonTest/kotlin/world/phantasmal/observable/value/ValCreationTests.kt
View File

@ -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 })

2
observable/src/commonTest/kotlin/world/phantasmal/observable/value/ValTests.kt
View File

@ -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

2
observable/src/commonTest/kotlin/world/phantasmal/observable/value/list/ListValTests.kt
View File

@ -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)

5
test-utils/build.gradle.kts
View File

@ -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"))
}

30
test-utils/src/commonMain/kotlin/world/phantasmal/testUtils/TestSuite.kt
View File

@ -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()
}
}
}

26
web/src/main/kotlin/world/phantasmal/web/application/widgets/ApplicationWidget.kt
View File

@ -9,18 +9,21 @@ 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 {
companion object {
init {
@Suppress("CssUnusedSymbol")
// language=css
style("""
.pw-application-application {
position: fixed;
top: 0;
bottom: 0;
@ -28,9 +31,12 @@ private fun style() = """
right: 0;
display: flex;
flex-direction: column;
}
.pw-application-application .pw-application-main-content {
}
.pw-application-application .pw-application-main-content {
flex-grow: 1;
overflow: hidden;
}
""".trimIndent())
}
}
}
"""

26
web/src/main/kotlin/world/phantasmal/web/application/widgets/MainContentWidget.kt
View File

@ -13,27 +13,33 @@ class MainContentWidget(
scope: CoroutineScope,
private val ctrl: MainContentController,
private val toolViews: Map<PwTool, (CoroutineScope) -> 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 {
companion object {
init {
@Suppress("CssUnusedSymbol")
// language=css
style("""
.pw-application-main-content {
display: flex;
flex-direction: column;
}
}
.pw-application-main-content > * {
.pw-application-main-content > * {
flex-grow: 1;
overflow: hidden;
}
""".trimIndent())
}
}
}
"""

46
web/src/main/kotlin/world/phantasmal/web/application/widgets/NavigationWidget.kt
View File

@ -7,46 +7,49 @@ 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 {
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 {
.pw-application-navigation-spacer {
flex-grow: 1;
}
}
.pw-application-navigation-server {
.pw-application-navigation-server {
display: flex;
align-items: center;
}
}
.pw-application-navigation-server > * {
.pw-application-navigation-server > * {
margin: 0 2px;
}
}
.pw-application-navigation-time {
.pw-application-navigation-time {
display: flex;
align-items: center;
}
}
.pw-application-navigation-github {
.pw-application-navigation-github {
display: flex;
flex-direction: row;
align-items: center;
@ -54,9 +57,12 @@ private fun style() = """
width: 30px;
font-size: 16px;
color: var(--pw-control-text-color);
}
}
.pw-application-navigation-github:hover {
.pw-application-navigation-github:hover {
color: var(--pw-control-text-color-hover);
}
""".trimIndent())
}
}
}
"""

41
web/src/main/kotlin/world/phantasmal/web/application/widgets/PwToolButton.kt
View File

@ -14,30 +14,36 @@ class PwToolButton(
private val tool: PwTool,
private val toggled: Observable<Boolean>,
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 {
companion object {
init {
@Suppress("CssUnresolvedCustomProperty")
// language=css
style("""
.pw-application-pw-tool-button input {
display: none;
}
}
.pw-application-pw-tool-button label {
.pw-application-pw-tool-button label {
box-sizing: border-box;
display: inline-flex;
flex-direction: row;
@ -46,15 +52,18 @@ private fun style() = """
height: 100%;
padding: 0 20px;
color: hsl(0, 0%, 65%);
}
}
.pw-application-pw-tool-button label:hover {
.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 {
.pw-application-pw-tool-button input:checked + label {
color: hsl(0, 0%, 85%);
background-color: var(--pw-bg-color);
}
""".trimIndent())
}
}
}
"""

80
web/src/main/kotlin/world/phantasmal/web/core/widgets/DockWidget.kt
View File

@ -46,7 +46,7 @@ class DockWidget(
scope: CoroutineScope,
hidden: Val<Boolean> = 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<String, (CoroutineScope) -> Widget>()
val config = newJsObject<GoldenLayout.Config> {
@ -141,29 +143,30 @@ class DockWidget(
}
}
}
}
// Use #pw-root for higher specificity than the default GoldenLayout CSS.
@Suppress("CssUnusedSymbol", "CssUnresolvedCustomProperty")
// language=css
private fun style() = """
.pw-core-dock {
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 {
#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 {
#pw-root .lm_header .lm_tabs {
padding: 0 3px;
}
}
#pw-root .lm_header .lm_tabs .lm_tab {
#pw-root .lm_header .lm_tabs .lm_tab {
cursor: default;
display: inline-flex;
align-items: center;
@ -174,24 +177,24 @@ private fun style() = """
background-color: hsl(0, 0%, 12%);
color: hsl(0, 0%, 75%);
font-size: 13px;
}
}
#pw-root .lm_header .lm_tabs .lm_tab:hover {
#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 {
#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 {
#pw-root .lm_header .lm_controls > li {
cursor: default;
}
}
#pw-root .lm_header .lm_controls .lm_close {
#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;
@ -199,43 +202,46 @@ private fun style() = """
cursor: pointer;
opacity: 0.4;
transition: opacity 300ms ease;
}
}
#pw-root .lm_header .lm_controls .lm_close:hover {
#pw-root .lm_header .lm_controls .lm_close:hover {
opacity: 1;
}
}
#pw-root .lm_content > * {
#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 {
#pw-root .lm_splitter {
box-sizing: border-box;
background-color: hsl(0, 0%, 20%);
}
}
#pw-root .lm_splitter.lm_vertical {
#pw-root .lm_splitter.lm_vertical {
border-top: var(--pw-border);
border-bottom: var(--pw-border);
}
}
#pw-root .lm_splitter.lm_horizontal {
#pw-root .lm_splitter.lm_horizontal {
border-left: var(--pw-border);
border-right: var(--pw-border);
}
}
#pw-root .lm_dragProxy > .lm_content {
#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 {
#pw-root .lm_dropTargetIndicator {
box-sizing: border-box;
background-color: hsla(0, 0%, 50%, 0.2);
}
""".trimIndent())
}
}
}
"""

22
web/src/main/kotlin/world/phantasmal/web/core/widgets/RendererWidget.kt
View File

@ -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 {
companion object {
init {
@Suppress("CssUnusedSymbol")
// language=css
style("""
.pw-core-renderer {
width: 100%;
height: 100%;
}
""".trimIndent())
}
}
}
"""

39
web/src/main/kotlin/world/phantasmal/web/core/widgets/UnavailableWidget.kt Normal file
View File

@ -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<Boolean>,
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())
}
}
}

26
web/src/main/kotlin/world/phantasmal/web/huntOptimizer/widgets/HelpWidget.kt
View File

@ -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 {
companion object {
init {
@Suppress("CssUnusedSymbol")
// language=css
style("""
.pw-hunt-optimizer-help {
cursor: initial;
user-select: text;
}
}
.pw-hunt-optimizer-help p {
.pw-hunt-optimizer-help p {
margin: 1em;
max-width: 600px;
}
""".trimIndent())
}
}
}
"""

27
web/src/main/kotlin/world/phantasmal/web/huntOptimizer/widgets/HuntOptimizerWidget.kt
View File

@ -12,8 +12,11 @@ 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") {
) : Widget(scope) {
override fun Node.createElement() =
div {
className = "pw-hunt-optimizer-hunt-optimizer"
addChild(TabContainer(
scope,
ctrl = ctrl,
@ -31,18 +34,22 @@ class HuntOptimizerWidget(
}
))
}
}
@Suppress("CssUnusedSymbol")
// language=css
private fun style() = """
.pw-hunt-optimizer-hunt-optimizer {
companion object {
init {
@Suppress("CssUnusedSymbol")
// language=css
style("""
.pw-hunt-optimizer-hunt-optimizer {
display: flex;
flex-direction: column;
}
}
.pw-hunt-optimizer-hunt-optimizer > * {
.pw-hunt-optimizer-hunt-optimizer > * {
flex-grow: 1;
overflow: hidden;
}
""".trimIndent())
}
}
}
"""

22
web/src/main/kotlin/world/phantasmal/web/huntOptimizer/widgets/MethodsForEpisodeWidget.kt
View File

@ -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 {
companion object {
init {
@Suppress("CssUnusedSymbol")
// language=css
style("""
.pw-hunt-optimizer-methods-for-episode {
overflow: auto;
}
""".trimIndent())
}
}
}
"""

26
web/src/main/kotlin/world/phantasmal/web/huntOptimizer/widgets/MethodsWidget.kt
View File

@ -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 {
companion object {
init {
@Suppress("CssUnusedSymbol")
// language=css
style("""
.pw-hunt-optimizer-methods {
display: flex;
flex-direction: column;
}
}
.pw-hunt-optimizer-methods > * {
.pw-hunt-optimizer-methods > * {
flex-grow: 1;
overflow: hidden;
}
""".trimIndent())
}
}
}
"""

3
web/src/main/kotlin/world/phantasmal/web/questEditor/controllers/QuestInfoController.kt
View File

@ -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<String> = store.currentQuest.transform { it?.episode?.name ?: "" }
val id: Val<Int> = store.currentQuest.flatTransform { it?.id ?: value(0) }
val name: Val<String> = store.currentQuest.flatTransform { it?.name ?: value("") }
}

2
web/src/main/kotlin/world/phantasmal/web/questEditor/models/QuestModel.kt
View File

@ -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)

3
web/src/main/kotlin/world/phantasmal/web/questEditor/stores/ModelConversion.kt
View File

@ -9,6 +9,7 @@ fun convertQuestToModel(quest: Quest): QuestModel {
quest.language,
quest.name,
quest.shortDescription,
quest.longDescription
quest.longDescription,
quest.episode,
)
}

5
web/src/main/kotlin/world/phantasmal/web/questEditor/widgets/QuestEditorToolbar.kt
View File

@ -12,7 +12,10 @@ class QuestEditorToolbar(
scope: CoroutineScope,
private val ctrl: QuestEditorToolbarController,
) : Widget(scope) {
override fun Node.createElement() = div(className = "pw-quest-editor-toolbar") {
override fun Node.createElement() =
div {
className = "pw-quest-editor-toolbar"
addChild(Toolbar(
scope,
children = listOf(

26
web/src/main/kotlin/world/phantasmal/web/questEditor/widgets/QuestEditorWidget.kt
View File

@ -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 {
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 > * {
}
.pw-quest-editor-quest-editor > * {
flex-grow: 1;
}
""".trimIndent())
}
}
}
"""

67
web/src/main/kotlin/world/phantasmal/web/questEditor/widgets/QuestInfoWidget.kt
View File

@ -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 {
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 {
.pw-quest-editor-quest-info table {
width: 100%;
}
}
.pw-quest-editor-quest-info th {
.pw-quest-editor-quest-info th {
text-align: left;
}
}
.pw-quest-editor-quest-info .pw-text-input {
.pw-quest-editor-quest-info .pw-text-input {
width: 100%;
}
}
.pw-quest-editor-quest-info .pw-text-area {
.pw-quest-editor-quest-info .pw-text-area {
width: 100%;
}
}
.pw-quest-editor-quest-info textarea {
.pw-quest-editor-quest-info textarea {
width: 100%;
}
""".trimIndent())
}
}
}
"""

27
web/src/main/kotlin/world/phantasmal/web/questEditor/widgets/QuestRendererWidget.kt
View File

@ -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") {
) : Widget(scope) {
override fun Node.createElement() =
div {
className = "pw-quest-editor-quest-renderer"
addChild(RendererWidget(scope, createEngine))
}
}
@Suppress("CssUnusedSymbol")
// language=css
private fun style() = """
.pw-quest-editor-quest-renderer {
companion object {
init {
@Suppress("CssUnusedSymbol")
// language=css
style("""
.pw-quest-editor-quest-renderer {
display: flex;
overflow: hidden;
}
.pw-quest-editor-quest-renderer > * {
}
.pw-quest-editor-quest-renderer > * {
flex-grow: 1;
}
""".trimIndent())
}
}
}
"""

2
web/src/test/kotlin/world/phantasmal/web/application/ApplicationTests.kt
View File

@ -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 {

10
web/src/test/kotlin/world/phantasmal/web/core/controllers/PathAwareTabControllerTests.kt
View File

@ -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<PathAwareTab>, applicationUrl: TestApplicationUrl) -> Unit,
) {
val applicationUrl = TestApplicationUrl("/${PwTool.HuntOptimizer.slug}/b")

10
web/src/test/kotlin/world/phantasmal/web/core/store/UiStoreTests.kt
View File

@ -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))

2
web/src/test/kotlin/world/phantasmal/web/huntOptimizer/HuntOptimizerTests.kt
View File

@ -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 {

2
web/src/test/kotlin/world/phantasmal/web/questEditor/QuestEditorTests.kt
View File

@ -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 {

7
webui/src/main/kotlin/world/phantasmal/webui/dom/Dom.kt
View File

@ -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 <E : Event> disposableListener(
target: EventTarget,

241
webui/src/main/kotlin/world/phantasmal/webui/dom/DomCreation.kt
View File

@ -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 <T : HTMLElement> 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<T>()
fun <T : HTMLElement> Node.appendHtmlEl(tagName: String, block: T.() -> Unit): T =
appendChild(newHtmlEl(tagName, block)).unsafeCast<T>()
fun <T : HTMLElement> 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 <T : HTMLElement> newHtmlEl(tagName: String, block: T.() -> Unit): T =
newEl(tagName, block)
private fun <T : Element> newEl(
tagName: String,
id: String? = null,
className: String?,
block: T.() -> Unit,
): T {
private fun <T : Element> newEl(tagName: String, block: T.() -> Unit): T {
val el = document.createElement(tagName).unsafeCast<T>()
if (id != null) el.id = id
if (className != null) el.className = className
el.block()
return el
}

61
webui/src/main/kotlin/world/phantasmal/webui/widgets/Button.kt
View File

@ -15,13 +15,18 @@ open class Button(
private val text: String? = null,
private val textVal: Val<String>? = 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,12 +40,13 @@ open class Button(
}
}
}
}
@Suppress("CssUnusedSymbol", "CssUnresolvedCustomProperty")
companion object {
init {
@Suppress("CssUnusedSymbol", "CssUnresolvedCustomProperty")
// language=css
private fun style() = """
.pw-button {
style("""
.pw-button {
display: inline-flex;
flex-direction: row;
align-items: stretch;
@ -54,9 +60,9 @@ private fun style() = """
font-size: 13px;
font-family: var(--pw-font-family), sans-serif;
overflow: hidden;
}
}
.pw-button .pw-button-inner {
.pw-button .pw-button-inner {
flex-grow: 1;
display: inline-flex;
flex-direction: row;
@ -67,47 +73,50 @@ private fun style() = """
padding: 3px 5px;
border: var(--pw-control-inner-border);
overflow: hidden;
}
}
.pw-button:hover .pw-button-inner {
.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 {
.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 {
.pw-button:focus-within .pw-button-inner {
border: var(--pw-control-inner-border-focus);
}
}
.pw-button:disabled .pw-button-inner {
.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 > * {
.pw-button-inner > * {
display: inline-block;
margin: 0 3px;
}
}
.pw-button-center {
.pw-button-center {
flex-grow: 1;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.pw-button-left,
.pw-button-right {
.pw-button-left,
.pw-button-right {
display: inline-flex;
align-content: center;
font-size: 11px;
}
""".trimIndent())
}
}
}
"""

3
webui/src/main/kotlin/world/phantasmal/webui/widgets/Control.kt
View File

@ -10,7 +10,6 @@ import world.phantasmal.observable.value.falseVal
*/
abstract class Control(
scope: CoroutineScope,
styles: List<() -> String>,
hidden: Val<Boolean> = falseVal(),
disabled: Val<Boolean> = falseVal(),
) : Widget(scope, styles, hidden, disabled)
) : Widget(scope, hidden, disabled)

63
webui/src/main/kotlin/world/phantasmal/webui/widgets/Input.kt
View File

@ -9,7 +9,6 @@ import world.phantasmal.webui.dom.span
abstract class Input<T>(
scope: CoroutineScope,
styles: List<() -> String>,
hidden: Val<Boolean>,
disabled: Val<Boolean>,
label: String?,
@ -21,12 +20,12 @@ abstract class Input<T>(
private val value: T?,
private val valueVal: Val<T>?,
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<T>(
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,36 +58,30 @@ abstract class Input<T>(
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 {
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 {
.pw-input .pw-input-inner {
box-sizing: border-box;
width: 100%;
height: 100%;
@ -97,22 +91,25 @@ private fun style() = """
color: var(--pw-input-text-color);
outline: none;
font-size: 13px;
}
}
.pw-input:hover {
.pw-input:hover {
border: var(--pw-input-border-hover);
}
}
.pw-input:focus-within {
.pw-input:focus-within {
border: var(--pw-input-border-focus);
}
}
.pw-input.disabled {
.pw-input.disabled {
border: var(--pw-input-border-disabled);
}
}
.pw-input.disabled .pw-input-inner {
.pw-input.disabled .pw-input-inner {
color: var(--pw-input-text-color-disabled);
background-color: var(--pw-input-bg-color-disabled);
}
""".trimIndent())
}
}
}
"""

27
webui/src/main/kotlin/world/phantasmal/webui/widgets/Label.kt
View File

@ -12,22 +12,29 @@ class Label(
disabled: Val<Boolean> = falseVal(),
private val text: String? = null,
private val textVal: Val<String>? = 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 {
companion object{
init {
@Suppress("CssUnusedSymbol", "CssUnresolvedCustomProperty")
// language=css
style("""
.pw-label.pw-disabled {
color: var(--pw-text-color-disabled);
}
""".trimIndent())
}
}
}
"""

3
webui/src/main/kotlin/world/phantasmal/webui/widgets/LabelledControl.kt
View File

@ -11,13 +11,12 @@ enum class LabelPosition {
abstract class LabelledControl(
scope: CoroutineScope,
styles: List<() -> String>,
hidden: Val<Boolean> = falseVal(),
disabled: Val<Boolean> = falseVal(),
label: String? = null,
labelVal: Val<String>? = null,
val preferredLabelPosition: LabelPosition,
) : Control(scope, styles, hidden, disabled) {
) : Control(scope, hidden, disabled) {
val label: Label? by lazy {
if (label == null && labelVal == null) {
null

26
webui/src/main/kotlin/world/phantasmal/webui/widgets/LazyLoader.kt
View File

@ -11,11 +11,13 @@ class LazyLoader(
hidden: Val<Boolean> = falseVal(),
disabled: Val<Boolean> = 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 {
companion object {
init {
@Suppress("CssUnusedSymbol")
// language=css
style("""
.pw-lazy-loader {
display: flex;
flex-direction: column;
align-items: stretch;
}
}
.pw-lazy-loader > * {
.pw-lazy-loader > * {
flex-grow: 1;
overflow: hidden;
}
""".trimIndent())
}
}
}
"""

24
webui/src/main/kotlin/world/phantasmal/webui/widgets/NumberInput.kt
View File

@ -18,7 +18,6 @@ abstract class NumberInput<T : Number>(
step: Int?,
) : Input<T>(
scope,
listOf(::style),
hidden,
disabled,
label,
@ -30,19 +29,24 @@ abstract class NumberInput<T : Number>(
value,
valueVal,
setValue,
maxLength = null,
min,
max,
step,
)
@Suppress("CssUnusedSymbol")
// language=css
private fun style() = """
.pw-number-input {
) {
companion object {
init {
@Suppress("CssUnusedSymbol")
// language=css
style("""
.pw-number-input {
width: 54px;
}
}
.pw-number-input .pw-number-input-inner {
.pw-number-input .pw-number-input-inner {
padding-right: 1px;
}
""".trimIndent())
}
}
}
"""

61
webui/src/main/kotlin/world/phantasmal/webui/widgets/TabContainer.kt
View File

@ -15,15 +15,18 @@ class TabContainer<T : Tab>(
disabled: Val<Boolean> = falseVal(),
private val ctrl: TabController<T>,
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<T : Tab>(
}
}
}
div(className = "pw-tab-container-panes") {
div {
className = "pw-tab-container-panes"
for (tab in ctrl.tabs) {
addChild(
LazyLoader(
@ -57,26 +62,25 @@ class TabContainer<T : Tab>(
companion object {
private const val ACTIVE_CLASS = "pw-active"
}
}
@Suppress("CssUnresolvedCustomProperty", "CssUnusedSymbol")
// language=css
private fun style() = """
.pw-tab-container {
init {
@Suppress("CssUnresolvedCustomProperty", "CssUnusedSymbol")
// language=css
style("""
.pw-tab-container {
display: flex;
flex-direction: column;
}
}
.pw-tab-container-bar {
.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 {
.pw-tab-container-tab {
box-sizing: border-box;
display: inline-flex;
align-items: center;
@ -87,27 +91,30 @@ private fun style() = """
background-color: var(--pw-tab-bg-color);
color: var(--pw-tab-text-color);
font-size: 13px;
}
}
.pw-tab-container-tab:hover {
.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 {
.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 {
.pw-tab-container-panes {
flex-grow: 1;
display: flex;
flex-direction: row;
overflow: hidden;
}
}
.pw-tab-container-panes > * {
.pw-tab-container-panes > * {
flex-grow: 1;
}
""".trimIndent())
}
}
}
"""

42
webui/src/main/kotlin/world/phantasmal/webui/widgets/TextInput.kt Normal file
View File

@ -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<Boolean> = falseVal(),
disabled: Val<Boolean> = falseVal(),
label: String? = null,
labelVal: Val<String>? = null,
preferredLabelPosition: LabelPosition = LabelPosition.Before,
value: String? = null,
valueVal: Val<String>? = null,
setValue: ((String) -> Unit)? = null,
maxLength: Int? = null
) : Input<String>(
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
}
}

42
webui/src/main/kotlin/world/phantasmal/webui/widgets/Toolbar.kt
View File

@ -11,15 +11,19 @@ class Toolbar(
hidden: Val<Boolean> = falseVal(),
disabled: Val<Boolean> = falseVal(),
children: List<Widget>,
) : 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 {
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 > * {
.pw-toolbar > * {
margin: 2px 1px;
}
}
.pw-toolbar > .pw-toolbar-group {
.pw-toolbar > .pw-toolbar-group {
margin: 2px 3px;
display: flex;
flex-direction: row;
align-items: center;
}
}
.pw-toolbar > .pw-toolbar-group > * {
.pw-toolbar > .pw-toolbar-group > * {
margin: 0 2px;
}
}
.pw-toolbar .pw-input {
.pw-toolbar .pw-input {
height: 26px;
}
""".trimIndent())
}
}
}
"""

34
webui/src/main/kotlin/world/phantasmal/webui/widgets/Widget.kt
View File

@ -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<String>) {
observe(observable) { textContent = it }
}
protected fun HTMLElement.hidden(observable: Observable<Boolean>) {
observe(observable) { hidden = it }
}
/**
* Appends a widget's element to the receiving node.
*/
protected fun <T : Widget> 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 <T> Node.bindChildrenTo(
protected fun <T> Node.bindChildrenTo(
list: ListVal<T>,
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

18
webui/src/test/kotlin/world/phantasmal/webui/widgets/WidgetTests.kt
View File

@ -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,9 +52,10 @@ 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)
@ -61,6 +64,7 @@ class WidgetTests : TestSuite() {
}
private inner class DummyWidget(
scope: CoroutineScope,
hidden: Val<Boolean> = falseVal(),
private val child: Widget? = null,
) : Widget(scope, hidden = hidden) {