From 399bd8812c9fe0fcece2103bc28eb3c1e648e40f Mon Sep 17 00:00:00 2001
From: UnknownShadow200 <unknownshadow200@gmail.com>
Date: Sat, 22 Aug 2020 23:44:03 +1000
Subject: [PATCH] Fix tex ids overlay title with high DPI, update
 hosting-flask.md

---
 doc/hosting-flask.md     | 15 ++++++---------
 doc/hosting-webclient.md |  5 +++--
 src/Menus.c              |  3 ++-
 3 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/doc/hosting-flask.md b/doc/hosting-flask.md
index 38c48afc1..9201f1422 100644
--- a/doc/hosting-flask.md
+++ b/doc/hosting-flask.md
@@ -62,13 +62,10 @@ if __name__ == "__main__":
     </div>
 {% endif %}
 <div id="body">
-<style>
-/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
-#GameCanvas { display:block; box-sizing:border-box; border-width:0px !important; padding:0 !important; margin:0 auto; background-color: black; width:100%; height:auto; }
-</style>
 <div class="sec">
   <div class="row">
-    <canvas id="GameCanvas" oncontextmenu="event.preventDefault()" tabindex=-1 width="1000" height="562"></canvas>
+    <canvas id="canvas" style="display:block; box-sizing:border-box; border-width:0px; padding:0; margin:0 auto; background-color: black; width:100%; height:auto;"
+            oncontextmenu="event.preventDefault()" tabindex=-1 width="1000" height="562"></canvas>
     <span id="logmsg" style="font-size:18px;color:#F67;"></span>
   </div>
 </div>
@@ -85,7 +82,7 @@ if __name__ == "__main__":
   }
 
   function resizeGameCanvas() {
-    var cc_canv = $('canvas#GameCanvas');
+    var cc_canv = $('canvas#canvas');
     var dpi = window.devicePixelRatio;
     var aspect_ratio = 16/9;
 
@@ -118,7 +115,7 @@ if __name__ == "__main__":
       if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
       console.error(text);
     },
-    canvas: (function() { return document.getElementById('GameCanvas'); })(),
+    canvas: (function() { return document.getElementById('canvas'); })(),
     setStatus: function(text) {
                     console.log(text);
                     document.getElementById('logmsg').innerHTML = text;
@@ -130,9 +127,9 @@ if __name__ == "__main__":
     }
   };
   Module.setStatus('Downloading...');
-  window.onerror = function(event) {
+  window.onerror = function(msg) {
     // TODO: do not warn on ok events like simulating an infinite loop or exitStatus
-    Module.setStatus('Exception thrown, see JavaScript console');
+    Module.setStatus('Exception thrown, see JavaScript console (' + msg + ')');
     Module.setStatus = function(text) {
       if (text) Module.printErr('[post-exception status] ' + text);
     };
diff --git a/doc/hosting-webclient.md b/doc/hosting-webclient.md
index 2b43bf98f..f78ef9261 100644
--- a/doc/hosting-webclient.md
+++ b/doc/hosting-webclient.md
@@ -21,7 +21,8 @@ The play.html page is the trickiest part, because how to implement this is websi
 You are required to have this HTML code somewhere in the page:
 ```HTML
 <!-- the canvas *must not* have any border or padding, or mouse coords will be wrong -->
-<canvas id="canvas" style="display:block; border:0; padding:0; background-color: black;" oncontextmenu="event.preventDefault()" tabindex=-1></canvas>
+<canvas id="canvas" style="display:block; border:0; padding:0; background-color: black;" 
+		oncontextmenu="event.preventDefault()" tabindex=-1></canvas>
 <span id="logmsg"></span>
 
 <script type='text/javascript'>
@@ -70,7 +71,7 @@ You are required to have this HTML code somewhere in the page:
 </script>
 <script async type="text/javascript" src="/static/classisphere.js"></script>
 ```
-**To start in singleplayer instead, change `arguments` to just `arguments: [ {username} ],`**
+**To start in singleplayer instead, just use `arguments: [ {username} ],` instead**
 
 ##### Variables
 * {username} - the player's username
diff --git a/src/Menus.c b/src/Menus.c
index 3919b666f..321b08dd0 100644
--- a/src/Menus.c
+++ b/src/Menus.c
@@ -3103,8 +3103,9 @@ static void TexIdsOverlay_Layout(void* screen) {
 	s->yOffset  = Gui_CalcPos(ANCHOR_CENTRE, 0, size * ATLAS2D_TILES_PER_ROW, WindowInfo.Height);
 	s->tileSize = size;
 
+	/* Can't use vertical centreing here */
 	Widget_SetLocation(&s->title, ANCHOR_CENTRE, ANCHOR_MIN, 0, 0);
-	s->title.yOffset = s->yOffset - 30; /* TODO: This is ugly */
+	s->title.yOffset = s->yOffset - Display_ScaleY(30);
 	Widget_Layout(&s->title);
 }