Plot planner playground (#29)

* first draft * simplify plot planner position and add positions for all areas * add layer control + rename for consistency * show only plannable slimes in planner * adding icons + making planner work for other plottypes * WIP write plan to local storage and read plan from local storage * WIP write plan to local storage and read plan from local storage * fixing bugs, adding tooltip for user pins and adding plot planner info in sidebar * code clean up * code format * make popup look nicer * make tooltip look a bit nicer * linting --------- Co-authored-by: Brook J <[email protected]>
BrookJeynes · Aug 20, 2024 · 1355265 · 1355265
1 parent 07d9464
commit 1355265
Show file tree

Hide file tree

Showing 36 changed files with 945 additions and 139 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -14,7 +14,7 @@ module.exports = {
             "warn",
             { allowConstantExport: true },
         ],
-        "indent": ["error", 4],
+        "indent": ["error", 4, { "SwitchCase": 1 }],
         "quotes": [2, "double"],
     },
 }
diff --git a/public/icons/foods/fruits/cuberry.png b/public/icons/foods/fruits/cuberry.png
diff --git a/public/icons/foods/fruits/mintMango.png b/public/icons/foods/fruits/mintMango.png
diff --git a/public/icons/foods/fruits/mixedFruits.png b/public/icons/foods/fruits/mixedFruits.png
diff --git a/public/icons/foods/fruits/pogofruit.png b/public/icons/foods/fruits/pogofruit.png
diff --git a/public/icons/foods/fruits/pomegranite.png b/public/icons/foods/fruits/pomegranite.png
diff --git a/public/icons/foods/fruits/pricklePear.png b/public/icons/foods/fruits/pricklePear.png
diff --git a/public/icons/foods/meats/briarHen.png b/public/icons/foods/meats/briarHen.png
diff --git a/public/icons/foods/meats/henHen.png b/public/icons/foods/meats/henHen.png
diff --git a/public/icons/foods/meats/mixedMeats.png b/public/icons/foods/meats/mixedMeats.png
diff --git a/public/icons/foods/meats/paintedHen.png b/public/icons/foods/meats/paintedHen.png
diff --git a/public/icons/foods/meats/roostro.png b/public/icons/foods/meats/roostro.png
diff --git a/public/icons/foods/meats/seaHen.png b/public/icons/foods/meats/seaHen.png
diff --git a/public/icons/foods/meats/stonyHen.png b/public/icons/foods/meats/stonyHen.png
diff --git a/public/icons/foods/meats/thundercluck.png b/public/icons/foods/meats/thundercluck.png
diff --git a/public/icons/foods/veggies/carrot.png b/public/icons/foods/veggies/carrot.png
diff --git a/public/icons/foods/veggies/heartBeat.png b/public/icons/foods/veggies/heartBeat.png
diff --git a/public/icons/foods/veggies/mixedVeggies.png b/public/icons/foods/veggies/mixedVeggies.png
diff --git a/public/icons/foods/veggies/oddOnion.png b/public/icons/foods/veggies/oddOnion.png
diff --git a/public/icons/foods/veggies/waterLettuce.png b/public/icons/foods/veggies/waterLettuce.png
diff --git a/public/icons/plots/coop.png b/public/icons/plots/coop.png
diff --git a/public/icons/plots/corral.png b/public/icons/plots/corral.png
diff --git a/public/icons/plots/garden.png b/public/icons/plots/garden.png
diff --git a/public/icons/plots/incinerator.png b/public/icons/plots/incinerator.png
diff --git a/public/icons/plots/pond.png b/public/icons/plots/pond.png
diff --git a/public/icons/plots/silo.png b/public/icons/plots/silo.png
diff --git a/src/App.tsx b/src/App.tsx
@@ -13,6 +13,7 @@ import Sidebar from "./components/Sidebar";
 import { icon_template } from "./globals";
 import { LocalStoragePin, Pin } from "./types";
 import { MapUserPins } from "./components/UserPins";
+import { PlotPlanners } from "./components/planner/PlotPlanner";
 
 function App() {
     const [show_log, setShowLog] = useState(false);
@@ -54,6 +55,7 @@ function App() {
         );
     });
 
+
     return (
         <div>
             <div
@@ -80,6 +82,7 @@ function App() {
                 ]}
                 style={{ height: "100vh", width: "100%", zIndex: 1 }}
             >
+
                 {selected_pin &&
                     <MapUserPins
                         selected_pin={selected_pin!}
@@ -110,6 +113,9 @@ function App() {
                     <LayersControl.Overlay checked name="User Pins">
                         <LayerGroup>{user_pin_list}</LayerGroup>
                     </LayersControl.Overlay>
+                    <LayersControl.Overlay checked name="Plot Planner">
+                        <LayerGroup>{PlotPlanners}</LayerGroup>
+                    </LayersControl.Overlay>
                 </LayersControl>
 
                 <TileLayer url="map/{z}/{x}/{y}.png" noWrap={true} />

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
@@ -52,6 +52,17 @@ export default function Sidebar({
                     <hr />
 
                     <IslandInfo />
+
+                    <hr />
+
+                    <div>
+                        <div className="flex flex-col md:flex-row gap-2 md:gap-0 justify-between mb-1 md:items-center">
+                            <h2 className="text-lg font-bold">Plot Planner</h2>
+                        </div>
+                        <div className="flex flex-wrap md:items-center">
+                            <h2>You can click on any plot on the map to start planning!</h2>
+                        </div>
+                    </div>
                 </div>
             </div>
 

diff --git a/src/components/UserPins.tsx b/src/components/UserPins.tsx
@@ -2,6 +2,7 @@ import { useState } from "react";
 
 import { pins } from "../data/pins";
 import { LocalStoragePin, Pin } from "../types";
+import { FaQuestionCircle } from "react-icons/fa";
 
 import { useMapEvents } from "react-leaflet";
 
@@ -27,12 +28,6 @@ export function SidebarPins({
         <div>
             <div className="flex flex-col md:flex-row gap-2 md:gap-0 justify-between mb-5 md:items-center">
                 <div className="flex items-center">
-                    {selected_pin && <img
-                        src={`icons/${selected_pin.icon}`}
-                        alt={`${selected_pin.icon} pin icon`}
-                        className="w-7 mr-2"
-                    />}
-
                     <h2 className="text-lg font-bold">User Pins</h2>
                 </div>
                 <select
@@ -44,15 +39,34 @@ export function SidebarPins({
                 </select>
             </div>
 
-            <div className="flex flex-wrap gap-2">
+            <div className="flex flex-wrap gap-2 md:gap-0 space-x-3 mb-5 md:items-center">
+                <h2>Selected icon to pin:</h2>
+
+
                 {
-                    Object.keys(pins).map((key) => {
-                        if (pins[key].type === selected_type) {
-                            return <PinIcon key={key} pin={pins[key]} setSelectedPin={setSelectedPin} />
-                        }
+                    selected_pin ?
+                        <img
+                            src={`icons/${selected_pin.icon}`}
+                            alt={`${selected_pin.icon} pin icon`}
+                            className="w-7 mr-2"
+                        /> :
+                        <div className="tooltip">
+                            <FaQuestionCircle size={25} />
+                            <span className="tooltiptext">Click on the icon below that you want to pin</span>
+                        </div>
+                }
+            </div>
+
 
-                        return null;
-                    })
+            <div className="flex flex-wrap gap-2">
+                {
+                    pins[selected_type].map((key: Pin) =>
+                        <PinIcon
+                            key={key.name}
+                            pin={key}
+                            setSelectedPin={setSelectedPin}
+                        />
+                    )
                 }
             </div>
         </div>
@@ -74,6 +88,7 @@ function PinIcon({
             onClick={() => setSelectedPin(pin)}
         >
             <img
+                title={pin.type}
                 src={`icons/${pin.icon}`}
                 alt={`${pin.icon} pin icon`}
                 style={{ width: 40 }}

diff --git a/src/components/planner/Planner.tsx b/src/components/planner/Planner.tsx
@@ -0,0 +1,189 @@
+import L from "leaflet";
+
+import { LocalStoragePlotPlan, Pin, PlannerIcons, PlotOptions } from "../../types";
+import { icon_template } from "../../globals";
+
+enum Side {
+    left,
+    right,
+}
+
+export default function Planner({
+    plotType,
+    icons,
+    setIcons,
+    plotPlan,
+    setPlotPlan,
+}: {
+    plotType: PlotOptions;
+    icons: PlannerIcons;
+    setIcons: React.Dispatch<React.SetStateAction<PlannerIcons>>;
+    plotPlan: LocalStoragePlotPlan;
+    setPlotPlan: (a: LocalStoragePlotPlan) => void;
+}) {
+    function onChange(eventValue: number, side: Side, options: Pin[]) {
+        const val = options[eventValue];
+
+        if (side === Side.left) {
+            setIcons({
+                ...icons,
+                left:
+                    val !== undefined
+                        ? {
+                            name: val.name,
+                            icon: L.icon({
+                                ...icon_template,
+                                iconUrl: val.icon,
+                            }),
+                        }
+                        : icons.right === null
+                            ? {
+                                name: plotType.name,
+                                icon: L.icon({
+                                    ...icon_template,
+                                    iconUrl: plotType.icon,
+                                }),
+                            }
+                            : null,
+            });
+
+            setPlotPlan({ ...plotPlan, selectedOptionA: eventValue });
+        } else {
+            setIcons({
+                left:
+                    val !== undefined
+                        ? icons.left !== null && icons.left.icon.options.iconUrl.includes("plots")
+                            ? null
+                            : icons.left
+                        : {
+                            name: plotType.name,
+                            icon: L.icon({
+                                ...icon_template,
+                                iconUrl: plotType.icon,
+                            }),
+                        },
+                right:
+                    val !== undefined
+                        ? {
+                            name: val.name,
+                            icon: L.icon({
+                                ...icon_template,
+                                iconUrl: val.icon,
+                            }),
+                        }
+                        : null,
+            });
+            setPlotPlan({ ...plotPlan, selectedOptionB: eventValue });
+        }
+    }
+
+    return (
+        <div className="flex justify-between gap-5">
+            {(plotType?.optionsA || plotType?.optionsB) ? (
+                <div className="flex flex-col gap-2">
+                    {plotType?.optionsA ? (
+                        plotType.optionsA.length === 1 ? (
+                            <div className="flex flex-col gap-1">
+                                <h2 className="ml-2 text-lg">Slime?</h2>
+                                <div className="flex flex-row gap-1">
+                                    <input
+                                        type="checkbox"
+                                        checked={plotPlan.selectedOptionA === 0}
+                                        onChange={(e) =>
+                                            e.target.checked
+                                                ? onChange(0, Side.left, plotType.optionsA)
+                                                : onChange(-1, Side.left, plotType.optionsA)
+                                        }
+                                        name={plotType.optionsA[0].name}
+                                    />
+                                    <label className="ml-2">{plotType.optionsAName}</label>
+                                </div>
+                            </div>
+                        ) : (
+                            <div className="flex flex-col gap-1">
+                                <h2 className="ml-2 text-lg">{plotType.optionsAName}</h2>
+                                <select
+                                    onChange={(e) => onChange(e.target.value, Side.left, plotType.optionsA)}
+                                    className="bg-transparent outline outline-1 p-1"
+                                    value={plotPlan.selectedOptionA ? plotPlan.selectedOptionA : "Empty"}
+                                >
+                                    <option>Empty</option>
+                                    {plotType.optionsA.map((resource, index) => (
+                                        <option key={index} value={index}>
+                                            {resource.name}
+                                        </option>
+                                    ))}
+                                </select>
+                            </div>
+                        )
+                    ) : (
+                        <></>
+                    )}
+
+                    {plotType?.optionsB ? (
+                        plotType.optionsB.length === 1 ? (
+                            <div className="flex flex-col gap-1">
+                                <h2 className="ml-2 text-lg">Slime?</h2>
+                                <div className="flex flex-row gap-1">
+                                    <input
+                                        type="checkbox"
+                                        checked={plotPlan.selectedOptionB === 0}
+                                        onChange={(e) =>
+                                            e.target.checked
+                                                ? onChange(0, Side.right, plotType.optionsB)
+                                                : onChange(-1, Side.right, plotType.optionsB)
+                                        }
+                                        name={plotType.optionsB[0].name}
+                                    />
+                                    <label className="ml-2">{plotType.optionsBName}</label>
+                                </div>
+                            </div>
+                        ) : (
+                            <div className="flex flex-col gap-1">
+                                <h2 className="ml-2 text-lg">{plotType.optionsBName}</h2>
+                                <select
+                                    onChange={(e) => onChange(e.target.value, Side.right, plotType.optionsB)}
+                                    className="bg-transparent outline outline-1 p-1"
+                                    value={plotPlan.selectedOptionB ? plotPlan.selectedOptionB : "Empty"}
+                                >
+                                    <option>Empty</option>
+                                    {plotType.optionsB.map((resource, index) => (
+                                        <option key={index} value={index}>
+                                            {resource.name}
+                                        </option>
+                                    ))}
+                                </select>
+                            </div>
+                        )
+                    ) : (
+                        <></>
+                    )}
+                </div>) : (<></>)}
+
+            {plotType?.upgrades.length > 0 ? (
+                <div className="flex flex-col gap-1">
+                    <h2 className="ml-2 text-lg">Upgrades</h2>
+                    {plotType.upgrades.map((additionalOption, index) => (
+                        <div key={index}>
+                            <input
+                                type="checkbox"
+                                checked={plotPlan.selectedUpgrades.includes(index)}
+                                onChange={(e) => {
+                                    let upgrades;
+                                    e.target.checked
+                                        ? (upgrades = [...plotPlan.selectedUpgrades, index])
+                                        : (upgrades = plotPlan.selectedUpgrades.filter((value) => value !== index));
+                                    setPlotPlan({ ...plotPlan, selectedUpgrades: upgrades });
+                                }}
+                                name={additionalOption}
+                            />
+                            <label className="ml-2">{additionalOption}</label>
+                        </div>
+                    ))}
+                </div>
+            ) : (
+                <></>
+            )}
+        </div>
+    );
+}