123 lines
4.1 KiB
TypeScript
123 lines
4.1 KiB
TypeScript
import ColourPicker from "./ColourPicker";
|
|
import type { PaintedCell, Region } from "../../../../types/types";
|
|
import type { RefObject } from "react";
|
|
|
|
type RegionSelectorProps = {
|
|
regions: Region[];
|
|
selectedRegionIndex: number;
|
|
onSelectRegion: (index: number) => void;
|
|
onChangeRegionColour: (index: number, colour: string) => void;
|
|
mode: string;
|
|
onSelectMode: (mode: string) => void;
|
|
paintedCells: RefObject<Map<string, PaintedCell>>;
|
|
};
|
|
|
|
const RegionSelector = ({
|
|
regions,
|
|
selectedRegionIndex,
|
|
onSelectRegion,
|
|
onChangeRegionColour,
|
|
mode,
|
|
onSelectMode,
|
|
paintedCells,
|
|
}: RegionSelectorProps) => {
|
|
const handleChange = (e: { target: { value: string } }) => {
|
|
onSelectMode(e.target.value);
|
|
};
|
|
|
|
const handleResetClick = () => {
|
|
const map = paintedCells.current;
|
|
map.clear();
|
|
};
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 md:grid-rows-2 gap-4">
|
|
<div className="p-2 border border-gray-600 rounded-lg flex flex-col">
|
|
<h2 className="text-2xl mb-2">Tools</h2>
|
|
<div className="flex flex-col">
|
|
<label
|
|
htmlFor="paintMode"
|
|
className={`p-4 border rounded-lg mb-2
|
|
${mode === "painter" ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"}
|
|
hover:bg-[#202b36] hover:cursor-pointer`}
|
|
>
|
|
<input
|
|
id="paintMode"
|
|
type="radio"
|
|
onChange={handleChange}
|
|
checked={mode === "painter"}
|
|
value="painter"
|
|
className="sr-only"
|
|
/>
|
|
<span className="text-xl">Paint mode</span>
|
|
</label>
|
|
<label
|
|
htmlFor="eraseMode"
|
|
className={`p-4 border rounded-lg mb-2
|
|
${mode === "eraser" ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"}
|
|
hover:bg-[#202b36] hover:cursor-pointer`}
|
|
>
|
|
<input
|
|
id="eraseMode"
|
|
type="radio"
|
|
onChange={handleChange}
|
|
checked={mode === "eraser"}
|
|
value={"eraser"}
|
|
className="sr-only"
|
|
/>
|
|
<span className="text-xl">Erase mode</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div className="p-2 border border-gray-600 rounded-lg flex flex-col">
|
|
<h2 className="text-2xl mb-2">Region Select</h2>
|
|
<>
|
|
{regions.map((region, idx) => {
|
|
const isSelected = selectedRegionIndex === idx;
|
|
const inputId = `region-${idx}`;
|
|
return (
|
|
<label
|
|
htmlFor={inputId}
|
|
key={region.name}
|
|
className={`items-center p-4 m-4 rounded-xl border flex flex-row justify-between
|
|
${isSelected ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"} hover:bg-[#202b36] hover:cursor-pointer`}
|
|
>
|
|
<div className="flex flex-row gap-4 items-center">
|
|
<input
|
|
type="radio"
|
|
checked={isSelected}
|
|
id={inputId}
|
|
name="region"
|
|
className="sr-only"
|
|
onChange={() => {
|
|
onSelectMode("painter");
|
|
onSelectRegion(idx);
|
|
}}
|
|
/>
|
|
<span className="text-xl">{region.name}</span>
|
|
</div>
|
|
<ColourPicker colour={region.brushColour} setColour={(c: string) => onChangeRegionColour(idx, c)} />
|
|
<p className="text-slate-400">{region.brushColour}</p>
|
|
</label>
|
|
);
|
|
})}
|
|
</>
|
|
</div>
|
|
|
|
<div className="p-2 border border-gray-600 rounded-lg flex flex-col md:col-span-2">
|
|
<div className="flex flex-col">
|
|
<h2 className="text-2xl mb-2">Actions</h2>
|
|
<button
|
|
onClick={handleResetClick}
|
|
className="mt-2 px-4 py-2 border border-red-600 rounded-md text-white bg-red-600 w-full md:w-[40%] hover:bg-red-700 hover:cursor-pointer"
|
|
>
|
|
Reset Regions
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default RegionSelector;
|