Port all 40k_counter code.

2023-10-29 13:02:34 -04:00 · 2023-10-29 13:02:34 -04:00 · 899ab4a116
parent 79f233d83b
commit 899ab4a116
6 changed files with 84 additions and 2 deletions
--- 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

--- a/public/css/main.css
+++ 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;
+}
--- a/public/img/criss-cross.png
+++ b/public/img/criss-cross.png
--- a/public/index.ecr
+++ b/public/index.ecr
@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>40k Counter</title>
+    <link href="/css/main.css" rel="stylesheet">
+    <script src="js/counter.js"></script>
+  </head>
+  <body>
+<% %w[turn cp vp md].each do |counter| %>
+    <div class="container">
+      <div class="center" id="<%= counter %>">
+        <h3><%= counter.upcase %></h3>
+        <button class="button" id="minus" onClick="modifyCounter(this.id, '<%= counter %>')">-</button>
+        <p><a id="<%= counter %>_amount">0</a></p>
+        <button class="button" id="plus" onClick="modifyCounter(this.id, '<%= counter %>')">+</button>
+      </div>
+    </div>
+<% end %>
+  </body>
+</html>
--- a/public/js/counter.js
+++ 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;
+  }
+};
--- 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