Not much done, and, to be honest, I'm not even sure it's an improvement.

project.clj

@@ -15,7 +15,8 @@
                  [org.omcljs/om "1.0.0-alpha28"]
                  [secretary "1.2.3"]
                  [environ "1.0.2"]
-                 [prismatic/dommy "1.1.0"]]
+                 [prismatic/dommy "1.1.0"]
+                 [immoh/dommy.template "0.2.0"]]
 
   :plugins [[lein-cljsbuild "1.1.1"]
             [lein-environ "1.0.1"]]

resources/public/css/standard.css

@@ -117,9 +117,13 @@ input.required:after {
 }
 
 label {
-  width: 30em;
+  display: inline-block;
-  min-width: 20em;
+  width: 25%;
-  border-right: thin solid gray;
+  padding: 0.1em 1.5em;
+  border-right: 0.25em solid grey;
+  margin-right: 2em;
+  text-align: right;
+  vertical-align: top;
 }
 
 menu li {

resources/public/index.html

@@ -14,19 +14,29 @@
     <div id="tab-bar-target">
       <ul id="tab-bar">
         <li class="tab" id="home-tab">
+          <a href="#home-content">
             Home
+          </a>
         </li>
         <li class="tab" id="params-tab">
+          <a href="#params-content">
             Parameters
+          </a>
         </li>
         <li class="tab" id="rules-tab">
+          <a href="#rules-content">
             Rules
+          </a>
         </li>
         <li class="tab" id="world-tab">
+          <a href="#world-content">
             World
+          </a>
         </li>
         <li class="tab" id="docs-tab">
+          <a href="#docs-content">
             Documentation
+          </a>
         </li>
       </ul>
     </div>
@@ -36,7 +46,6 @@
         <h1>
           Welcome to MicroWorld!
         </h1>
-        <div class="content">
           <h2>What this is about</h2>
           <p>
             <img alt="Screenshot" id="screenshot" style="float: left; padding-right: 2em;" src="img/screenshot_med.png"/>
@@ -72,7 +81,7 @@
           <p>How many houses do you need for a market place? Where would people build a harbour?</p>
           <h3>Change the rules completely</h3>
           <p>I've provided rules which use the MicroWorld cellular automaton to make a simple model of the changes to land in Europe after the ice age. But you don't have to use it like that, at all.</p>
-          <p><a href='http://en.wikipedia.org/wiki/Conway's&#95;Game&#95;of&#95;Life'>Conway's Game of Life</a> is one of the famous uses of a cellular automaton. The rules for the Game of Life are very simple. To set up your game of life you'll need some initialisation rules, one for every cell you want to start live (we'll use <i>black</i> for live, and  <i>white</i> for dead):</p>
+          <p><a href="http://en.wikipedia.org/wiki/Conway's&#95;Game&#95;of&#95;Life">Conway's Game of Life</a> is one of the famous uses of a cellular automaton. The rules for the Game of Life are very simple. To set up your game of life you'll need some initialisation rules, one for every cell you want to start live (we'll use <i>black</i> for live, and  <i>white</i> for dead):</p>
           <pre>
     if x is equal to 4 and y is equal to 4 and state is new then state should be black</pre>
           <p>Add as many of these as you need for your starting pattern. Then add a rule, after all those:</p>
@@ -82,17 +91,15 @@
           <p>I'll leave you to work out what the rules of life are for yourself, from the Wiki page I linked to.</p>
           <p><strong>CHEAT</strong> <i>You'll find other rule sets you can explore if you go to the <a href='params'>Parameters</a> page</i>.</p>
       </div>
-      </div>
       <div id="params-content">
         <a name="params-content"></a>
         <h1>
           Set your parameters
         </h1>
-        <div class="content">
           <form action="{{servlet-context}}/params" method="POST">
             <p class="widget">
-              <label for="ruleset">The rule set to use</label>
+              <label for="params-ruleset">The rule set to use</label>
-              <select name="ruleset">
+              <select name="params-ruleset">
                 <option value="">No change - use your current rules</option>
                 {% for ruleset in rulesets %}
                 <option value="{{ruleset}}">{{ruleset}}</option>
@@ -100,8 +107,8 @@
               </select>
             </p>
             <p class="widget">
-              <label for="heightmap">The map to use</label>
+              <label for="params-heightmap">The map to use</label>
-              <select name="heightmap">
+              <select name="params-heightmap">
                 <option value="">No change - use your current map</option>
                 {% for heightmap in heightmaps %}
                 <option value="{{heightmap}}">{{heightmap}}</option>
@@ -109,39 +116,37 @@
               </select>
             </p>
             <p class="widget">
-              <label for="pause">
+              <label for="params-pause">
-                Pause duration
+                The pause before computing a new state of your world
               </label>
-              <input id="pause" type="range" value="{{pause}}" min="0" max="60" step="5" />
+              <input id="params-pause" type="range" value="{{pause}}" min="0" max="60" step="5" /> seconds
             </p>
-            <p class="help">
+            <p class="widget hide-if-active">
-              The pause beteen computing a new state of your world, in seconds
+              <label for="params-submit">When you have chosen your parameters</label>
-            </p>
+              <input name="submit" id="params-submit" type="submit" value="Save your parameters!"/>
-            <p class="widget">
-              <label for="submit">When you have chosen your parameters</label>
-                  <input name="submit" id="submit" type="submit" value="Save your parameters!"/>
             </p>
           </form>
       </div>
-      </div>
       <div id="rules-content">
         <a name="rules-content"></a>
         <h1>
           Edit your rules
         </h1>
-        <div class="content">
           <form action="{{servlet-context}}/rules" method="POST">
-            <textarea name="src" id="src" rows="10" cols="80">
+            <p class="widget">
+              <label for="rules-src">
+                Your rules
+              </label>
+              <textarea name="rules-src" id="rules-src" rows="10" cols="80">
               {{rule-text}}
               </textarea>
-            <p class="widget">
+            </p>
+            <p class="widget hide-if-active">
               <label for="submit">When you have finished editing</label>
               <input name="submit" id="submit" type="submit" value="Save your rules"/>
             </p>
-
           </form>
       </div>
-      </div>
       <div id="world-content">
         <a name="world-content"></a>
         <h1>
@@ -154,7 +159,6 @@
         <h1>
           Read the documentation
         </h1>
-        <div class="content">
           <div>
             <a name="top"/>
             <menu>
@@ -356,7 +360,6 @@
           </div>
         </div>
     </div>
-    </div>
     <div id="footer">
       <div id="credits">
         Built with <a href="https://github.com/plexus/chestnut">Chestnut</a> ||

src/cljs/mw3/core.cljs

@@ -1,17 +1,45 @@
 (ns ^:figwheel-always mw3.core
   (:require-macros [cljs.core.async.macros :refer [go]])
-  (:require [om.core :as om :include-macros true]
+  (:require
-            [om.dom :as dom :include-macros true]
+    [mw3.rulesets :as rulesets]
-            [cljs.core.async :refer [put! chan <!]]
+    [dommy.core :as dommy :refer-macros [sel sel1]]
-            [clojure.string :as string]
+    [dommy.template :as temp]))
-            [secretary.core :as sec :include-macros true]
-            [goog.events :as events]
-            [goog.history.EventType :as EventType]
-            [dommy.core :as dommy :refer-macros [sel sel1]])
-  (:import goog.History))
 
-(def pages [:#home-content :#params-content :#rules-content :#world-content :#docs-content])
 
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Data declarations
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+;; Tiles supplied in the standard distribution. Obviously this isn't all the states you can have.
+(def tiles ["abandoned"
+            "black"
+            "camp"
+            "climax"
+            "crop"
+            "error"
+            "fire"
+            "forest"
+            "grassland"
+            "heath"
+            "house"
+            "ice"
+            "inn"
+            "market"
+            "meadow"
+            "pasture"
+            "plague"
+            "ploughland"
+            "scrub"
+            "snow"
+            "waste"
+            "water"
+            "white"])
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Navigation
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+;; Tabs in the single-page app.
 (def available-tabs {:#home-tab {:content :#home-content :text "Home"}
                      :#params-tab {:content :#params-content :text "Parameters"}
                      :#rules-tab {:content :#rules-content :text "Rules"}
@@ -31,11 +59,34 @@
 (defn tab-click-listener
   "Set up a click listener on the tab with this `tab-id`"
   [tab-id]
+  (dommy/set-text! (sel1 tab-id) (:text (tab-id available-tabs)))
   (dommy/listen! (sel1 tab-id) :click (fn [e] (tab-handler e tab-id))))
 
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Rules page
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defn load-ruleset
+  [name]
+)
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Set up the screen on loading
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
 ;; listeners for the tab bar
 (tab-click-listener :#home-tab)
 (tab-click-listener :#params-tab)
 (tab-click-listener :#rules-tab)
 (tab-click-listener :#world-tab)
 (tab-click-listener :#docs-tab)
+
+;; hide controls which aren't needed if we're doing things client side
+(doseq [to-hide (sel :.hide-if-active)]
+  (dommy/set-style! to-hide :display "none"))
+
+;; hide all pages except home-tab
+(tab-handler nil :#home-tab)
+
+;; put the default ruleset into the rulesets pages
+(dommy/set-text! (sel1 :#rules-src) (rulesets/ruleset-as-single-string "ice-age"))

src/cljs/mw3/rulesets.cljs

@@ -2,6 +2,7 @@
 
 ;; Map of available rulesets. Key is a string name of the ruleset; value is a sequence of strings
 ;; of rule text.
+
 (def rulesets
   {"ice-age" [
               "# Ice Age"
@@ -30,3 +31,10 @@
                  ;; and, again, so on.
                 ]
    })
+
+
+(defn ruleset-as-single-string
+  "Return the ruleset with this `name` as a single string."
+  [name]
+  (str (interleave (rulesets name) (repeat "\n"))))
+