├── resources
└── public
│ ├── css
│ └── style.css
│ ├── test.html
│ └── index.html
├── dev.cljs.edn
├── .gitignore
├── test
└── game_scoreboard_ui
│ ├── core_test.cljs
│ └── test_runner.cljs
├── test.cljs.edn
├── project.clj
├── figwheel-main.edn
├── README.md
└── src
└── game_scoreboard_ui
└── core.cljs
/resources/public/css/style.css:
--------------------------------------------------------------------------------
1 | /* some style */
2 |
3 |
--------------------------------------------------------------------------------
/dev.cljs.edn:
--------------------------------------------------------------------------------
1 | ^{:watch-dirs ["test" "src"]
2 | :css-dirs ["resources/public/css"]
3 | :auto-testing true}
4 | {:main game-scoreboard-ui.core}
5 |
--------------------------------------------------------------------------------
/resources/public/test.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Test host page
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | pom.xml
2 | *jar
3 | /lib/
4 | /classes/
5 | /out/
6 | /target/
7 | .lein-deps-sum
8 | .lein-repl-history
9 | .lein-plugins/
10 | .repl
11 | .nrepl-port
12 | .cpcache/
13 | .rebel_readline_history
14 |
--------------------------------------------------------------------------------
/test/game_scoreboard_ui/core_test.cljs:
--------------------------------------------------------------------------------
1 | (ns game-scoreboard-ui.core-test
2 | (:require
3 | [cljs.test :refer-macros [deftest is testing]]
4 | [game-scoreboard-ui.core :refer [multiply]]))
5 |
6 | (deftest multiply-test
7 | (is (= (* 1 2) (multiply 1 2))))
8 |
9 | (deftest multiply-test-2
10 | (is (= (* 75 10) (multiply 10 75))))
11 |
--------------------------------------------------------------------------------
/test/game_scoreboard_ui/test_runner.cljs:
--------------------------------------------------------------------------------
1 | ;; This test runner is intended to be run from the command line
2 | (ns game-scoreboard-ui.test-runner
3 | (:require
4 | ;; require all the namespaces that you want to test
5 | [game-scoreboard-ui.core-test]
6 | [figwheel.main.testing :refer [run-tests-async]]))
7 |
8 | (defn -main [& args]
9 | (run-tests-async 5000))
10 |
--------------------------------------------------------------------------------
/test.cljs.edn:
--------------------------------------------------------------------------------
1 | ^{
2 | ;; use an alternative landing page for the tests so that we don't
3 | ;; launch the application
4 | :open-url "http://[[server-hostname]]:[[server-port]]/test.html"
5 |
6 | ;; uncomment to launch tests in a headless environment
7 | ;; you will have to figure out the path to chrome on your system
8 | ;; :launch-js ["/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" "--headless" "--disable-gpu" "--repl" :open-url]
9 | }
10 | {:main game-scoreboard-ui.test-runner}
11 |
--------------------------------------------------------------------------------
/resources/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/project.clj:
--------------------------------------------------------------------------------
1 | (defproject game-scoreboard-ui "0.1.0-SNAPSHOT"
2 | :description "Web UI to show the results of calling the Game Scoreboard API"
3 | :url "https://github.com/practicalli/game-scoreboard-ui"
4 | :license {:name "Creative Commons Attribution Share-Alike 4.0 International"
5 | :url "https://creativecommons.org"}
6 |
7 | :min-lein-version "2.7.1"
8 |
9 | :dependencies [[org.clojure/clojure "1.10.0"]
10 | [org.clojure/clojurescript "1.10.339"]
11 | [reagent "0.8.1"]
12 | [cljs-http "0.1.46"]]
13 |
14 | :source-paths ["src"]
15 |
16 | :aliases {"fig" ["trampoline" "run" "-m" "figwheel.main"]
17 | "fig:build" ["trampoline" "run" "-m" "figwheel.main" "-b" "dev" "-r"]
18 | "fig:min" ["run" "-m" "figwheel.main" "-O" "advanced" "-bo" "dev"]
19 | "fig:test" ["run" "-m" "figwheel.main" "-co" "test.cljs.edn" "-m" game-scoreboard-ui.test-runner]}
20 |
21 | :profiles {:dev {:dependencies [[com.bhauman/figwheel-main "0.1.9"]
22 | [com.bhauman/rebel-readline-cljs "0.1.4"]]
23 | }})
24 |
--------------------------------------------------------------------------------
/figwheel-main.edn:
--------------------------------------------------------------------------------
1 | ;; Figwheel-main configuration options see: https://figwheel.org/config-options
2 | ;; these will be overriden by the metadata config options in dev.cljs.edn build file
3 | {
4 | ;; Set the server port https://figwheel.org/config-options#ring-server-options
5 | ;; :ring-server-options {:port 9500}
6 |
7 | ;; Change the target directory from the "target" to "resources"
8 | ;; https://figwheel.org/config-options#target-dir
9 | :target-dir "resources"
10 |
11 | ;; Server Ring Handler (optional) https://figwheel.org/docs/ring-handler.html
12 | ;; If you want to embed a ring handler into the figwheel server, this
13 | ;; is for simple ring servers
14 | ;; :ring-handler hello_world.server/handler
15 |
16 | ;; To be able to open files in your editor from the heads up display
17 | ;; you will need to put a script on your path. This script will have
18 | ;; to take a file path and a line number ie.
19 | ;; in ~/bin/myfile-opener:
20 | ;;
21 | ;; #! /bin/sh
22 | ;; emacsclient -n +$2:$3 $1
23 | ;;
24 | ;; :open-file-command "myfile-opener"
25 |
26 | ;; if you are using emacsclient you can just use
27 | ;; :open-file-command "emacsclient"
28 |
29 | ;; Logging output gets printed to the REPL, if you want to redirect it to a file:
30 | ;; :log-file "figwheel-main.log"
31 | }
32 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # game-scoreboard-ui
2 |
3 | A Website in ClojureScript to consume data from the [Game Scoreboard API](https://github.com/practicalli/game-scoreboard) and visualise it.
4 |
5 | ## Overview
6 |
7 | A project to show the different options for calling and consuming data from API's, specifically the [Game Scoreboard API](https://github.com/practicalli/game-scoreboard).
8 |
9 | ## Development
10 |
11 | Open this project in your favourite Clojure editor/IDE and run the ClojureScript repl using `figwheel-main` and the `dev` profile
12 |
13 | ### Spacemacs
14 |
15 | `, "` or `M-RET "` in a buffer with a ClojureScript file will start a ClojureScript REPL.
16 |
17 | Choose `figwheel-main` when prompted to select the ClojureScript REPL type.
18 |
19 | Enter `dev` when prompted to select the figwheel-main build.
20 |
21 | Open the REPL buffer (use `SPC b b` to list the available buffers) and enter the following code to test the REPL connection is working well.
22 |
23 | (js/alert "Am I connected?")
24 |
25 | ### Command line
26 |
27 | To get an interactive development environment run:
28 |
29 | lein fig:build
30 |
31 | This will auto compile and send all changes to the browser without the
32 | need to reload. After the compilation process is complete, you will
33 | get a Browser Connected REPL. An easy way to try it is:
34 |
35 | (js/alert "Am I connected?")
36 |
37 | and you should see an alert in the browser window.
38 |
39 | To clean all compiled files:
40 |
41 | lein clean
42 |
43 | To create a production build run:
44 |
45 | lein clean
46 | lein fig:min
47 |
48 |
49 | ## License
50 |
51 | Copyright © 2018 Practicalli
52 |
53 | Distributed under the Creative Commons Attribution Share-Alike 4.0 International
54 |
--------------------------------------------------------------------------------
/src/game_scoreboard_ui/core.cljs:
--------------------------------------------------------------------------------
1 | ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
2 | ;; game-scoreboard-ui
3 | ;;
4 | ;; A figwheel-main project with reagent
5 | ;;
6 | ;; A Single Page App to show how to consume
7 | ;; the Game Scoreboard API.
8 | ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
9 |
10 | (ns ^:figwheel-hooks game-scoreboard-ui.core
11 | (:require
12 | [goog.dom :as gdom]
13 | [reagent.core :as reagent :refer [atom]]
14 | [cljs-http.client :as http]
15 | [cljs.core.async :refer [ tag (uncommented)
170 | ;;
171 | ;;
172 |
173 | ;; Then add styles to our existing Clojure code, specifically our `hello-world` component
174 |
175 | ;; Add a section (provides a nice margin), with a container, that displays our title and some paragraph text
176 |
177 | #_
178 | (defn hello-world []
179 | [:section {:class "section"}
180 | [:div {:class "container"}
181 | [:h1 {:class "title"}(:text @app-state)]
182 | [:h3 "A simple component that also displays the data model"]]])
183 |
184 |
185 | ;; Refactor to scoreboard
186 | ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
187 |
188 | ;; update the app-state to include basic info about the website
189 |
190 | #_
191 | (defonce app-state (atom {:website-title "Global Scoreboard"
192 | :website-subtitle "Player scores from around the world"}))
193 |
194 | ;; update the component function that represents the scoreboard single page app
195 |
196 | #_
197 | (defn scoreboard []
198 | [:section {:class "section"}
199 | [:div {:class "container"}
200 | [:h1 {:class "title"}(:website-title @app-state)]
201 | [:h3 (:website-subtitle @app-state)]]])
202 |
203 | ;; update the system code to use the new component
204 |
205 | #_
206 | (defn mount [el]
207 | (reagent/render-component [scoreboard] el))
208 |
209 |
210 | ;; scoreboard-source
211 | ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
212 |
213 | ;; local test data - to be replaced by api call
214 | #_
215 | (def scoreboard-source [{:player-name "RachelRiot"
216 | :score 5448983438944}
217 | {:player-name "JennyJetpack"
218 | :score 489743984372}])
219 |
--------------------------------------------------------------------------------