diff --git a/bgw-gui/src/jsMain/kotlin/tools/aqua/bgw/elements/App.kt b/bgw-gui/src/jsMain/kotlin/tools/aqua/bgw/elements/App.kt index 6dafea71d..1ebd22034 100644 --- a/bgw-gui/src/jsMain/kotlin/tools/aqua/bgw/elements/App.kt +++ b/bgw-gui/src/jsMain/kotlin/tools/aqua/bgw/elements/App.kt @@ -4,18 +4,21 @@ import Action import AppData import web.cssom.* import emotion.react.Global +import emotion.react.css import emotion.react.styles -import org.w3c.dom.HTMLDivElement import react.FC import react.IntrinsicType import react.Props import react.dom.html.HTMLAttributes +import react.dom.html.ReactHTML.div +import react.dom.html.ReactHTML.img import react.useEffect import tools.aqua.bgw.builder.SceneBuilder import tools.aqua.bgw.core.DEFAULT_BLUR_RADIUS import tools.aqua.bgw.core.DEFAULT_MENU_SCENE_OPACITY import tools.aqua.bgw.webSocket import web.dom.Element +import web.dom.document external interface AppProps : Props { var data: AppData @@ -284,6 +287,42 @@ val App = FC { props -> } } } + + /* div { + id = "bgw_loading" + css { + position = Position.fixed + width = 100.pct + height = 100.pct + backgroundColor = rgb(20,20,20, 1.0) + overflow = Overflow.hidden + display = Display.flex + justifyContent = JustifyContent.center + alignItems = AlignItems.center + zIndex = integer(5000000) + } + + img { + src = "logo_animated.svg" + } + + /* useEffect { + val loadingSVG = document.createElement("svg") + loadingSVG.id = "eRjslcmEZrC1" + loadingSVG.setAttribute("xmlns", "http://www.w3.org/2000/svg") + loadingSVG.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink") + loadingSVG.setAttribute("viewBox", "0 0 262.985 228.649") + loadingSVG.setAttribute("shape-rendering", "geometricPrecision") + loadingSVG.setAttribute("text-rendering", "geometricPrecision") + loadingSVG.setAttribute("width", "2560") + loadingSVG.setAttribute("height", "1313") + + loadingSVG.innerHTML = """""".trimIndent() + + document.getElementById("bgw_loading")?.appendChild(loadingSVG) + } */ + } */ + bgwScenes { val gameScene = props.data.gameScene if (gameScene != null) { @@ -320,7 +359,6 @@ inline val bgwContents: IntrinsicType> inline val bgwText: IntrinsicType> get() = "bgw_text".unsafeCast>>() - inline fun polygonPath( value: String, ): ClipPath = diff --git a/bgw-gui/src/jsMain/kotlin/tools/aqua/bgw/elements/CSSBuilder.kt b/bgw-gui/src/jsMain/kotlin/tools/aqua/bgw/elements/CSSBuilder.kt index 085fc4d13..9145b2b3d 100644 --- a/bgw-gui/src/jsMain/kotlin/tools/aqua/bgw/elements/CSSBuilder.kt +++ b/bgw-gui/src/jsMain/kotlin/tools/aqua/bgw/elements/CSSBuilder.kt @@ -25,7 +25,6 @@ fun PropertiesBuilder.cssBuilder(componentViewData: ComponentViewData) { pointerEvents = if(!componentViewData.isDisabled) PointerEvents.all else None.none rotate = componentViewData.rotation.deg.unsafeCast() scale = "${componentViewData.scaleX} ${componentViewData.scaleY} 1".unsafeCast() - // TODO... } fun PropertiesBuilder.cssBuilder(componentViewData: UIComponentData) { @@ -56,6 +55,12 @@ fun PropertiesBuilder.alignmentBuilder(componentViewData: LabeledUIComponentData "right" -> JustifyContent.flexEnd else -> JustifyContent.center } + textAlign = when(componentViewData.alignment.first) { + "left" -> TextAlign.left + "center" -> TextAlign.center + "right" -> TextAlign.right + else -> TextAlign.center + } alignItems = when(componentViewData.alignment.second) { "top" -> AlignItems.flexStart "center" -> AlignItems.center diff --git a/bgw-gui/src/jsMain/kotlin/tools/aqua/bgw/elements/layoutviews/CameraPane.kt b/bgw-gui/src/jsMain/kotlin/tools/aqua/bgw/elements/layoutviews/CameraPane.kt index 2b1bf68a4..eba4b09be 100644 --- a/bgw-gui/src/jsMain/kotlin/tools/aqua/bgw/elements/layoutviews/CameraPane.kt +++ b/bgw-gui/src/jsMain/kotlin/tools/aqua/bgw/elements/layoutviews/CameraPane.kt @@ -282,6 +282,7 @@ val CameraPane = FC { props -> className = ClassName("cameraPane") css { cssBuilderIntern(props.data) + cursor = Cursor.move } bgwCameraContent { @@ -297,6 +298,7 @@ val CameraPane = FC { props -> position = Position.absolute left = 0.px top = 0.px + overflow = Overflow.hidden } bgwVisuals { diff --git a/bgw-gui/src/jsMain/kotlin/tools/aqua/bgw/elements/uicomponents/Button.kt b/bgw-gui/src/jsMain/kotlin/tools/aqua/bgw/elements/uicomponents/Button.kt index 7e8fcb5a0..edff3f27b 100644 --- a/bgw-gui/src/jsMain/kotlin/tools/aqua/bgw/elements/uicomponents/Button.kt +++ b/bgw-gui/src/jsMain/kotlin/tools/aqua/bgw/elements/uicomponents/Button.kt @@ -28,8 +28,6 @@ external interface ButtonProps : Props { fun PropertiesBuilder.cssBuilderIntern(componentViewData: ButtonData) { cssBuilder(componentViewData) - justifyContent = JustifyContent.center - alignItems = AlignItems.center cursor = Cursor.pointer hover { diff --git a/bgw-gui/src/jsMain/kotlin/tools/aqua/bgw/elements/uicomponents/ComboBox.kt b/bgw-gui/src/jsMain/kotlin/tools/aqua/bgw/elements/uicomponents/ComboBox.kt index 753600959..5a639b470 100644 --- a/bgw-gui/src/jsMain/kotlin/tools/aqua/bgw/elements/uicomponents/ComboBox.kt +++ b/bgw-gui/src/jsMain/kotlin/tools/aqua/bgw/elements/uicomponents/ComboBox.kt @@ -51,6 +51,8 @@ val ComboBox = FC { props -> fontBuilder(props.data) opacity = number(0.5) } + outline = None.none + border = None.none position = Position.absolute } option { diff --git a/bgw-gui/src/jsMain/kotlin/tools/aqua/bgw/elements/visual/TextVisual.kt b/bgw-gui/src/jsMain/kotlin/tools/aqua/bgw/elements/visual/TextVisual.kt index 4d5e5f0cc..45c968bcc 100644 --- a/bgw-gui/src/jsMain/kotlin/tools/aqua/bgw/elements/visual/TextVisual.kt +++ b/bgw-gui/src/jsMain/kotlin/tools/aqua/bgw/elements/visual/TextVisual.kt @@ -39,6 +39,12 @@ val TextVisual = FC { props -> "right" -> JustifyContent.flexEnd else -> JustifyContent.center } + textAlign = when(props.data.alignment.first) { + "left" -> TextAlign.left + "center" -> TextAlign.center + "right" -> TextAlign.right + else -> TextAlign.center + } alignItems = when(props.data.alignment.second) { "top" -> AlignItems.flexStart "center" -> AlignItems.center diff --git a/bgw-gui/src/jsMain/resources/logo_animated.svg b/bgw-gui/src/jsMain/resources/logo_animated.svg new file mode 100644 index 000000000..4bcbc4b3c --- /dev/null +++ b/bgw-gui/src/jsMain/resources/logo_animated.svg @@ -0,0 +1,5 @@ + + + diff --git a/bgw-gui/src/jvmMain/kotlin/tools/aqua/bgw/application/JCEFApplication.kt b/bgw-gui/src/jvmMain/kotlin/tools/aqua/bgw/application/JCEFApplication.kt index 3e03574bd..d119edba1 100644 --- a/bgw-gui/src/jvmMain/kotlin/tools/aqua/bgw/application/JCEFApplication.kt +++ b/bgw-gui/src/jvmMain/kotlin/tools/aqua/bgw/application/JCEFApplication.kt @@ -53,6 +53,7 @@ import kotlin.system.exitProcess object Constants { val PORT = ServerSocket(0).use { it.localPort } + // val PORT = 5173 } class JCEFApplication : Application { diff --git a/bgw-gui/src/jvmMain/kotlin/tools/aqua/bgw/binding/KtorApplication.kt b/bgw-gui/src/jvmMain/kotlin/tools/aqua/bgw/binding/KtorApplication.kt index e5c2d08bc..f44aef944 100644 --- a/bgw-gui/src/jvmMain/kotlin/tools/aqua/bgw/binding/KtorApplication.kt +++ b/bgw-gui/src/jvmMain/kotlin/tools/aqua/bgw/binding/KtorApplication.kt @@ -10,12 +10,10 @@ import io.ktor.server.routing.* import io.ktor.server.websocket.* import io.ktor.websocket.* import kotlinx.coroutines.channels.ClosedSendChannelException -import kotlinx.html.HTML -import kotlinx.html.body -import kotlinx.html.script import kotlinx.serialization.encodeToString import jsonMapper import kotlinx.coroutines.* +import kotlinx.html.* import tools.aqua.bgw.core.Frontend import java.net.ServerSocket import java.time.Duration @@ -48,6 +46,7 @@ fun HTML.index() { script(src = "/static/bgw-gui.js") {} } } + fun Application.module() { configureRouting() install(WebSockets) {