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

resources/public/css/standard.css

@@ -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%;
 }
 

resources/public/index.html

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

src/cljs/mw3/core.cljs

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