Initial commit

src/jsMain/kotlin/nl/astraeus/vst/chip/view/MainView.kt

@@ -0,0 +1,184 @@
+package nl.astraeus.vst.chip.view
+
+import daw.style.Css
+import daw.style.Css.defineCss
+import daw.style.Css.noTextSelect
+import daw.style.CssId
+import daw.style.CssName
+import daw.style.hover
+import kotlinx.html.FlowContent
+import kotlinx.html.a
+import kotlinx.html.classes
+import kotlinx.html.div
+import kotlinx.html.h1
+import kotlinx.html.hr
+import kotlinx.html.js.onClickFunction
+import kotlinx.html.js.onMouseDownFunction
+import kotlinx.html.js.onMouseUpFunction
+import kotlinx.html.span
+import nl.astraeus.css.properties.BoxSizing
+import nl.astraeus.css.properties.FontWeight
+import nl.astraeus.css.properties.prc
+import nl.astraeus.css.properties.px
+import nl.astraeus.css.properties.rem
+import nl.astraeus.css.style.cls
+import nl.astraeus.komp.HtmlBuilder
+import nl.astraeus.komp.Komponent
+import nl.astraeus.vst.Note
+import nl.astraeus.vst.chip.audio.VstChipWorklet
+import nl.astraeus.vst.chip.channel.Broadcaster
+import org.khronos.webgl.Int32Array
+
+object MainView : Komponent() {
+  private var messages: MutableList<String> = ArrayList()
+
+  init {
+    MainViewCss
+  }
+
+  fun addMessage(message: String) {
+    messages.add(message)
+    while (messages.size > 10) {
+      messages.removeAt(0)
+    }
+    requestUpdate()
+  }
+
+  override fun HtmlBuilder.render() {
+    div {
+      h1 {
+        +"VST Chip"
+      }
+      div {
+        +"Hello, World!"
+      }
+      div {
+        if (VstChipWorklet.created) {
+          +"Worklet created"
+        } else {
+          a {
+            href = "#"
+            +"Create worklet"
+            onClickFunction = {
+              VstChipWorklet.create {
+                requestUpdate()
+              }
+            }
+          }
+        }
+      }
+      div {
+        a {
+          href = "#"
+          +"Send broadcast test message"
+          onClickFunction = {
+            Broadcaster.send("Test message")
+          }
+        }
+      }
+      div {
+        a {
+          href = "#"
+          +"Note on"
+          onClickFunction = {
+            VstChipWorklet.postMessage("test_on")
+          }
+        }
+        a {
+          href = "#"
+          +"Note off"
+          onClickFunction = {
+            VstChipWorklet.postMessage("test_off")
+          }
+        }
+      }
+
+      hr {}
+
+      repeat(9) {
+        div(classes = MainViewCss.NoteBarCss.name) {
+          for (index in it*12+12..it*12+23) {
+            notePlayer(Note.entries[index])
+          }
+        }
+      }
+
+      hr {}
+
+      for (message in messages) {
+        div {
+          +message
+        }
+      }
+    }
+  }
+
+  private fun FlowContent.notePlayer(note: Note) {
+    span {
+      a(classes = MainViewCss.ButtonCss.name) {
+        href = "#"
+        +note.sharp
+        onMouseDownFunction = {
+          VstChipWorklet.postMessage(Int32Array(arrayOf(0x90, note.ordinal, 32)))
+        }
+        onMouseUpFunction = {
+          VstChipWorklet.postMessage(Int32Array(arrayOf(0x90, note.ordinal, 0)))
+        }
+        /*
+        onMouseOutFunction = {
+          VstChipWorklet.postMessage(Int32Array(arrayOf(0x90, note.ordinal, 0)))
+        }
+*/
+      }
+    }
+  }
+
+  object MainViewCss : CssId("main") {
+    object ActiveCss : CssName()
+    object ButtonCss : CssName()
+    object NoteBarCss : CssName()
+
+    init {
+      defineCss {
+        select("*") {
+          select("*:before") {
+            select("*:after") {
+              boxSizing(BoxSizing.borderBox)
+            }
+          }
+        }
+        select("html", "body") {
+          margin(0.px)
+          padding(0.px)
+          height(100.prc)
+
+          color(Css.currentStyle.mainFontColor)
+          backgroundColor(Css.currentStyle.mainBackgroundColor)
+
+          fontFamily("JetbrainsMono, monospace")
+          fontSize(14.px)
+          fontWeight(FontWeight.bold)
+
+          //transition()
+          noTextSelect()
+        }
+        select(cls(ButtonCss)) {
+          margin(1.rem)
+          padding(1.rem)
+          backgroundColor(Css.currentStyle.buttonBackgroundColor)
+
+          hover {
+            backgroundColor(Css.currentStyle.buttonBackgroundColor.hover())
+          }
+        }
+        select(cls(ActiveCss)) {
+          backgroundColor(Css.currentStyle.selectedBackgroundColor)
+        }
+        select(cls(NoteBarCss)) {
+          minHeight(4.rem)
+        }
+      }
+    }
+  }
+
+}