Kata: Lights Out in ClojureScript using Reagent and Figwheel

In a recent Clojure Developers Barcelona event we did the Lights Out Kata in ClojureScript using Reagent (a minimalistic ClojureScript interface to React.js) and Figwheel (which builds your ClojureScript code and hot loads it into the browser as you are coding).

We did mob programming and REPL-driven development.

Once at home I went on working on the kata.

This is the resulting code:

First, the core namespace where everything is initialized:

	(ns kata-lights-out.core
	(:require
	[reagent.core :as r]
	[kata-lights-out.lights :as l]
	[kata-lights-out.lights-view :as light-view]))
	(enable-console-print!)
	;; -------------------------
	;; Initialize app
	(def m 3)
	(def n 3)
	(def lights (r/atom []))
	(defn init! []
	(l/reset-lights! lights m n)
	(light-view/mount lights))
	(init!)

view raw lights_out_kata_core.cljs hosted with ❤ by GitHub

The lights-view namespace which contains the code to render all the components:

	(ns kata-lights-out.lights-view
	(:require
	[reagent.core :as r]
	[kata-lights-out.lights :as l]))
	(def ^:private light-on "1")
	(def ^:private light-off "0")
	(defn- all-lights-off-message-content [lights]
	(if (l/all-lights-off? lights)
	"Lights out, Yay!"
	{:style {:display :none}}))
	(defn- all-lights-off-message-component [lights]
	[:div#all-off-msg
	(all-lights-off-message-content lights)])
	(defn- on-light-click [pos lights]
	(swap! lights (partial l/flip-lights! lights pos)))
	(defn- render-light [light]
	(if (l/light-off? light)
	light-off
	light-on))
	(defn- light-component [lights i j light]
	^{:key (+ i j)}
	[:button
	{:on-click #(on-light-click [i j] lights)}
	(render-light light)])
	(defn- row-lights-component [lights i row-lights]
	^{:key i}
	[:div (map-indexed (partial light-component lights i) row-lights)])
	(defn- home-page [lights]
	[:div [:h2 "Kata Lights Out"]
	(map-indexed (partial row-lights-component lights) @lights)
	[all-lights-off-message-component @lights]])
	(defn mount [lights]
	(r/render
	[home-page lights]
	(.getElementById js/document "app")))

view raw lights_out_kata_view.cljs hosted with ❤ by GitHub

Finally, the lights namespace which contains all the business logic:

	(ns kata-lights-out.lights)
	(def ^:private light-on 1)
	(def ^:private light-off 0)
	(defn- neighbors? [[i0 j0] [i j]]
	(or (and (= j0 j) (= 1 (Math/abs (- i0 i))))
	(and (= i0 i) (= 1 (Math/abs (- j0 j))))))
	(defn- neighbors [m n pos]
	(for [i (range m)
	j (range n)
	:when (neighbors? pos [i j])]
	[i j]))
	(defn light-off? [light]
	(= light light-off))
	(defn- flip-light [light]
	(if (light-off? light)
	light-on
	light-off))
	(defn- flip [lights pos]
	(update-in lights pos flip-light))
	(defn- num-rows [lights]
	(count lights))
	(defn- num-colums [lights]
	(count (first lights)))
	(defn- flip-neighbors [pos lights]
	(->> pos
	(neighbors (num-rows lights) (num-colums lights))
	(cons pos)
	(reduce flip lights)))
	(defn- all-lights-on [m n]
	(vec (repeat m (vec (repeat n light-on)))))
	(defn reset-lights! [lights m n]
	(reset! lights (all-lights-on m n)))
	(defn flip-lights! [lights pos]
	(swap! lights (partial flip-neighbors pos)))
	(defn all-lights-off? [lights]
	(every? zero? (flatten lights)))

view raw lights_out_kata_lights.cljs hosted with ❤ by GitHub

You can check all the code in the everything-in-client branch of this GitHub repository.

As usual it was a great pleasure to do mob programming with the members of Clojure Developers Barcelona.

Thanks!