Skip to content

Commit

Permalink
Added optional use of Sockets
Browse files Browse the repository at this point in the history
  • Loading branch information
@smilefx
smilefx committed Aug 29, 2024
1 parent cf58f40 commit 5724826
Show file tree
Hide file tree
Showing 26 changed files with 248 additions and 175 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -227,3 +227,4 @@ _site/

# Ruby Gemfile lock
Gemfile.lock
bgw-gui/src/jsMain/kotlin/tools/aqua/bgw/Config.kt
2 changes: 0 additions & 2 deletions bgw-gui/src/commonMain/kotlin/PropData.kt
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import data.event.EventData
import kotlinx.serialization.Serializable
import tools.aqua.bgw.core.AspectRatio
import tools.aqua.bgw.core.WindowMode
import tools.aqua.bgw.dialog.DialogType

typealias ID = String
Expand Down
111 changes: 53 additions & 58 deletions bgw-gui/src/jsMain/kotlin/tools/aqua/bgw/Client.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ import data.event.internal.LoadEventData
import kotlinx.browser.document
import kotlinx.serialization.decodeFromString
import jsonMapper
import kotlinx.browser.window
import org.w3c.dom.CustomEvent
import web.timers.setTimeout
import org.w3c.dom.HTMLElement
import org.w3c.dom.WebSocket
Expand All @@ -26,7 +28,9 @@ import tools.aqua.bgw.builder.NodeBuilder
import tools.aqua.bgw.elements.App
import tools.aqua.bgw.event.JCEFEventDispatcher
import web.dom.Element
import web.serviceworker.Client
import webViewType
import kotlin.js.Json
import kotlin.math.floor
import kotlin.random.Random

Expand All @@ -35,71 +39,62 @@ var webSocket : WebSocket? = null
var handlers : MutableMap<ID, (Data) -> Unit> = mutableMapOf()
var animator : Animator = Animator()

val container = document.createElement("div")
lateinit var container : HTMLElement

fun main() {
container.id = "root"
document.body!!.appendChild(container)
webSocket = WebSocket("ws://${document.location?.host}/ws")
webSocket?.onopen = { }
webSocket?.onmessage = { event ->
val receivedData = jsonMapper.decodeFromString<PropData>(event.data.toString()).data
when(receivedData) {
is AppData -> {
val app = receivedData

if(app.action == Action.HIDE_MENU_SCENE) {
console.log("[SCENE] Hiding Menu Scene")
val element = document.querySelector("#menuScene") as HTMLElement
element.classList.toggle("scene--visible", false)
setTimeout({
renderApp(app)
}, 300)
} else if(app.action == Action.SHOW_MENU_SCENE) {
renderApp(app)
val element = document.querySelector("#menuScene") as HTMLElement
setTimeout({
element.classList.toggle("scene--visible", true)
}, 50)
} else {
renderApp(app)
}
}
is AnimationData -> {
animator.startAnimation(receivedData) {
JCEFEventDispatcher.dispatchEvent(AnimationFinishedEventData().apply { id = it })
}
if (Config.USE_SOCKETS) {
webSocket = WebSocket("ws://${document.location?.host}/ws")
webSocket?.onopen = { }
webSocket?.onmessage = { event ->
val cont = document.getElementById("bgw-root")
if (cont != null) {
container = cont as HTMLElement
val receivedData = jsonMapper.decodeFromString<PropData>(event.data.toString()).data
handleReceivedData(receivedData!!)
}
/* is SceneData -> {
val scene = receivedData
val sceneComponents = scene.components.map { NodeBuilder.build(it) }
//println("Built: $sceneComponents")
println("Received SceneData with ${sceneComponents.size} components.")
render(App.create { data = scene }, container, callback = {
println("Rendered App to DOM!")
when(webViewType) {
WebViewType.JCEF -> { JCEFEventDispatcher.dispatchEvent(LoadEventData()) }
WebViewType.JAVAFX -> container.dispatchEvent(Event("bgwLoaded"))
}
Unit
})
}
} else {
document.addEventListener("BGW_MSG", {
val cont = document.getElementById("bgw-root")
if (cont != null) {
container = cont as HTMLElement
val data = (it as CustomEvent).detail
val receivedData = jsonMapper.decodeFromString<PropData>(data.toString()).data
handleReceivedData(receivedData!!)
}
is ComponentViewData -> {
//println("Received ComponentViewData for id ${receivedData.id} with ${receivedData.visual?.id}")
val component = receivedData
val handler = handlers[component.id]
handler?.invoke(component)
})
}
}

fun handleReceivedData(receivedData: Data) {
when (receivedData) {
is AppData -> {
val app = receivedData

if (app.action == Action.HIDE_MENU_SCENE) {
console.log("[SCENE] Hiding Menu Scene")
val element = document.querySelector("#menuScene") as HTMLElement
element.classList.toggle("scene--visible", false)
setTimeout({
renderApp(app)
}, 300)
} else if (app.action == Action.SHOW_MENU_SCENE) {
renderApp(app)
val element = document.querySelector("#menuScene") as HTMLElement
setTimeout({
element.classList.toggle("scene--visible", true)
}, 50)
} else {
renderApp(app)
}
is VisualData -> {
val visual = receivedData
val handler = handlers[visual.id]
handler?.invoke(visual)
} */
else -> {}
}
}

internalSocket?.onmessage = {
is AnimationData -> {
animator.startAnimation(receivedData) {
JCEFEventDispatcher.dispatchEvent(AnimationFinishedEventData().apply { id = it })
}
}
else -> {}
}
}

Expand Down
120 changes: 71 additions & 49 deletions bgw-gui/src/jsMain/kotlin/tools/aqua/bgw/elements/App.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,92 +39,111 @@ val App = FC<AppProps> { props ->
}
}

"*" {
"#bgw-root-container" {
width = 100.pct
height = 100.pct
position = Position.absolute
left = 0.px
top = 0.px
display = Display.flex
justifyContent = JustifyContent.center
alignItems = AlignItems.center
backgroundColor = rgb(0, 0, 0, 0.0)
overflow = Overflow.hidden
containerName = bgwContainer()
containerType = ContainerType.size
}

"#bgw-root *" {
transformOrigin = TransformOrigin(GeometryPosition.center, GeometryPosition.center)
}

// BLUE
"@media (min-aspect-ratio: ${props.data.width}/${props.data.height}) and (orientation: landscape)" {
"html" {
fontSize = (100.0 / props.data.height).vh
width = 100.vw
height = 100.vh
"@container bgwContainer (min-aspect-ratio: ${props.data.width}/${props.data.height}) and (orientation: landscape)" {
"#bgw-root" {
fontSize = (100.0 / props.data.height).cqh
width = 100.cqw
height = 100.cqh
margin = 0.px
overflow = Overflow.hidden
userSelect = None.none
}

"bgw_scenes" {
height = 100.vh
width = (100.0 / props.data.height * props.data.width).vh
height = 100.cqh
width = (100.0 / props.data.height * props.data.width).cqh
position = Position.relative
backgroundColor = rgb(0, 0, 0, 0.0)
overflow = Overflow.hidden
display = Display.block
}
}

// RED
"@media (max-aspect-ratio: ${props.data.width}/${props.data.height}) and (orientation: landscape)" {
"html" {
fontSize = (100.0 / props.data.width).vw
width = 100.vw
height = 100.vh
"@container bgwContainer (max-aspect-ratio: ${props.data.width}/${props.data.height}) and (orientation: landscape)" {
"#bgw-root" {
fontSize = (100.0 / props.data.width).cqw
width = 100.cqw
height = 100.cqh
margin = 0.px
overflow = Overflow.hidden
userSelect = None.none
}

"bgw_scenes" {
width = 100.vw
height = (100.0 / props.data.width * props.data.height).vw
width = 100.cqw
height = (100.0 / props.data.width * props.data.height).cqw
position = Position.relative
backgroundColor = rgb(0, 0, 0, 0.0)
overflow = Overflow.hidden
display = Display.block
}
}

// GREEN
"@media (min-aspect-ratio: ${props.data.width}/${props.data.height}) and (orientation: portrait)" {
"html" {
fontSize = (100.0 / props.data.height).vh
width = 100.vw
height = 100.vh
"@container bgwContainer (min-aspect-ratio: ${props.data.width}/${props.data.height}) and (orientation: portrait)" {
"#bgw-root" {
fontSize = (100.0 / props.data.height).cqh
width = 100.cqw
height = 100.cqh
margin = 0.px
overflow = Overflow.hidden
userSelect = None.none
}

"bgw_scenes" {
height = 100.vh
width = (100.0 / props.data.height * props.data.width).vh
height = 100.cqh
width = (100.0 / props.data.height * props.data.width).cqh
position = Position.relative
backgroundColor = rgb(0, 0, 0, 0.0)
overflow = Overflow.hidden
display = Display.block
}
}

// YELLOW
"@media (max-aspect-ratio: ${props.data.width}/${props.data.height}) and (orientation: portrait)" {
"html" {
fontSize = (100.0 / props.data.width).vw
width = 100.vw
height = 100.vh
"@container bgwContainer (max-aspect-ratio: ${props.data.width}/${props.data.height}) and (orientation: portrait)" {
"#bgw-root" {
fontSize = (100.0 / props.data.width).cqw
width = 100.cqw
height = 100.cqh
margin = 0.px
overflow = Overflow.hidden
userSelect = None.none
}

"bgw_scenes" {
width = 100.vw
height = (100.0 / props.data.width * props.data.height).vw
width = 100.cqw
height = (100.0 / props.data.width * props.data.height).cqw
position = Position.relative
backgroundColor = rgb(0, 0, 0, 1.0)
overflow = Overflow.hidden
display = Display.block
}
}

"body" {
backgroundColor = rgb(0, 0, 0, 0.0)
"#bgw-root" {
backgroundColor = rgb(0, 0, 0, 1.0)
color = rgb(0, 0, 0)
margin = 0.px
}
Expand Down Expand Up @@ -169,7 +188,7 @@ val App = FC<AppProps> { props ->

"bgw_menu_scene.scene--visible > bgw_scene" {
opacity = number(1.0)
backdropFilter = blur(DEFAULT_BLUR_RADIUS.rem)
backdropFilter = blur(DEFAULT_BLUR_RADIUS.em)
}

"bgw_camera_pane" {
Expand Down Expand Up @@ -224,56 +243,56 @@ val App = FC<AppProps> { props ->
}

"input[type='color']::-webkit-color-swatch" {
borderRadius = 3.rem
borderRadius = 3.em
border = None.none
}

"bgw_togglebutton" {
position = Position.relative
display = Display.inlineFlex
width = 30.rem
height = 18.rem
width = 30.em
height = 18.em
}

"bgw_togglebutton > input[type='checkbox']" {
opacity = number(0.0)
position = Position.relative
width = 36.rem
minWidth = 36.rem
width = 36.em
minWidth = 36.em
height = 100.pct
}

".toggle" {
position = Position.absolute
left = 4.rem
width = 30.rem
height = 18.rem
left = 4.em
width = 30.em
height = 18.em
backgroundColor = rgb(145,145,145)
transition = transition(300, "background-color")
borderRadius = 3.rem
borderRadius = 3.em
}

".toggle::before" {
content = Content("")
position = Position.absolute
width = 12.rem
height = 12.rem
left = 3.rem
top = 3.rem
width = 12.em
height = 12.em
left = 3.em
top = 3.em
backgroundColor = rgb(255, 255, 255)
transition = transition(300, "transform")
borderRadius = 3.rem
borderRadius = 3.em
}

"bgw_togglebutton > input[type='checkbox']:checked + .toggle" {
backgroundColor = rgb(0,117,255)
}

"bgw_togglebutton > input[type='checkbox']:checked + .toggle::before" {
transform = translatex(12.rem)
transform = translatex(12.em)
}

"#root" {
"#bgw-root" {
width = 100.pct
height = 100.pct
position = Position.absolute
Expand All @@ -282,7 +301,7 @@ val App = FC<AppProps> { props ->
display = Display.flex
justifyContent = JustifyContent.center
alignItems = AlignItems.center
backgroundColor = rgb(0, 0, 0, 0.0)
backgroundColor = rgb(0, 0, 0, 1.0)
overflow = Overflow.hidden
}
}
Expand Down Expand Up @@ -370,6 +389,9 @@ inline fun fit(): LengthType.FitContent =
inline fun minContent(): GridTemplateTracks =
"min-content".unsafeCast<GridTemplateTracks>()

inline fun bgwContainer(): ContainerName =
"bgwContainer".unsafeCast<ContainerName>()

inline fun menuTransition(): Transition =
".3s opacity, .3s backdrop-filter".unsafeCast<Transition>()

Expand Down
Loading

0 comments on commit 5724826

Please sign in to comment.