wip

Readme.md

@@ -26,6 +26,7 @@ Break colourful bricks, catch bouncing coins and select powerful upgrades !
 ## next release
 
 - keep high score of past runs
+- tooltip on stats
 
 ## 29058469
 
@@ -103,15 +104,11 @@ Break colourful bricks, catch bouncing coins and select powerful upgrades !
 - on mobile, relative movement of the touch would be amplified and added to the puck 
 - option : don't pause on mobile when lifting finger
 - [obigre] Offer to level ups perks separately 
-- bring back detailed help of perks as "intel"
 - https://weblate.org/fr/
 - strict sample size red borders ?
-- add some tutorial-like hints
-- It's a bit confusing at first to grasp that one upgrade is applied randomly at the start of the game. Offer instead to skip lvl 1 and directly pick 4 perks, but only if you manage to clear lvl 1 with 4 upgrades. 
 - on mobile, add an element that feels like it can be "grabbed" and make it shine while writing "Push here to play"
 - add a clickable button to allow sound to play in chrome android
 - see how to do fullscreen on ios, or at least explain to do aA/hide toolbars
-- translation
 - when game resumes near bottom, be unvulnerable for .5s ? , once per level
 
 

src/game.less

@@ -61,11 +61,12 @@ body {
   color: white;
   transition: color 0.3s;
 
-  &.active {
+  &.active  .score{
     color: gold;
     transition: color 0.01s;
   }
 
+
   span {
     color: rgba(255, 255, 255, 0.8);
 
@@ -403,7 +404,7 @@ h2.histogram-title strong {
 
     &.free {
       background: #fff;
-      opacity: 0.1;
+      opacity: 0.25;
     }
 
     &.banned {

src/game.ts

@@ -1000,6 +1000,3 @@ setupTooltips();
 document
   .getElementById("menu")
   ?.setAttribute("data-tooltip", t("play.menu_tooltip"));
-document
-  .getElementById("score")
-  ?.setAttribute("data-tooltip", t("play.score_tooltip"));

src/game_utils.ts

@@ -85,14 +85,14 @@ export function pickedUpgradesHTMl(gameState: GameState) {
     .map((u) => {
       const newMax = Math.max(0, u.max - gameState.bannedPerks[u.id]);
 
-      let bars = "";
+      let bars =[];
       for (let i = 0; i < Math.max(u.max, newMax, gameState.perks[u.id]); i++) {
         if (i < gameState.perks[u.id]) {
-          bars += '<span class="used"></span>';
+          bars .push('<span class="used"></span>');
         } else if (i < newMax) {
-          bars += '<span class="free"></span>';
+          bars .push('<span class="free"></span>');
         } else {
-          bars += '<span class="banned"></span>';
+          bars .push('<span class="banned"></span>');
         }
       }
 
@@ -106,7 +106,7 @@ export function pickedUpgradesHTMl(gameState: GameState) {
             <strong>${u.name}</strong>
           ${u.help(Math.max(1, gameState.perks[u.id]))}
           </p> 
-            ${bars}
+            ${bars.reverse().join('')}
         </div>
         `,
       };

src/i18n/b71.babel

@@ -1857,6 +1857,71 @@
 									</translation>
 								</translations>
 							</concept_node>
+							<folder_node>
+								<name>stats</name>
+								<children>
+									<concept_node>
+										<name>coins_catch_rate</name>
+										<description/>
+										<comment/>
+										<translations>
+											<translation>
+												<language>en-US</language>
+												<approved>false</approved>
+											</translation>
+											<translation>
+												<language>fr-FR</language>
+												<approved>false</approved>
+											</translation>
+										</translations>
+									</concept_node>
+									<concept_node>
+										<name>levelMisses</name>
+										<description/>
+										<comment/>
+										<translations>
+											<translation>
+												<language>en-US</language>
+												<approved>false</approved>
+											</translation>
+											<translation>
+												<language>fr-FR</language>
+												<approved>false</approved>
+											</translation>
+										</translations>
+									</concept_node>
+									<concept_node>
+										<name>levelTime</name>
+										<description/>
+										<comment/>
+										<translations>
+											<translation>
+												<language>en-US</language>
+												<approved>false</approved>
+											</translation>
+											<translation>
+												<language>fr-FR</language>
+												<approved>false</approved>
+											</translation>
+										</translations>
+									</concept_node>
+									<concept_node>
+										<name>levelWallBounces</name>
+										<description/>
+										<comment/>
+										<translations>
+											<translation>
+												<language>en-US</language>
+												<approved>false</approved>
+											</translation>
+											<translation>
+												<language>fr-FR</language>
+												<approved>false</approved>
+											</translation>
+										</translations>
+									</concept_node>
+								</children>
+							</folder_node>
 						</children>
 					</folder_node>
 					<folder_node>

src/i18n/en.json

@@ -118,6 +118,10 @@
   "play.missed_ball": "miss",
   "play.mobile_press_to_play": "Press and hold here to play",
   "play.score_tooltip": "See your score, upgrades and more",
+  "play.stats.coins_catch_rate": "Coins catch rate",
+  "play.stats.levelMisses": "Missed shots, where you hit nothing",
+  "play.stats.levelTime": "Level time",
+  "play.stats.levelWallBounces": "Wall bounces",
   "score_panel.rerolls_count": "You have accumulated {{rerolls}} rerolls",
   "score_panel.title": "{{score}} points at level {{level}}/{{max}} ",
   "score_panel.title_looped": "{{score}} points at level {{level}}/{{max}} of loop {{loop}}",

src/i18n/fr.json

@@ -118,6 +118,10 @@
   "play.missed_ball": "raté",
   "play.mobile_press_to_play": "Gardez le doigt ici pour jouer",
   "play.score_tooltip": "Consultez votre score, améliorations et plus encore",
+  "play.stats.coins_catch_rate": "Taux de capture des pièces ",
+  "play.stats.levelMisses": "Tirs ratés, ou vous n'avez touché aucune brique",
+  "play.stats.levelTime": "Durée du niveau",
+  "play.stats.levelWallBounces": "Rebonds sur les murs",
   "score_panel.rerolls_count": "Vous avez accumulé {{rerolls}} rerolls",
   "score_panel.title": "{{score}} points au niveau {{level}}/{{max}} ",
   "score_panel.title_looped": "{{score}} points au niveau {{level}}/{{max}} ",

src/render.ts

@@ -69,21 +69,21 @@ export function render(gameState: GameState) {
       : "") +
     (isOptionOn("show_stats")
       ? ` 
-        <span class="${(catchRate > 0.95 && "great") || (catchRate > 0.9 && "good") || ""}">
+        <span class="${(catchRate > 0.95 && "great") || (catchRate > 0.9 && "good") || ""}" data-tooltip="${t('play.stats.coins_catch_rate')}">
             ${Math.floor(catchRate * 100)}%
         </span><span> / </span>
-        <span class="${(gameState.levelTime < 30000 && "great") || (gameState.levelTime < 60000 && "good") || ""}">
+        <span class="${(gameState.levelTime < 30000 && "great") || (gameState.levelTime < 60000 && "good") || ""}" data-tooltip="${t('play.stats.levelTime')}">
         ${Math.ceil(gameState.levelTime / 1000)}s 
         </span><span> / </span>
-        <span class="${(gameState.levelWallBounces < 3 && "great") || (gameState.levelWallBounces < 10 && "good") || ""}">
+        <span class="${(gameState.levelWallBounces < 3 && "great") || (gameState.levelWallBounces < 10 && "good") || ""}" data-tooltip="${t('play.stats.levelWallBounces')}">
         ${gameState.levelWallBounces} B 
         </span><span> / </span>  
-        <span class="${(gameState.levelMisses < 3 && "great") || (gameState.levelMisses < 6 && "good") || ""}">
+        <span class="${(gameState.levelMisses < 3 && "great") || (gameState.levelMisses < 6 && "good") || ""}" data-tooltip="${t('play.stats.levelMisses')}">
         ${gameState.levelMisses} M
         </span><span> / </span>
         `
       : "") +
-    `$${gameState.score}`;
+    `<span class="score" data-tooltip="${t("play.score_tooltip")}">$${gameState.score}</span>`;
 
   scoreDisplay.className =
     gameState.lastScoreIncrease > gameState.levelTime - 500 ? "active" : "";