Quelques mises a jour amusantes

public/javascripts/game.js

@@ -1,6 +1,13 @@
 const canvas = document.getElementById('gameCanvas');
 const ctx = canvas.getContext('2d');
 
+// Set canvas size to match the container
+canvas.width = 540;
+canvas.height = 675;
+
+// Make sure the canvas is visible
+canvas.style.display = 'block';
+
 // Load background image once, outside of any function
 const backgroundImage = new Image();
 backgroundImage.src = '/assets/images/background.png';
@@ -44,16 +51,12 @@ function drawBall() {
 
 function movePaddle(e) {
     if (!isPaused) {
-        let relativeX;
-        if (e.type.startsWith('mouse')) {
-            relativeX = e.clientX - canvas.offsetLeft;
-        } else if (e.type.startsWith('touch')) {
-            relativeX = e.touches[0].clientX - canvas.offsetLeft;
-            e.preventDefault(); // Prevent scrolling when touching the canvas
-        }
-        if (relativeX > 0 && relativeX < canvas.width) {
-            paddle.x = relativeX - paddle.width / 2;
-        }
+        let rect = canvas.getBoundingClientRect();
+        let root = document.documentElement;
+        let mouseX = e.clientX - rect.left - root.scrollLeft;
+
+        // Ensure the paddle stays within the canvas
+        paddle.x = Math.max(0, Math.min(canvas.width - paddle.width, mouseX - paddle.width / 2));
     }
 }
 
@@ -158,8 +161,6 @@ function update() {
     requestAnimationFrame(update);
 }
 
-document.addEventListener('mousemove', movePaddle, false);
-
 document.addEventListener('keydown', function(e) {
     if (e.key === 'p' || e.key === 'P') {
         togglePause();
@@ -172,13 +173,43 @@ pauseButton.textContent = 'Pause';
 pauseButton.style.position = 'absolute';
 pauseButton.style.top = '10px';
 pauseButton.style.left = '10px';
-document.body.appendChild(pauseButton);
-
+pauseButton.style.zIndex = '20';
+document.getElementById('gameContainer').appendChild(pauseButton);
 pauseButton.addEventListener('click', togglePause);
 
-fetch('/bricks')
+// Load bricks from JSON file
+
+function updateThemeHeader(theme) {
+    const themeHeader = document.getElementById('themeHeader');
+    if (themeHeader) {
+        themeHeader.textContent = `Theme: ${theme}`;
+        themeHeader.style.position = 'absolute';
+        themeHeader.style.top = '10px';
+        themeHeader.style.left = '0';
+        themeHeader.style.right = '0';
+        themeHeader.style.zIndex = '10';
+    }
+}
+
+const brickFiles = [
+    'bricks-productivite.json',
+    'bricks-developpement.json',
+    'bricks-medias-sociaux.json',
+    'bricks-marketing.json',
+    'bricks-coaching.json',
+    'bricks-ai-techbro.json'
+];
+const randomFile = brickFiles[Math.floor(Math.random() * brickFiles.length)];
+
+// Extract theme from filename
+const theme = randomFile.split('-')[1].split('.')[0];
+
+fetch(`/bricks?file=${randomFile}`)
     .then(response => response.json())
     .then(data => {
         bricks = data;
+        updateThemeHeader(theme);
         update();
-    });
+    });
+
+document.addEventListener('mousemove', movePaddle, true);

public/stylesheets/main.css

@@ -3,3 +3,41 @@
     padding: 20px;
     font-family: Arial, sans-serif;
 }
+
+body {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background: #f2f2f2;
+}
+
+#gameContainer {
+    width: 540px;
+    margin: 0 auto;
+    text-align: center;
+    padding-top: 20px; /* Add some padding at the top */
+}
+
+#themeHeader {
+    margin: 0 0 10px 0; /* Add margin at the bottom */
+    padding: 10px 0;
+    background-color: #f0f0f0;
+    border-bottom: 1px solid #ccc;
+    font-family: Arial, sans-serif;
+    font-size: 18px;
+    color: #333;
+}
+
+#canvasContainer {
+    position: relative;
+    width: 540px;
+    height: 675px;
+}
+
+#gameCanvas {
+    display: block;
+    margin: 0 auto;
+}