Sketch of how the new rule-editor widget should look.
This commit is contained in:
parent
aed59ad8ad
commit
59ac8c2690
|
@ -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%;
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
@ -126,12 +127,24 @@
|
|||
<input name="submit" id="params-submit" type="submit" value="Save your parameters!"/>
|
||||
</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="✔"/>
|
||||
<input type="button" id="rule-up-1" class="rule-up" value="↑"/>
|
||||
<input type="button" id="rule-down-1" class="rule-down" value="↓"/>
|
||||
<input type="button" id="rule-cancel-1" class="rule-cancel" value="✘"/>
|
||||
</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">
|
||||
|
@ -146,6 +159,7 @@
|
|||
<input name="submit" id="submit" type="submit" value="Save your rules"/>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div id="world-content">
|
||||
<a name="world-content"></a>
|
||||
|
|
|
@ -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"))
|
||||
|
|
Loading…
Reference in a new issue