From e95e424a1e996300bd00f63f3a2643fb1316ce0a Mon Sep 17 00:00:00 2001
From: Alfie King <acetheking987@gmail.com>
Date: Fri, 20 Jun 2025 11:14:03 +0100
Subject: [PATCH] mobile fix

---
 src/main.py        |  2 +-
 static/css/404.css | 44 +++++++++++++++++++++++++++++++++++++++++++-
 templates/404.html | 23 +++++++++++++++++++++--
 3 files changed, 65 insertions(+), 4 deletions(-)

diff --git a/src/main.py b/src/main.py
index 5c298b2..f380d5d 100644
--- a/src/main.py
+++ b/src/main.py
@@ -106,5 +106,5 @@ if __name__ == '__main__':
     app.run(
         host=env('HOST', default='0.0.0.0'), 
         port=env('PORT', default=5000),
-        debug=env('DEBUG', default=False).lower() == 'true'
+        debug=env('DEBUG', default="false").lower() == 'true'
     )
\ No newline at end of file
diff --git a/static/css/404.css b/static/css/404.css
index ff24cf5..0816d0a 100644
--- a/static/css/404.css
+++ b/static/css/404.css
@@ -1,8 +1,12 @@
+#snakeContainer {
+    padding: 15px;
+}
+
 canvas#snakeCanvas {
-    margin: 15px;
     box-sizing: border-box;
     border: 2px solid var(--secondary-background-color);
     border-radius: 10px;
+    width: 100%;
 }
 
 form {
@@ -110,4 +114,42 @@ dialog h2 {
 dialog p {
     margin: 0;
     font-size: 1rem;
+}
+
+@media screen and (max-width: 850px) {
+    .flex-row {
+        flex-direction: column;
+    }
+
+    form {
+        align-items: center;
+        width: 100%;
+    }
+
+    .min-width {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+}
+
+@media screen and (max-width: 650px) {
+    .mobileOnly {
+        display: flex;
+    }
+    
+    .pcOnly {
+        display: none;
+    }
+}
+
+@media screen and (min-width: 651px) {
+    .mobileOnly {
+        display: none !important;
+    }
+    
+    .pcOnly {
+        display: flex;
+    }
 }
\ No newline at end of file
diff --git a/templates/404.html b/templates/404.html
index 6ac41f9..d4893ff 100644
--- a/templates/404.html
+++ b/templates/404.html
@@ -14,11 +14,18 @@
     <p>
         It seems like the thing you are looking for is not here :[
         <br><br>
+        <span class="pcOnly">
         while you're here, why not play some snake?
+        </span>
+        <span class="mobileOnly">
+        You can't play snake on mobile, sorry :(
+        </span>
     </p>
-    <canvas id="snakeCanvas"></canvas>
+    <div class="pcOnly" id="snakeContainer">
+        <canvas id="snakeCanvas"></canvas>
+    </div>
 </section>
-<section class="flex-row">
+<section class="pcOnly flex-row">
     <section class="min-width">
         <h2>Submit score</h2>
         <form action="/404/submit" method="POST" id="snakeForm">
@@ -41,6 +48,18 @@
         </ul>
     </section>
 </section>
+<section class="max-width mobileOnly" id="snakeLeaderboardSection">
+    <h2>Leaderboard</h2>
+    <ul id="snakeLeaderboard">
+        {% for score in scores %}
+        <li>
+            <span>{{ score.position }}</span>
+            <span>{{ score.name }}</span>
+            <span>{{ score.score }}</span>
+        </li>
+        {% endfor %}
+    </ul>
+</section>
 {% if error %}
 <dialog id="errorDialog">
     <h2>Error</h2>