incdec/index.html

80 lines
1.7 KiB
HTML
Raw Permalink Normal View History

2021-04-29 20:04:28 +00:00
<title>IncDec</title>
<meta name="description" content="IncDec - the thrilling game of incrementing and decrementing.">
<meta charset="utf-8">
2021-04-12 19:18:07 +00:00
<meta name="viewport" content="user-scalable=0">
<noscript>JavaScript is required for this.</noscript>
<style>
body {
margin: 0;
}
#container {
width: 100%;
min-height: 100vh;
font-family: sans-serif;
display: flex;
justify-content: space-between;
align-items: center;
}
#container button {
width: 3em;
height: 3em;
font-size: 2em;
margin: 1em;
background-color: black;
color: white;
border: none;
z-index: 1;
}
#container #value {
font-size: 4em;
}
@media(orientation: portrait) {
#container { flex-direction: column; }
#container button { width: calc(100% - 2em); }
}
</style>
<div id="container">
<button id="down" onclick="decrement()">-</button>
2021-04-29 20:04:28 +00:00
<div id="value">Loading...</div>
<button id="up" onclick="increment()">+</button>
2021-04-12 19:18:07 +00:00
</div>
<script>
var output = document.querySelector("#value")
window.onerror = function(err) {
output.innerText = err
output.style.color = "red"
}
var url = (window.location.href + "api").replace("http", "ws")
console.log("connecting", url)
var socket = new WebSocket(url)
function display(text) {
output.innerText = text
}
2021-04-29 20:04:28 +00:00
function send(s) {
socket.send(s)
2021-04-12 19:18:07 +00:00
}
socket.onmessage = function(ev) {
2021-04-29 20:04:28 +00:00
display(ev.data)
2021-04-12 19:18:07 +00:00
}
function increment() {
2021-04-29 20:04:28 +00:00
send("inc")
2021-04-12 19:18:07 +00:00
}
function decrement() {
2021-04-29 20:04:28 +00:00
send("dec")
}
socket.onclose = function(ev) {
display("Disconnected!")
2021-04-12 19:18:07 +00:00
}
</script>