Add some text, start with styling, and add minimalistic event handler

src/heyarne/all_my_friends/views.cljs

@@ -3,19 +3,53 @@
             [reagent.dom :as dom]
             [heyarne.all-my-friends.facemesh :refer [webcam-facemesh]]))
 
+;; minimalistic re-frame-like event handling
+
+(defonce state (r/atom {:status :welcome-message}))
+
+(def events
+  {:welcome/continue (fn [db _]
+                       (assoc db :status :running))
+   :running/capture (fn [db _]
+                      (assoc db :current-capture {:img nil
+                                                  :predictions nil}))})
+
+(defn dispatch [[event data]]
+  (when-let [handler (events event)]
+    (js/requestAnimationFrame #(swap! state handler data))))
+
+;; views
+
 (defn welcome-message [{:keys [hidden?]}]
-  [:section.welcome-message
-   {:hidden false}
+  [:section#welcome-message
+   {:class (str (when hidden? "hidden"))}
    [:h1 "Hi Freund!"]
    [:p "Ich möchte dir kurz erklären, was dich hier erwartet:
 Seit der globalen Covid19-Pandemie sind wir alle dazu gezwungen, auf physischen Kontakt weitgehend zu verzichten. Ein Großteil der Zeit, die ich mit euch verbringe, hat sich ins Digitale verlagert."]
    [:p "Das fühlt sich sicher bald komplett normal an -- vorher möchte ich aber gerne irgendwas mit dem komischen Gefühl machen, das das hinterlässt."]
    [:p "Ich würde mich freuen, wenn du mir dabei hilfst. Folge dazu einfach den Anweisungen. Das Ergebnis wird hoffentlich eine schöne Sammlung von Webcambildern und 3D-Modellen eurer Köpfe" [:sup "1"] "."]
-   [:button "Weiter"]])
+   [:button {:on-click #(dispatch [:welcome/continue])} "Weiter"]])
 
-(defn app [{:keys [state on-faces-detected]}]
-  (let [status (:status @state)
-        viewing-welcome-message? (= :welcome-message status)]
-    [:div#app
-     [welcome-message {:hidden? viewing-welcome-message?}]
-     [webcam-facemesh {:on-faces-detected on-faces-detected}]]))
+(defn running [{on-faces-detected :on-faces-detected}]
+  (let [result (atom {:video nil
+                      :predictions nil})]
+    (fn []
+      [:div.container
+       [:p "Tippe auf den Button um mir das untere Bild zu schicken."]
+       [webcam-facemesh {:on-faces-detected (fn [ctx video predictions]
+                                              (swap! result assoc
+                                                     :video video
+                                                     :predictions predictions)
+                                              (on-faces-detected ctx video predictions))}]
+       [:button {:on-click #(dispatch [:running/capture @result])} "Tip"]])))
+
+(defn app [{:keys [on-faces-detected]}]
+  (let [status (:status @state)]
+    [:<>
+     [welcome-message {:hidden? (not= :welcome-message status)}]
+     (case status
+       :permission-rejected [:div "Sad :("]
+       :running [running {:on-faces-detected on-faces-detected}]
+
+       ;; default
+       nil)]))