Kata: Variation on Lights Out, flipping behavior on the backend

Lately, in Clojure Developers Barcelona's events, we've been practicing by doing several variations on the Lights Out Kata.

First, we did the kata in ClojureScript using Reagent and Figwheel (described in this previous post).

In the last two meetups (this one and this other one), we redid the kata.

This time instead of doing everything on the client, we used the Compojure library to develop a back end service that reset and flipped the lights, and a simple client that talked to it using cljs-http and core.async libraries.

As we've been doing lately, we did mob programming and REPL-driven development.

First, let's see the code we did for the server:

These are the tests:

	(ns lights-out-server.handler-test
	(:require [clojure.test :refer :all]
	[ring.mock.request :as mock]
	[lights-out-server.handler :refer :all]))
	(deftest test-lights-out
	(testing "resetting lights"
	(let [response (app (mock/request :post "/reset-lights" {:m 3 :n 3}))]
	(is (= (:status response) 200))
	(is (= (:body response) "{\"lights\":[[1,1,1],[1,1,1],[1,1,1]]}"))))
	(testing "flipping lights"
	(app (mock/request :post "/reset-lights" {:m 3 :n 3}))
	(let [response (app (mock/request :post "/flip-light" {:x 0 :y 0}))]
	(is (= (:status response) 200))
	(is (= (:body response) "{\"lights\":[[0,0,1],[0,1,1],[1,1,1]]}"))))
	(testing "flipping lights twice"
	(app (mock/request :post "/reset-lights" {:m 3 :n 3}))
	(app (mock/request :post "/flip-light" {:x 1 :y 1}))
	(let [response (app (mock/request :post "/flip-light" {:x 0 :y 0}))]
	(is (= (:status response) 200))
	(is (= (:body response) "{\"lights\":[[0,1,1],[1,0,0],[1,0,1]]}")))))

view raw lights-out-server-handler-test.clj hosted with ❤ by GitHub

and this is the definition of the routes and their handlers using Compojure:

	(ns lights-out-server.handler
	(:require
	[compojure.core :refer :all]
	[ring.middleware.cors :as cors-middleware]
	[ring.middleware.json :as json-middleware]
	[ring.middleware.defaults :refer [wrap-defaults api-defaults]]
	[lights-out-server.lights :as lights]))
	(defroutes app-routes
	(POST "/reset-lights" [m n]
	(let [m (Integer/parseInt m)
	n (Integer/parseInt n)]
	(lights/reset-lights! m n)
	{:status 200 :body {:lights @lights/lights}}))
	(POST "/flip-light" [x y]
	(let [x (Integer/parseInt x)
	y (Integer/parseInt y)]
	(lights/flip-light! [x y])
	{:status 200 :body {:lights @lights/lights}})))
	(def app
	(-> app-routes
	(wrap-defaults api-defaults)
	(json-middleware/wrap-json-response {:keywords? true :bigdecimals? true})
	(cors-middleware/wrap-cors
	:access-control-allow-origin #"http://0.0.0.0:3449"
	:access-control-allow-methods [:post])))

view raw ligths-outh-server-handler.clj hosted with ❤ by GitHub

We had some problems with the Same-origin policy until we discovered and learned how to use the Ring middleware for Cross-Origin Resource Sharing.

Finally, this is the code that flips and resets the lights (it's more or less the same code we wrote for the client-only version of the kata we did previously):

	(ns lights-out-server.lights)
	(def lights (atom nil))
	(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- flip-neighbors [m n pos lights]
	(->> pos
	(neighbors m n)
	(cons pos)
	(reduce flip lights)))
	(defn- all-lights-on [m n]
	(vec (repeat m (vec (repeat n light-on)))))
	(defn- num-rows []
	(count @lights))
	(defn- num-colums []
	(count (first @lights)))
	(defn reset-lights! [m n]
	(reset! lights (all-lights-on m n)))
	(defn flip-light! [pos]
	(swap! lights (partial flip-neighbors (num-rows) (num-colums) pos)))

view raw lights-out-server-lights.clj hosted with ❤ by GitHub

Now, let's see the code we wrote for the client:

First, the core namespace where everything is initialized (notice the channel creation on line 12):

	(ns kata-lights-out.core
	(:require
	[kata-lights-out.lights-view :as light-view]
	[cljs.core.async :as async]))
	(enable-console-print!)
	;; -------------------------
	;; Initialize app
	(def m 4)
	(def n 4)
	(def lights-channel (async/chan))
	(defn init! []
	(light-view/mount lights-channel m n))
	(init!)

view raw lights-out-client-core.cljs hosted with ❤ by GitHub

Then 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 [lights-channel pos]
	(l/flip-light! lights-channel pos))
	(defn- render-light [light]
	(if (l/light-off? light)
	light-off
	light-on))
	(defn- light-component [lights-channel i j light]
	^{:key (+ i j)}
	[:button
	{:on-click #(on-light-click lights-channel [i j])}
	(render-light light)])
	(defn- row-lights-component [lights-channel i row-lights]
	^{:key i}
	[:div (map-indexed
	(partial light-component lights-channel i)
	row-lights)])
	(defn- home-page [lights-channel lights]
	(fn []
	[:div [:h2 "Kata Lights Out"]
	(map-indexed
	(partial row-lights-component lights-channel)
	@lights)
	[all-lights-off-message-component @lights]]))
	(defn mount [lights-channel m n]
	(l/listen-lights-updates! lights-channel)
	(l/reset-lights! lights-channel m n)
	(r/render
	[home-page lights-channel l/lights]
	(.getElementById js/document "app")))

view raw lights-out-client-lights-view.cljs hosted with ❤ by GitHub

The lights-view's code is also very similar to the one we did for the client-only version of the kata.

And finally the lights namespace which is in charge of talking to the back end and updating the lights atom:

	(ns kata-lights-out.lights
	(:require
	[reagent.core :as r]
	[cljs-http.client :as http]
	[cljs.core.async :as async])
	(:require-macros
	[cljs.core.async.macros :refer [go go-loop]]))
	(def ^:private lights (r/atom []))
	(def ^:private light-off 0)
	(defn light-off? [light]
	(= light light-off))
	(defn- extract-lights [response]
	(->> response
	:body
	(.parse js/JSON)
	.-lights
	js->clj))
	(defn listen-to-lights-updates! [lights-channel]
	(go-loop []
	(when-let [response (async/<! lights-channel)]
	(reset! lights (extract-lights response))
	(recur))))
	(defn flip-light! [lights-channel [x y]]
	(async/pipe
	(http/post "http://localhost:3000/flip-light"
	{:with-credentials? false
	:form-params {:x x :y y}})
	lights-channel
	false))
	(defn reset-lights! [lights-channel m n]
	(async/pipe
	(http/post "http://localhost:3000/reset-lights"
	{:with-credentials? false
	:form-params {:m m :n n}})
	lights-channel
	false))
	(defn all-lights-off? [lights]
	(every? light-off? (flatten lights)))

view raw lights-out-client-lights.cljs hosted with ❤ by GitHub

Notice how we used the pipe function to take the values that were coming from the channel returned by the call to cljs-httphttps://github.com/r0man/cljs-http's post function and pass them to the channel from which the code that updates the lights state is taking values.

You can find the code we produced in these two GitHub repositories: the server and the client (see the flip-lights-in-backend branch).

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