From 7f001fb168d90d4a08d9d07f067fa0178da2f194 Mon Sep 17 00:00:00 2001
From: Renan LE CARO <renan.lecaro@gmail.com>
Date: Mon, 3 Mar 2025 20:51:08 +0100
Subject: [PATCH] Automatic deploy 29017191

---
 Readme.md                      |  2 ++
 app/build.gradle.kts           |  4 ++--
 app/src/main/assets/game.js    | 34 ++++++++++++++++++++++++++++------
 app/src/main/assets/index.html |  8 ++++----
 app/src/main/assets/style.css  |  8 +++++---
 5 files changed, 41 insertions(+), 15 deletions(-)

diff --git a/Readme.md b/Readme.md
index ec6effc..7ab5db5 100644
--- a/Readme.md
+++ b/Readme.md
@@ -157,6 +157,8 @@ The "engine" could be better
 - enable export of gameplay capture in webview
 - endgame histograms could work as filters, when you hover a bar, all other histograms would show the stats of those runs only, without changing reference of categories
 - sound when ball changes color
+- option : don't pause on mobile when lifting finger
+- option : accelerated relative movements on mobile
 
 
 There are many possible perks left to implement : 
diff --git a/app/build.gradle.kts b/app/build.gradle.kts
index 72a5064..eb3d438 100644
--- a/app/build.gradle.kts
+++ b/app/build.gradle.kts
@@ -11,8 +11,8 @@ android {
         applicationId = "me.lecaro.breakout"
         minSdk = 21
         targetSdk = 34
-        versionCode = 29015398
-        versionName = "29015398"
+        versionCode = 29017191
+        versionName = "29017191"
         testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
         vectorDrawables {
             useSupportLibrary = true
diff --git a/app/src/main/assets/game.js b/app/src/main/assets/game.js
index 08b503e..15957bd 100644
--- a/app/src/main/assets/game.js
+++ b/app/src/main/assets/game.js
@@ -22,7 +22,7 @@ const randomPatterns=[
 ]
 let attributed=0
 allLevels.forEach(l => {
-    if (!l.color && !l.svg) { 
+    if (!l.color && !l.svg) {
         l.svg = randomPatterns[attributed%randomPatterns.length]
         attributed++
     }
@@ -2227,16 +2227,18 @@ function drawBrick(ctx, color, borderColor, x, y) {
         const can = document.createElement("canvas");
         can.width = width;
         can.height = height;
-        const bord = 4;
+        const bord = 2;
+        const cornerRadius= 2
         const canctx = can.getContext("2d");
 
+
         canctx.fillStyle = color;
-        canctx.fillRect(bord, bord, width - bord * 2, height - bord * 2);
         canctx.strokeStyle = borderColor;
         canctx.lineJoin = "round";
         canctx.lineWidth = bord
-        canctx.strokeRect(bord / 2, bord / 2, width - bord, height - bord);
-
+        roundRect(canctx,bord/2,bord/2, width-bord ,height-bord, cornerRadius)
+        canctx.fill();
+        canctx.stroke();
 
         cachedGraphics[key] = can;
     }
@@ -2244,6 +2246,26 @@ function drawBrick(ctx, color, borderColor, x, y) {
     // It's not easy to have a 1px gap between bricks without antialiasing
 }
 
+function roundRect(
+  ctx,
+  x,
+  y,
+  width,
+  height,
+  radius ){
+  ctx.beginPath();
+  ctx.moveTo(x + radius, y);
+  ctx.lineTo(x + width - radius, y);
+  ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+  ctx.lineTo(x + width, y + height - radius);
+  ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+  ctx.lineTo(x + radius, y + height);
+  ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
+  ctx.lineTo(x, y + radius);
+  ctx.quadraticCurveTo(x, y, x + radius, y);
+  ctx.closePath();
+
+}
 function drawRedSquare(ctx, x, y, width, height) {
     ctx.fillStyle = 'red'
     ctx.fillRect(x, y, width, height);
@@ -2675,7 +2697,7 @@ const options = {
         disabled: () => false
     },
     pointerLock: {
-        default: false, name: `Pointer lock`,
+        default: false, name: `Mouse pointer lock`,
         help: `Locks and hides the mouse cursor.`,
         disabled: () => !canvas.requestPointerLock
     },
diff --git a/app/src/main/assets/index.html b/app/src/main/assets/index.html
index 4a7cd86..494db0a 100644
--- a/app/src/main/assets/index.html
+++ b/app/src/main/assets/index.html
@@ -9,16 +9,16 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>Breakout 71</title>
     <meta name="description" content="A breakout game with roguelite mechanics. Break bricks, catch coins, pick upgrades, repeat. Play for free on mobile and desktop.">
-    <link rel="stylesheet" href="style.css?v=29015398" />
+    <link rel="stylesheet" href="style.css?v=29017191" />
     <link rel="icon" href="./icon.svg" />
   </head>
   <body>
     <button id="menu">☰<span> menu</span></button>
     <button id="score"></button>
     <canvas id="game"></canvas>
-    <script>window.appVersion="?v=29015398".slice(3)</script>
-    <script src="levels.js?v=29015398"></script>
-    <script src="game.js?v=29015398"></script>
+    <script>window.appVersion="?v=29017191".slice(3)</script>
+    <script src="levels.js?v=29017191"></script>
+    <script src="game.js?v=29017191"></script>
 
 
   </body>
diff --git a/app/src/main/assets/style.css b/app/src/main/assets/style.css
index fbcd427..c20de46 100644
--- a/app/src/main/assets/style.css
+++ b/app/src/main/assets/style.css
@@ -76,7 +76,7 @@ body.black_puck #menu {
 .popup {
     position: fixed;
     inset: 0;
-    background: rgba(0, 0, 0, 0.95);
+    background: rgba(0, 0, 0, 0.9);
     z-index: 10;
     display: flex;
     overflow: auto;
@@ -132,10 +132,9 @@ body.black_puck #menu {
     right: 0;
     width: 60px;
     height: 60px;
-    background: none;
+    background: transparent;
     border: none;
     cursor: pointer;
-    background: rgba(0, 0, 0, 0.2);
     overflow: hidden;
 }
 
@@ -145,10 +144,13 @@ body.black_puck #menu {
     transform: translate(-50%, -50%) rotate(45deg);
     font-size: 80px;
     display: inline-block;
+    top: 34px;
+    left: 26px;
 }
 
 .popup button.close-modale:hover {
     font-weight: bold;
+    background: black;
 }
 
 .popup > div > button[disabled] {