wip

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;
 }
 
@@ -56,7 +55,8 @@ canvas:not(#game) {
 
   &:hover,
   &:focus {
-    background: rgba(0, 0, 0, 0.3);
+    background: white;
+    color: black;
     cursor: pointer;
   }
 
@@ -399,27 +399,52 @@ h2.histogram-title strong {
     color: white;
   }
 
-  & > span {
-    flex-grow: 0;
-
-    flex-shrink: 0;
-    width: 5px;
+  .level {
+    color: #000;
+    background: #FFF;
+    border-radius: 3px;
+    overflow: hidden;
+    font-size: 12px;
+    font-style: normal;
+    line-height: 12px;
     display: inline-block;
-    height: 32px;
-    align-self: center;
+    position: relative;
+    top: -3px;
+    font-weight: bold;
+    border: 1px solid #FFF;
+
+    > span {
+      display: inline-block;
+      position: relative;
+
+      &:first-child {
+
+      padding: 3px 6px 0 2px;
+        color: #000;
+        background: #FFF;
+      }
+
+      &:last-child {
+
+      padding: 3px 3px 0 2px;
+        color: #FFF;
+        background: #000;
+
+        &:before {
+          content: "";
+          display: block;
+          background: black;;
+          position: absolute;
+          left: -2px;
+          top: 0;
+          bottom: 0;
+          width: 4px;
+          transform: skewX(-10deg)
+        }
+      }
 
-    &.used {
-      background: #fff;
     }
 
-    &.free {
-      background: #fff;
-      opacity: 0.25;
-    }
-
-    &.banned {
-      background: red;
-    }
   }
 
   &.used {
@@ -450,9 +475,11 @@ h2.histogram-title strong {
   user-select: none;
   opacity: 1;
   border: 1px solid white;
+
   &.desktop {
     max-width: 300px;
   }
+
   &.mobile {
     width: 95vw;
     left: 2.5vw;
@@ -523,9 +550,8 @@ h2.histogram-title strong {
   border-radius: 2px;
   padding-right: 10px;
   pointer-events: none;
-  transition:
-    opacity 200ms,
-    transform 200ms;
+  transition: opacity 200ms,
+  transform 200ms;
   z-index: 7;
 
   &.hidden {

src/game.ts

@@ -537,12 +537,6 @@ setInterval(() => {
   monitorLevelsUnlocks(gameState);
 }, 500);
 
-scoreDisplay.addEventListener("click", (e) => {
-  e.preventDefault();
-  if (!alertsOpen) {
-    openScorePanel(gameState);
-  }
-});
 
 document.addEventListener("visibilitychange", () => {
   if (document.hidden) {
@@ -550,6 +544,15 @@ document.addEventListener("visibilitychange", () => {
   }
 });
 
+function scoreOpen(e){
+    e.preventDefault();
+  if (!alertsOpen) {
+    openScorePanel(gameState);
+  }
+}
+scoreDisplay.addEventListener("click",scoreOpen);
+scoreDisplay.addEventListener("mousedown", scoreOpen);
+
 (document.getElementById("menu") as HTMLButtonElement).addEventListener(
   "click",
   (e) => {

src/game_utils.ts

@@ -105,16 +105,6 @@ export function pickedUpgradesHTMl(gameState: GameState) {
     .map((u) => {
       const newMax = Math.max(0, u.max + gameState.perks.limitless);
 
-      let bars = [];
-      for (let i = 0; i < Math.max(u.max, newMax, gameState.perks[u.id]); i++) {
-        if (i < gameState.perks[u.id]) {
-          bars.push('<span class="used"></span>');
-        } else if (i < newMax) {
-          bars.push('<span class="free"></span>');
-        } else {
-          bars.push('<span class="banned"></span>');
-        }
-      }
 
       const state = (gameState.perks[u.id] && 1) || (!newMax && 2) || 3;
       return {
@@ -124,9 +114,9 @@ export function pickedUpgradesHTMl(gameState: GameState) {
             ${icons["icon:" + u.id]}
             <p>
             <strong>${u.name}</strong>
+            <span class="level"><span>${gameState.perks[u.id]}</span><span>${newMax}</span></span>
           ${u.help(Math.max(1, gameState.perks[u.id]))}
-          </p> 
-            ${bars.reverse().join("")}
+          </p>  
         </div>
         `,
       };

src/tooltip.ts

@@ -1,6 +1,9 @@
 import { isOptionOn } from "./options";
 
+const tooltip = document.getElementById("tooltip") as HTMLDivElement;
+
 export function setupTooltips() {
+  return
   if (isOptionOn("mobile-mode")) {
     setupMobileTooltips(tooltip);
   } else {
@@ -11,11 +14,11 @@ export function hideAnyTooltip() {
   tooltip.style.display = "none";
 }
 
-const tooltip = document.getElementById("tooltip") as HTMLDivElement;
 
 function setupMobileTooltips(tooltip: HTMLDivElement) {
   tooltip.className = "mobile";
   function openTooltip(e: Event) {
+    console.log('openTooltip',e)
     hideAnyTooltip();
     const hovering = e.target as HTMLElement;
     if (!hovering?.hasAttribute("data-help-content")) {
@@ -29,35 +32,9 @@ function setupMobileTooltips(tooltip: HTMLDivElement) {
     tooltip.style.transform = `translate(0,${top}px) translate(0,-100%)`;
   }
 
-  document.body.addEventListener("touchstart", openTooltip, true);
-  document.body.addEventListener("mousedown", openTooltip, true);
-
-  function closeTooltip(e: Event) {
-    const hovering = e.target as HTMLElement;
-    if (!hovering?.hasAttribute("data-help-content")) {
-      return;
-    }
-
-    e.stopPropagation();
-    e.preventDefault();
-    hideAnyTooltip();
-  }
-
-  document.body.addEventListener("touchend", closeTooltip, true);
-  document.body.addEventListener("mouseup", closeTooltip, true);
+  document.body.addEventListener("click", openTooltip, true);
   document.addEventListener("scroll", hideAnyTooltip);
 
-  function ignoreClick(e: Event) {
-    const hovering = e.target as HTMLElement;
-    if (!hovering?.hasAttribute("data-help-content")) {
-      return;
-    }
-
-    e.stopPropagation();
-    e.preventDefault();
-  }
-  document.body.addEventListener("click", ignoreClick, true);
-  document.body.addEventListener("contextmenu", ignoreClick, true);
 }
 
 function setupDesktopTooltips(tooltip: HTMLDivElement) {