playing

src/apintro/core.cljs

@@ -1,6 +1,5 @@
 (ns apintro.core
-  ; (:refer-clojure :exclude [atom])
-  (:require [freactive.core :refer [atom cursor]]
+  (:require [freactive.core :refer [cursor]]
             [freactive.dom :as dom]
             [freactive.animation :as animation]
             [apintro.model :refer [init! sets gets swaps]]
@@ -16,7 +15,7 @@
         :vgapi vgapi/initial-state
         })
 
-(vgapi/init)
+(vgapi/init :vgapi)
 
 (defn on-js-reload []
   ;; optionally touch your app-state to force rerendering depending on
@@ -48,7 +47,7 @@
 (defn animated-title [text]
   [:h1 {:style
           {:font-size (rx (str (* 80 @ease1) "px"))
-           :padding-top (rx (str (* 200 @ease1) "px"))
+           :padding-top (rx (str (* 100 @ease1) "px"))
            :opacity (rx (str @ease2))
            :transform (rx (str "rotate(" @ease3 "deg)"))
            :-webkit-transform (rx (str "rotate(" @ease3 "deg)"))
@@ -78,21 +77,11 @@
     [:div
      [animated-title (gets [:title])]
      [:div.project {:style {:font-family "Monaco,monospace" :opacity 0.5}}
-      (gets [:vgapi :project-id])]]]
+      (gets [:vgapi :project-id])]
+     (rx [vgapi/view (gets [:vgapi])])
+     ]]
    [page 1 "subtitle" green "#title" "« Back to Title"
-    [animated-title (gets [:subtitle])]]
-   ])
-
-(defn view []
-  [:div
-   {:width "100%"
-    :height "100%"
-    :style {:border "1px solid black"}
-    :on-mousemove (fn [e] (sets [:mouse-pos] [(.-clientX e) (.-clientY e)]))
-    }
-   [:h1 (gets [:text])]
-   [:p "Your mouse is at: " (rx (str (gets [:mouse-pos])))]
-   ])
+    [animated-title (gets [:subtitle])]]])
 
 (dom/mount! (.getElementById js/document "root") (ease-view))
 

src/apintro/model.cljs

@@ -1,6 +1,6 @@
 (ns ^:figwheel-always apintro.model
   (:refer-clojure :exclude [atom])
-  (:require [freactive.core :refer [atom]]))
+  (:require [freactive.core :refer [atom cursor]]))
 
 (defonce state (atom {}))
 

src/apintro/vgapi.cljs

@@ -1,8 +1,10 @@
 (ns ^:figwheel-always apintro.vgapi
+  (:refer-clojure :exclude [atom])
   (:require-macros [cljs.core.async.macros :refer [go]]
                    [freactive.macros :refer [rx]])
   (:require
     [apintro.model :refer [gets sets]]
+    [freactive.animation :as animation]
     [cljs-http.client :as http]
     [cljs.core.async :refer [<!]]))
 
@@ -12,7 +14,7 @@
 (def initial-state
   {:color 0
    :angle 0
-   :volume 1
+   :volume 0
    :project-id "vigiglobe-Microsoft"
    :msg "Nothing done yet."})
 
@@ -23,14 +25,14 @@
   (f)
   (js/setInterval f n))
 
-(defn get-datas-every [route params interval action]
+(defn get-datas-every [prefix route params interval action]
   (smart-si
    (fn []
      (go (let [now  (.getTime (new js/Date))
                from (.toISOString (new js/Date (- now (+ interval (* 60 1000)))))
                to   (.toISOString (new js/Date (- now (* 60 1000))))
                response (<! (http/get (str "http://dev.api.vigiglo.be/api" route)
-                                      {:query-params (into {:project_id (gets [:vgapi :project-id])
+                                      {:query-params (into {:project_id (gets [prefix :project-id])
                                                             :timeFrom from
                                                             :timeTo to}
                                                            params)}))]
@@ -39,30 +41,32 @@
               (get-in response [:body :data]))))))
    interval))
 
-(defn get-volume []
+(defn get-volume [prefix]
   (get-datas-every
+    prefix
    "/statistics/v1/volume" {} 1000
    (fn [res]
      (let [new-size (second (first (:messages res)))]
-       (sets [:msg] (str new-size))
-       (sets [:volume] new-size)))))
+       (sets [prefix :msg] (str new-size))
+       (sets [prefix :volume] new-size)))))
 
-(defn get-messages []
+(defn get-messages [prefix]
   (let [interval 1000]
     (get-datas-every
+      prefix
      "/content/v1/messages" {:limit (* 20 (/ interval 100))} interval
      (fn [res]
        (let [now (.getTime (new js/Date))]
-         (sets [:msg-time] now)
-         (sets [:msg-refresh] (+ interval now))
-         (sets [:messages] res))))))
+         (sets [prefix :msg-time] now)
+         (sets [prefix :msg-refresh] (+ interval now))
+         (sets [prefix :messages] res))))))
 
 ;; ------------------------------------------------------------------------------
 ;; Init
 ;; ------------------------------------------------------------------------------
-(defn init []
-  (get-volume)
-  (get-messages)
+(defn init [prefix]
+  ; (get-volume prefix)
+  (get-messages prefix)
   {})
 
 ;; ------------------------------------------------------------------------------
@@ -84,12 +88,23 @@
 ;; View
 ;; ------------------------------------------------------------------------------
 (defn view-tweets [state]
-  [:div "tweets"])
+  (let [ease (animation/easer 1.0)]
+    [:div {:style {:text-align "left"
+                   :line-height "2em"
+                   :opacity (rx @ease)
+                   :font-family "Futura, sans-serif"}
+          :node/on-attached (fn [node callback]
+                              (animation/start-easing! ease 1.0 0.0 1000 animation/quad-in callback))
+           }
+     [:ul
+      (for [tweet (:messages state)]
+        [:li (:text tweet)])]]))
 
 (defn view-volume [state]
-  [:div "volume"])
+  [:div
+   (str  "volume: " (:volume state))])
 
 (defn view [state]
   [:div
-   [view-volume]
-   [view-tweets]])
+   [view-volume state]
+   [view-tweets state]])