A reagent demo
Last active
August 29, 2015 14:20
-
-
Save pandeiro/781db08cef861b210b6c to your computer and use it in GitHub Desktop.
ten-clicks
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(ns ^:figwheel-always hello-world.core | |
(:require | |
[reagent.core :as reagent])) | |
;; impl | |
(defn- random-color [] | |
(str "rgb(" (rand-int 255) "," (rand-int 255) "," (rand-int 255) ")")) | |
(defn- set-background! [color-string] | |
(set! (.-backgroundColor (.-style js/document.body)) color-string)) | |
;; db | |
(defonce app-state | |
(reagent/atom | |
{:name-of-the-game "10 clicks and it's over" | |
:clicks 0 | |
:button-text "The is the clicker."})) | |
;; view | |
(def app-styles | |
{:text-align "center" | |
:line-height "7em"}) | |
(defn button-click-handler [_] | |
(swap! app-state update-in [:clicks] inc) | |
(when (< (:clicks @app-state) 10) | |
(set-background! (random-color)))) | |
(def button-styles | |
{:background "linear-gradient(gold, orange)" :text-shadow "0 1px 1px #888" | |
:color "#fff" :padding "12px 18px" :font-size "24px" | |
:border "none" :border-radius "4px"}) | |
(defn click-message [clicks] | |
(cond (= clicks 0) "Go ahead, click the button." | |
(< clicks 9) (str "You've clicked " clicks " " | |
(if (= clicks 1) "time" "times") | |
". Feel free to click it again.") | |
(= clicks 9) "I would not click again." | |
:else "Nice job. You broke it.")) | |
(defn hello-world [] | |
(let [{:keys [name-of-the-game clicks button-text]} @app-state] | |
[:div | |
{:style app-styles} | |
[:h1 | |
name-of-the-game] | |
[:p | |
(click-message clicks)] | |
[:button | |
{:on-click button-click-handler, :style button-styles :disabled (> clicks 9)} | |
button-text]])) | |
;; main | |
(reagent/render-component | |
[hello-world] | |
(. js/document (getElementById "app")) | |
(defn on-js-reload [] | |
;; optionally touch your app-state to force rerendering depending on | |
;; your application | |
;; (swap! app-state update-in [:__figwheel_counter] inc) | |
)) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<link href="css/style.css" rel="stylesheet" type="text/css"> | |
</head> | |
<body> | |
<div id="app"></div> | |
<script src="js/compiled/hello_world.js" type="text/javascript"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(defproject hello-world "0.1.0-SNAPSHOT" | |
:description "FIXME: write this!" | |
:url "http://example.com/FIXME" | |
:license {:name "Eclipse Public License" | |
:url "http://www.eclipse.org/legal/epl-v10.html"} | |
:dependencies [[org.clojure/clojure "1.6.0"] | |
[org.clojure/clojurescript "0.0-3211"] | |
[org.clojure/core.async "0.1.346.0-17112a-alpha"] | |
[reagent "0.5.0-alpha3"]] | |
:plugins [[lein-cljsbuild "1.0.5"] | |
[lein-figwheel "0.3.1"]] | |
:source-paths ["src"] | |
:clean-targets ^{:protect false} ["resources/public/js/compiled" "target"] | |
:cljsbuild { | |
:builds [{:id "dev" | |
:source-paths ["src"] | |
:figwheel { :on-jsload "hello-world.core/on-js-reload" } | |
:compiler {:main hello-world.core | |
:asset-path "js/compiled/out" | |
:output-to "resources/public/js/compiled/hello_world.js" | |
:output-dir "resources/public/js/compiled/out" | |
:source-map-timestamp true }} | |
{:id "min" | |
:source-paths ["src"] | |
:compiler {:output-to "resources/public/js/compiled/hello_world.js" | |
:main hello-world.core | |
:optimizations :advanced | |
:pretty-print false}}]} | |
:figwheel { | |
;; :http-server-root "public" ;; default and assumes "resources" | |
;; :server-port 3449 ;; default | |
:css-dirs ["resources/public/css"] ;; watch and update CSS | |
;; Start an nREPL server into the running figwheel process | |
:nrepl-port 7888 | |
;; Server Ring Handler (optional) | |
;; if you want to embed a ring handler into the figwheel http-kit | |
;; server, this is for simple ring servers, if this | |
;; doesn't work for you just run your own server :) | |
;; :ring-handler hello_world.server/handler | |
;; To be able to open files in your editor from the heads up display | |
;; you will need to put a script on your path. | |
;; that script will have to take a file path and a line number | |
;; ie. in ~/bin/myfile-opener | |
;; #! /bin/sh | |
;; emacsclient -n +$2 $1 | |
;; | |
;; :open-file-command "myfile-opener" | |
;; if you want to disable the REPL | |
;; :repl false | |
;; to configure a different figwheel logfile path | |
;; :server-logfile "tmp/logs/figwheel-logfile.log" | |
} | |
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* some style */ | |
body { | |
transition: all 1s linear; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment