diff options
author | Yann Herklotz <ymherklotz@gmail.com> | 2017-08-15 23:23:37 +0100 |
---|---|---|
committer | Yann Herklotz <ymherklotz@gmail.com> | 2017-08-15 23:23:37 +0100 |
commit | 3d4fc0e41c4416523843466ba13a08edc87e9af7 (patch) | |
tree | 33d5a70631bdff5571eab2036fc914cb069d7606 | |
download | TicTacToe-3d4fc0e41c4416523843466ba13a08edc87e9af7.tar.gz TicTacToe-3d4fc0e41c4416523843466ba13a08edc87e9af7.zip |
Cool lines are being drawn
-rw-r--r-- | .gitignore | 14 | ||||
-rw-r--r-- | README.md | 39 | ||||
-rw-r--r-- | dev/user.clj | 42 | ||||
-rw-r--r-- | project.clj | 105 | ||||
-rw-r--r-- | resources/public/css/style.css | 17 | ||||
-rw-r--r-- | resources/public/index.html | 17 | ||||
-rw-r--r-- | src/tic_tac_toe/core.cljs | 43 | ||||
-rw-r--r-- | src/tic_tac_toe/logic.cljs | 9 |
8 files changed, 286 insertions, 0 deletions
diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..13ba58b --- /dev/null +++ b/.gitignore @@ -0,0 +1,14 @@ +/resources/public/js/compiled/** +figwheel_server.log +pom.xml +*jar +/lib/ +/classes/ +/out/ +/target/ +.lein-deps-sum +.lein-repl-history +.lein-plugins/ +.repl +.nrepl-port +/.cljs_rhino_repl/ diff --git a/README.md b/README.md new file mode 100644 index 0000000..42bbc90 --- /dev/null +++ b/README.md @@ -0,0 +1,39 @@ +# tic-tac-toe + +FIXME: Write a one-line description of your library/project. + +## Overview + +FIXME: Write a paragraph about the library/project and highlight its goals. + +## Setup + +To get an interactive development environment run: + + lein figwheel + +and open your browser at [localhost:3449](http://localhost:3449/). +This will auto compile and send all changes to the browser without the +need to reload. After the compilation process is complete, you will +get a Browser Connected REPL. An easy way to try it is: + + (js/alert "Am I connected?") + +and you should see an alert in the browser window. + +To clean all compiled files: + + lein clean + +To create a production build run: + + lein do clean, cljsbuild once min + +And open your browser in `resources/public/index.html`. You will not +get live reloading, nor a REPL. + +## License + +Copyright © 2014 FIXME + +Distributed under the Eclipse Public License either version 1.0 or (at your option) any later version. diff --git a/dev/user.clj b/dev/user.clj new file mode 100644 index 0000000..11a6018 --- /dev/null +++ b/dev/user.clj @@ -0,0 +1,42 @@ +(ns user + (:require + [figwheel-sidecar.repl-api :as f])) + +;; user is a namespace that the Clojure runtime looks for and +;; loads if its available + +;; You can place helper functions in here. This is great for starting +;; and stopping your webserver and other development services + +;; The definitions in here will be available if you run "lein repl" or launch a +;; Clojure repl some other way + +;; You have to ensure that the libraries you :require are listed in your dependencies + +;; Once you start down this path +;; you will probably want to look at +;; tools.namespace https://github.com/clojure/tools.namespace +;; and Component https://github.com/stuartsierra/component + + +(defn fig-start + "This starts the figwheel server and watch based auto-compiler." + [] + ;; this call will only work are long as your :cljsbuild and + ;; :figwheel configurations are at the top level of your project.clj + ;; and are not spread across different lein profiles + + ;; otherwise you can pass a configuration into start-figwheel! manually + (f/start-figwheel!)) + +(defn fig-stop + "Stop the figwheel server and watch based auto-compiler." + [] + (f/stop-figwheel!)) + +;; if you are in an nREPL environment you will need to make sure you +;; have setup piggieback for this to work +(defn cljs-repl + "Launch a ClojureScript REPL that is connected to your build and host environment." + [] + (f/cljs-repl)) diff --git a/project.clj b/project.clj new file mode 100644 index 0000000..8fc5b3c --- /dev/null +++ b/project.clj @@ -0,0 +1,105 @@ +(defproject tic-tac-toe "0.1.0-SNAPSHOT" + :description "FIXME: write this!" + :url "http://example.com/FIXME" + :license {:name "Eclipse Public License" + :url "http://www.eclipse.org/legal/epl-v10.html"} + + :min-lein-version "2.7.1" + + :dependencies [[org.clojure/clojure "1.8.0"] + [org.clojure/clojurescript "1.9.854"] + [org.clojure/core.async "0.3.443" + :exclusions [org.clojure/tools.reader]] + [reagent "0.7.0"]] + + :plugins [[lein-figwheel "0.5.12"] + [lein-cljsbuild "1.1.7" :exclusions [[org.clojure/clojure]]]] + + :source-paths ["src"] + + :cljsbuild {:builds + [{:id "dev" + :source-paths ["src"] + + ;; The presence of a :figwheel configuration here + ;; will cause figwheel to inject the figwheel client + ;; into your build + :figwheel {:on-jsload "tic-tac-toe.core/on-js-reload" + ;; :open-urls will pop open your application + ;; in the default browser once Figwheel has + ;; started and compiled your application. + ;; Comment this out once it no longer serves you. + :open-urls ["http://localhost:3449/index.html"]} + + :compiler {:main tic-tac-toe.core + :asset-path "js/compiled/out" + :output-to "resources/public/js/compiled/tic_tac_toe.js" + :output-dir "resources/public/js/compiled/out" + :source-map-timestamp true + ;; To console.log CLJS data-structures make sure you enable devtools in Chrome + ;; https://github.com/binaryage/cljs-devtools + :preloads [devtools.preload]}} + ;; This next build is a compressed minified build for + ;; production. You can build this with: + ;; lein cljsbuild once min + {:id "min" + :source-paths ["src"] + :compiler {:output-to "resources/public/js/compiled/tic_tac_toe.js" + :main tic-tac-toe.core + :optimizations :advanced + :pretty-print false}}]} + + :figwheel {;; :http-server-root "public" ;; default and assumes "resources" + ;; :server-port 3449 ;; default + ;; :server-ip "127.0.0.1" + + :css-dirs ["resources/public/css"] ;; watch and update CSS + + ;; Start an nREPL server into the running figwheel process + ;; :nrepl-port 7888 + + ;; Server Ring Handler (optional) + ;; if you want to embed a ring handler into the figwheel http-kit + ;; server, this is for simple ring servers, if this + + ;; doesn't work for you just run your own server :) (see lein-ring) + + ;; :ring-handler hello_world.server/handler + + ;; To be able to open files in your editor from the heads up display + ;; you will need to put a script on your path. + ;; that script will have to take a file path and a line number + ;; ie. in ~/bin/myfile-opener + ;; #! /bin/sh + ;; emacsclient -n +$2 $1 + ;; + ;; :open-file-command "myfile-opener" + + ;; if you are using emacsclient you can just use + ;; :open-file-command "emacsclient" + + ;; if you want to disable the REPL + ;; :repl false + + ;; to configure a different figwheel logfile path + ;; :server-logfile "tmp/logs/figwheel-logfile.log" + + ;; to pipe all the output to the repl + ;; :server-logfile false + } + + + ;; Setting up nREPL for Figwheel and ClojureScript dev + ;; Please see: + ;; https://github.com/bhauman/lein-figwheel/wiki/Using-the-Figwheel-REPL-within-NRepl + :profiles {:dev {:dependencies [[binaryage/devtools "0.9.4"] + [figwheel-sidecar "0.5.12"] + [com.cemerick/piggieback "0.2.2"]] + ;; need to add dev source path here to get user.clj loaded + :source-paths ["src" "dev"] + ;; for CIDER + ;; :plugins [[cider/cider-nrepl "0.12.0"]] + :repl-options {:nrepl-middleware [cemerick.piggieback/wrap-cljs-repl]} + ;; need to add the compliled assets to the :clean-targets + :clean-targets ^{:protect false} ["resources/public/js/compiled" + :target-path]}}) diff --git a/resources/public/css/style.css b/resources/public/css/style.css new file mode 100644 index 0000000..1c2c78d --- /dev/null +++ b/resources/public/css/style.css @@ -0,0 +1,17 @@ +h1 { + font-family: "Arial", Arial, sans-serif; + text-align: center; +} + +#app { + text-align: center; +} + +#MyCircle { + fill: #2f2f2f; + transition:.5s; +} + +#MyCircle:hover { + fill: #8f8f8f; +} diff --git a/resources/public/index.html b/resources/public/index.html new file mode 100644 index 0000000..792d5f4 --- /dev/null +++ b/resources/public/index.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> + <head> + <title>Tic Tac Toe</title> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <link href="css/style.css" rel="stylesheet" type="text/css"> + <link rel="icon" href="https://clojurescript.org/images/cljs-logo-icon-32.png"> + </head> + <body> + <div id="app"> + <h2>Figwheel template</h2> + <p>Checkout your developer console.</p> + </div> + <script src="js/compiled/tic_tac_toe.js" type="text/javascript"></script> + </body> +</html> diff --git a/src/tic_tac_toe/core.cljs b/src/tic_tac_toe/core.cljs new file mode 100644 index 0000000..89d4ba8 --- /dev/null +++ b/src/tic_tac_toe/core.cljs @@ -0,0 +1,43 @@ +(ns tic-tac-toe.core + (:require [reagent.core :as reagent :refer [atom]] + [tic-tac-toe.logic :as logic])) + +(defonce app-state + (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)}]) + +(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}]]) + +(defn blank [i j] + [:rect {:id "blank" + :width 0.9 + :height 0.9 + :x (+ 0.05 i) + :y (+ 0.05 j)}]) + +(defn tictactoe [] + [:div + [:h1 "Welcome to Tic Tac Toe"] + (into + [:svg {:view-box "0 0 3 3" + :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] + 1 [cross i j] + 2 [naught i j])))]) + +(enable-console-print!) +(reagent/render-component [tictactoe] + (. js/document (getElementById "app"))) diff --git a/src/tic_tac_toe/logic.cljs b/src/tic_tac_toe/logic.cljs new file mode 100644 index 0000000..44e0da6 --- /dev/null +++ b/src/tic_tac_toe/logic.cljs @@ -0,0 +1,9 @@ +(ns tic-tac-toe.logic) + +;; Define global variables +(def board-size 3) + +;; Functions +(defn new-board + [size] + (vec (repeat size (vec (repeat size 0))))) |