Commit b38b1d8b authored by Grant's avatar Grant
Browse files

virginmap overlay (fixes #32)

parent e69f5bf6

packages/client/src/board.scss

+10 −0
Original line number Diff line number Diff line
@@ -23,3 +23,13 @@ 
  pointer-events: none;

  touch-action: none;

}



.board-overlay {

  position: absolute;

  top: 0;

  left: 0;

}



.no-interact {

  pointer-events: none;

}

packages/client/src/components/CanvasWrapper.tsx

+2 −0
Original line number Diff line number Diff line
@@ -9,6 +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";



export const CanvasWrapper = () => {

  const { config } = useAppContext();
@@ -17,6 +18,7 @@ export const CanvasWrapper = () => { 
  return (

    <main>

      <PanZoomWrapper>

        <VirginOverlay />

        {config && <Template />}

        <CanvasInner />

      </PanZoomWrapper>

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

0 → 100644
+22 −0
Original line number Diff line number Diff line 
import { Switch } from "@nextui-org/react";

import { useAppContext } from "../../contexts/AppContext";



export const OverlaySettings = () => {

  const { showVirginOverlay, setShowVirginOverlay } = useAppContext();



  return (

    <>

      <header>

        <h2>Overlays</h2>

      </header>

      <section>

        <Switch

          isSelected={showVirginOverlay}

          onValueChange={setShowVirginOverlay}

        >

          Virgin Map Overlay

        </Switch>

      </section>

    </>

  );

};

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

0 → 100644
+81 −0
Original line number Diff line number Diff line 
import { useEffect, useRef } from "react";

import { useAppContext } from "../../contexts/AppContext";

import { Canvas } from "../../lib/canvas";

import { KeybindManager } from "../../lib/keybinds";



export const VirginOverlay = () => {

  const { config, showVirginOverlay, setShowVirginOverlay } = useAppContext();

  const canvasRef = useRef<HTMLCanvasElement | null>(null);



  useEffect(() => {

    const handleKeybind = () => {

      setShowVirginOverlay((v) => !v);

    };



    KeybindManager.on("TOGGLE_VIRGIN", handleKeybind);



    return () => {

      KeybindManager.off("TOGGLE_VIRGIN", handleKeybind);

    };

  }, [setShowVirginOverlay]);



  useEffect(() => {

    if (!config) {

      console.warn("[VirginOverlay] config is not defined");

      return;

    }

    if (!canvasRef.current) {

      console.warn("[VirginOverlay] canvasRef is not defined");

      return;

    }



    const [width, height] = config.canvas.size;



    canvasRef.current.width = width;

    canvasRef.current.height = height;

  }, [config]);



  useEffect(() => {

    if (!canvasRef.current) {

      console.warn("[VirginOverlay] canvasRef is not defined");

      return;

    }



    const updateVirginmap = () => {

      const ctx = canvasRef.current!.getContext("2d");

      if (!ctx) {

        console.warn("[VirginOverlay] canvas context cannot be aquired");

        return;

      }



      ctx.clearRect(0, 0, canvasRef.current!.width, canvasRef.current!.height);



      const pixels = Canvas.instance!.getAllPixels();

      for (const pixel of pixels) {

        if (pixel.color !== -1) continue;



        ctx.fillStyle = "rgba(0,140,0,0.5)";

        ctx.fillRect(pixel.x, pixel.y, 1, 1);

      }

    };



    var updateInterval = setInterval(updateVirginmap, 1000);



    return () => {

      clearInterval(updateInterval);

    };

  }, [canvasRef]);



  return (

    <canvas

      id="virgin-overlay"

      className="board-overlay no-interact pixelate"

      ref={(r) => (canvasRef.current = r)}

      width="1000"

      height="1000"

      style={{

        display: showVirginOverlay ? "block" : "none",

      }}

    />

  );

};

packages/client/src/components/Settings/SettingsSidebar.tsx

+2 −0
Original line number Diff line number Diff line
@@ -4,6 +4,7 @@ import { TemplateSettings } from "./TemplateSettings"; 
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

import { faXmark } from "@fortawesome/free-solid-svg-icons/faXmark";

import { ChatSettings } from "./ChatSettings";

import { OverlaySettings } from "../Overlay/OverlaySettings";



export const SettingsSidebar = () => {

  const { settingsSidebar, setSettingsSidebar, setShowKeybinds } =
@@ -34,6 +35,7 @@ export const SettingsSidebar = () => { 
      </section>

      <TemplateSettings />

      <ChatSettings />

      <OverlaySettings />

    </div>

  );

};