Project restructure for better login

Restructure project into client / server to support a "pure javascript" gleam
project to work before the having enough info to launch the server components.

client/src/client.gleam

@@ -1,14 +1,18 @@
+import gleam/int
 import gleam/json
 import gleam/list
+import gleam/option.{type Option, None, Some}
 import gleam/result
+import gleam/string
 import lustre
-import lustre/attribute
+import lustre/attribute.{class}
 import lustre/effect.{type Effect}
 import lustre/element.{type Element}
 import lustre/element/html
+import lustre/event
 import plinth/browser/document
 import plinth/browser/element as plinth_element
-import shared
+import shared.{type Room}
 
 pub fn main() {
   let initial_items =
@@ -27,57 +31,130 @@ pub fn main() {
 }
 
 type Model {
-  Model(rooms: List(String), name: String)
+  Model(
+    rooms: List(Room),
+    name: Option(String),
+    pin: Option(String),
+    typed: String,
+  )
 }
 
-fn init(items: List(String)) -> #(Model, Effect(Msg)) {
-  let model = Model(rooms: items, name: "")
+fn init(items: List(Room)) -> #(Model, Effect(State)) {
+  let model = Model(rooms: items, name: None, pin: None, typed: "")
 
   #(model, effect.none())
 }
 
-type Msg {
-  UserTypedNewItem(String)
-  UserAddedItem
+type State {
+  SelectRoom(String)
+  Initial
+  KeyIn(String)
 }
 
-fn update(model: Model, msg: Msg) -> #(Model, Effect(Msg)) {
+fn update(model: Model, msg: State) -> #(Model, Effect(msg)) {
   case msg {
-    UserAddedItem -> {
+    Initial ->
       case model.name {
-        "" -> #(model, effect.none())
-        name -> {
-          let updated_items = [name, ..model.rooms]
-
-          #(Model(rooms: updated_items, name: ""), effect.none())
-        }
+        _ -> #(model, effect.none())
+      }
+    SelectRoom(text) -> {
+      #(Model(..model, name: Some(text)), effect.none())
+    }
+    KeyIn(newpin) -> {
+      case string.length(newpin) < 4 {
+        False -> #(Model(..model, pin: Some(newpin)), effect.none())
+        True -> #(Model(..model, typed: newpin), effect.none())
       }
     }
-
-    UserTypedNewItem(text) -> #(Model(..model, name: text), effect.none())
   }
 }
 
-fn view(model: Model) -> Element(Msg) {
-  let styles = [
-    #("max-width", "30ch"),
-    #("margin", "0 auto"),
-    #("display", "flex"),
-    #("flex-direction", "column"),
-    #("gap", "1em"),
-  ]
+fn view(model: Model) -> Element(State) {
+  case model.name, model.pin {
+    None, _ ->
+      html.div([], [
+        html.div([class("terminal-header")], [
+          html.div([class("terminal-status")], [
+            html.span([class("status-blink")], [html.text("●")]),
+            html.text(" SYSTEM READY"),
+            html.span([class("ml-8")], [
+              html.text("<< Please Log On to use QuizTerm. >>"),
+            ]),
+          ]),
+        ]),
+        view_room_list(model.rooms),
+      ])
+    Some(_), None -> {
+      html.div([], [
+        html.div([class("terminal-header")], [
+          html.div([class("terminal-status")], [
+            html.span([class("status-blink")], [html.text("●")]),
+            html.text(" SYSTEM READY"),
+            html.span([class("ml-8")], [
+              html.text("<< Please Log On to use QuizTerm. >>"),
+            ]),
+          ]),
+        ]),
+        pin(),
+      ])
+    }
+    Some(_), Some(_) -> {
+      html.div([], [
+        html.div([class("terminal-header")], [
+          html.div([class("terminal-status")], [
+            html.span([class("status-blink")], [html.text("●")]),
+            html.text(" SYSTEM READY"),
+            html.span([class("ml-8")], [
+              html.text("<< Please Log On to use QuizTerm. >>"),
+            ]),
+          ]),
+        ]),
+        html.text("FETCHING USERS FOR ROOM"),
+      ])
+    }
+  }
+}
 
-  html.div([attribute.styles(styles)], [
-    html.h1([], [html.text("Select your QuizRoom")]),
-    view_room_list(model.rooms),
+fn pin() -> Element(State) {
+  html.div([attribute.class("terminal-section")], [
+    html.div([attribute.class("terminal-label mb-4")], [
+      html.text("Select room to play in"),
+    ]),
+    html.div([attribute.class("participants-grid")], [
+      html.text("Enter PIN code for room"),
+      html.input([
+        attribute.type_("password"),
+        event.on_input(KeyIn),
+        attribute.autofocus(True),
+      ]),
+    ]),
   ])
 }
 
-fn view_room_list(items: List(String)) -> Element(Msg) {
-  case items {
-    [] -> html.p([], [html.text("No items in your list yet.")])
-    _ -> {
-      html.ul([], list.map(items, fn(item) { html.li([], [html.text(item)]) }))
-    }
-  }
+fn view_room_list(items: List(Room)) -> Element(State) {
+  html.div([attribute.class("terminal-section")], [
+    html.div([attribute.class("terminal-label mb-4")], [
+      html.text("Select room to play in"),
+    ]),
+    html.div([attribute.class("participants-grid")], case items {
+      [] -> [html.text("No items in your list yet.")]
+      _ -> {
+        list.index_map(items, fn(item, index) {
+          content_cell(index, item, SelectRoom)
+        })
+      }
+    }),
+  ])
+}
+
+fn content_cell(
+  number: Int,
+  room: Room,
+  on_click: fn(String) -> msg,
+) -> Element(msg) {
+  html.div([class("participant-login"), event.on_click(on_click(room.name))], [
+    html.div([class("participant-name")], [
+      html.text("► " <> "[#" <> int.to_string(number) <> "] Team " <> room.name),
+    ]),
+  ])
 }