Now successfully rendering the replacement navigation, but not yet made it work.
This commit is contained in:
parent
1e989616d7
commit
4dd486824d
11
README.md
11
README.md
|
|
@ -3,3 +3,14 @@
|
|||
MW3 is intended to be a re-implementation of MicroWorld in ClojureScript: the third reimplementation, although not nearly as dramatic as the shift from C to Clojure!
|
||||
|
||||
It is a very long way from finished and does not even nearly work yet. Come back in a month or two.
|
||||
|
||||
## What I'm trying to achieve
|
||||
|
||||
What I'd really like to achieve is
|
||||
|
||||
1. A single page application, that
|
||||
2. If JavaScript is available in the browser, runs mainly or wholly client side, but
|
||||
3. If JavaScript isn't available, runs wholly server side
|
||||
4. With as little as possible difference between the two modes.
|
||||
|
||||
This may not be possible, but does account for the fact that navigation is done statically in the HTML, and then re-done in the ClojureScript.
|
||||
|
|
|
|||
|
|
@ -45,19 +45,17 @@ body {
|
|||
}
|
||||
|
||||
#tab-bar li {
|
||||
padding: 0;
|
||||
padding: 0.1em 1.5em 0.1em 0;
|
||||
margin: 0;
|
||||
display: inline;
|
||||
color: white;
|
||||
background: rgba(40,40,40,0.8);
|
||||
}
|
||||
|
||||
#tab-bar li a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
padding: 0.1em 0.75em;
|
||||
margin: 0;
|
||||
color: white;
|
||||
background: rgba(40,40,40,0.8);
|
||||
}
|
||||
|
||||
#tab-bar li.active a { background: silver;}
|
||||
|
|
|
|||
|
|
@ -11,23 +11,25 @@
|
|||
<title>Welcome to MicroWorld!</title>
|
||||
</head>
|
||||
<body>
|
||||
<ul id="tab-bar">
|
||||
<li class="tab" id="home-tab" onclick="core.home()">
|
||||
Home
|
||||
</li>
|
||||
<li class="tab" id="params-tab" onclick="core.params()">
|
||||
Params
|
||||
</li>
|
||||
<li class="tab" id="rules-tab" onclick="onclick.rules()">
|
||||
Rules
|
||||
</li>
|
||||
<li class="tab" id="world-tab" onclick="onclick.world()">
|
||||
World
|
||||
</li>
|
||||
<li class="tab" id="docs-tab" onclick="onclick.docs()">
|
||||
Documentation
|
||||
</li>
|
||||
</ul>
|
||||
<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">Params</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>
|
||||
<div id="home-content">
|
||||
<a name="home-content"></a>
|
||||
<h1>
|
||||
|
|
@ -352,8 +354,8 @@
|
|||
</div>
|
||||
<div id="footer">
|
||||
<div id="credits">
|
||||
Built with <a href="http://www.luminusweb.net/">LuminusWeb</a> ||
|
||||
<img height="16" width="16" align="top" src="img/clojure-icon.gif"> Powered by <a href="http://clojure.org">Clojure</a> ||
|
||||
Built with <a href="https://github.com/plexus/chestnut">Chestnut</a> ||
|
||||
<img height="16" width="16" align="top" src="img/clojure-icon.gif"> Powered by <a href="http://clojure.org">ClojureScript</a> ||
|
||||
Engineering and hosting by <a href="http://www.journeyman.cc">Journeyman</a> ||
|
||||
World generated using <a href="http://git.journeyman.cc/?p=mw-engine;a=summary">MicroWorld Engine</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
(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 <!]]
|
||||
|
|
@ -8,23 +9,26 @@
|
|||
|
||||
;; The state of the application.
|
||||
;; NOTE that app-state can contain vectors and maps only, not lists.
|
||||
(defonce app-state (atom {:available-tabs {:#home-tab :#home-content
|
||||
:#params-tab :#params-content
|
||||
:#rules-tab :#rules-content
|
||||
:#world-tab :#world-content
|
||||
:#docs-tab :#docs-content}
|
||||
:selected-tab :#home-tab
|
||||
:text "Welcome to MicroWorld!"
|
||||
:rules []
|
||||
(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 []}))
|
||||
|
||||
(deref app-state)
|
||||
(:available-tabs (deref app-state))
|
||||
|
||||
(defn root-component [data owner]
|
||||
(reify
|
||||
om/IRender
|
||||
|
|
@ -35,31 +39,29 @@
|
|||
(reify
|
||||
om/IInitState
|
||||
(init-state [_]
|
||||
{:selected-tab :#home-tab
|
||||
:selected-content :#home-content})
|
||||
om/IRender
|
||||
(render [this]
|
||||
(dmu/ul nil
|
||||
)))
|
||||
{: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])
|
||||
|
||||
(defn onclick-handler
|
||||
"Handles a click on the specified `tab` and reveals the specified `content`."
|
||||
[tab content]
|
||||
(doseq [page pages]
|
||||
(dommy/hide!(sel page)))
|
||||
(dommy/show! content))
|
||||
|
||||
;; NASTY! Javascript interprets hyphens as subtraction operators, so function names
|
||||
;; exposed to raw Javascript (e.g. onclick event handlers) must not contain hyphens.
|
||||
|
||||
(defn ^:export home []
|
||||
(onclick-handler :#home-tab :#home-content))
|
||||
|
||||
(defn ^:export params []
|
||||
(onclick-handler :#params-tab :#params-content))
|
||||
|
||||
|
||||
(om/root
|
||||
|
|
@ -67,4 +69,7 @@
|
|||
app-state
|
||||
{:target (. js/document (getElementById "world-content"))})
|
||||
|
||||
|
||||
(om/root
|
||||
tab-bar
|
||||
app-state
|
||||
{:target (. js/document (getElementById "tab-bar-target"))})
|
||||
|
|
|
|||
Loading…
Reference in a new issue