Changelog update

src/game.less

@@ -1,10 +1,9 @@
 * {
-  font-family:
-    Courier New,
-    Courier,
-    Lucida Sans Typewriter,
-    Lucida Typewriter,
-    monospace;
+  font-family: Courier New,
+  Courier,
+  Lucida Sans Typewriter,
+  Lucida Typewriter,
+  monospace;
   box-sizing: border-box;
 }
 
@@ -45,11 +44,13 @@ body {
   min-width: 40px;
   min-height: 40px;
   line-height: 20px;
+
   &:hover,
   &:focus {
     background: rgba(0, 0, 0, 0.3);
     cursor: pointer;
   }
+
   text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
 }
 
@@ -57,20 +58,25 @@ body {
   right: 0;
   color: white;
   transition: color 0.3s;
+
   &.active {
     color: gold;
     transition: color 0.01s;
   }
 
-  span{
+  span {
     color: #333;
 
-  &.great{
-    color: lightgreen;
-  }
-  &.good{
-    color: white;
-  }
+    &.great {
+      color: lightgreen;
+    }
+
+    &.good {
+      color: white;
+    }
+    &.bad {
+      color: white;
+    }
   }
 }
 
@@ -78,32 +84,15 @@ body {
   left: 0;
 }
 
-#FPSDisplay {
-  z-index: 1;
-  white-space: nowrap;
-  padding: 10px;
-  line-height: 20px;
-  pointer-events: none;
-  user-select: none;
-  opacity: 0.8;
-
-  color: white;
-  padding: 0;
-  position: fixed;
-
-  bottom: 0;
-  left: 0;
-  transform-origin: top left;
-  transform: rotate(-90deg);
-}
-
 body.has-alert-open {
   height: auto;
   overflow: visible;
 }
+
 body:not(.has-alert-open) #popup {
   display: none;
 }
+
 #popup {
   &::before {
     z-index: 10;
@@ -342,6 +331,7 @@ body:not(.has-alert-open) #popup {
       }
     }
   }
+
   & > span:not(:hover):not(.active) > span > span {
     opacity: 0;
   }
@@ -358,6 +348,7 @@ h2.histogram-title strong {
 
 .red-icon {
   background: red;
+
   img {
     filter: saturate(0);
     mix-blend-mode: luminosity;

src/game.ts

@@ -386,21 +386,10 @@ export function tick() {
 }
 
 let FPSCounter = 0;
-let FPSDisplay = document.getElementById("FPSDisplay") as HTMLDivElement;
+export let lastMeasuredFPS = 60;
+
 setInterval(() => {
-    if (isOptionOn("show_fps")) {
-        FPSDisplay.innerText =
-            FPSCounter +
-            " FPS " +
-            liveCount(gameState.coins) +
-            " COINS " +
-            (liveCount(gameState.particles) +
-                liveCount(gameState.texts) +
-                liveCount(gameState.lights)) +
-            " PARTICLES ";
-    } else {
-        FPSDisplay.innerText = "";
-    }
+    lastMeasuredFPS = FPSCounter
     FPSCounter = 0;
 }, 1000);
 

src/game_utils.ts

@@ -55,7 +55,7 @@ export function getRowColIndex(gameState: GameState, row: number, col: number) {
 
 export function getPossibleUpgrades(gameState: GameState) {
   return upgrades
-    .filter((u) => gameState.totalScoreAtRunStart >= u.threshold)
+    .filter((u) => gameState.totalScoreAtRunStart >= u.threshold || gameState.loop>0)
     .filter((u) => !u?.requires || gameState.perks[u?.requires]);
 }
 

src/render.ts

@@ -11,7 +11,7 @@ import {
 } from "./game_utils";
 import {colorString, GameState} from "./types";
 import {t} from "./i18n/i18n";
-import {gameState} from "./game";
+import {gameState, lastMeasuredFPS} from "./game";
 import {isOptionOn} from "./options";
 
 export const gameCanvas = document.getElementById("game") as HTMLCanvasElement;
@@ -54,7 +54,17 @@ export function render(gameState: GameState) {
     const catchRate = gameState.levelSpawnedCoins ?
          (gameState.levelSpawnedCoins - gameState.levelLostCoins)/gameState.levelSpawnedCoins :1
 
-    scoreDisplay.innerHTML= (isOptionOn('show_stats') ? ` 
+    scoreDisplay.innerHTML=
+              (isOptionOn("show_fps") ? ` 
+               <span class="${(Math.abs(lastMeasuredFPS-60)<2  &&  ' ') || (Math.abs(lastMeasuredFPS-60)<10  && 'good')||'bad'}">
+            ${lastMeasuredFPS} FPS
+        </span><span> / </span>
+         
+            `:'')+
+
+
+
+        (isOptionOn('show_stats') ? ` 
         <span class="${(catchRate==1 && 'great') || (catchRate>0.9 && 'good')||''}">
             ${Math.floor(catchRate*100)}%
         </span><span> / </span>