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> | ||||
|  | @ -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="✔"/> | ||||
|               <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"> | ||||
|  | @ -147,6 +160,7 @@ | |||
|             </p> | ||||
|           </form> | ||||
|         </div> | ||||
|       </div> | ||||
|       <div id="world-content"> | ||||
|         <a name="world-content"></a> | ||||
|         <h1> | ||||
|  |  | |||
|  | @ -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