Port all 40k_counter code.
This commit is contained in:
parent
79f233d83b
commit
899ab4a116
6 changed files with 84 additions and 2 deletions
|
@ -1,6 +1,6 @@
|
||||||
# kemal-test
|
# 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
|
## Installation
|
||||||
|
|
||||||
|
|
52
public/css/main.css
Normal file
52
public/css/main.css
Normal file
|
@ -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;
|
||||||
|
}
|
BIN
public/img/criss-cross.png
Normal file
BIN
public/img/criss-cross.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.2 KiB |
21
public/index.ecr
Normal file
21
public/index.ecr
Normal file
|
@ -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>
|
9
public/js/counter.js
Normal file
9
public/js/counter.js
Normal file
|
@ -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;
|
||||||
|
}
|
||||||
|
};
|
|
@ -1,7 +1,7 @@
|
||||||
require "kemal"
|
require "kemal"
|
||||||
|
|
||||||
get "/" do
|
get "/" do
|
||||||
"Hello World!"
|
render "public/index.ecr"
|
||||||
end
|
end
|
||||||
|
|
||||||
Kemal.run
|
Kemal.run
|
||||||
|
|
Loading…
Reference in a new issue