From 0cca04e3500eccc7a9ed44c4896089df504e2eea Mon Sep 17 00:00:00 2001
From: LuckyLaszlo <luke.perrey.dev@gmail.com>
Date: Sun, 16 Oct 2022 17:14:59 +0200
Subject: [PATCH] a little more responsive (a little)

---
 pong.html | 30 +++++++++++++++++-------------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/pong.html b/pong.html
index 01620b8e..20518359 100644
--- a/pong.html
+++ b/pong.html
@@ -6,11 +6,15 @@
 <style>
 #canvas-container {
 	text-align: center;
+	border: dashed red 5px;
+	/* max-height: 80vh; */
+	/* overflow: hidden; */
 }
 canvas {
-	border:1px solid #d3d3d3;
 	background-color: #333333;
-	width: 80%;
+	max-width: 90vw;
+	/* max-height: 100vh; */
+	/* width: 80%; */
 }
 </style>
 
@@ -59,13 +63,13 @@ function startGame()
 	wall_bottom = new component(w, wall_size, "grey", 0, h-wall_size);
 
 // Grid
-	w_grid_mid = new component(w, 1, "darkgreen", 0, h_mid);
-	w_grid_u1 = new component(w, 1, "yellow", 0, h/4);
-	w_grid_d1 = new component(w, 1, "yellow", 0, h-h/4);
-
-	h_grid_mid = new component(1, h, "darkgreen", w_mid, 0);
-	h_grid_u1 = new component(1, h, "yellow", w/4, 0);
-	h_grid_d1 = new component(1, h, "yellow", w-w/4, 0);
+	const grid_size = w/500;
+	w_grid_mid = new component(w, grid_size, "darkgreen", 0, h_mid);
+	w_grid_u1 = new component(w, grid_size, "darkgreen", 0, h/4);
+	w_grid_d1 = new component(w, grid_size, "darkgreen", 0, h-h/4);
+	h_grid_mid = new component(grid_size, h, "darkgreen", w_mid, 0);
+	h_grid_u1 = new component(grid_size, h, "darkgreen", w/4, 0);
+	h_grid_d1 = new component(grid_size, h, "darkgreen", w-w/4, 0);
 
 	myGameArea.start();
 }
@@ -74,10 +78,10 @@ var myGameArea = {
 	keys: [],
 	canvas : document.createElement("canvas"),
 	createGameArea : function() {
-		this.canvas.width = 500;
-		this.canvas.height = 300;
-		// var heightRatio = 1;
-		// this.canvas.height = this.canvas.width * heightRatio;
+		/* ratio 5/3 (1.66) */
+		var ratio = 1.66666;
+		this.canvas.width = 1500;
+		this.canvas.height = this.canvas.width / ratio;
 		this.context = this.canvas.getContext("2d");
 		var container = document.getElementById("canvas-container");
 		container.insertBefore(this.canvas, container.childNodes[0]);