From 5941e8b4f7a966b95d87228827d8b95392d699fd Mon Sep 17 00:00:00 2001
From: Gosha Tcherednitchenko <git@gosha.net>
Date: Sat, 19 Oct 2024 18:03:32 +0100
Subject: [PATCH] landing: visualization WIP

---
 cljs/tools/ifs/parts/core.cljs                | 69 +++++++++++++++----
 resources/public/images/nodes/exile.svg       |  3 +
 resources/public/images/nodes/firefighter.svg |  3 +
 resources/public/images/nodes/manager.svg     |  3 +
 src/tools/ifs/parts/pages.clj                 |  1 +
 5 files changed, 65 insertions(+), 14 deletions(-)
 create mode 100644 resources/public/images/nodes/exile.svg
 create mode 100644 resources/public/images/nodes/firefighter.svg
 create mode 100644 resources/public/images/nodes/manager.svg

diff --git a/cljs/tools/ifs/parts/core.cljs b/cljs/tools/ifs/parts/core.cljs
index a2e4e5f..163f582 100644
--- a/cljs/tools/ifs/parts/core.cljs
+++ b/cljs/tools/ifs/parts/core.cljs
@@ -2,22 +2,63 @@
   (:require ["d3" :as d3]
             ["htmx.org" :default htmx]))
 
+(def node-data
+  [{:type "exile"}
+   {:type "exile"}
+   {:type "exile"}
+   {:type "manager"}
+   {:type "firefighter"}
+   {:type "firefighter"}])
+
+(defn drag-start [event _d]
+  (js/console.log "Drag started")
+  (let [subject (d3/select (.-subject event))]
+    (.raise subject)))
+
+(defn drag [event _d]
+  (js/console.log "Dragging")
+  (let [subject (d3/select (.-subject event))]
+    (-> subject
+        (.attr "x" (.-x event))
+        (.attr "y" (.-y event)))))
+
+(defn drag-end [_event _d]
+  (js/console.log "Drag ended"))
+
 (defn create-visualization [el]
-  (js/console.log "Creating visualization")
-  (let [svg (-> d3
-                (.select el)
-                (.append "svg")
-                (.attr "width" 600)
-                (.attr "height" 400))]
-    (-> svg
-        (.append "circle")
-        (.attr "cx" 300)
-        (.attr "cy" 200)
-        (.attr "r" 100)
-        (.style "fill" "steelblue"))))
+  (js/console.log "Creating visualization" el)
+  (-> d3
+      (.select el)
+      (.append "svg")
+      (.attr "width" 600)
+      (.attr "height" 400)))
+
+(defn load-nodes [svg data]
+  (let [width 600
+        height 400
+        drag-behavior (-> d3
+                          (.drag)
+                          (.on "start" drag-start)
+                          (.on "drag" drag)
+                          (.on "end" drag-end))]
+    (doseq [node data]
+      (let [x (rand-int width)
+            y (rand-int height)
+            type (:type node)
+            img-path (str "/images/nodes/" type ".svg")]
+        (-> svg
+            (.append "image")
+            (.attr "xlink:href" img-path)
+            (.attr "x" x)
+            (.attr "y" y)
+            (.attr "width" 50)
+            (.attr "height" 50)
+            (.attr "class" type)
+            (.call drag-behavior))))))
 
 (defn ^:export init []
-  (create-visualization (.getElementById js/document "chart"))
   (.on htmx "htmx:load"
        (fn [_event]
-         (js/console.log "htmx loaded!"))))
+         (js/console.log "htmx loaded!")
+         (let [svg (create-visualization (.getElementById js/document "chart"))]
+           (load-nodes svg node-data)))))
diff --git a/resources/public/images/nodes/exile.svg b/resources/public/images/nodes/exile.svg
new file mode 100644
index 0000000..07e1eb4
--- /dev/null
+++ b/resources/public/images/nodes/exile.svg
@@ -0,0 +1,3 @@
+<svg width="107" height="107" viewBox="0 0 107 107" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="53.5" cy="53.5" r="53" fill="#62A294" fill-opacity="0.2" stroke="#62A294"/>
+</svg>
diff --git a/resources/public/images/nodes/firefighter.svg b/resources/public/images/nodes/firefighter.svg
new file mode 100644
index 0000000..3cde974
--- /dev/null
+++ b/resources/public/images/nodes/firefighter.svg
@@ -0,0 +1,3 @@
+<svg width="126" height="126" viewBox="0 0 126 126" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M59.5253 5.009C61.3254 2.82167 64.6746 2.82167 66.4747 5.00901L78.2797 19.3537C79.4436 20.768 81.2352 21.51 83.0582 21.333L101.549 19.5372C104.368 19.2634 106.737 21.6316 106.463 24.4511L104.667 42.9418C104.49 44.7648 105.232 46.5564 106.646 47.7203L120.991 59.5253C123.178 61.3254 123.178 64.6746 120.991 66.4747L106.646 78.2797C105.232 79.4436 104.49 81.2352 104.667 83.0582L106.463 101.549C106.737 104.368 104.368 106.737 101.549 106.463L83.0582 104.667C81.2352 104.49 79.4436 105.232 78.2797 106.646L66.4747 120.991C64.6746 123.178 61.3254 123.178 59.5253 120.991L47.7203 106.646C46.5564 105.232 44.7648 104.49 42.9418 104.667L24.4511 106.463C21.6316 106.737 19.2634 104.368 19.5372 101.549L21.333 83.0582C21.51 81.2352 20.768 79.4436 19.3537 78.2797L5.009 66.4747C2.82167 64.6746 2.82167 61.3254 5.00901 59.5253L19.3537 47.7203C20.768 46.5564 21.51 44.7648 21.333 42.9418L19.5372 24.4511C19.2634 21.6316 21.6316 19.2634 24.4511 19.5372L42.9418 21.333C44.7648 21.51 46.5564 20.768 47.7203 19.3537L59.5253 5.009Z" fill="#F2BE56" fill-opacity="0.2" stroke="#F2BE56"/>
+</svg>
diff --git a/resources/public/images/nodes/manager.svg b/resources/public/images/nodes/manager.svg
new file mode 100644
index 0000000..6c9605b
--- /dev/null
+++ b/resources/public/images/nodes/manager.svg
@@ -0,0 +1,3 @@
+<svg width="117" height="111" viewBox="0 0 117 111" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M56.3382 1.7542C57.685 1.0165 59.315 1.0165 60.6618 1.7542L106.324 26.7655C107.766 27.5552 108.662 29.0683 108.662 30.7122V80.2878C108.662 81.9317 107.766 83.4448 106.324 84.2345L60.6618 109.246C59.315 109.983 57.685 109.983 56.3382 109.246L10.6757 84.2345C9.23393 83.4448 8.33751 81.9317 8.33751 80.2878V30.7122C8.33751 29.0683 9.23393 27.5552 10.6757 26.7655L56.3382 1.7542Z" fill="#D1B43C" fill-opacity="0.3" stroke="#D1B43C"/>
+</svg>
diff --git a/src/tools/ifs/parts/pages.clj b/src/tools/ifs/parts/pages.clj
index 0c5bd41..eabb252 100644
--- a/src/tools/ifs/parts/pages.clj
+++ b/src/tools/ifs/parts/pages.clj
@@ -38,6 +38,7 @@
                [:strong "Parts"]
                " is being actively developed, and we would love to have your feedback! Please enter your email below to join the private beta test."]
               (waitlist-signup-form ".signup")]]
+            [:div#chart]
             [:section.aboutus
              [:h3
               "Who made this?"]