Look and feel of the rule editor page is now almost perfect. I would like

to know how to get the character entities onto the buttons...

resources/public/css/standard.css

@@ -67,20 +67,15 @@ 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;
+  display: none;
+}
+
+.rule-delete {
+  color: white;
+  background-color: red;
 }
 
 .rule-down {
@@ -88,16 +83,32 @@ li.tab a:active { background: gray; color: white; }
   background-color: orange;
 }
 
+.rule-editor {
+  color: black;
+  background-color: silver;
+  padding: 0;
+}
+
+.rule-editor:hover .rule-controls, .rule-editor:hover .rule-feedback {
+  display: block;
+}
+
 .rule-feedback {
   font-family: monospace;
   padding: 0.25em 1em;
   width: 80%;
+  display: none;
 }
 
 .rule-input {
   font-family: monospace;
   width: 100%;
   padding: 0.25em 1em;
+  display: block;
+}
+
+.rule-input:focus ~ .rule-controls, .rule-input:focus ~ .rule-feedback {
+  display: block;
 }
 
 .rule-ok {

src/cljs/mw3/core.cljs

@@ -87,10 +87,10 @@
    {:id (str "rule-editor-" index) :class "rule-editor"}
    [:input {:type "text" :id (str "rule-input-" index) :class "rule-input" :value rule}]
    [:div {:id (str "rule-controls-" index) :class "rule-controls"}
-    [:input {:type "button" :id (str "rule-ok-" index) :class "rule-ok" :value "✔"}]
+    [:input {:type "button" :id (str "rule-ok-" index) :class "rule-ok" :value "ok"}]                ;; ✔
-    [:input {:type "button" :id (str "rule-up-" index) :class "rule-up" :value "↑"}]
+    [:input {:type "button" :id (str "rule-up-" index) :class "rule-up" :value "up"}]                ;; ↑
-    [:input {:type "button" :id (str "rule-down-" index) :class "rule-down" :value "↓"}]
+    [:input {:type "button" :id (str "rule-down-" index) :class "rule-down" :value "down"}]          ;; ↓
-    [:input {:type "button" :id (str "rule-cancel-" index) :class "rule-cancel" :value "✘"}]]
+    [:input {:type "button" :id (str "rule-delete-" index) :class "rule-delete" :value "delete"}]]   ;; ✘
    [:pre {:id (str "rule-feedback-" index) :class "rule-feedback"}]
    ])
 
@@ -111,21 +111,9 @@
   (let [rules-container (sel1 :#rules-container)
         ruleset (rulesets/rulesets name)]
     (dommy/clear! rules-container)
-    (doseq [rule ruleset index (range (count ruleset))]
+    (doseq [[rule index] (map #(list %1 %2) ruleset (range (count ruleset)))]
       (dommy/append! rules-container (rule-editor rule index)))))
 
-;;(rule-editors "settlement")
-
-(load-ruleset "settlement")
-
-;; (rulesets/rulesets "ice-age")
-
-(def x (sel1 :#rules-container))
-
-(dommy/append! x (rule-editor "if state is new then state should be grass" 1))
-
-
-
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Set up the screen on loading
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -148,4 +136,5 @@
 ;; (rebuild-ruleset-menu)
 
 ;; put the default ruleset into the rulesets pages
-;; (dommy/set-text! (sel1 :#rules-src) (rulesets/ruleset-as-single-string "ice-age"))
+(load-ruleset "settlement")
+