Skip to content
This repository has been archived by the owner on Dec 8, 2024. It is now read-only.

Commit

Permalink
Adapt demo-color to IC, electric fiddle and hf.router
Browse files Browse the repository at this point in the history
  • Loading branch information
@ggeoffrey
ggeoffrey committed Jan 23, 2024
1 parent 11e424a commit c50a862
Show file tree
Hide file tree
Showing 3 changed files with 58 additions and 59 deletions.
2 changes: 1 addition & 1 deletion deps.edn
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{:deps {com.hyperfiddle/electric {:git/url "https://github.com/hyperfiddle/electric" :git/sha "04c54b8b91e5e0cbaddf8719df20056aa1ea819e"}
{:deps {com.hyperfiddle/electric {:git/url "https://github.com/hyperfiddle/electric" :git/sha "ef2dd42be423063a9bd0f7bb4bd26c9a434fed11"}
com.hyperfiddle/rcf {:git/url "https://github.com/hyperfiddle/rcf" :git/sha "7105b43231140de6f2f39ce38611c9f6c9dfc976"}
org.clojure/clojure {:mvn/version "1.12.0-alpha5"}
org.clojure/clojurescript {:mvn/version "1.11.121"}
Expand Down
113 changes: 56 additions & 57 deletions src-fiddles/electric_tutorial/demo_color.cljc
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
(ns electric-demo.demo-color
(:require [contrib.data :refer [assoc-vec]]
[hyperfiddle.electric :as e]
(ns electric-tutorial.demo-color
(:require [hyperfiddle.electric :as e]
[hyperfiddle.electric-dom2 :as dom]
[hyperfiddle.history :as router]
[hyperfiddle.router :as r]
[contrib.color :as c]))

;; Goal is to demonstrate:
Expand Down Expand Up @@ -34,73 +33,73 @@
(defn saturation->chroma [saturation] (* 0.158 (/ saturation 100)))

(e/defn Tile [color]
(dom/div (dom/props {:style {:display :flex
:align-items :center
:justify-content :center
:color :white
:background-color (format-rgb color)
:width "100px"
:height "100%"
}})
(dom/text "Contrast")))
(e/client
(dom/div (dom/props {:style {:display :flex
:align-items :center
:justify-content :center
:color :white
:background-color (format-rgb color)
:width "100px"
:height "100%"
}})
(dom/text "Contrast"))))

(e/defn Color []
(e/defn Color [& [h s l]]
(e/client
(let [[self h s l] router/route
h (or h 180)
(let [h (or h 180)
s (or s 80)
l (or l 70)
swap-route! router/swap-route!]
SetRoute! (e/fn [h s l] (r/ReplaceState!. ['.. `(Color ~h ~s ~l)]))]
(dom/div (dom/props {:style {:display :grid
:grid-template-columns "auto 1fr auto"
:gap "0 1rem"
:align-items :center
:justify-items :stretch
:max-width "600px"}})
(dom/p (dom/text "Lightness"))
(dom/input (dom/props {:type :range
:min 0
:max 100
:step 1
:value l})
(dom/on! "input" (fn [^js e] (swap-route! assoc-vec 3 (js/parseInt (.. e -target -value))))))
(dom/p (dom/text l "%"))
(dom/p (dom/text "Lightness"))
(dom/input (dom/props {:type :range
:min 0
:max 100
:step 1
:value l})
(dom/on "input" (e/fn [^js e] (SetRoute!. h s (js/parseInt (.. e -target -value))))))
(dom/p (dom/text l "%"))

(dom/p (dom/text "Saturation"))
(dom/input (dom/props {:type :range
:min 0
:max 100
:step 1
:value s})
(dom/on! "input" (fn [^js e] (swap-route! assoc-vec 2 (js/parseInt (.. e -target -value))))))
(dom/p (dom/text s "%"))
(dom/p (dom/text "Saturation"))
(dom/input (dom/props {:type :range
:min 0
:max 100
:step 1
:value s})
(dom/on "input" (e/fn [^js e] (SetRoute!. h (js/parseInt (.. e -target -value)) l))))
(dom/p (dom/text s "%"))


(dom/p (dom/text "Hue"))
(dom/input (dom/props {:type :range
:min 0
:max 360
:step 1
:value h})
(dom/on! "input" (fn [^js e] (swap-route! assoc-vec 1 (js/parseInt (.. e -target -value))))))
(dom/p (dom/text h "°"))
(dom/p (dom/text "Hue"))
(dom/input (dom/props {:type :range
:min 0
:max 360
:step 1
:value h})
(dom/on "input" (e/fn [^js e] (SetRoute!. (js/parseInt (.. e -target -value)) s l))))
(dom/p (dom/text h "°"))


(dom/p (dom/text "HSL"))
(dom/canvas (dom/props {:width 360
:height 100})
(draw-gradient! dom/node h (fn [h] (c/hsl->rgb [h s l])))
)
(Tile. (c/hsl->rgb [h s l]))
(dom/p (dom/text "HSL"))
(dom/canvas (dom/props {:width 360
:height 100})
(draw-gradient! dom/node h (fn [h] (c/hsl->rgb [h s l])))
)
(Tile. (c/hsl->rgb [h s l]))

(dom/p (dom/text "OKLCH"))
(dom/canvas (dom/props {:width 360
:height 100})
(draw-gradient! dom/node h (fn [h] (c/oklch->rgb [l (saturation->chroma s) h]))))
(Tile. (c/oklch->rgb [l (saturation->chroma s) h]))
(dom/p (dom/text "OKLCH"))
(dom/canvas (dom/props {:width 360
:height 100})
(draw-gradient! dom/node h (fn [h] (c/oklch->rgb [l (saturation->chroma s) h]))))
(Tile. (c/oklch->rgb [l (saturation->chroma s) h]))

(dom/p (dom/text "HSLuv"))
(dom/canvas (dom/props {:width 360
:height 100})
(draw-gradient! dom/node h (fn [h] (c/hsluv->rgb [h s l]))))
(Tile. (c/hsluv->rgb [h s l]))))))
(dom/p (dom/text "HSLuv"))
(dom/canvas (dom/props {:width 360
:height 100})
(draw-gradient! dom/node h (fn [h] (c/hsluv->rgb [h s l]))))
(Tile. (c/hsluv->rgb [h s l]))))))
2 changes: 1 addition & 1 deletion vendor/electric
Submodule electric updated 2 files
+6 −2 src/hyperfiddle/router.cljc
+7 −4 test/hyperfiddle/electric_test.cljc

0 comments on commit c50a862

Please sign in to comment.