diff options
author | Yann Herklotz <ymherklotz@gmail.com> | 2017-08-16 00:27:48 +0100 |
---|---|---|
committer | Yann Herklotz <ymherklotz@gmail.com> | 2017-08-16 00:27:48 +0100 |
commit | 14e1558884cae42d2ebec45e2638c9dc83ebad24 (patch) | |
tree | ca04b2d8c28bd766356e25ad695e00b6d23dbe8b | |
parent | 3d4fc0e41c4416523843466ba13a08edc87e9af7 (diff) | |
download | TicTacToe-master.tar.gz TicTacToe-master.zip |
-rw-r--r-- | resources/public/css/style.css | 29 | ||||
-rw-r--r-- | src/tic_tac_toe/core.cljs | 34 |
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])))]) |