From 5d406bd512592411671b2fcabc101d774db93e14 Mon Sep 17 00:00:00 2001
From: h7x4 <h7x4abk3g@protonmail.com>
Date: Sat, 21 Nov 2020 04:58:13 +0100
Subject: [PATCH] Apply mobile scaling

---
 script.js |  5 ++++-
 style.css | 31 +++++++++++++++++++++++++++++++
 2 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/script.js b/script.js
index c490b31..492ce8c 100644
--- a/script.js
+++ b/script.js
@@ -210,7 +210,10 @@ toggleButtons
 
 const correctTouchOffset = (x, y) => {
 const canvasRect = canvas.getBoundingClientRect();
-return [x - canvasRect.left, y - canvasRect.top];
+return [
+  (x - canvasRect.left) * canvas.width / canvasRect.width,
+  (y - canvasRect.top) * canvas.width / canvasRect.width
+];
 }
 
 canvas.ontouchstart = event => {
diff --git a/style.css b/style.css
index 9131b4c..03fbee5 100644
--- a/style.css
+++ b/style.css
@@ -32,4 +32,35 @@ body {
   border-radius: 10px;
   color: white;
   background-color: #222222;
+}
+
+@media screen and (max-width: 600px) {
+  body {
+    margin: 0;
+  }
+
+  #canvas {
+    border: solid black 2px;
+    border-radius: 10px;
+    background-color: wheat;
+    margin: 1em 0;
+    width: 80%;
+  }
+
+  #toggleButtons {
+    margin-bottom: 1em;
+  }
+
+  #toggleButtons * {
+    font-size: 1em;
+  }
+
+  #response {
+    font-size: 1em;
+    margin-bottom: 0.5em;
+  }
+
+  #clear{
+    font-size: 0.7em;
+  }
 }
\ No newline at end of file