gistfile1.txt

import lustre
import lustre/attribute
import lustre/element/html
import lustre/element.{type Element}
import lustre/event
import gleam/int
import gleam/list
import gleam/io
import gleam/dynamic/decode

pub fn main() {
  let app = lustre.simple(init, update, view)
  let assert Ok(_) = lustre.start(app, "#app", Nil)

  Nil
}
type Model {
  Model(x: Int, y: Int)
} 

fn init(_) -> Model {
  Model(x: 0, y: 0)
}

pub type Msg {
PickStat(x: Int, y: Int)
}

fn update(model: Model, msg: Msg) -> Model {
  echo model
  case msg {
    PickStat(x, y) -> Model(x, y)
  }
}

fn view(model: Model) -> Element(Msg) {
  let stat = ["Strength", "Intelligence", "Luck", "Wisdom", "Perception", "Dexterity",   "Speed", "Endurance","Constitution", "Appearance", "Charisma", "Willpower"]
  let numbers = list.repeat(0, times: 12)
    |> list.map(fn(_) { int.random(12) + 1 })
  let get_drop =event.on("drop",  {
      use x <- decode.field("offsetX", decode.int)
      use y <- decode.field("offsetY", decode.int)

      decode.success(PickStat(x, y))
})
      html.div([], [
        html.h1([], [html.text("Create a new character")]),
        html.section([], [
          html.h2([], [html.text("Name")]),
          html.input([attribute.name("name"), attribute.type_("text")]),
          html.div([attribute.class("stats-grid")], 
            list.map(stat, fn(stat) {
              html.h3([attribute.class("stat-card")], [html.text(stat)])
            })
          ),
          html.div([attribute.class("numbers-grid")], 
            list.map(numbers, fn(number) {
              html.h3([attribute.class("number-card"), attribute.draggable(True), get_drop], [html.text(int.to_string(number))])
            })
          )
        ]),
        html.link([attribute.rel("stylesheet"), attribute.href("priv/static/ia.css")]),
      ])
    
}