/ and stonks

my-bois/src/components/Bois.jsx

@@ -1,4 +1,4 @@
-import React, {useContext, useEffect, useState} from 'react';
+import React, {useCallback, useContext, useEffect, useState} from 'react';
 
 import "./Bois.css";
 import {StatusContext} from "./Contexts";
@@ -17,7 +17,7 @@ const Boi = ({type, children}) => {
 };
 
 export const LeftBoi = () => {
-  const {prevLongDiff, workout, workoutStatus, program, hidden} = useContext(StatusContext);
+  const {prevDiff, prevLongDiff, workout, workoutStatus, program, hidden} = useContext(StatusContext);
   if (workoutStatus === null || workout === null || program === null || hidden) {
     return null;
   }
@@ -30,7 +30,7 @@ export const LeftBoi = () => {
   return (
     <Boi type="left">
       <Timer minutes={minutes} seconds={seconds} cooldownMin={cooldownMin}/>
-      <CalorieScore calories={calories} diff={diff} prevDiff={prevLongDiff}/>
+      <CalorieScore calories={calories} diff={diff} prevDiff={prevLongDiff} stonks={prevDiff}/>
       <RpmScore rpm={rpm}/>
       <CpmScore cpm={cpm}/>
       <LevelScore level={level}/>
@@ -110,15 +110,22 @@ export const CentreBoi = () => {
     return false;
   });
 
-  useKey("Escape", () => {
+  const showHide = useCallback(() => {
+    setHidden(!hidden);
+  }, [setHidden, hidden]);
+
+  const stopRun = useCallback(() => {
     if (state === "connected") {
       stop();
+      setHidden(false);
 
       return true;
     }
-  });
+  }, [state, stop, setHidden]);
+
+  useKey("Escape", stopRun);
 
-  useKey(["H", "h"], () => showHide());
+  useKey(["H", "h", "/"], showHide);
 
   useKey("*", () => {
     if (state === "started" || state === "connected") {
@@ -126,10 +133,6 @@ export const CentreBoi = () => {
     }
   });
 
-  function showHide() {
-    setHidden(!hidden);
-  }
-
   if (hidden) {
     return null;
   }

my-bois/src/components/Misc.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {COLOR_VERY_BAD, colorByDiff} from "../helpers/color";
+import {colorByDiff} from "../helpers/color";
 
 import "./Misc.css";
 import {diffString} from "../helpers/diff";

my-bois/src/components/Score.jsx

@@ -40,8 +40,8 @@ export const Timer = ({minutes, seconds, cooldownMin}) => {
   );
 };
 
-export const CalorieScore = ({calories, diff, prevDiff}) => (
-  <Score value={calories} color={colorByDiff(diff, prevDiff)} suffix="kal"/>
+export const CalorieScore = ({calories, diff, prevDiff, stonks}) => (
+  <Score value={calories} color={colorByDiff(diff, prevDiff, stonks || 0)} suffix="kal"/>
 );
 
 export const LevelScore = ({level}) => <Score value={level} suffix="lvl"/>;

my-bois/src/helpers/color.js

@@ -5,7 +5,13 @@ export const COLOR_NEUTRAL = "#FFF";
 export const COLOR_GOOD = "#BFB";
 export const COLOR_VERY_GOOD = "#6F6";
 
-export const colorByDiff = (diff, prevDiff) => {
+export const COLOR_STONKS_GOOD = "#3A3";
+
+export const colorByDiff = (diff, prevDiff, stonksDiff = 0) => {
+  if (stonksDiff > 0 && diff > 0 && diff > stonksDiff) {
+    return COLOR_STONKS_GOOD
+  }
+
   if (diff < 0) {
     return diff < prevDiff ? COLOR_VERY_BAD : COLOR_BAD;
   } else {

my-bois/src/hooks/net.js

@@ -43,6 +43,7 @@ export function openWebsocket(workout) {
 
 async function runBack(query) {
   return new Promise((resolve, reject) => {
+    /* global chrome */
     chrome.runtime.sendMessage(query, result => {
       if (result.success) {
         resolve(result.data)