From 899ab4a116479d0e2a109849bc18fbc8ebe56736 Mon Sep 17 00:00:00 2001 From: Matt Velez Date: Sun, 29 Oct 2023 13:02:34 -0400 Subject: [PATCH] Port all 40k_counter code. --- README.md | 2 +- public/css/main.css | 52 +++++++++++++++++++++++++++++++++++++ public/img/criss-cross.png | Bin 0 -> 1226 bytes public/index.ecr | 21 +++++++++++++++ public/js/counter.js | 9 +++++++ src/main.cr | 2 +- 6 files changed, 84 insertions(+), 2 deletions(-) create mode 100644 public/css/main.css create mode 100644 public/img/criss-cross.png create mode 100644 public/index.ecr create mode 100644 public/js/counter.js diff --git a/README.md b/README.md index 3b44c7f..f124365 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # kemal-test -TODO: Write a description here +A port of my [40k counter](https://github.com/Timecrash/40k_counter) from Ruby/Sinatra to Crystal/Kemal. ## Installation diff --git a/public/css/main.css b/public/css/main.css new file mode 100644 index 0000000..73967af --- /dev/null +++ b/public/css/main.css @@ -0,0 +1,52 @@ +body { + background-image: url('/img/criss-cross.png'); +} + +.container { + height: 200px; + position: relative; +} + +.center { + margin: 0; + position: absolute; + top: 50%; + left: 50%; + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); +} + +.button { + display: inline-block; + padding: 0.3em 1.2em; + margin: 0 0.1em 0.1em 0; + border: 0.16em solid rgba(255, 255, 255, 0); + border-radius: 2em; + box-sizing: border-box; + text-decoration: none; + font-size: 18px; + font-weight: 300; + color: #4f4f4f; + text-shadow: 0 0.04em 0.04em rgba(0, 0, 0, 0.35); + text-align: center; + transition: all 0.2s; +} + +.button:hover { + border-color: rgba(255, 255, 255, 1); +} + +@media all and (max-width: 30em) { + a.button { + display: block; + margin: 0.2em auto; + } +} + +#minus { + background-color: #f14e4e; +} + +#plus { + background-color: #84f14e; +} diff --git a/public/img/criss-cross.png b/public/img/criss-cross.png new file mode 100644 index 0000000000000000000000000000000000000000..ff529f968a2cbf2634b739eb6a9775647e51a6a0 GIT binary patch literal 1226 zcmeAS@N?(olHy`uVBq!ia0y~yV4MKL96$kvrB^Zq7#LV4db&77<$I8U<+du1dYkbqfS;Du4*f|uQ#J`;Nvu66fS*^v7nHXDi+iwen zV5#}_?#JUr8$2H{F{+fGeysTUYvtyLOyV30DyI|Q1a~+40@)Sy{69nWb3hsnR4-Y- z{4?|Z*`Y;@;v5TfR<8fXo|N}mR~RT4q7b|D#44rzt9%L?8E!3IE%q>W!mX;i)F|wHbySz^J76S*XfxzARII#mxAD*gz|8nxw zzW2+w@;CYa-SQzw{rcuVLM?}5rX>gj_%S?nuwZ(J zPQj$0e27}G6ha&G(-u8sW8i8bmLaUzS;PP_7FjO~rWNaCh;*LA&P)swF+7pYj%foh zELiloQ61f4gvy8d65SJ)3wen0gr9~pG_(-`02IJ*9?@Y;W#=(GZNqR4QWAkUn%J1o z#u3J#G=v=4r!cGpD?krpY9|z8op%en^B%G(87`WlF>PTDsF3n>^>bP0l+XkKv_zfT literal 0 HcmV?d00001 diff --git a/public/index.ecr b/public/index.ecr new file mode 100644 index 0000000..cac8d3a --- /dev/null +++ b/public/index.ecr @@ -0,0 +1,21 @@ + + + + + 40k Counter + + + + +<% %w[turn cp vp md].each do |counter| %> +
+
+

<%= counter.upcase %>

+ +

0

+ +
+
+<% end %> + + diff --git a/public/js/counter.js b/public/js/counter.js new file mode 100644 index 0000000..163d8ea --- /dev/null +++ b/public/js/counter.js @@ -0,0 +1,9 @@ +function modifyCounter(operation, id) { + var amount = parseInt(document.getElementById(id + "_amount").innerText, 10); + + if (operation === "plus") { + document.getElementById(id + "_amount").innerText = amount + 1; + } else if (operation === "minus") { + document.getElementById(id + "_amount").innerText = amount - 1; + } +}; diff --git a/src/main.cr b/src/main.cr index 5559ebe..85de0fa 100644 --- a/src/main.cr +++ b/src/main.cr @@ -1,7 +1,7 @@ require "kemal" get "/" do - "Hello World!" + render "public/index.ecr" end Kemal.run