Use fullscreen for desktop and mobile

edloper · Dec 8, 2024 · 7ce0f0d · 7ce0f0d
1 parent 2ee7a94
commit 7ce0f0d
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 28 deletions.
diff --git a/game.html b/game.html
@@ -21,24 +21,40 @@
   <script src="javascript/colorpicker.js"></script>
   <script src="javascript/level_urls.js"></script>
   <script>
-    const MIN_WIDTH = 500;
-    const MAX_WIDTH = Math.min(1000, window.innerHeight - 250);
     var game;
 
     $(function() {
+	var dw = 50;
+	var dh = 185;
 	var levelPickerContainer = document.getElementById('levelPicker');
 	var gameContainer = document.getElementById('game');
 
-	// Adjust size.  Keep hight=width to preserve the aspect ratio of the game.
-	var naturalWidth = levelPickerContainer.offsetWidth - 50;
-	console.log("natural width", naturalWidth);
-	var width = Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, naturalWidth));
-	var height = width;
-
+	var width = window.innerWidth - dw;
+	var height = window.innerHeight - dh;
 	game = new Game(gameContainer, width, height);
 	const levelPicker = new LevelPicker(levelPickerContainer, game, LEVEL_URLS);
+
+	window.addEventListener('resize', () => {
+	    game.resize(window.innerWidth - dw, window.innerHeight - dh);
+	});
     });
   </script>
+  <style>
+    body {
+	overflow: hidden;
+	touch-action: none;
+    }
+    div.levelTitle {
+	position: absolute;
+	pointer-events: none;
+	top: 80px;
+	left: 50%;
+	width: 80%;
+	transform: translate(-50%, 0);
+	z-index: 100;
+	text-shadow: 0px 0px 2px white;
+    }
+  </style>
 
   <!-- Uncomment this to debug touch input:  
   <script src="https://cdn.jsdelivr.net/gh/hammerjs/touchemulator@master/touch-emulator.js"></script>

diff --git a/game_fullscreen.html b/game_fullscreen.html
@@ -36,15 +36,17 @@
 	var levelPickerContainer = document.getElementById('levelPicker');
 	var gameContainer = document.getElementById('game');
 
-	// TODO: aspect ratio??
 	var width = window.innerWidth;
 	var height = window.innerHeight;
-
 	game = new Game(gameContainer, width, height);
 	const levelPicker = new LevelPicker(levelPickerContainer, game, LEVEL_URLS);
 
 	drawSplashscreen();
     });
+
+    window.addEventListener('resize', () => {
+	game.resize(window.innerWidth, window.innerHeight);
+    });
   </script>
 
   <!-- Uncomment this to debug touch input:  
@@ -84,6 +86,16 @@
     div.controls #gameEasyMode {
 	pointer-events: auto;
     }
+    div.levelTitle {
+	position: absolute;
+	pointer-events: none;
+	top: 25px;
+	left: 50%;
+	width: 80%;
+	transform: translate(-50%, 0);
+	z-index: 100;
+	text-shadow: 0px 0px 2px white;
+    }
   </style>
 </head>
 <body class="fullscreen" style>

diff --git a/index.html b/index.html
@@ -15,12 +15,7 @@
     <tr>
       <td>
 	<a href="game_fullscreen.html">
-	  <img src="images/titles/missing_link_white.jpg">
-	</a>
-      </td>
-      <td>
-	<a href="game.html">
-	  <img src="images/titles/missing_link_black.jpg"><br>
+	  <img src="images/titles/missing_link_black.jpg">
 	</a>
       </td>
       <td>
@@ -32,12 +27,7 @@
     <tr>
       <td>
 	<a href="game_fullscreen.html">
-	  Play<br>(mobile)
-	</a>
-      </td>
-      <td>
-	<a href="game.html">
-	  Play<br>(desktop)
+	  Play
 	</a>
       </td>
       <td>

diff --git a/javascript/editor.js b/javascript/editor.js
@@ -362,8 +362,8 @@ class LevelEditor {
 
     addDot(x, y) {
 	const dot = this.graph.addDot(x, y);
-	dot.circle.on('mousedown', (e) => { this.mouseHandler.mouseDown(e, dot); });
-	dot.text.on('mousedown', (e) => { this.mouseHandler.mouseDown(e, dot); });
+	dot.on('mousedown', (e) => { this.mouseHandler.mouseDown(e, dot); });
+	dot.on('touchstart', (e) => { this.mouseHandler.mouseDown(e, dot); });
 	this.history.push(new EditorHistoryEvent('addDot', {x: x, y: y}));
 	return dot;
     }
@@ -380,6 +380,7 @@ class LevelEditor {
     addTri(corners, color) {
 	const tri = this.graph.addTri(corners, color, /*highlight=*/ false);
 	tri.polygon.on('mousedown', (e) => { this.mouseHandler.mouseDown(e, tri); });
+	tri.polygon.on('touchstart', (e) => { this.mouseHandler.mouseDown(e, tri); });
 	this.updateTriColor(tri);
 	this.history.push(new EditorHistoryEvent('addTri', {
 	    corners: corners.map(c => ({x: c.x, y: c.y})), color: color}));

diff --git a/javascript/game.js b/javascript/game.js
@@ -47,8 +47,8 @@ class Game {
 	this.$container = $(container)
 	this.$container.append($("<div class='levelTitle'></div>"));
 	this.$title = this.$container.find(".levelTitle");
-	this.width = width
-	this.height = height
+	this.width = width  // used by mouse_controller.
+	this.height = height  // used by mouse_controller.
 	this.draw = SVG().addTo(container).size(width, height);
 	$(container).addClass('missingLinkGame');
 	this.setBackgroundColor({h: 0, s: 0, l: 80});
@@ -179,7 +179,13 @@ class Game {
 		}
 	    }
 	});
-	window.history.pushState({}, ''); 
+	window.history.pushState({}, ''); 	
+    }
+
+    resize(width, height) {
+	console.log("Resize", width, height);
+	this.$container.find(".controls").css({width: width});
+	this.draw.size(width, height);
     }
 
     loadFromPng(dataUrl) {

diff --git a/style.css b/style.css
@@ -173,7 +173,7 @@ h1 {
     width: 12px;
 }
 .missingLinkTitle {
-    height: 80px;
+    width: 600px;
     margin-bottom: 15px;
 }
 #game .youWon {