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

This commit is contained in:
Simon Brooke 2016-02-16 22:21:52 +00:00
parent 4dd486824d
commit f9043c9572
4 changed files with 386 additions and 381 deletions

View file

@ -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"]]

View file

@ -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> ||

View file

@ -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]))
(enable-console-print!)
;; The state of the application.
;; NOTE that app-state can contain vectors and maps only, not lists.
(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})))))
[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))
(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
root-component
app-state
{:target (. js/document (getElementById "world-content"))})
(defn tab-click-listener
"Set up a click listener on the tab with this `tab-id`"
[tab-id]
(dommy/listen! (sel1 tab-id) :click (fn [e] (tab-handler e tab-id))))
(om/root
tab-bar
app-state
{:target (. js/document (getElementById "tab-bar-target"))})
;; 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)

View file

@ -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.
]
})