Sketch of how the new rule-editor widget should look.

This commit is contained in:
simon 2016-03-03 08:29:06 +00:00
parent aed59ad8ad
commit 59ac8c2690
3 changed files with 83 additions and 3 deletions

View file

@ -67,6 +67,49 @@ li.tab a:active { background: gray; color: white; }
color: white;
}
.rule-editor {
color: black;
background-color: silver;
padding: 0;
}
.rule-cancel {
color: white;
background-color: red;
}
.rule-controls {
float: right;
margin-left: 2em;
}
.rule-down {
color: maroon;
background-color: orange;
}
.rule-feedback {
font-family: monospace;
padding: 0.25em 1em;
width: 80%;
}
.rule-input {
font-family: monospace;
width: 100%;
padding: 0.25em 1em;
}
.rule-ok {
color: white;
background-color: green;
}
.rule-up {
color: forest;
background-color: yellow;
}
.widget {
background-color: silver;
border: thin solid white;
@ -99,7 +142,7 @@ h1, h2, h3, h4, h5 {
color: white;
}
div.content, form, p, pre, ul, ol, dl, menu, h2, h3, h4, h5 {
div.content, div#params-container, div#rules-container, p, ul, ol, dl, menu, h2, h3, h4, h5 {
padding: 0.25em 10%;
}

View file

@ -96,10 +96,11 @@
<h1>
Set your parameters
</h1>
<div id="params-container">
<form action="{{servlet-context}}/params" method="POST">
<p class="widget">
<label for="params-ruleset">The rule set to use</label>
<select name="params-ruleset">
<select name="params-ruleset" id="params-ruleset">
<option value="">No change - use your current rules</option>
{% for ruleset in rulesets %}
<option value="{{ruleset}}">{{ruleset}}</option>
@ -127,11 +128,23 @@
</p>
</form>
</div>
</div>
<div id="rules-content">
<a name="rules-content"></a>
<h1>
Edit your rules
</h1>
<div id="rules-container">
<div id="rule-editor-1" class="rule-editor">
<input type="text" size="40" id="rule-input-1" class="rule-input" value="if state is grassland then 1 chance in 10 state should be heath"/>
<div id="rule-controls-1" class="rule-controls">
<input type="button" id="rule-ok-1" class="rule-ok" value="&#x2714;"/>
<input type="button" id="rule-up-1" class="rule-up" value="&uarr;"/>
<input type="button" id="rule-down-1" class="rule-down" value="&darr;"/>
<input type="button" id="rule-cancel-1" class="rule-cancel" value="&#x2718;"/>
</div>
<pre id="rule-1-feedback" class="rule-feedback">This is feedback on your rule.</pre>
</div>
<form action="{{servlet-context}}/rules" method="POST">
<p class="widget">
<label for="rules-src">
@ -147,6 +160,7 @@
</p>
</form>
</div>
</div>
<div id="world-content">
<a name="world-content"></a>
<h1>

View file

@ -62,13 +62,33 @@
(dommy/set-text! (sel1 tab-id) (:text (tab-id available-tabs)))
(dommy/listen! (sel1 tab-id) :click (fn [e] (tab-handler e tab-id))))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Params page
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(defn rebuild-ruleset-menu
[]
(let [menu (sel1 :#params-ruleset)]
(dommy/set-html!
menu
(temp/->document-fragment (temp/node [:ul "Froboz"])))))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Rules page
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(defn load-ruleset
[name]
)
(let [rules-container (sel1 :#rules-container)
ruleset (rulesets/rulesets name)]
(dommy/clear! rules-container)
(dommy/set-html!
rules-container
(temp/node
[:ul
(map #(vec (list :ul %)) ruleset)]))))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Set up the screen on loading
@ -88,5 +108,8 @@
;; hide all pages except home-tab
(tab-handler nil :#home-tab)
;; set up the rulesets menu with the rulesets we actually have.
(rebuild-ruleset-menu)
;; put the default ruleset into the rulesets pages
(dommy/set-text! (sel1 :#rules-src) (rulesets/ruleset-as-single-string "ice-age"))