From 00461a23b82e2315407f761122e6831aaa53d104 Mon Sep 17 00:00:00 2001
From: Miloslav Nenadal <nenadalm@gmail.com>
Date: Sat, 9 Nov 2024 08:10:18 +0100
Subject: [PATCH] Refactor rotation of life input

---
 resources/private/css/styles.css |  2 +-
 src/app/views.cljs               | 14 ++++++++++----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/resources/private/css/styles.css b/resources/private/css/styles.css
index ef05a1f..2d51336 100644
--- a/resources/private/css/styles.css
+++ b/resources/private/css/styles.css
@@ -103,7 +103,7 @@ hr {
     flex-direction: column;
 }
 
-.life-input-group:first-child .life-input { transform: rotate(180deg); }
+.life-input.rotate-180 { transform: rotate(180deg); }
 
 .life-input-group { flex-grow: 1; display: flex; position: relative; }
 .life-input { flex-grow: 1; display: flex; align-items: center; position: relative; overflow: hidden; }
diff --git a/src/app/views.cljs b/src/app/views.cljs
index d9c5091..3115adc 100644
--- a/src/app/views.cljs
+++ b/src/app/views.cljs
@@ -21,6 +21,10 @@
                [(keyword k) v]))
         (.entries (js/FormData. form-el))))
 
+(defn- life-input-class [group-idx]
+  (when (== 0 group-idx)
+    "rotate-180"))
+
 (defn amount-modifier [_]
   (let [form-el (atom nil)
         modal-el (atom nil)
@@ -72,11 +76,12 @@
 (defn life-input [_]
   (let [event (reagent/atom nil)
         on-request-close (fn [] (reset! event nil))]
-    (fn [{:keys [player-id]}]
+    (fn [{:keys [player-id class]}]
       (let [player @(re-frame/subscribe [::subs/player player-id])
             change-type @(re-frame/subscribe [::subs/change-type])
             {:keys [amount color text-color winner]} player]
         [:div.life-input
+         {:class class}
          [:button.life-input--button
           {:style {:color text-color
                    :background-color color}
@@ -119,11 +124,11 @@
 (defn counter []
   (let [player-layout @(re-frame/subscribe [::subs/player-layout])]
     [:div.counter
-     (for [group player-layout]
+     (for [[group-idx group] (u/vector-entries player-layout)]
        ^{:key (str/join "-" group)}
        [:div.life-input-group
         (for [player-id group]
-          ^{:key player-id} [life-input {:player-id player-id}])])
+          ^{:key player-id} [life-input {:player-id player-id :class (life-input-class group-idx)}])])
      [:div.title-panel
       (:profile @(re-frame/subscribe [::subs/settings]))]
      [:div.action-panel
@@ -199,7 +204,8 @@
               (for [player-id group]
                 (let [{:keys [id color text-color]} (events/id->player player-id)]
                   ^{:key id} [:div.life-input
-                              {:style {:color text-color
+                              {:class (life-input-class group-idx)
+                               :style {:color text-color
                                        :background-color color}}
                               [:div.life-input--amount
                                [i/person]]]))