wip

Readme.md

@@ -14,6 +14,8 @@ Break colourful bricks, catch bouncing coins and select powerful upgrades !
 # Changelog
 ## To do
 
+- loosing ball is ok if in win timeout period
+- 
 ## Done
 
 - delayed start on mobile

src/game.less

@@ -8,7 +8,6 @@
   box-sizing: border-box;
 }
 
-@purple: #6262ea;
 
 body {
   margin: 0;
@@ -648,8 +647,12 @@ h2.histogram-title strong {
     left: 50vw;
     top: 50vh;
     font-size: 60px;
-    opacity: 0.9;
+    font-weight: bold;
+    opacity: 0.8;
     background: none;
+    text-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000,
+             1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000;
+    transform: translate(-50%,-50%);
   }
 }
 
@@ -709,7 +712,7 @@ h2.histogram-title strong {
     position: relative;
 
     > div {
-      background: @purple;
+      background: @palette_b;
       position: absolute;
       inset: 0;
       transform-origin: top left;
@@ -729,7 +732,7 @@ h2.histogram-title strong {
     content: "";
     position: absolute;
     inset: 0;
-    background: linear-gradient(-45deg, @purple, transparent);
+    background: linear-gradient(-45deg, @palette_b, transparent);
     mix-blend-mode: screen;
     opacity: 0.3;
   }
@@ -739,3 +742,25 @@ h2.histogram-title strong {
   opacity: 0.8;
   color: #8a8a8a;
 }
+
+@palette_B:black;
+@palette_W:#FFFFFF;
+@palette_g:#231f20;
+@palette_y:#FFD300;
+@palette_b:#6262EA;
+@palette_t:#5DA3EA;
+@palette_s:#E67070;
+@palette_r:#e32119;
+@palette_R:#ab0c0c;
+@palette_c:#59EEA3;
+@palette_G:#A1F051;
+@palette_v:#A664E8;
+@palette_p:#E869E8;
+@palette_a:#5BECEC;
+@palette_C:#53EE53;
+@palette_S:#F44848;
+@palette_P:#E66BA8;
+@palette_O:#F29E4A;
+@palette_k:#618227;
+@palette_e:#e1c8b4;
+@palette_l:#9b9fa;

src/game.ts

@@ -82,7 +82,7 @@ import { monitorLevelsUnlocks } from "./monitorLevelsUnlocks";
 import { levelEditorMenuEntry } from "./levelEditor";
 import { categories } from "./upgrades";
 import { reasonLevelIsLocked } from "./get_level_unlock_condition";
-import { toast } from "./toast";
+import {clearToasts, toast} from "./toast";
 
 export async function play() {
   if (await applyFullScreenChoice()) return;
@@ -263,8 +263,12 @@ function startPlayCountDown() {
       play();
     }, 3000),
   );
+  timers.push(setTimeout(() => clearToasts(), 3500));
+
 }
 function stopPlayCountDown() {
+  if(!timers.length) return
+  clearToasts()
   timers.forEach((id) => clearTimeout(id));
   timers.length = 0;
 }

src/gameStateMutators.ts

@@ -12,7 +12,7 @@ import {
 
 import {
   brickCenterX,
-  brickCenterY,
+  brickCenterY, canvasCenterX,
   currentLevelInfo,
   distance2,
   distanceBetween,
@@ -27,7 +27,7 @@ import {
   reachRedRowIndex,
   shouldPierceByColor,
   telekinesisEffectRate,
-  yoyoEffectRate,
+  yoyoEffectRate, zoneLeftBorderX, zoneRightBorderX,
 } from "./game_utils";
 import { t } from "./i18n/i18n";
 
@@ -1184,7 +1184,7 @@ export function gameStateTick(
       if (
         gameState.perks.wrap_right > 1 &&
         hitBorder % 2 &&
-        coin.previousX > gameState.offsetX + gameState.gameZoneWidth / 2
+        coin.previousX > canvasCenterX(gameState)
       ) {
         schedulGameSound(gameState, "plouf", coin.x, 1);
         coin.x = gameState.offsetX + gameState.coinSize;
@@ -1395,7 +1395,7 @@ export function gameStateTick(
     if (gameState.perks.wind) {
       const windD =
         ((gameState.puckPosition -
-          (gameState.offsetX + gameState.gameZoneWidth / 2)) /
+          canvasCenterX(gameState)) /
           gameState.gameZoneWidth) *
         2 *
         gameState.perks.wind;
@@ -1529,7 +1529,7 @@ export function gameStateTick(
   ) {
     makeParticle(
       gameState,
-      gameState.offsetXRoundedDown,
+      zoneLeftBorderX(gameState),
       Math.random() * gameState.gameZoneHeight,
       5,
       (Math.random() - 0.5) * 10,
@@ -1546,7 +1546,7 @@ export function gameStateTick(
   ) {
     makeParticle(
       gameState,
-      gameState.offsetXRoundedDown + gameState.gameZoneWidth,
+      zoneRightBorderX(gameState),
       Math.random() * gameState.gameZoneHeight,
       -5,
       (Math.random() - 0.5) * 10,
@@ -1694,20 +1694,21 @@ export function ballTick(gameState: GameState, ball: Ball, frames: number) {
 
   if (gameState.perks.steering) {
     const delta = gameState.puckPosition - gameState.lastPuckPosition;
-    const angle =
-      Math.atan2(ball.vy, ball.vx) +
-      ((((delta / gameState.gameZoneWidth) * Math.PI) / 2) *
-        gameState.perks.steering *
-        frames) /
-        2;
-    const d = Math.sqrt(ball.vy * ball.vy + ball.vx * ball.vx);
-    ball.vy = Math.sin(angle) * d;
-    ball.vx = Math.cos(angle) * d;
-    console.log({
-      delta,
-      angle,
-      d,
-    });
+    if(Math.abs(delta)>1) {
+      const angle =
+          Math.atan2(ball.vy, ball.vx) +
+          ((((delta / gameState.gameZoneWidth) * Math.PI) / 2) *
+              gameState.perks.steering *
+              frames) /
+          2;
+      const d = Math.sqrt(ball.vy * ball.vy + ball.vx * ball.vx);
+      ball.vy = Math.sin(angle) * d;
+      ball.vx = Math.cos(angle) * d;
+      if (Math.random() < frames && !isOptionOn('basic')) {
+        makeParticle(gameState, ball.x, ball.y, -ball.vx / 10, -ball.vy / 10,
+           '#6262EA', true, 8, 500)
+      }
+    }
   }
 
   // Bounces

src/game_utils.ts

@@ -12,6 +12,7 @@ import { t } from "./i18n/i18n";
 import { clamp } from "./pure_functions";
 import { getSettingValue, getTotalScore } from "./settings";
 import { isOptionOn } from "./options";
+import {gameCanvas} from "./render";
 
 export function describeLevel(level: Level) {
   let bricks = 0,
@@ -345,3 +346,14 @@ export function escapeAttribute(str: String) {
     .replace(/"/gi, """)
     .replace(/'/gi, "'");
 }
+
+export function canvasCenterX(gameState:GameState){
+  return gameState.canvasWidth/2
+}
+export function zoneLeftBorderX(gameState:GameState){
+
+  return gameState.offsetXRoundedDown - 1
+}
+export function zoneRightBorderX(gameState:GameState){
+  return gameCanvas.width - gameState.offsetXRoundedDown + 1
+}

src/render.ts

@@ -10,7 +10,7 @@ import {
   max_levels,
   reachRedRowIndex,
   telekinesisEffectRate,
-  yoyoEffectRate,
+  yoyoEffectRate, zoneLeftBorderX, zoneRightBorderX,
 } from "./game_utils";
 import { colorString, GameState } from "./types";
 import { t } from "./i18n/i18n";
@@ -517,9 +517,9 @@ export function render(gameState: GameState) {
         ctx,
         gameState,
         (redLeftSide && "#FF0000") || "#FFFFFF",
-        gameState.offsetXRoundedDown - 1,
+        zoneLeftBorderX(gameState),
         0,
-        gameState.offsetXRoundedDown - 1,
+        zoneLeftBorderX(gameState),
         height,
         1,
       );
@@ -528,9 +528,9 @@ export function render(gameState: GameState) {
         ctx,
         gameState,
         (redRightSide && "#FF0000") || "#FFFFFF",
-        width - gameState.offsetXRoundedDown + 1,
+        zoneRightBorderX(gameState),
         0,
-        width - gameState.offsetXRoundedDown + 1,
+        zoneRightBorderX(gameState),
         height,
         1,
       );
@@ -565,9 +565,9 @@ export function render(gameState: GameState) {
       ctx,
       gameState,
       "#FF0000",
-      gameState.offsetXRoundedDown,
+      zoneLeftBorderX(gameState),
       1,
-      width - gameState.offsetXRoundedDown,
+      zoneRightBorderX(gameState),
       1,
       1,
     );

src/toast.ts

@@ -3,13 +3,16 @@ div.classList = "hidden toast";
 document.body.appendChild(div);
 let timeout: NodeJS.Timeout | undefined;
 export function toast(html: string, className = "") {
+  clearToasts()
   div.classList = "toast visible " + className;
   div.innerHTML = html;
+  timeout = setTimeout(clearToasts, 1500);
+}
+
+export function clearToasts(){
   if (timeout) {
     clearTimeout(timeout);
+    timeout = undefined
   }
-  timeout = setTimeout(() => {
-    timeout = undefined;
-    div.classList = "hidden toast";
-  }, 1500);
-}
+   div.classList = "hidden toast";
+}