Yay! Page-to-page navigation works! That will do for tonight.

project.clj

@@ -11,9 +11,11 @@
                  [bk/ring-gzip "0.1.1"]
                  [ring.middleware.logger "0.5.0"]
                  [compojure "1.4.0"]
-                 [prismatic/dommy "1.1.0"] ;; probably don't need both this and om in the longer term
+                 [prismatic/om-tools "0.4.0"]
                  [org.omcljs/om "1.0.0-alpha28"]
-                 [environ "1.0.2"]]
+                 [secretary "1.2.3"]
+                 [environ "1.0.2"]
+                 [prismatic/dommy "1.1.0"]]
 
   :plugins [[lein-cljsbuild "1.1.1"]
             [lein-environ "1.0.1"]]

resources/public/index.html

@@ -14,22 +14,23 @@
     <div id="tab-bar-target">
       <ul id="tab-bar">
         <li class="tab" id="home-tab">
-          <a href="#home-content">Home</a>
+          Home
         </li>
         <li class="tab" id="params-tab">
-          <a href="#params-content">Params</a>
+          Parameters
         </li>
         <li class="tab" id="rules-tab">
-          <a href="#rules-content">Rules</a>
+          Rules
         </li>
         <li class="tab" id="world-tab">
-          <a href="#world-content">World</a>
+          World
         </li>
         <li class="tab" id="docs-tab">
-          <a href="#docs-content">Documentation</a>
+          Documentation
         </li>
       </ul>
     </div>
+    <div id="content">
       <div id="home-content">
         <a name="home-content"></a>
         <h1>
@@ -143,7 +144,10 @@
       </div>
       <div id="world-content">
         <a name="world-content"></a>
-
+        <h1>
+          Watch your world grow
+        </h1>
+        (the world goes here)
       </div>
       <div id="docs-content">
         <a name="docs-content"></a>
@@ -352,6 +356,7 @@
           </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

@@ -3,73 +3,39 @@
   (: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]))
+            [clojure.string :as string]
-
+            [secretary.core :as sec :include-macros true]
-(enable-console-print!)
+            [goog.events :as events]
-
+            [goog.history.EventType :as EventType]
-;; The state of the application.
+            [dommy.core :as dommy :refer-macros [sel sel1]])
-;; NOTE that app-state can contain vectors and maps only, not lists.
+  (:import goog.History))
-(defonce app-state (atom {;; Available tabs/pages within the application
-                          :available-tabs {:#home-tab {:content :#home-content :text "Home"}
-                                           :#params-tab {:content :#params-content :text "Parameters"}
-                                           :#rules-tab {:content :#rules-content :text "Rules"}
-                                           :#world-tab {:content :#world-content :text "World"}
-                                           :#docs-tab {:content :#docs-content :text "Documentation"}}
-                          ;; Parameters, set up on the parameters page.
-                          :params {:available-rulesets []
-                                   :available-heightmaps []
-                                   :ruleset ""
-                                   :heightmap ""}
-                          ;; Currently active rules.
-                          :rules []
-                          ;; Currently selected tab.
-                          :selected-tab :#home-tab
-                          ;; Junk so I can see stuff during development.
-                          :text "Welcome to MicroWorld!"
-                          ;; The current state of the world.
-                          :world []}))
-
-(defn root-component [data owner]
-  (reify
-    om/IRender
-    (render [_]
-      (dom/div nil (dom/h1 nil (:text data))))))
-
-(defn tab-bar [data owner]
-  (reify
-    om/IInitState
-    (init-state [_]
-                {:selected-tab :#home-tab
-                 :selected-content :#home-content})
-;;     om/IWillMount
-;;     (will-mount [_]
-;;                 (let [selection (om/get-state owner :selected)]
-;;                   (om/transact! data :selected-tab selection)))
-    om/IRenderState
-    (render-state [this state]
-                  (apply dom/ul #js {:id "tab-bar"}
-                         (om/build-all
-                          (fn [key]
-                            (reify
-                              om/IRenderState
-                              (render-state [this {:keys [selected]}]
-                                            (dom/li
-                                             #js {:onClick (fn [e] (put! selected @key))
-                                                  :className (if (= key (:selected-tab data)) "selected" "tab")}
-                                             (:text (key (:available-tabs data)))))))
-                          (keys (:available-tabs data)){:init-state state})))))
-
 
 (def pages [:#home-content :#params-content :#rules-content :#world-content :#docs-content])
 
+(def available-tabs {:#home-tab {:content :#home-content :text "Home"}
+                     :#params-tab {:content :#params-content :text "Parameters"}
+                     :#rules-tab {:content :#rules-content :text "Rules"}
+                     :#world-tab {:content :#world-content :text "World"}
+                     :#docs-tab {:content :#docs-content :text "Documentation"}})
 
+;; page-to-page navigation
+(defn tab-handler
+  "Handle a click event on the tab with id `tab-id`"
+  [e tab-id]
+  (.log js/console (str "You clicked '" tab-id "'"))
+  (doseq [key (keys available-tabs)]
+    (let [content-id (:content (available-tabs key))
+          display (if (= key tab-id) "block" "none")]
+        (dommy/set-style! (sel1 content-id) :display display))))
 
-(om/root
+(defn tab-click-listener
- root-component
+  "Set up a click listener on the tab with this `tab-id`"
- app-state
+  [tab-id]
- {:target (. js/document (getElementById "world-content"))})
+  (dommy/listen! (sel1 tab-id) :click (fn [e] (tab-handler e tab-id))))
 
-(om/root
+;; listeners for the tab bar
- tab-bar
+(tab-click-listener :#home-tab)
- app-state
+(tab-click-listener :#params-tab)
- {:target (. js/document (getElementById "tab-bar-target"))})
+(tab-click-listener :#rules-tab)
+(tab-click-listener :#world-tab)
+(tab-click-listener :#docs-tab)

src/cljs/mw3/rulesets.cljs

@@ -0,0 +1,32 @@
+(ns mw3.rulesets)
+
+;; 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"
+              "## Ruleset which attempts to model retreat of ice after an iceage"
+              "### Vegetation rules"
+              "if state is grassland then 1 chance in 10 state should be heath"
+              "if state is heath and fertility is more than 10 and altitude is less than 120 then state should be scrub"
+              "if state is scrub and fertility is more than 20 then 1 chance in 20 state should be forest"
+              "if state is forest and fertility is more than 30 and altitude is less than 70 then state should be climax"
+              "if state is climax then 1 chance in 500 state should be fire"
+              ;; and so on. No need to fully populate this until something works
+              ]
+   "settlement" [
+                 "# Settlement"
+                 "## Ruleset which attempts to model human settlement in a landscape."
+                 "if state is water then state should be water"
+                 "if state is in grassland or heath and more than 3 neighbours are water and generation is more than 20 then state should be camp"
+                 "if state is in grassland or heath and some neighbours are camp then 1 chance in 2 state should be pasture"
+                 "if state is in grassland or heath and more than 2 neighbours are pasture then 1 chance in 3 state should be camp"
+                 "if state is pasture and more than 3 neighbours are pasture and fewer than 1 neighbours are camp and fewer than 1 neighbours within 2 are house then state should be camp"
+                 "if state is in grassland or heath and some neighbours within 2 are house then state should be pasture"
+                 "if state is camp and some neighbours are ploughland then state should be camp"
+                 "if state is pasture and fertility is less than 2 then 1 chance in 3 state should be heath"
+                 "if state is camp then 1 chance in 5 state should be waste"
+                 "if state is pasture and fewer than 1 neighbours within 3 are house and fewer than 1 neighbours within 2 are camp then state should be heath"
+                 ;; and, again, so on.
+                ]
+   })