feat(14): controls generated from fragment

with their own ids and htmx requests to submit the vote

14-rock-paper-scissors/src/main/resources/public/output.css

@@ -522,6 +522,10 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
+.static {
+  position: static;
+}
+
 .fixed {
   position: fixed;
 }

14-rock-paper-scissors/src/main/resources/templates/index.html

@@ -61,8 +61,21 @@
         id="controls"
         class="bg-center bg-no-repeat bg-60% bg-triangle-pattern w-[375px] h-[375px] relative"
       >
+        <!-- This control will be repeated 3 times, with different htmx requests -->
         <div
+          th:each="choiceBadgeData : ${choiceBadges}"
+          id="paper-control"
+          th:id="${choiceBadgeData.c.name} + '-control'"
+          hx-get="/select/paper"
+          th:hx-get="'/select/' + ${choiceBadgeData.c.name}"
+          hx-target="#controls"
+          hx-swap="outerHTML"
+        >
+          <!-- This badge is fragment to be repeated in other pages as well -->
+          <div
+            th:fragment="choiceBadge (choiceBadgeData)"
             id="paper"
+            th:id="${choiceBadgeData.c.name}"
             class="top-[var(--top-offset)] left-[var(--left-offset)] w-[var(--diameter)] h-[var(--diameter)] bg-gradient-to-b rounded-full -translate-x-[var(--translation)] -translate-y-[var(--translation)] from-[var(--bg-bright)] to-[var(--bg-dark)]"
             style="
               --diameter: 8rem;
@@ -73,20 +86,25 @@
               --translation: 50%;
               position: absolute;
             "
-          hx-get="/select/paper"
+            th:style="| --diameter: ${choiceBadgeData.c.diameter};
-          hx-target="#controls"
+                         --bg-dark: ${choiceBadgeData.c.bgDark};
-          hx-swap="outerHTML"
+                         --bg-bright: ${choiceBadgeData.c.bgBright};
+                         ${choiceBadgeData.p.toStyle}; |"
           >
             <div
               class="absolute top-1/2 left-1/2 w-3/4 h-3/4 bg-gradient-to-b from-gray-300 to-gray-100 rounded-full -translate-x-1/2 -translate-y-1/2"
             ></div>
             <img
               src="../public/images/icon-paper.svg"
+              th:src="${choiceBadgeData.c.iconPath}"
               class="absolute top-1/2 left-1/2 w-1/3 -translate-x-1/2 -translate-y-1/2"
             />
           </div>
+        </div>
 
+        <!-- This controls is only for static preview -->
         <div
+          th:remove="all"
           id="scissors"
           class="top-[var(--top-offset)] left-[var(--left-offset)] w-[var(--diameter)] h-[var(--diameter)] bg-gradient-to-b rounded-full -translate-x-[var(--translation)] -translate-y-[var(--translation)] from-[var(--bg-bright)] to-[var(--bg-dark)]"
           style="
@@ -108,7 +126,9 @@
           />
         </div>
 
+        <!-- This controls is only for static preview -->
         <div
+          th:remove="all"
           id="rock"
           class="top-[var(--top-offset)] left-[var(--left-offset)] w-[var(--diameter)] h-[var(--diameter)] bg-gradient-to-b rounded-full -translate-x-[var(--translation)] -translate-y-[var(--translation)] from-[var(--bg-bright)] to-[var(--bg-dark)]"
           style="

14-rock-paper-scissors/src/main/scala/rockpaperscissors/Main.scala

@@ -47,10 +47,10 @@ object Main {
     @cask.get("/")
     def index(req: cask.Request) = {
       val context = new Context()
-      println(s"getting request for ${req.remainingPathSegments}")
+      val choices = Models.choiceSelectionItems.asJava
       context.setVariable(
-        "myVar",
+        "choiceBadges",
-        "Hello, from Scala world!"
+        choices
       )
       val result = templateEngine.process("index", context)
       cask.Response(

14-rock-paper-scissors/src/main/scala/rockpaperscissors/Models.scala

@@ -6,14 +6,14 @@ object Models {
   sealed trait Positioning
   object Positioning {
     case object Relative extends Positioning {
-      override def toString(): String = " position: absolute; "
+      def toStyle(): String = " position: absolute; "
     }
     final case class Absolute(
         topOffset: String,
         leftOffset: String,
         translation: String = "50%"
     ) extends Positioning {
-      override def toString(): String =
+      def toStyle(): String =
         s"""
 --top-offset: $topOffset;
 --left-offset: $leftOffset;
@@ -27,6 +27,8 @@ position: absolute;
     def diameter: String
     def bgDark: String
     def bgBright: String
+    def name: String
+    def iconPath: String
   }
   object Choice {
     val scissorsDark = "hsl(39, 89%, 49%)"
@@ -40,39 +42,44 @@ position: absolute;
         diameter: String,
         bgDark: String = paperDark,
         bgBright: String = paperBright
-    ) extends Choice
+    ) extends Choice {
+      def name: String = "paper"
+      def iconPath: String = "public/images/icon-paper.svg"
+    }
     case class Scissors(
         diameter: String,
         bgDark: String = scissorsDark,
         bgBright: String = scissorsBright
-    ) extends Choice
+    ) extends Choice {
+      def name: String = "scissors"
+      def iconPath: String = "public/images/icon-scissors.svg"
+    }
     case class Rock(
         diameter: String,
         bgDark: String = rockDark,
         bgBright: String = rockBright
-    ) extends Choice
+    ) extends Choice {
+      def name: String = "rock"
+      def iconPath: String = "public/images/icon-rock.svg"
+    }
   }
 
-  /**
+  /** this will be Data Transfer Object, because Thymeleaf wants var and i want
-   * this will be Data Transfer Object, because Thymeleaf wants var and Bean Object Notation
+    * vals and enums
-   * and i want vals and enums
     */
-  final class ChoiceBadge(
+  final case class ChoiceBadge(
-    var diameter: String = "",
+      var c: Choice,
-    var bgDark: String = "",
+      var p: Positioning
-    var bgBright: String = "",
+  )
-    var positioningStyle: String = "",
-  ) {
-    def this(c: Choice, p: Positioning) = {
-      this(c.diameter, c.bgDark, c.bgBright, p.toString())
-    }
-  }
 
   val choiceSelectionItems = {
     List(
       ChoiceBadge(Choice.Paper("8rem"), Positioning.Absolute("6rem", "6rem")),
-      ChoiceBadge(Choice.Scissors("8rem"), Positioning.Absolute("6rem", "17rem")),
+      ChoiceBadge(
-      ChoiceBadge(Choice.Rock("8rem"), Positioning.Absolute("15rem", "11.5rem")),
+        Choice.Scissors("8rem"),
+        Positioning.Absolute("6rem", "17rem")
+      ),
+      ChoiceBadge(Choice.Rock("8rem"), Positioning.Absolute("15rem", "11.5rem"))
     )
   }