virginmap -> blank canvas (b86c6735) · Commits · Marius DAVID / Canvas

packages/client/src/components/CanvasWrapper.tsx

+2 −2

Original line number	Diff line number	Diff line
		@@ -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/VirginOverlay.tsx→packages/client/src/components/Overlay/BlankOverlay.tsx

+13 −13

Original line number	Diff line number	Diff line
		@@ -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

+8 −8

Original line number	Diff line number	Diff line
		@@ -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

+5 −5

Original line number	Diff line number	Diff line
		@@ -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

+5 −2

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