From aed59ad8ad3e4ec5eef6c5f250e5409a18dc7dd5 Mon Sep 17 00:00:00 2001
From: simon <simon@journeyman.cc>
Date: Thu, 18 Feb 2016 08:43:07 +0000
Subject: [PATCH] Not much done, and, to be honest, I'm not even sure it's an
 improvement.

---
 project.clj                       |  3 +-
 resources/public/css/standard.css | 10 +++--
 resources/public/index.html       | 69 ++++++++++++++++--------------
 src/cljs/mw3/core.cljs            | 71 ++++++++++++++++++++++++++-----
 src/cljs/mw3/rulesets.cljs        |  8 ++++
 5 files changed, 114 insertions(+), 47 deletions(-)

diff --git a/project.clj b/project.clj
index 2104e62..98116b9 100644
--- a/project.clj
+++ b/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"]]
diff --git a/resources/public/css/standard.css b/resources/public/css/standard.css
index 90faaf0..919b4ce 100644
--- a/resources/public/css/standard.css
+++ b/resources/public/css/standard.css
@@ -117,9 +117,13 @@ input.required:after {
 }
 
 label {
-  width: 30em;
-  min-width: 20em;
-  border-right: thin solid gray;
+  display: inline-block;
+  width: 25%;
+  padding: 0.1em 1.5em;
+  border-right: 0.25em solid grey;
+  margin-right: 2em;
+  text-align: right;
+  vertical-align: top;
 }
 
 menu li {
diff --git a/resources/public/index.html b/resources/public/index.html
index 5a4b83b..4f4325c 100644
--- a/resources/public/index.html
+++ b/resources/public/index.html
@@ -14,19 +14,29 @@
     <div id="tab-bar-target">
       <ul id="tab-bar">
         <li class="tab" id="home-tab">
-          Home
+          <a href="#home-content">
+            Home
+          </a>
         </li>
         <li class="tab" id="params-tab">
-          Parameters
+          <a href="#params-content">
+            Parameters
+          </a>
         </li>
         <li class="tab" id="rules-tab">
-          Rules
+          <a href="#rules-content">
+            Rules
+          </a>
         </li>
         <li class="tab" id="world-tab">
-          World
+          <a href="#world-content">
+            World
+          </a>
         </li>
         <li class="tab" id="docs-tab">
-          Documentation
+          <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>
@@ -81,18 +90,16 @@
     </pre>
           <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>
-              <select name="ruleset">
+              <label for="params-ruleset">The rule set to use</label>
+              <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>
-              <select name="heightmap">
+              <label for="params-heightmap">The map to use</label>
+              <select name="params-heightmap">
                 <option value="">No change - use your current map</option>
                 {% for heightmap in heightmaps %}
                 <option value="{{heightmap}}">{{heightmap}}</option>
@@ -109,38 +116,36 @@
               </select>
             </p>
             <p class="widget">
-              <label for="pause">
-                Pause duration
+              <label for="params-pause">
+                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">
-              The pause beteen computing a new state of your world, in seconds
-            </p>
-            <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 class="widget hide-if-active">
+              <label for="params-submit">When you have chosen your parameters</label>
+              <input name="submit" id="params-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">
-          {{rule-text}}
-            </textarea>
             <p class="widget">
-              <label for="submit">When you have finished editing</label>
-                  <input name="submit" id="submit" type="submit" value="Save your rules"/>
+              <label for="rules-src">
+                Your rules
+              </label>
+              <textarea name="rules-src" id="rules-src" rows="10" cols="80">
+              {{rule-text}}
+              </textarea>
+            </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>
@@ -154,7 +159,6 @@
         <h1>
           Read the documentation
         </h1>
-        <div class="content">
           <div>
             <a name="top"/>
             <menu>
@@ -355,7 +359,6 @@
             </menu>
           </div>
         </div>
-      </div>
     </div>
     <div id="footer">
       <div id="credits">
diff --git a/src/cljs/mw3/core.cljs b/src/cljs/mw3/core.cljs
index e42f05d..5b38621 100644
--- a/src/cljs/mw3/core.cljs
+++ b/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]
-            [om.dom :as dom :include-macros true]
-            [cljs.core.async :refer [put! chan <!]]
-            [clojure.string :as string]
-            [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))
+  (:require
+    [mw3.rulesets :as rulesets]
+    [dommy.core :as dommy :refer-macros [sel sel1]]
+    [dommy.template :as temp]))
 
-(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"))
diff --git a/src/cljs/mw3/rulesets.cljs b/src/cljs/mw3/rulesets.cljs
index 5595e80..d8169c7 100644
--- a/src/cljs/mw3/rulesets.cljs
+++ b/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"))))
+