From 5dd3f52a1b2fe5b83739e4de386dbfcbc88e438c Mon Sep 17 00:00:00 2001
From: luigi-borriello00 <luigi.borriello2@studio.unibo.it>
Date: Wed, 20 Sep 2023 16:17:35 +0200
Subject: [PATCH] feat(setup-view): make it reactive

---
 .../controllers/game/SetUpController.scala    |  9 ++-
 .../scala/scatan/views/game/SetUpView.scala   | 69 +++++++++++++------
 2 files changed, 54 insertions(+), 24 deletions(-)

diff --git a/src/main/scala/scatan/controllers/game/SetUpController.scala b/src/main/scala/scatan/controllers/game/SetUpController.scala
index b159cb1a..73008b44 100644
--- a/src/main/scala/scatan/controllers/game/SetUpController.scala
+++ b/src/main/scala/scatan/controllers/game/SetUpController.scala
@@ -9,7 +9,8 @@ import scatan.lib.mvc.Controller
 
 /** This is the controller for the setup page.
   */
-trait SetUpController extends Controller
+trait SetUpController extends Controller:
+  def startGame(usernames: String*): Unit
 
 object SetUpController:
   def apply(requirements: Controller.Requirements[SetUpView, ApplicationState]): SetUpController =
@@ -21,4 +22,8 @@ object SetUpController:
   */
 private class SetUpControllerImpl(requirements: Controller.Requirements[SetUpView, ApplicationState])
     extends BaseController(requirements)
-    with SetUpController
+    with SetUpController:
+
+  override def startGame(usernames: String*): Unit =
+    this.model.update(_.createGame(usernames*))
+    print("start game")
diff --git a/src/main/scala/scatan/views/game/SetUpView.scala b/src/main/scala/scatan/views/game/SetUpView.scala
index 78a032f7..512d7f66 100644
--- a/src/main/scala/scatan/views/game/SetUpView.scala
+++ b/src/main/scala/scatan/views/game/SetUpView.scala
@@ -32,18 +32,26 @@ private class ScalaJsSetUpView(container: String, requirements: View.Requirement
     extends BaseScalaJSView(container, requirements)
     with SetUpView:
 
-  val numberOfUsers: Int = 3
+  val numberOfUsers: Var[Int] = Var(3)
+  val reactiveNumberOfUsers: Signal[Int] = numberOfUsers.signal
+
+  private def validateNames(usernames: String*) =
+    usernames.forall(_.matches(".*\\S.*"))
 
   @SuppressWarnings(Array("org.wartremover.warts.AsInstanceOf"))
   override def switchToGame(): Unit =
     val usernames =
-      for i <- 1 to numberOfUsers
+      for i <- 1 to numberOfUsers.now()
       yield document
         .getElementsByClassName("setup-menu-textbox")
         .item(i - 1)
         .asInstanceOf[org.scalajs.dom.raw.HTMLInputElement]
         .value
-    this.navigateTo(Pages.Game)
+    if validateNames(usernames*) then
+      println(usernames)
+      // this.controller.startGame(usernames*)
+      print(this.controller)
+      this.navigateTo(Pages.Game)
 
   override def switchToHome(): Unit =
     this.navigateTo(Pages.Home)
@@ -58,27 +66,44 @@ private class ScalaJsSetUpView(container: String, requirements: View.Requirement
       ),
       div(
         cls := "setup-menu",
-        for i <- 1 to numberOfUsers
-        yield div(
-          cls := "setup-menu-textbox-container",
-          input(
-            cls := "setup-menu-textbox",
-            placeholder := "Player " + i
+        // combobox for choose 3 or 4 players
+        select(
+          cls := "setup-menu-combobox",
+          onChange.mapToValue.map(_.toInt) --> numberOfUsers,
+          option(
+            cls := "setup-menu-combobox-option",
+            value := "3",
+            "3 Players"
+            // on select, change the number of users
           ),
-          label(
-            cls := "setup-menu-label",
-            "Player" + i
+          option(
+            cls := "setup-menu-combobox-option",
+            value := "4",
+            "4 Players"
+          )
+        )
+      ),
+      div(
+        cls := "setup-menu",
+        children <-- reactiveNumberOfUsers.map(element =>
+          for i <- 1 to element
+          yield div(
+            cls := "setup-menu-textbox-container",
+            input(
+              cls := "setup-menu-textbox",
+              placeholder := s"Player $i"
+            )
           )
-        ),
-        button(
-          cls := "setup-menu-button",
-          onClick --> (_ => this.switchToHome()),
-          "Back"
-        ),
-        button(
-          cls := "setup-menu-button",
-          onClick --> (_ => this.switchToGame()),
-          "Start"
         )
+      ),
+      button(
+        cls := "setup-menu-button",
+        onClick --> (_ => this.switchToHome()),
+        "Back"
+      ),
+      button(
+        cls := "setup-menu-button",
+        onClick --> (_ => this.switchToGame()),
+        "Start"
       )
     )