Implement some core styling for chars carousel, hp bar, etc.

Refs #69

The character card is starting to look useful!

less/site.less

@@ -317,6 +317,68 @@ a {
     }
 }
 
+//
+// Campaign screen widgets
+
+.carousel-container {
+    width: 100%;
+    overflow-x: auto;
+
+    .carousel {
+        .flex();
+
+        a.card {
+            color: inherit;
+            margin: 8px 4px;
+            padding: 0px;
+        }
+        div.card {
+            background-color: #eee;
+            border-radius: 4px;
+            padding: 8px;
+            text-align: center;
+            width: 220px;
+
+            &:hover {
+                background-color: #ddd;
+            }
+
+            &:active {
+                background-color: #ccc;
+            }
+        }
+    }
+}
+
+.hp-bar {
+    @height: 32pt;
+
+    position: relative;
+    background-color: #fcfcfc;
+    border-radius: 4px;
+    height: @height;
+    margin: 8px 0;
+
+    .bar {
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        background-color: #00cc33;
+        border-radius: 4px;
+    }
+
+    .label {
+        font-size: 16pt;
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        line-height: @height;
+    }
+}
+
 //
 // shared widgets
 

src/cljs/wish/sheets/dnd5e.cljs

@@ -57,14 +57,16 @@
          (icon :radio-button-unchecked.icon {:class icon-class}))
        {:key i}))])
 
-(defn- hp-death-saving-throws []
-  (let [{:keys [saves fails]} (<sub [::subs/death-saving-throws])]
-    [:<>
-     [save-indicators "😇" :save saves]
-     [save-indicators "☠️" :fail fails]]))
+(defn hp-death-saving-throws
+  ([] (hp-death-saving-throws nil))
+  ([sheet-id]
+   (let [{:keys [saves fails]} (<sub [::subs/death-saving-throws sheet-id])]
+     [:<>
+      [save-indicators "😇" :save saves]
+      [save-indicators "☠️" :fail fails]])))
 
 (defn hp []
-  (let [[hp max-hp] (<sub [::subs/hp]) ]
+  (let [[hp max-hp] (<sub [::subs/hp])]
     [:div.clickable.hp.col
      {:on-click (click>evt [:toggle-overlay [#'overlays/hp-overlay]])}
 
@@ -153,26 +155,33 @@
    [:wis "WIS"]
    [:cha "CHA"]])
 
+(defn abilities-display
+  ([abilities] (abilities-display abilities false))
+  ([abilities clickable?]
+   [:<>
+    (for [[id label] labeled-abilities]
+      (let [{:keys [score modifier mod]} (get abilities id)]
+        ^{:key id}
+        [:div.ability {:class (when mod
+                                (case mod
+                                  :buff "buffed"
+                                  :nerf "nerfed"))
+                       :on-click (when clickable?
+                                   (click>evt [:toggle-overlay
+                                               [#'overlays/ability-tmp
+                                                id
+                                                label]]))}
+         [:div.label label]
+         [:div.mod modifier]
+         [:div.score "(" score ")"]
+         ]))]))
+
 (defn abilities-section []
   (let [abilities (<sub [::subs/ability-info])
         save-extras (<sub [::subs/ability-extras])]
     [:div styles/abilities-section
      [:div.abilities
-      (for [[id label] labeled-abilities]
-        (let [{:keys [score modifier mod]} (get abilities id)]
-          ^{:key id}
-          [:div.ability {:class (when mod
-                                  (case mod
-                                    :buff "buffed"
-                                    :nerf "nerfed"))
-                         :on-click (click>evt [:toggle-overlay
-                                               [#'overlays/ability-tmp
-                                                id
-                                                label]])}
-           [:div.label label]
-           [:div.mod modifier]
-           [:div.score "(" score ")"]
-           ]))]
+      [abilities-display abilities :clickable]]
 
      [:div.info "Saves"]
 

src/cljs/wish/sheets/dnd5e/campaign.cljs

@@ -1,17 +1,32 @@
 (ns ^{:author "Daniel Leong"
       :doc "Campaign-viewer for D&D 5e"}
   wish.sheets.dnd5e.campaign
-  (:require [wish.views.campaign.chars-carousel :refer [chars-carousel]]
-            [wish.sheets.dnd5e.subs :as subs]
+  (:require [wish.sheets.dnd5e.subs :as subs]
+            [wish.sheets.dnd5e :as dnd5e]
+            [wish.sheets.dnd5e.campaign.style :as style]
+            [wish.views.campaign.base :as base]
+            [wish.views.campaign.hp-bar :refer [hp-bar]]
+            [wish.views.widgets :as widgets
+             :refer-macros [icon]
+             :refer [link link>evt]]
             [wish.util :refer [<sub >evt]]))
 
 (defn char-card [{:keys [id] :as c}]
-  [:div.character
-   (:name c)
-   (str (<sub [::subs/hp id]))])
+  [:div style/char-card
+   [:div.name (:name c)]
+
+   [:div.hp
+    (let [[hp max-hp] (<sub [::subs/hp id])]
+      (if (> hp 0)
+        [hp-bar hp max-hp]
+        [dnd5e/hp-death-saving-throws id]))]
+
+   [:div.abilities
+    (let [info (<sub [::subs/ability-info id])]
+      [dnd5e/abilities-display info])]
+   ])
 
 (defn view
   [section]
-  [:div
-   [chars-carousel char-card]
-   "TODO Campaign"])
+  [base/campaign-page section
+   :char-card char-card])

src/cljs/wish/sheets/dnd5e/campaign/style.cljs

@@ -0,0 +1,19 @@
+(ns ^{:author "Daniel Leong"
+      :doc "campaign.style"}
+  wish.sheets.dnd5e.campaign.style
+  (:require [garden.color :as color]
+            [wish.style :refer [defclass defstyled]]
+            [wish.style.flex :as flex :refer [flex]]
+            [wish.style.shared :refer [metadata]]))
+
+(defstyled char-card
+  {}
+
+  [:.abilities (merge flex
+                      flex/justify-center)
+   [:.label {:font-size "0.7em"}]
+   [:.mod {:font-size "1.5em"
+           :padding "2px 4px"}]
+   [:.score {:font-size "0.9em"
+             :margin-bottom "8px"}]
+   ])

src/cljs/wish/views/campaign/base.cljs

@@ -0,0 +1,10 @@
+(ns ^{:author "Daniel Leong"
+      :doc "base"}
+  wish.views.campaign.base
+  (:require [wish.views.campaign.chars-carousel :refer [chars-carousel]]))
+
+(defn campaign-page
+  [section & {:keys [char-card]}]
+  [:div.campaign
+   [chars-carousel char-card]
+   "TODO campaign"])

src/cljs/wish/views/campaign/chars_carousel.cljs

@@ -2,7 +2,9 @@
       :doc "campaign.chars-carousel"}
   wish.views.campaign.chars-carousel
   (:require [wish.util :refer [<sub >evt]]
-            [wish.views.error-boundary :refer [error-boundary]]))
+            [wish.util.nav :refer [sheet-url]]
+            [wish.views.error-boundary :refer [error-boundary]]
+            [wish.views.widgets :refer [link]]))
 
 (defn- sheet-loader [sheet]
   [:div "Loading " (:name sheet) "..."])
@@ -36,10 +38,12 @@
 
       (for [c members]
         ^{:key (:id c)}
-        [:div.card
-         [char-sheet-loader
-          (:id c)
-          chars-card-view]])]]
+        [link {:href (sheet-url (:id c))
+               :class "card"}
+         [:div.card
+          [char-sheet-loader
+           (:id c)
+           chars-card-view]]])]]
 
     [:div.empty-carousel
      "No characters in this campaign... yet!"]))

src/cljs/wish/views/campaign/hp_bar.cljs

@@ -0,0 +1,13 @@
+(ns ^{:author "Daniel Leong"
+      :doc "hp-bar"}
+  wish.views.campaign.hp-bar)
+
+(defn hp-bar [hp max-hp]
+  [:div.hp-bar
+   [:div.bar {:style {:width (str (int
+                                    (* 100
+                                       (/ hp max-hp)))
+                                  "%")}}]
+   [:div.label
+    hp " / " max-hp]
+   ])

src/cljs/wish/views/router.cljs

@@ -16,7 +16,7 @@
       :else "WISH")))
 
 (defn- has-footer? [page]
-  (not (contains? #{:sheet :splash}
+  (not (contains? #{:campaign :sheet :splash}
                   page)))
 
 (defn router