Merge pull request #32 from Matt-Hurd/mhurd/feat/prepare_for_routing

Mhurd/feat/prepare for routing
totum-tools · Aug 16, 2023 · db2313b · db2313b
2 parents 59b40c3 + c4a7c76
commit db2313b
Show file tree

Hide file tree

Showing 15 changed files with 34,507 additions and 37,474 deletions.
diff --git a/public/assets/example_route/totk_hundo_centum/route.json b/public/assets/example_route/totk_hundo_centum/route.json
diff --git a/src/components/MapDisplay/MapDisplay.tsx b/src/components/MapDisplay/MapDisplay.tsx
@@ -22,6 +22,7 @@ const MapDisplay: React.FC = () => {
   if (!route) return null;
 
   const activePoint = route.branches[branchIndex].points[pointIndex];
+  const activeThing = route.things[activePoint.thingId];
 
   const style = {
     height: "100%",
@@ -30,17 +31,14 @@ const MapDisplay: React.FC = () => {
 
   return (
     <MapContainer style={style} bounds={outerBounds} zoom={0} maxZoom={7} minZoom={-5} crs={crs} keyboard={false}>
-      <RouteMarkers
-        branch={route.branches[branchIndex]}
-        activeThing={route.things[activePoint.layerId][activePoint.thingId]}
-      />
+      <RouteMarkers branch={route.branches[branchIndex]} activeThing={activeThing} />
       <RouteLines />
       <MapUpdate activePoint={activePoint} />
       <Pane name="tile_bg" style={{ zIndex: 1 }}>
         <TileLayer url={route.game.layers[activePoint.layerId].imagePath} bounds={outerBounds} />
       </Pane>
       <Pane name="bg" style={{ zIndex: 0 }}>
-        <ImageOverlay url={route.url + route.game.layers[activePoint.layerId].baseImagePath} bounds={outerBounds} />
+        <ImageOverlay url={route.url + route.game.layers[activeThing.layerId].baseImagePath} bounds={outerBounds} />
       </Pane>
       <MapEvents />
     </MapContainer>

diff --git a/src/components/MapDisplay/MapUpdate.tsx b/src/components/MapDisplay/MapUpdate.tsx
@@ -14,10 +14,7 @@ export const MapUpdate: React.FC<MapUpdateProps> = ({ activePoint }) => {
 
   useEffect(() => {
     if (route)
-      map.setView([
-        -route.things[activePoint.layerId][activePoint.thingId].coordinates.x,
-        route.things[activePoint.layerId][activePoint.thingId].coordinates.y,
-      ]);
+      map.setView([-route.things[activePoint.thingId].coordinates.x, route.things[activePoint.thingId].coordinates.y]);
   }, [activePoint, map, route]);
 
   return null;

diff --git a/src/components/MapDisplay/RouteLines.tsx b/src/components/MapDisplay/RouteLines.tsx
@@ -13,16 +13,18 @@ const RouteLines: React.FC = () => {
 
   if (!route) return null;
 
+  const point = route.branches[branchIndex].points[pointIndex];
+  const thing = route.things[point.thingId];
+  const visibleLayerId = thing.layerId;
+
   const polylines = [];
-  const visibleLayerId = route.branches[branchIndex].points[pointIndex].layerId;
   let lastLayerId = null;
   let lastPosition = null;
 
   if (branchIndex > 0 && pointIndex === 0) {
     const previousBranch = route.branches[branchIndex - 1];
     const lastPointOfPreviousBranch = previousBranch.points[previousBranch.points.length - 1];
-    const lastThingOfPreviousBranch =
-      route.things[lastPointOfPreviousBranch.layerId][lastPointOfPreviousBranch.thingId];
+    const lastThingOfPreviousBranch = route.things[lastPointOfPreviousBranch.thingId];
     if (lastThingOfPreviousBranch) {
       lastLayerId = lastThingOfPreviousBranch.layerId;
       lastPosition = [-lastThingOfPreviousBranch.coordinates.x, lastThingOfPreviousBranch.coordinates.y];
@@ -33,7 +35,7 @@ const RouteLines: React.FC = () => {
 
   for (let i = hideCompletedMarkers ? Math.max(0, pointIndex - 1) : 0; i < activeBranch.points.length; i++) {
     const point = activeBranch.points[i];
-    const thing = route.things[point.layerId][point.thingId];
+    const thing = route.things[point.thingId];
 
     if (!thing) continue;
 
@@ -60,7 +62,7 @@ const RouteLines: React.FC = () => {
   if (branchIndex < route.branches.length - 1) {
     const nextBranch = route.branches[branchIndex + 1];
     const firstPointOfNextBranch = nextBranch.points[0];
-    const firstThingOfNextBranch = route.things[firstPointOfNextBranch.layerId][firstPointOfNextBranch.thingId];
+    const firstThingOfNextBranch = route.things[firstPointOfNextBranch.thingId];
     if (firstThingOfNextBranch) {
       if (firstThingOfNextBranch.layerId === visibleLayerId && lastPosition !== null) {
         const position = [-firstThingOfNextBranch.coordinates.x, firstThingOfNextBranch.coordinates.y];

diff --git a/src/components/MapDisplay/RouteMarkers.tsx b/src/components/MapDisplay/RouteMarkers.tsx
@@ -48,44 +48,47 @@ export const RouteMarkers: React.FC<RouteMarkersProps> = ({ branch, activeThing
   };
 
   useEffect(() => {
-    if (activeThing && markerRefs.current.has(activeThing.id)) {
-      markerRefs.current.get(activeThing.id).openPopup();
+    if (activeThing && markerRefs.current.has(activeThing.uid)) {
+      markerRefs.current.get(activeThing.uid).openPopup();
     }
   }, [activeThing]);
 
   if (!route) return null;
 
   return (
     <LayerGroup>
-      {branch.points.map((point, index) => (
-        <Marker
-          key={index}
-          opacity={
-            (hideCompletedMarkers ? pointIndex : 0) <= index &&
-            route.things[point.layerId][point.thingId].layerId === activeThing.layerId
-              ? 1
-              : 0
+      {branch.points.map((point, index) => {
+        const currentThing = route.things[point.thingId];
+        const { coordinates, name, type } = currentThing;
+        const isKorok = type === "Korok";
+
+        let opacity = 0;
+        if (currentThing.layerId === activeThing.layerId) {
+          if (hideCompletedMarkers && pointIndex <= index) {
+            opacity = 1;
+          } else if (!hideCompletedMarkers) {
+            opacity = 1;
           }
-          position={[
-            -route.things[point.layerId][point.thingId].coordinates.x,
-            route.things[point.layerId][point.thingId].coordinates.y,
-          ]}
-          icon={getIconForThing(route.things[point.layerId][point.thingId])}
-          ref={(ref) => markerRefs.current.set(point.thingId, ref)}
-        >
-          <Popup autoPan={false}>
-            {route.things[point.layerId][point.thingId].name}
-            <br />
-            {route.things[point.layerId][point.thingId].type === "Korok"
-              ? (route.things[point.layerId][point.thingId] as Korok).korokType
-              : point.shortNote}
-            <br />
-            {route.things[point.layerId][point.thingId].coordinates.y.toFixed(0)} |{" "}
-            {route.things[point.layerId][point.thingId].coordinates.x.toFixed(0)} |{" "}
-            {route.things[point.layerId][point.thingId].coordinates.z.toFixed(0)}
-          </Popup>
-        </Marker>
-      ))}
+        }
+
+        return (
+          <Marker
+            key={index}
+            opacity={opacity}
+            position={[-coordinates.x, coordinates.y]}
+            icon={getIconForThing(currentThing)}
+            ref={(ref) => markerRefs.current.set(point.thingId, ref)}
+          >
+            <Popup autoPan={false}>
+              {name}
+              <br />
+              {isKorok ? (currentThing as Korok).korokType : point.shortNote}
+              <br />
+              {coordinates.y.toFixed(0)} | {coordinates.x.toFixed(0)} | {coordinates.z.toFixed(0)}
+            </Popup>
+          </Marker>
+        );
+      })}
     </LayerGroup>
   );
 };
diff --git a/src/components/OverlayDisplay/OverlayDisplay.tsx b/src/components/OverlayDisplay/OverlayDisplay.tsx
@@ -59,7 +59,7 @@ class OverlayDisplay extends React.Component<OverlayDisplayProps> {
 
       for (let pidx = 0; pidx < pointCount; pidx++) {
         const point = branch.points[pidx];
-        const thing = route.things[point.layerId][point.thingId] as Thing;
+        const thing = route.things[point.thingId] as Thing;
 
         switch (thing.type) {
           case "Korok":

diff --git a/src/components/PointNotesDisplay/PointNotesDisplay.tsx b/src/components/PointNotesDisplay/PointNotesDisplay.tsx
@@ -30,7 +30,7 @@ const PointNotesDisplay: React.FC = () => {
     if (!route) return;
     const savedNotes = StorageManager.getItem(`${route.game}_${route.name}_${branchIndex}_${pointIndex}`);
     const point = route.branches[branchIndex].points[pointIndex];
-    const thing = route.things[point.layerId][point.thingId];
+    const thing = route.things[point.thingId];
     if (savedNotes) {
       setNotes(savedNotes);
     } else {
@@ -42,7 +42,7 @@ const PointNotesDisplay: React.FC = () => {
 
   const handleNotesChange = (content: string) => {
     const point = route.branches[branchIndex].points[pointIndex];
-    const thing = route.things[point.layerId][point.thingId];
+    const thing = route.things[point.thingId];
     if (content === "<p><br></p>" || content === "<p></p>" || content === `<p>${getDefaultNote(point, thing)}</p>`) {
       StorageManager.removeItem(`${route.game}_${route.name}_${branchIndex}_${pointIndex}`);
       return;

diff --git a/src/components/ProgressDisplay/ProgressDisplay.tsx b/src/components/ProgressDisplay/ProgressDisplay.tsx
@@ -48,12 +48,12 @@ const ProgressDisplay: React.FC = () => {
     for (let bidx = 0; bidx <= branchIndex; bidx++) {
       for (let pidx = 0; pidx < getMaxPointIdx(bidx, pointIndex); pidx++) {
         const point = route.branches[bidx].points[pidx];
-        const thing = route.things[point.layerId][point.thingId];
+        const thing = route.things[point.thingId];
 
         if (thing.type === "Shrine" && point.action !== "COMPLETE") continue;
 
-        if (!visitedThings.has(point.thingId + point.layerId)) {
-          visitedThings.add(point.thingId + point.layerId);
+        if (!visitedThings.has(point.thingId)) {
+          visitedThings.add(point.thingId);
           const type = thing.type;
           if (newCounts[type] !== undefined) {
             if (type === "Korok") {

diff --git a/src/components/RouteListDisplay/RouteListDisplay.tsx b/src/components/RouteListDisplay/RouteListDisplay.tsx
@@ -19,7 +19,7 @@ const RouteListDisplay: React.FC = () => {
 
   const getNote = (point: Point) => {
     if (point.shortNote !== "") return point.shortNote;
-    const thing = route.things[point.layerId][point.thingId];
+    const thing = route.things[point.thingId];
     if (thing.type === "Korok") {
       const korok = thing as Korok;
       return korok.korokType;
@@ -45,7 +45,7 @@ const RouteListDisplay: React.FC = () => {
                   ref={bIdx === branchIndex && pIdx === pointIndex ? activePointRef : null}
                 >
                   <div className="routeList__pointId">{pIdx}</div>
-                  <div className="routeList__pointName">{route.things[point.layerId][point.thingId].name}</div>
+                  <div className="routeList__pointName">{route.things[point.thingId].name}</div>
                   <div className="routeList__pointNotes">{getNote(point)}</div>
                 </div>
               ))}

diff --git a/src/components/UpcomingDisplay/UpcomingDisplay.tsx b/src/components/UpcomingDisplay/UpcomingDisplay.tsx
@@ -26,7 +26,7 @@ const UpcomingDisplay: React.FC = () => {
 
       for (let pidx = bidx === branchIndex ? pointIndex : 0; pidx < route.branches[bidx].points.length; pidx++) {
         const point = route.branches[bidx].points[pidx];
-        const thing = route.things[point.layerId][point.thingId];
+        const thing = route.things[point.thingId];
 
         if (thing.type === "Shrine" && point.action === "COMPLETE") {
           const shrine = thing as Shrine;

diff --git a/src/models/Point.ts b/src/models/Point.ts
@@ -7,7 +7,6 @@ enum Action {
 
 export default class Point {
   thingId: string = "";
-  layerId: string = "";
   shortNote: string = "";
   htmlNote: string = "";
   action: Action = Action.None;

diff --git a/src/models/Route.ts b/src/models/Route.ts
@@ -5,7 +5,7 @@ export default class Route {
   url: string;
   game: Game;
   branches: Branch[] = [];
-  things: Record<string, Record<string, Thing>> = {};
+  things: Record<string, Thing> = {};
 
   constructor(name: string, url: string, game: Game) {
     this.name = name;

diff --git a/src/models/Thing.ts b/src/models/Thing.ts
@@ -1,11 +1,12 @@
 export default class Thing {
-  id: string = "";
+  uid: string = "";
   name: string = "";
   coordinates: { x: number; y: number; z: number } = { x: 0, y: 0, z: 0 };
   layerId: string = "";
   dependencyIds: string[] = [];
   icon: string = "";
   type: string = "";
+  isNativeObject: boolean = true;
 }
 
 export class Korok extends Thing {

diff --git a/src/store/progressSlice.ts b/src/store/progressSlice.ts
@@ -19,7 +19,7 @@ export const incrementProgress = createAsyncThunk("progress/increment", async (_
 
   if (state.route.data) {
     const point = state.route.data.branches[progress.branchIndex].points[progress.pointIndex];
-    const thing = state.route.data.things[point.layerId][point.thingId];
+    const thing = state.route.data.things[point.thingId];
     if (
       liveSplit.isConnected() &&
       ((thing.type === "Shrine" && point.action === "COMPLETE") || thing.type === "Lightroot")
@@ -70,7 +70,7 @@ export const decrementProgress = createAsyncThunk("progress/decrement", async (_
     }
     if (newProgress) {
       const point = state.route.data.branches[newProgress.branchIndex].points[newProgress.pointIndex];
-      const thing = state.route.data.things[point.layerId][point.thingId];
+      const thing = state.route.data.things[point.thingId];
       if (
         liveSplit.isConnected() &&
         ((thing.type === "Shrine" && point.action === "COMPLETE") || thing.type === "Lightroot")

diff --git a/src/store/routeSlice.ts b/src/store/routeSlice.ts
@@ -1,5 +1,5 @@
 import { createAsyncThunk, createSlice, PayloadAction } from "@reduxjs/toolkit";
-import { Route, Thing } from "../models";
+import { Route } from "../models";
 import { AppDispatch, RootState } from ".";
 
 interface RouteState {
@@ -32,20 +32,6 @@ export const loadRoute = createAsyncThunk<Route, string, { dispatch: AppDispatch
   return response;
 });
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const convertPayloadToRoute = (payload: any) => {
-  const newThings: Record<string, Record<string, Thing>> = {};
-  payload.things.forEach((thing: Thing) => {
-    if (!newThings[thing.layerId]) {
-      newThings[thing.layerId] = {};
-    }
-    newThings[thing.layerId][thing.id] = thing;
-  });
-
-  payload.things = newThings;
-  return payload;
-};
-
 const routeSlice = createSlice({
   name: "route",
   initialState,
@@ -57,7 +43,7 @@ const routeSlice = createSlice({
       })
       .addCase(loadRoute.fulfilled, (state, action: PayloadAction<Route>) => {
         state.status = "succeeded";
-        state.data = convertPayloadToRoute(action.payload);
+        state.data = action.payload;
       })
       .addCase(loadRoute.rejected, (state, action) => {
         state.status = "failed";