Most work done on single player game

shared/src/components.gleam

@@ -1,4 +1,3 @@
-import gleam/int
 import gleam/option.{type Option, None, Some}
 import lustre/attribute.{class}
 import lustre/element.{type Element}
@@ -7,10 +6,10 @@ import lustre/event
 
 pub fn click_cell(
   tag: Option(String),
-  id_value_pair: #(String, String),
-  on_click: fn(String) -> msg,
+  id: Option(String),
+  value: String,
+  on_click: fn(Option(String)) -> msg,
 ) -> Element(msg) {
-  let #(id, value) = id_value_pair
   html.div([class("participant-login"), event.on_click(on_click(id))], [
     html.div([class("participant-name")], [
       html.text(
@@ -24,3 +23,31 @@ pub fn click_cell(
     ]),
   ])
 }
+
+pub fn click_cell_pair(
+  tag: Option(String),
+  pair: Option(#(String, String)),
+  on_click: fn(Option(#(String, String))) -> msg,
+) -> Element(msg) {
+  let value = case pair {
+    Some(pair) -> {
+      let #(_, value) = pair
+      value
+    }
+    None -> ""
+  }
+  html.div([class("participant-login"), event.on_click(on_click(pair))], [
+    html.div([class("participant-name")], [
+      html.div([], [
+        html.text(
+          "► "
+          <> case tag {
+            Some(text) -> "[#" <> text <> "] "
+            None -> ""
+          },
+        ),
+      ]),
+      html.text(value),
+    ]),
+  ])
+}