Button interactions

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "pwa-chrome",
+      "request": "launch",
+      "name": "Launch Chrome against localhost",
+      "url": "http://localhost:8080",
+      "webRoot": "${workspaceFolder}"
+    }
+  ]
+}

src/components/Interaction.tsx

@@ -0,0 +1,138 @@
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+import {
+  InfoInteraction,
+  LinkInteraction,
+  TraverseInteraction,
+} from "../types/Interactions";
+import { useState } from "react";
+
+import Parser from "../modules/Parser";
+import JohnsYard from "../test/johns-yard.json";
+import { TourGraph } from "../types/TourGraph";
+
+const buttonCss = css`
+  padding: 7px 15px;
+  background-color: #0099ff;
+  color: white;
+  border: none;
+  width: 100%;
+  cursor: pointer;
+  transition: transform 0.2s;
+  border-radius: 10px;
+  margin: 5px 0;
+  font-size: 15px;
+
+  &:active {
+    transform: scale(0.95);
+  }
+
+  svg,
+  span {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  span {
+    margin-left: 5px;
+    font-weight: 700;
+  }
+`;
+
+const infoCss = css`
+  padding: 7px 15px;
+  background-color: #0099ff;
+  color: white;
+  border: none;
+  width: 100%;
+  /* cursor: pointer; */
+  transition: transform 0.2s;
+  border-radius: 10px;
+  margin: 5px 0;
+  font-size: 15px;
+
+  /* &:active {
+    transform: scale(0.95);
+  } */
+
+  svg,
+  span {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  span {
+    margin-left: 5px;
+    font-weight: 700;
+  }
+`;
+
+interface InfoInteractionProps {
+  interaction: InfoInteraction;
+}
+
+interface LinkInteractionProps {
+  interaction: LinkInteraction;
+}
+
+interface TraverseInteractionProps {
+  interaction: TraverseInteraction;
+  setLocation: any;
+}
+
+// Remove onClicks from class and set them in here
+export function InfoInteractionC(props: InfoInteractionProps) {
+  const { interaction } = props;
+  const [toggleButton, setToggleButton] = useState(false);
+  const { Icon, information } = interaction;
+  const onClick = () => setToggleButton(!toggleButton);
+
+  return (
+    <>
+      <button css={buttonCss} onClick={onClick}>
+        <Icon />
+        <span>{interaction.buttonText}</span>
+      </button>
+      {toggleButton && <div css={infoCss}>{information}</div>}
+    </>
+  );
+}
+
+export function LinkInteractionC(props: LinkInteractionProps) {
+  const { interaction } = props;
+  const { Icon, onClick } = interaction;
+
+  return (
+    <>
+      <button css={buttonCss} onClick={onClick}>
+        <Icon />
+        <span>{interaction.buttonText}</span>
+      </button>
+    </>
+  );
+}
+
+const getLocationFromId = (graph: TourGraph, id: number) => {
+  if (!graph) return null;
+  return graph.locations.find((loc) => loc.locationId === id) || null;
+};
+
+export function TraverseInteractionC(props: TraverseInteractionProps) {
+  const { interaction, setLocation } = props;
+  const { Icon } = interaction;
+
+  //   TODO: Instead of calling this again change to an emitter function
+  let parser = new Parser();
+  let tourGraphs = parser.getGraph(JohnsYard);
+  let graph = tourGraphs[0];
+  let location = getLocationFromId(graph, interaction.destinationId);
+
+  return (
+    <>
+      <button css={buttonCss} onClick={() => setLocation(location)}>
+        <Icon />
+        <span>{interaction.buttonText}</span>
+      </button>
+    </>
+  );
+}

src/components/Overlay.tsx

@@ -32,6 +32,7 @@ interface OverlayProps {
   position: Vector3;
   distanceFactor: number;
   onClick(): void;
+  setLocation(): any;
   title: string;
   description: string;
   interactions: Interaction[];
@@ -45,6 +46,7 @@ export default function Overlay(props: OverlayProps) {
     title,
     description,
     interactions,
+    setLocation,
   } = props;
 
   return (
@@ -53,7 +55,10 @@ export default function Overlay(props: OverlayProps) {
         <div css={controlPanelCss} onClick={onClick}>
           <h2 css={titleCss}>{title}</h2>
           <p css={descriptionCss}>{description}</p>
-          <OverlayInteractions interactions={interactions} />
+          <OverlayInteractions
+            interactions={interactions}
+            setLocation={setLocation}
+          />
         </div>
       </Html>
     </mesh>

src/components/OverlayInteractions.tsx

@@ -1,80 +1,36 @@
 /** @jsxImportSource @emotion/react */
-import { css } from "@emotion/react";
-import { Link, ArrowRight, Info } from "react-feather";
 import {
   Interaction,
+  InfoInteraction,
   LinkInteraction,
   TraverseInteraction,
 } from "../types/Interactions";
-
-const buttonCss = css`
-  padding: 7px 15px;
-  background-color: #0099ff;
-  color: white;
-  border: none;
-  width: 100%;
-  cursor: pointer;
-  transition: transform 0.2s;
-  border-radius: 10px;
-  margin: 5px 0;
-  font-size: 15px;
-
-  &:active {
-    transform: scale(0.95);
-  }
-
-  svg,
-  span {
-    display: inline-block;
-    vertical-align: middle;
-  }
-
-  span {
-    margin-left: 5px;
-    font-weight: 700;
-  }
-`;
-
-// returns the proper icon for each interaction
-function returnIcon(interaction: Interaction) {
-  if (interaction instanceof LinkInteraction) {
-    return Link;
-  } else if (interaction instanceof TraverseInteraction) {
-    return ArrowRight;
-  }
-  // default to the Info icon
-  return Info;
-}
-
-// opens a new tab with the given link
-function linkOnClick(link: string) {
-  window.open(link, "_blank");
-}
-
-// returns the proper onClick method for each interaction
-function returnOnClick(interaction: Interaction) {
-  if (interaction instanceof LinkInteraction) {
-    return () => linkOnClick(interaction.url);
-  } else {
-    return () => {};
-  }
-}
-
+import {
+  LinkInteractionC,
+  InfoInteractionC,
+  TraverseInteractionC,
+} from "./Interaction";
 interface OverlayInteractionsProps {
   interactions: Interaction[];
+  setLocation: any;
 }
 
-export default function OverlayInteractions(args: OverlayInteractionsProps) {
-  let { interactions } = args;
-  let buttons = interactions.map((interaction, key) => {
-    const Icon = returnIcon(interaction);
-    let onClick = returnOnClick(interaction);
-    return (
-      <button css={buttonCss} key={key} onClick={onClick}>
-        <Icon />
-        <span>{interaction.buttonText}</span>
-      </button>
-    );
+export default function OverlayInteractions(props: OverlayInteractionsProps) {
+  let { interactions, setLocation } = props;
+  let buttons = interactions.map((interaction: Interaction, key) => {
+    if (interaction instanceof InfoInteraction) {
+      return <InfoInteractionC interaction={interaction} key={key} />;
+    } else if (interaction instanceof LinkInteraction) {
+      return <LinkInteractionC interaction={interaction} key={key} />;
+    } else if (interaction instanceof TraverseInteraction) {
+      return (
+        <TraverseInteractionC
+          interaction={interaction}
+          setLocation={setLocation}
+          key={key}
+        />
+      );
+    }
   });
 
   return <div>{buttons}</div>;

src/components/Panorama.tsx

@@ -4,48 +4,44 @@ import Overlay from "./Overlay";
 import { Location } from "../types/Location";
 import { OverlayData } from "../types/OverlayData";
 
-let textureCache: Texture | null = null;
+// let textureCache: Texture | null = null;
 
 interface PanoramaProps {
   location: Location;
+  setLocation: any;
 }
 
 export default function Panorama(props: PanoramaProps) {
-  let { location } = props;
+  let { location, setLocation } = props;
   let { image, overlays } = location;
 
   // This reference will give us direct access to the mesh
   const mesh = useRef();
   let [texture, setTexture] = useState(new Texture());
 
   function loadPanorama() {
-    if (textureCache) {
-      setTexture(textureCache);
-      return;
-    }
+    // removed since texture cache will always have a value after init
+    // if (textureCache) {
+    //   setTexture(textureCache);
+    //   return;
+    // }
     import(`../assets/${image}`).then((res) => {
       const texture = new TextureLoader().load(res.default);
-      textureCache = texture;
+      // textureCache = texture;
       setTexture(texture);
     });
   }
 
   useEffect(loadPanorama, [image]);
 
-  // const [interaction, setInteraction] = useState("");
-
-  // const handleInteraction = (i) => {
-  //   setInteraction(i);
-  // };
-
   let overlayComponents = overlays.map((overlay: OverlayData) => {
     return (
       <Overlay
         {...overlay}
         distanceFactor={12}
         key={overlay.title}
         onClick={() => {}}
-        // onClick={() => handleInteraction(overlay.information)}
+        setLocation={setLocation}
       />
     );
   });

src/components/Tour.tsx

@@ -75,7 +75,7 @@ export default function Tour() {
           {!isPath && (
             <>
               <pointLight intensity={2} position={[7, 5, 1]} />
-              <Panorama location={location} />
+              <Panorama location={location} setLocation={setLocation} />
               {/* <Panorama location={location} onPathChosen={handlePathChoice} /> */}
               <OrbitControls
                 position={[0, 0, 0]}

src/test/johns-yard.json

@@ -21,6 +21,11 @@
                 "button_text": "What is this?",
                 "information": "Your mom. Just kidding, it's a truck."
               },
+              {
+                "interaction_type": "SHOWINFO",
+                "button_text": "Testtesttest",
+                "information": "Nice"
+              },
               {
                 "interaction_type": "LINK",
                 "button_text": "Go Google it",