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 @@
+
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 @@
+
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 @@
+
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?"]