virginmap -> blank canvas

packages/client/src/components/CanvasWrapper.tsx

@@ -9,7 +9,7 @@ import { IPosition } from "@sc07-canvas/lib/src/net";
 import { Template } from "./Template";
 import { IRouterData, Router } from "../lib/router";
 import { KeybindManager } from "../lib/keybinds";
-import { VirginOverlay } from "./Overlay/VirginOverlay";
+import { BlankOverlay } from "./Overlay/BlankOverlay";
 import { HeatmapOverlay } from "./Overlay/HeatmapOverlay";
 
 export const CanvasWrapper = () => {
@@ -19,7 +19,7 @@ export const CanvasWrapper = () => {
   return (
     <main>
       <PanZoomWrapper>
-        <VirginOverlay />
+        <BlankOverlay />
         <HeatmapOverlay />
         {config && <Template />}
         <CanvasInner />

packages/client/src/components/Overlay/BlankOverlay.tsx

@@ -3,29 +3,29 @@ import { useAppContext } from "../../contexts/AppContext";
 import { Canvas } from "../../lib/canvas";
 import { KeybindManager } from "../../lib/keybinds";
 
-export const VirginOverlay = () => {
-  const { config, virginOverlay, setVirginOverlay } = useAppContext();
+export const BlankOverlay = () => {
+  const { config, blankOverlay, setBlankOverlay } = useAppContext();
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
 
   useEffect(() => {
     const handleKeybind = () => {
-      setVirginOverlay((v) => ({ ...v, enabled: !v.enabled }));
+      setBlankOverlay((v) => ({ ...v, enabled: !v.enabled }));
     };
 
-    KeybindManager.on("TOGGLE_VIRGIN", handleKeybind);
+    KeybindManager.on("TOGGLE_BLANK", handleKeybind);
 
     return () => {
-      KeybindManager.off("TOGGLE_VIRGIN", handleKeybind);
+      KeybindManager.off("TOGGLE_BLANK", handleKeybind);
     };
-  }, [setVirginOverlay]);
+  }, [setBlankOverlay]);
 
   useEffect(() => {
     if (!config) {
-      console.warn("[VirginOverlay] config is not defined");
+      console.warn("[BlankOverlay] config is not defined");
       return;
     }
     if (!canvasRef.current) {
-      console.warn("[VirginOverlay] canvasRef is not defined");
+      console.warn("[BlankOverlay] canvasRef is not defined");
       return;
     }
 
@@ -37,14 +37,14 @@ export const VirginOverlay = () => {
 
   useEffect(() => {
     if (!canvasRef.current) {
-      console.warn("[VirginOverlay] canvasRef is not defined");
+      console.warn("[BlankOverlay] canvasRef is not defined");
       return;
     }
 
     const updateVirginmap = () => {
       const ctx = canvasRef.current!.getContext("2d");
       if (!ctx) {
-        console.warn("[VirginOverlay] canvas context cannot be aquired");
+        console.warn("[BlankOverlay] canvas context cannot be aquired");
         return;
       }
 
@@ -68,14 +68,14 @@ export const VirginOverlay = () => {
 
   return (
     <canvas
-      id="virgin-overlay"
+      id="blank-overlay"
       className="board-overlay no-interact pixelate"
       ref={(r) => (canvasRef.current = r)}
       width="1000"
       height="1000"
       style={{
-        display: virginOverlay.enabled ? "block" : "none",
-        opacity: virginOverlay.opacity.toFixed(1),
+        display: blankOverlay.enabled ? "block" : "none",
+        opacity: blankOverlay.opacity.toFixed(1),
       }}
     />
   );

packages/client/src/components/Overlay/OverlaySettings.tsx

@@ -2,7 +2,7 @@ import { Slider, Spinner, Switch } from "@nextui-org/react";
 import { useAppContext } from "../../contexts/AppContext";
 
 export const OverlaySettings = () => {
-  const { virginOverlay, setVirginOverlay, heatmapOverlay, setHeatmapOverlay } =
+  const { blankOverlay, setBlankOverlay, heatmapOverlay, setHeatmapOverlay } =
     useAppContext();
 
   return (
@@ -12,22 +12,22 @@ export const OverlaySettings = () => {
       </header>
       <section>
         <Switch
-          isSelected={virginOverlay.enabled}
+          isSelected={blankOverlay.enabled}
           onValueChange={(v) =>
-            setVirginOverlay((vv) => ({ ...vv, enabled: v }))
+            setBlankOverlay((vv) => ({ ...vv, enabled: v }))
           }
         >
-          Virgin Map Overlay
+          Blank Canvas Overlay
         </Switch>
-        {virginOverlay.enabled && (
+        {blankOverlay.enabled && (
           <Slider
-            label="Virgin Map Opacity"
+            label="Blank Canvas Opacity"
             step={0.1}
             minValue={0}
             maxValue={1}
-            value={virginOverlay.opacity}
+            value={blankOverlay.opacity}
             onChange={(v) =>
-              setVirginOverlay((vv) => ({ ...vv, opacity: v as number }))
+              setBlankOverlay((vv) => ({ ...vv, opacity: v as number }))
             }
             getValue={(v) => (v as number) * 100 + "%"}
           />

packages/client/src/contexts/AppContext.tsx

@@ -30,8 +30,8 @@ interface IAppContext {
   showKeybinds: boolean;
   setShowKeybinds: (v: boolean) => void;
 
-  virginOverlay: IMapOverlay;
-  setVirginOverlay: React.Dispatch<React.SetStateAction<IMapOverlay>>;
+  blankOverlay: IMapOverlay;
+  setBlankOverlay: React.Dispatch<React.SetStateAction<IMapOverlay>>;
   heatmapOverlay: IMapOverlay;
   setHeatmapOverlay: React.Dispatch<React.SetStateAction<IMapOverlay>>;
 
@@ -82,7 +82,7 @@ export const AppContext = ({ children }: PropsWithChildren) => {
   }>();
   const [showKeybinds, setShowKeybinds] = useState(false);
 
-  const [virginOverlay, setVirginOverlay] = useState<IMapOverlay>({
+  const [blankOverlay, setBlankOverlay] = useState<IMapOverlay>({
     enabled: false,
     opacity: 1,
     loading: false,
@@ -191,8 +191,8 @@ export const AppContext = ({ children }: PropsWithChildren) => {
         setPixelWhois,
         showKeybinds,
         setShowKeybinds,
-        virginOverlay,
-        setVirginOverlay,
+        blankOverlay,
+        setBlankOverlay,
         heatmapOverlay,
         setHeatmapOverlay,
       }}

packages/client/src/lib/keybinds.ts

@@ -31,9 +31,12 @@ const KEYBINDS = enforceObjectType({
       alt: true,
     },
   ],
-  TOGGLE_VIRGIN: [
+  TOGGLE_BLANK: [
     {
-      key: "KeyV",
+      key: "KeyV", // legacy pxls keybind
+    },
+    {
+      key: "KeyB",
     },
   ],
   TOGGLE_HEATMAP: [