added tailwind

src/main/scala/industries/sunshine/planningpoker/LiveChart.scala

@@ -2,6 +2,7 @@ package industries.sunshine.planningpoker
 
 import scala.scalajs.js
 import scala.scalajs.js.annotation.*
+import com.raquo.laminar.api.L.{*, given}
 
 import org.scalajs.dom
 
@@ -11,26 +12,49 @@ val javascriptLogo: String = js.native
 
 @main
 def LiveChart(): Unit =
-  dom.document.querySelector("#app").innerHTML = s"""
-    <div>
-      <a href="https://vitejs.dev" target="_blank">
-        <img src="/vite.svg" class="logo" alt="Vite logo" />
-      </a>
-      <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
-        <img src="$javascriptLogo" class="logo vanilla" alt="JavaScript logo" />
-      </a>
-      <h1>Hello Scala.js and Vite!</h1>
-      <div class="card">
-        <button id="counter" type="button"></button>
-      </div>
-      <p class="read-the-docs">
-        Click on the Vite logo to learn more
-      </p>
-    </div>
-  """
+  renderOnDomContentLoaded(
+    dom.document.getElementById("app"),
+    Main.appElement()
+  )
 
-  setupCounter(dom.document.getElementById("counter"))
-end LiveChart
+object Main {
+  def appElement(): Element = {
+    div(
+      className := "w-screen h-screen flex flex-col justify-center items-center bg-green-100",
+      div( // container for row of pictures
+        className := "flex flex-row w-1/2 justify-center",
+        a(className := "flex-initial",
+          href := "https://vitejs.dev", target := "_blank",
+          img(src := "/vite.svg", className := "", alt := "Vite logo"),
+        ),
+        a(className := "flex-initial",
+          href := "https://developer.mozilla.org/en-US/docs/Web/JavaScript", target := "_blank",
+          img(src := javascriptLogo, className := "", alt := "JavaScript logo"),
+        ),
+      ),
+      div(
+        className := "flex-initial",
+        h1("Hello Laminar and Vite and stuff and other stuff!"),
+      ),
+      div(className := "bg-blue-400 flex-initial rounded-lg border-2 border-slate-500 p-1 m-1",
+          counterButton(),
+      ),
+      p(className := "flex-initial",
+        "Click on the Vite logo to learn more",
+      ),
+    )
+  }
+}
+
+def counterButton(): Element = {
+  val counter = Var(0)
+  button(
+    tpe := "button",
+    "count is ",
+    child.text <-- counter,
+    onClick --> { event => counter.update(c => c + 1) },
+  )
+}
 
 def setupCounter(element: dom.Element): Unit =
   var counter = 0