Initial groundwork for DM Screen / Campaign UI

dev/cljs/wish/config.cljs

@@ -8,6 +8,7 @@
   ^boolean goog.DEBUG)
 
 (def server-root "")
+(def full-url-root (str "http://localhost:3450" server-root))
 
 (def gdrive-client-id "661182319990-1uerkr0pue6k60a83atj2f58md95fb1b.apps.googleusercontent.com")
 

less/site.less

@@ -86,6 +86,10 @@ a {
     cursor: pointer;
 }
 
+.metadata() {
+    font-size: 80%;
+}
+
 .scrollable() {
     overflow-y: scroll;
     .box-shadow(inset 0 -8px 12px -4px fade(#333, 50%));
@@ -189,10 +193,14 @@ a {
     }
 
     .metadata {
-        font-size: 80%;
+        .metadata();
     }
 }
 
+.group {
+    margin: 8px 0;
+}
+
 .sections {
     .flex(wrap);
     .justify-content(center);
@@ -259,13 +267,20 @@ a {
     margin-top: 12px;
 }
 
-.update-notifier {
+.notifiers {
     @media @smartphones {
         left: 0;
         right: 0;
         bottom: 0;
     }
 
+    position: fixed;
+    right: 24px;
+    bottom: 24px;
+    z-index: 2;
+}
+
+.notifier {
     @keyframes slide-in {
         from {
             transform: translateY(100%);
@@ -282,13 +297,11 @@ a {
     background-color: #666666;
     color: #fff;
 
-    position: fixed;
-    right: 24px;
-    bottom: 24px;
-
     padding: 4px;
     vertical-align: center;
 
+    margin-top: 8px;
+
     .ignore {
         .justify-content(center);
 
@@ -307,12 +320,104 @@ a {
         .flex-grow();
     }
 
-    .update {
+    .action {
         margin-right: 8px;
         padding: 8px;
     }
 }
 
+//
+// Campaign screen widgets
+
+.add-chars-overlay {
+    padding: 32px;
+
+    .desc {
+        .metadata();
+        padding: 8px;
+    }
+
+    .character {
+        .flex();
+        .align-items(center);
+
+        width: 100%;
+        margin: 8px 0;
+
+        .name {
+            width: 45%;
+        }
+    }
+}
+
+.carousel-container {
+    width: 100%;
+    overflow-x: auto;
+
+    .carousel {
+        .flex();
+
+        a.add-button {
+            .flex();
+            .flex-direction(row);
+            .align-items(center);
+
+            padding: 8px;
+        }
+
+        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;
+        border-radius: 4px;
+
+        transition: all 450ms cubic-bezier(0, 0, 0.2, 1);
+    }
+
+    .label {
+        font-size: 16pt;
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        line-height: @height;
+    }
+}
+
 //
 // shared widgets
 

prod/cljs/wish/config.cljs

@@ -9,6 +9,9 @@
 ; IE: https://dhleong.github.io/wish
 (def server-root "/wish")
 
+; TODO good-define?
+(def full-url-root (str "https://dhleong.github.io" server-root))
+
 (def gdrive-client-id "661182319990-3aa8akj9fh8eva9lf7bt02621q2i18s6.apps.googleusercontent.com")
 
 (def push-server "https://wish-server.now.sh")

src/cljs/wish/db.cljs

@@ -39,4 +39,6 @@
 
    ::save-errors #{}
    ::pending-saves #{}
-   ::processing-saves #{}})
+   ::processing-saves #{}
+
+   :notifications {}})

src/cljs/wish/events.cljs

@@ -30,6 +30,12 @@
      :dispatch-n [[::update-keymap page-spec]
                   [:push/check]]}))
 
+(reg-event-fx
+  :nav/replace!
+  [trim-v]
+  (fn-traced [_ [new-location]]
+    {:nav/replace! new-location}))
+
 (reg-event-db
   :set-device
   [trim-v]
@@ -135,6 +141,36 @@
                               :ready)}))
 
 
+; ======= notifications ===================================
+
+(reg-event-fx
+  :notify!
+  [trim-v]
+  (fn [{:keys [db]} [{:keys [duration duration-ms content
+                             dismissable?]
+                      :or {dismissable? true}}]]
+    (let [created (js/Date.now)
+          id (keyword (str created))]
+      {:db (assoc-in db [:notifications id]
+                     {:id id
+                      :created created
+                      :content content
+                      :dismiss-event (when (or (nil? duration)
+                                               dismissable?)
+                                       [::remove-notify! id])})
+       :dispatch-later [(when (or duration duration-ms)
+                          {:ms (case duration
+                                 :short 3000
+                                 :long 7500
+                                 duration-ms)
+                           :dispatch [::remove-notify! id]})]})))
+
+(reg-event-db
+  ::remove-notify!
+  [trim-v (path :notifications)]
+  (fn-traced [notifications [id]]
+    (dissoc notifications id)))
+
 
 ; ======= Provider management ==============================
 
@@ -259,7 +295,11 @@
   [trim-v]
   (fn-traced [{:keys [db]} [sheet-id sheet]]
     {:db (-> db
-             (assoc-in [:sheets sheet-id] sheet)
+             (update-in [:sheets sheet-id]
+                        (fn [old-value]
+                          (merge
+                            (select-keys old-value [:type])
+                            sheet)))
              (reset-sheet-err sheet-id))
 
      ; NOTE: we're probably on a :sheet page, and we might not have
@@ -757,4 +797,3 @@
     (when (contains? changed-ids active-sheet-id)
       ; trigger sheet data reload
       {:load-sheet! active-sheet-id})))
-

src/cljs/wish/fx.cljs

@@ -22,6 +22,10 @@
     (log "document.title <-" title)
     (set! js/document.title title)))
 
+(reg-fx
+  :nav/replace!
+  nav/replace!)
+
 
 ; ======= keymaps =========================================
 

src/cljs/wish/providers.cljs

@@ -111,15 +111,20 @@
   (let [[provider-id _] (unpack-id sheet-id)]
     (provider-key provider-id :share!)))
 
-(defn create-sheet-with-data
-  "Returns a channel that emits [err sheet-id] on success"
-  [sheet-name provider-id data]
+(defn create-file-with-data
+  "Returns a channel that emits [err sheet-id] on success.
+   `kind` may be one of:
+    - :campaign
+    - :sheet"
+  [kind sheet-name provider-id data]
   {:pre [(not (nil? provider-id))
-         (not (nil? data))]}
+         (not (nil? data))
+         (contains? #{:campaign :sheet} kind)]}
   (if-let [inst (provider-key provider-id :inst)]
-    (provider/create-sheet inst
-                           sheet-name
-                           data)
+    (provider/create-file inst
+                          kind
+                          sheet-name
+                          data)
 
     (throw (js/Error. (str "No provider instance for " provider-id)))))
 

src/cljs/wish/providers/caching.cljs

@@ -49,8 +49,8 @@
 (deftype CachingProvider [base my-id storage dirty?-storage]
   IProvider
   (id [this] my-id)
-  (create-sheet [this file-name data]
-    (provider/create-sheet base file-name data))
+  (create-file [this kind file-name data]
+    (provider/create-file base kind file-name data))
 
   (init! [this]
     (go (let [base-state (or (<! (<!timeout (provider/init! base)))

src/cljs/wish/providers/core.cljs

@@ -18,9 +18,12 @@
      See the comments on `:provider-states` in `db.cljs` for all acceptable
      states.")
 
-  (create-sheet
-    [this sheet-name data]
-    "Create a new sheet with the given name and data")
+  (create-file
+    [this kind sheet-name data]
+    "Create a new file with the given name, kind, and data.
+     `kind` will be one of:
+      - :sheet
+      - :campaign")
 
   (load-raw
     [this id]

src/cljs/wish/providers/gdrive.cljs

@@ -35,6 +35,9 @@
                         ["https://www.googleapis.com/auth/drive.file"
                          "https://www.googleapis.com/auth/drive.install"]))
 
+(def ^:private campaign-desc "WISH Campaign")
+(def ^:private campaign-mime "application/edn")
+(def ^:private campaign-props {:wish-type "wish-campaign"})
 (def ^:private sheet-desc "WISH Character Sheet")
 (def ^:private sheet-mime "application/edn")
 (def ^:private sheet-props {:wish-type "wish-sheet"})
@@ -431,18 +434,25 @@
 
 ; ======= Provider def =====================================
 
+(defn- meta-for [kind file-name]
+  (let [base (case kind
+               :campaign {:description campaign-desc
+                          :mimeType campaign-mime
+                          :appProperties campaign-props}
+               :sheet {:description sheet-desc
+                       :mimeType sheet-mime
+                       :appProperties sheet-props})]
+    (assoc base :name file-name)))
+
 (deftype GDriveProvider []
   IProvider
   (id [this] :gdrive)
 
-  (create-sheet [this file-name data]
-    (log/info "Create sheet " file-name)
+  (create-file [this kind file-name data]
+    (log/info "Create " kind ": " file-name)
     (go (let [[err resp] (<! (upload-data
                                :create
-                               {:name file-name
-                                :description sheet-desc
-                                :mimeType sheet-mime
-                                :appProperties sheet-props}
+                               (meta-for kind file-name)
                                (str data)))]
           (if err
             [err nil]
@@ -500,7 +510,9 @@
   (query-sheets [this]
     (when-gapi-available
       query-files
-      "appProperties has { key='wish-type' and value='wish-sheet' }"))
+      #_"appProperties has { key='wish-type' and value='wish-sheet' }"
+      (str "(appProperties has { key='wish-type' and value='wish-sheet' }) "
+           "or (appProperties has { key='wish-type' and value='wish-campaign' })")))
 
   (register-data-source [this]
     ; TODO sanity checks galore