adjusting and adding to controls

resources/public/css/style.css

@@ -2,8 +2,30 @@
 body {
     font-family:sans-serif;
     overflow:scroll;
+    margin:0px;
+    padding:0px;
 }
 
+.controls {
+    position:fixed;
+    top:0px;
+    left:0px;
+    padding:5px;
+    width:100px;
+    height:100%;
+    background-color:white;
+    text-align:center;
+}
+button, input {
+    margin:5px;
+}
+input[type="number"] {
+    width:50px;
+}
+
+#board {
+    margin-left:120px;
+}
 table {
     border-collapse:collapse;
 }

src/automata/core.cljs

@@ -10,6 +10,7 @@
 ;; define your app data so that it doesn't get over-written on reload
 (defonce app-state (atom {
                           :text "Hello world!"
+                          :binary-rule (automata.rules.preset-rules :110)
                           :rule (automata.rules.string-to-rule (automata.rules.preset-rules :110))
                           :board [(automata.init.init-random 15)]
                           :interv 500
@@ -20,6 +21,7 @@
                                   :active-color "red"
                                   :inactive-color "blue"
                                   }
+                          :desired-columns 15
                           }))
 
 ;(swap! app-state assoc :board [(automata.init.init-random 55)])
@@ -38,6 +40,7 @@
 
 (defn Board []
   [:table
+   {:id "board"}
    [:tbody
     (map-indexed Row (@app-state :board))]])
 
@@ -46,24 +49,33 @@
   (swap! app-state update-in [:board] conj (automata.rules.proc (last (@app-state :board)) (@app-state :rule))))
 
 
-;(go (dotimes [n  100]
-;      (<! (timeout 1000))
-;      (println (str "beat" n))
-;      (step)))
 (defn start-stepping []
   (go
     (while (@app-state :go)
       (step)
       (<! (timeout 100)))))
 
-(defn App []
+(defn Controls []
   [:div
-   [:button {:on-click (fn [] (swap! app-state update-in [:go] not) (start-stepping))} (if (@app-state :go) "stop" "go")]
+   {:class "controls"}
+   [:button {:on-click (fn [] (swap! app-state update-in [:go] not) (start-stepping))} (if (@app-state :go) "stop" "GO")]
    [:button {:on-click (fn [] (step))} "step"]
    [:button {:on-click (fn [] (swap! app-state assoc :board [(automata.init.init-random 55)]))} "reset"]
-   [Board]
+   [:hr]
+   "columns"
+   [:input {:type "number" :min 1 :value (@app-state :desired-columns) :on-change (fn [e] (swap! app-state assoc :desired-columns e.target.value))}]
+   [:button {:on-click (fn [] (println "change number of columns to" (@app-state :desired-columns)))} "change"]
+   [:hr]
+   "rules"
+   ;(println (interleave (automata.rules.rule-order) (@app-state :binary-rule)))
+   (println "hi" (@app-state :binary-rule) automata.rules.rule-order)
    ])
 
+(defn App []
+  [:div
+   [Controls]
+   [Board]])
+
 (reagent/render-component [App]
                           (. js/document (getElementById "app")))