pandeiro/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Ten clicks

A reagent demo
Getting started with Clojure in Cursive


https://cursiveclojure.com/userguide/
https://github.com/bhauman/lein-figwheel/wiki/Running-figwheel-in-a-Cursive-Clojure-REPL

Getting started with Clojure in Emacs


http://www.braveclojure.com/basic-emacs/


## core.cljs
(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)
  ))

## index.html
<!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>

## project.clj
(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"
             }
  )

## styles.css
/* some style */

body {
    transition: all 1s linear;
}
	(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)
	))
	<!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>
	(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"
	}
	)