2 files changed, 46 insertions, 17 deletions
diff --git a/resources/public/css/style.css b/resources/public/css/style.css
index 1c2c78d..d54ff70 100644
--- a/resources/public/css/style.css
+++ b/resources/public/css/style.css
@@ -7,11 +7,34 @@ h1 {
     text-align: center;
 }
 
-#MyCircle {
+#blank {
     fill: #2f2f2f;
-    transition:.5s;
+    width: 0.9px;
+    height: 0.9px;
+    transition: .3s;
 }
 
-#MyCircle:hover {
+#blank:hover {
     fill: #8f8f8f;
+    width: 0.85px;
+    height: 0.85px;
+}
+
+#back {
+    fill: #2f2f2f;
+    width: 0.9px;
+    height: 0.9px;
+}
+
+#cross {
+    stroke: gold;
+    stroke-linecap: round;
+    stroke-width: 0.08px
+}
+
+#naught {
+    stroke-width: 0.08px;
+    stroke: skyblue;
+    fill: #2f2f2f;
+    r: 0.30;
 }
diff --git a/src/tic_tac_toe/core.cljs b/src/tic_tac_toe/core.cljs
index 89d4ba8..44c7feb 100644
--- a/src/tic_tac_toe/core.cljs
+++ b/src/tic_tac_toe/core.cljs
@@ -6,35 +6,41 @@
   (atom {:board (logic/new-board logic/board-size)}))
 
 (defn naught [i j]
-  [:circle {:id "naught"
-            :r 0.45
-            :cx (+ 0.5 i)
-            :cy (+ 0.5 j)}])
+  [:g
+   [:rect {:id "back"
+           :x (+ 0.05 i)
+           :y (+ 0.05 j)}]
+   [:circle {:id "naught"
+             :cx (+ 0.5 i)
+             :cy (+ 0.5 j)}]])
 
 (defn cross [i j]
-  [:g {:stroke "black"
-       :stroke-width 0.08
-       :stroke-linecap "round"}
-   [:line {:x1 i :y1 j :x2 (+ i 1) :y2 (+ j 1)}]
-   [:line {:x1 i :y1 (+ j 1) :x2 (+ i 1) :y2 j}]])
+  [:g 
+   [:rect {:id "back"
+           :x (+ 0.05 i)
+           :y (+ 0.05 j)}]
+   [:g {:id "cross"}
+    (let [offset 0.25]
+      [:line {:x1 (+ i offset) :y1 (+ j offset) :x2 (+ i (- 1 offset)) :y2 (+ j (- 1 offset))}])
+    (let [offset 0.25]
+      [:line {:x1 (+ i offset) :y1 (+ j (- 1 offset)) :x2 (+ i (- 1 offset)) :y2 (+ j offset)}])]])
 
 (defn blank [i j]
   [:rect {:id "blank"
-          :width 0.9
-          :height 0.9
           :x (+ 0.05 i)
-          :y (+ 0.05 j)}])
+          :y (+ 0.05 j)
+          :on-click #(swap! app-state assoc-in [:board j i] 1)}])
 
 (defn tictactoe []
   [:div
    [:h1 "Welcome to Tic Tac Toe"]
    (into
-    [:svg {:view-box "0 0 3 3"
+    [:svg {:view-box (str "0 0 " logic/board-size " " logic/board-size)
            :width 500 :height 500}]
     (for [i (range logic/board-size)
           j (range logic/board-size)]
       (case (get-in @app-state [:board j i])
-        0 [cross i j]
+        0 [blank i j]
         1 [cross i j]
         2 [naught i j])))])