From 6f99174c5b9cf2153d1e297b4dc49ce31d7478e9 Mon Sep 17 00:00:00 2001 From: Dominika Date: Thu, 13 Jan 2022 15:46:24 +0100 Subject: [PATCH] + Better mobile support --- templates/index.t | 20 ++++++++++++++++++-- webroot/game.js | 9 ++++++--- 2 files changed, 24 insertions(+), 5 deletions(-) diff --git a/templates/index.t b/templates/index.t index fc88e44..88f09f1 100644 --- a/templates/index.t +++ b/templates/index.t @@ -18,7 +18,7 @@ .load { height: 100%; width: 100%; - z-index: 9999; + z-index: 10000; display: none; position: fixed; background-color: #333; @@ -64,8 +64,9 @@ right: 10px; top: 10px; width: 256px; - height: 128px; + height: 64px; background-color: #444; + z-index: 9999; } .ipa, .whois, .traceroute { word-wrap : break-word; @@ -78,6 +79,21 @@ a, a:visited, a:hover { color: #3c3; } + @media (max-width: 768px) { + #map, .container, .result-container, .data, .traceroute, .ipa { + width: 100%; + } + #map { + margin-top: 64px; + } + .scoring { + width: 100%; + left: 0; + top: 0; + right: unset; + background-color: #333; + } + } diff --git a/webroot/game.js b/webroot/game.js index 0acbd89..1f9a524 100644 --- a/webroot/game.js +++ b/webroot/game.js @@ -14,6 +14,10 @@ L.tileLayer('https://tile.thunderforest.com/landscape/{z}/{x}/{y}.png?apikey=60d noWrap: true }).addTo(map); +document.querySelector(".scoring").innerText = `This round: make a guess ;) +Score total: ${score} +Round: ${round}` + async function main() { function getDistance(from, to) { @@ -40,12 +44,11 @@ async function main() { const points = Math.floor((1.2**(-distance/100))*5000) // best I could do XD score += points; - round++; - - + document.querySelector(".scoring").innerText = `This round: ${points} Score total: ${score} Round: ${round}` + round++; marker.setOpacity(1); document.querySelector(".result").innerText = `You were ${distance} km away from your target! This has earned you ${points} points.`