planning-poker-gwargh/src/main/scala/industries/sunshine/planningpoker/LiveChart.scala

69 lines
1.9 KiB
Scala

package industries.sunshine.planningpoker
import scala.scalajs.js
import scala.scalajs.js.annotation.*
import com.raquo.laminar.api.L.{*, given}
import org.scalajs.dom
// import javascriptLogo from "/javascript.svg"
@js.native @JSImport("/javascript.svg", JSImport.Default)
val javascriptLogo: String = js.native
@main
def LiveChart(): Unit =
renderOnDomContentLoaded(
dom.document.getElementById("app"),
Main.appElement()
)
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
def setCounter(count: Int): Unit =
counter = count
element.innerHTML = s"count is $counter"
element.addEventListener("click", e => setCounter(counter + 1))
setCounter(0)
end setupCounter