diff --git a/less/site.less b/less/site.less index 772ffec6..913c2b5c 100644 --- a/less/site.less +++ b/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 diff --git a/src/cljs/wish/sheets/dnd5e.cljs b/src/cljs/wish/sheets/dnd5e.cljs index e32f438f..f701adb8 100644 --- a/src/cljs/wish/sheets/dnd5e.cljs +++ b/src/cljs/wish/sheets/dnd5e.cljs @@ -58,14 +58,16 @@ (icon :radio-button-unchecked.icon {:class icon-class})) {:key i}))]) -(defn- hp-death-saving-throws [] - (let [{:keys [saves fails]} ( - [save-indicators "😇" :save saves] - [save-indicators "☠️" :fail fails]])) +(defn hp-death-saving-throws + ([] (hp-death-saving-throws nil)) + ([sheet-id] + (let [{:keys [saves fails]} ( + [save-indicators "😇" :save saves] + [save-indicators "☠️" :fail fails]]))) (defn hp [] - (let [[hp max-hp] (evt [:toggle-overlay [#'overlays/hp-overlay]])} @@ -154,26 +156,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 (evt [:toggle-overlay - [#'overlays/ability-tmp - id - label]])} - [:div.label label] - [:div.mod modifier] - [:div.score "(" score ")"] - ]))] + [abilities-display abilities :clickable]] [:div.info "Saves"] diff --git a/src/cljs/wish/sheets/dnd5e/campaign.cljs b/src/cljs/wish/sheets/dnd5e/campaign.cljs index ede90454..9a3955ba 100644 --- a/src/cljs/wish/sheets/dnd5e/campaign.cljs +++ b/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 [evt]])) (defn char-card [{:keys [id] :as c}] - [:div.character - (:name c) - (str ( hp 0) + [hp-bar hp max-hp] + [dnd5e/hp-death-saving-throws id]))] + + [:div.abilities + (let [info (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!"])) diff --git a/src/cljs/wish/views/campaign/hp_bar.cljs b/src/cljs/wish/views/campaign/hp_bar.cljs new file mode 100644 index 00000000..06f693d6 --- /dev/null +++ b/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] + ]) diff --git a/src/cljs/wish/views/router.cljs b/src/cljs/wish/views/router.cljs index 64b5de27..13a9c9e5 100644 --- a/src/cljs/wish/views/router.cljs +++ b/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