From 72f1a72b7c8fb929be5bcc062522e8f4338dc603 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Pelletier?= <francois@jevalide.ca>
Date: Sat, 7 Sep 2024 18:19:15 -0400
Subject: [PATCH] Petits ajustements

---
 app/views/index.scala.html |  3 ++-
 embed/embed.html           | 30 ++++++++++++++++++++++++++++++
 public/javascripts/game.js | 18 ++++++++++++++----
 3 files changed, 46 insertions(+), 5 deletions(-)
 create mode 100644 embed/embed.html

diff --git a/app/views/index.scala.html b/app/views/index.scala.html
index afd0746..5bd66d6 100644
--- a/app/views/index.scala.html
+++ b/app/views/index.scala.html
@@ -1,5 +1,6 @@
 @()
 
 @main("Welcome to Play") {
-    <h1>Welcome to Play</h1>
+    <h1>Déconstruit - Le jeu !</h1>
+    <p><a href="/game">Jouer</a></p>
 }
diff --git a/embed/embed.html b/embed/embed.html
new file mode 100644
index 0000000..daa0d5c
--- /dev/null
+++ b/embed/embed.html
@@ -0,0 +1,30 @@
+<style>
+    .responsive-iframe-container {
+        position: relative;
+        overflow: hidden;
+        width: 100%;
+        padding-top: 125%; /* Aspect ratio: 540:675 (height/width = 1.25) */
+    }
+    .responsive-iframe-container iframe {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border: 0;
+    }
+</style>
+
+<div class="responsive-iframe-container">
+    <iframe src="https://deconstruit-breakout.coolify.jevalide.ca/game" style="overflow: hidden;"></iframe>
+</div>
+
+<script>
+    window.addEventListener('message', function(e) {
+        if (e.data.type === 'setHeight') {
+            var container = document.querySelector('.responsive-iframe-container');
+            var aspectRatio = e.data.height / e.data.width;
+            container.style.paddingTop = (aspectRatio * 100) + '%';
+        }
+    }, false);
+</script>
\ No newline at end of file
diff --git a/public/javascripts/game.js b/public/javascripts/game.js
index ef0c49c..0cff5ce 100644
--- a/public/javascripts/game.js
+++ b/public/javascripts/game.js
@@ -17,13 +17,18 @@ let paddle = { x: 175, y: 510, width: 75, height: 15 };
 let ball = { x: 200, y: 370, dx: 4, dy: -4, radius: 8 };
 const floorY = 525; // Define the floor position
 
-let isPaused = false;
+let isPaused = true;
 
 function togglePause() {
     isPaused = !isPaused;
     if (!isPaused) {
         requestAnimationFrame(update);
     }
+    updatePauseButton(); // We'll add this function
+}
+
+function updatePauseButton() {
+    pauseButton.textContent = isPaused ? 'Démarrer' : 'Pause';
 }
 
 function drawBricks() {
@@ -79,7 +84,11 @@ function drawPauseScreen() {
     ctx.fillRect(0, 0, canvas.width, canvas.height);
     ctx.fillStyle = 'white';
     ctx.font = '30px Arial';
-    ctx.fillText('PAUSED', canvas.width / 2 - 50, canvas.height / 2);
+    if (bricks.length === 0) {
+        ctx.fillText('PAUSE', canvas.width / 2 - 50, canvas.height / 2);
+    } else {
+        ctx.fillText("Clique 'Démarrer' pour jouer", canvas.width / 2 - 175, canvas.height / 2);
+    }
 }
 
 function update() {
@@ -169,7 +178,7 @@ document.addEventListener('keydown', function(e) {
 
 // Create pause button
 const pauseButton = document.createElement('button');
-pauseButton.textContent = 'Pause';
+pauseButton.textContent = 'Démarrer'; // Changed from 'Pause' to 'Démarrer'
 pauseButton.style.position = 'absolute';
 pauseButton.style.top = '10px';
 pauseButton.style.left = '10px';
@@ -209,7 +218,8 @@ fetch(`/bricks?file=${randomFile}`)
     .then(data => {
         bricks = data;
         updateThemeHeader(theme);
-        update();
+        drawPauseScreen(); // Draw the pause screen instead of starting the game
+        updatePauseButton();
     });
 
 document.addEventListener('mousemove', movePaddle, true);
\ No newline at end of file