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!
|
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.
|
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 {
|
#tab-bar li {
|
||||||
padding: 0;
|
padding: 0.1em 1.5em 0.1em 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
display: inline;
|
display: inline;
|
||||||
color: white;
|
|
||||||
background: rgba(40,40,40,0.8);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#tab-bar li a {
|
#tab-bar li a {
|
||||||
color: white;
|
color: white;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
padding: 0.1em 0.75em;
|
color: white;
|
||||||
margin: 0;
|
background: rgba(40,40,40,0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
#tab-bar li.active a { background: silver;}
|
#tab-bar li.active a { background: silver;}
|
||||||
|
|
|
||||||
|
|
@ -11,23 +11,25 @@
|
||||||
<title>Welcome to MicroWorld!</title>
|
<title>Welcome to MicroWorld!</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div id="tab-bar-target">
|
||||||
<ul id="tab-bar">
|
<ul id="tab-bar">
|
||||||
<li class="tab" id="home-tab" onclick="core.home()">
|
<li class="tab" id="home-tab">
|
||||||
Home
|
<a href="#home-content">Home</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="tab" id="params-tab" onclick="core.params()">
|
<li class="tab" id="params-tab">
|
||||||
Params
|
<a href="#params-content">Params</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="tab" id="rules-tab" onclick="onclick.rules()">
|
<li class="tab" id="rules-tab">
|
||||||
Rules
|
<a href="#rules-content">Rules</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="tab" id="world-tab" onclick="onclick.world()">
|
<li class="tab" id="world-tab">
|
||||||
World
|
<a href="#world-content">World</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="tab" id="docs-tab" onclick="onclick.docs()">
|
<li class="tab" id="docs-tab">
|
||||||
Documentation
|
<a href="#docs-content">Documentation</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
</div>
|
||||||
<div id="home-content">
|
<div id="home-content">
|
||||||
<a name="home-content"></a>
|
<a name="home-content"></a>
|
||||||
<h1>
|
<h1>
|
||||||
|
|
@ -352,8 +354,8 @@
|
||||||
</div>
|
</div>
|
||||||
<div id="footer">
|
<div id="footer">
|
||||||
<div id="credits">
|
<div id="credits">
|
||||||
Built with <a href="http://www.luminusweb.net/">LuminusWeb</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">Clojure</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> ||
|
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>
|
World generated using <a href="http://git.journeyman.cc/?p=mw-engine;a=summary">MicroWorld Engine</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
(ns ^:figwheel-always mw3.core
|
(ns ^:figwheel-always mw3.core
|
||||||
|
(:require-macros [cljs.core.async.macros :refer [go]])
|
||||||
(:require [om.core :as om :include-macros true]
|
(:require [om.core :as om :include-macros true]
|
||||||
[om.dom :as dom :include-macros true]
|
[om.dom :as dom :include-macros true]
|
||||||
[cljs.core.async :refer [put! chan <!]]
|
[cljs.core.async :refer [put! chan <!]]
|
||||||
|
|
@ -8,23 +9,26 @@
|
||||||
|
|
||||||
;; The state of the application.
|
;; The state of the application.
|
||||||
;; NOTE that app-state can contain vectors and maps only, not lists.
|
;; NOTE that app-state can contain vectors and maps only, not lists.
|
||||||
(defonce app-state (atom {:available-tabs {:#home-tab :#home-content
|
(defonce app-state (atom {;; Available tabs/pages within the application
|
||||||
:#params-tab :#params-content
|
:available-tabs {:#home-tab {:content :#home-content :text "Home"}
|
||||||
:#rules-tab :#rules-content
|
:#params-tab {:content :#params-content :text "Parameters"}
|
||||||
:#world-tab :#world-content
|
:#rules-tab {:content :#rules-content :text "Rules"}
|
||||||
:#docs-tab :#docs-content}
|
:#world-tab {:content :#world-content :text "World"}
|
||||||
:selected-tab :#home-tab
|
:#docs-tab {:content :#docs-content :text "Documentation"}}
|
||||||
:text "Welcome to MicroWorld!"
|
;; Parameters, set up on the parameters page.
|
||||||
:rules []
|
|
||||||
:params {:available-rulesets []
|
:params {:available-rulesets []
|
||||||
:available-heightmaps []
|
:available-heightmaps []
|
||||||
:ruleset ""
|
:ruleset ""
|
||||||
:heightmap ""}
|
: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 []}))
|
:world []}))
|
||||||
|
|
||||||
(deref app-state)
|
|
||||||
(:available-tabs (deref app-state))
|
|
||||||
|
|
||||||
(defn root-component [data owner]
|
(defn root-component [data owner]
|
||||||
(reify
|
(reify
|
||||||
om/IRender
|
om/IRender
|
||||||
|
|
@ -37,29 +41,27 @@
|
||||||
(init-state [_]
|
(init-state [_]
|
||||||
{:selected-tab :#home-tab
|
{:selected-tab :#home-tab
|
||||||
:selected-content :#home-content})
|
:selected-content :#home-content})
|
||||||
om/IRender
|
;; om/IWillMount
|
||||||
(render [this]
|
;; (will-mount [_]
|
||||||
(dmu/ul nil
|
;; (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 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
|
(om/root
|
||||||
|
|
@ -67,4 +69,7 @@
|
||||||
app-state
|
app-state
|
||||||
{:target (. js/document (getElementById "world-content"))})
|
{: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