FKVR-134: Link Titles

src/components/Link.jsx

@@ -4,34 +4,62 @@
  */
 
 import React, { PropTypes } from 'react';
+import { Entity } from 'aframe-react';
 import ReactGA from 'react-ga';
 
 require('aframe-look-at-component');
 
 /**
  * Link hot spot that, when clicked, navigates the user to a different scene.
  */
-const Link = props => (
+const Link = ({ id, title, to, color, position: { x, y, z }, src }) => (
   <a-circle
+    id={id}
+    color={color}
+    src={src}
     onClick={() => {
       ReactGA.event({
         category: 'Hotspot',
         action: 'Clicked Link',
-        label: props.to,
+        label: to,
       });
-      window.location.hash = props.to;
+      window.location.hash = to;
     }}
-    {...props}
-    position={`${props.position.x} ${props.position.y} ${props.position.z}`}
+    position={`${x} ${y} ${z}`}
     look-at="#camera"
-  />
+  >
+    <Entity
+      id={`${id}--label`}
+      scale={{ x: 0.6, y: 0.6, z: 0.6 }}
+      position={{ x: 0, y: -2, z: 0 }}
+      geometry={{
+        primitive: 'plane',
+        width: 'auto',
+        height: 2.5,
+      }}
+      material={{
+        color: '#000000',
+        transparent: true,
+        opacity: 0.5,
+      }}
+      text={{
+        color: '#FFFFFF',
+        align: 'center',
+        value: title,
+        width: title.length,
+        wrapCount: title.length,
+        zOffset: 1,
+      }}
+    />
+  </a-circle>
 );
 
 Link.propTypes = {
   color: PropTypes.string,
   id: PropTypes.string,
   to: PropTypes.string,
   src: PropTypes.string,
+  title: PropTypes.string,
   position: PropTypes.shape({
     x: PropTypes.integer,
     y: PropTypes.integer,
@@ -45,6 +73,7 @@ Link.defaultProps = {
   to: '#',
   position: { x: 0, y: 0, z: -10 },
   src: require('../assets/images/jpg/steps.jpg'),
+  title: 'Please specify a title',
 };
 
 export default Link;

src/components/scenes/Mike-office.jsx

@@ -62,11 +62,13 @@ const MikeOffice = {
         id="link__suzy-office"
         to="suzy-office"
         position={{ x: -16.27, y: -5.02, z: -2.50 }}
+        title="Suzy's Office"
       />
       <Link
         id="link__mike-workshop"
         to="mike-workshop"
         position={{ x: 20.26, y: -6.87, z: 6.09 }}
+        title="Mike's Workshop"
       />
     </Entity>
   ),

src/components/scenes/Mike-workshop.jsx

@@ -104,6 +104,7 @@ const MikeWorkshop = {
         id="link__mike-office"
         to="mike-office"
         position={{ x: 14.50, y: -1.92, z: 16.32 }}
+        title="Mike's Office"
       />
     </Entity>
   ),

src/components/scenes/Suzy-backyard.jsx

@@ -41,7 +41,12 @@ const SuzyOne = {
         to="suzy-office"
         image={require('../../assets/images/png/suzy-shedquarters.png')}
       />
-      <Link id="hotspot-house-3" to={'suzy-house'} position={{ x: -16, y: 3, z: 21.5 }} />
+      <Link
+        id="hotspot-house-3"
+        to="suzy-house"
+        position={{ x: -16, y: 3, z: 21.5 }}
+        title="Suzy's House"
+      />
       <Modal
         id="modal__treehouse"
         title="Web Chef Club House!"

src/components/scenes/Suzy-office.jsx

@@ -51,8 +51,18 @@ const SuzyTwo = {
         mp3={require('../../assets/sounds/suzy-office-space.mp3')}
         position={{ x: -0.51, y: 17.65, z: -8.48 }}
       />
-      <Link id="link__mike-office" to="mike-office" position={{ x: -13.9, y: -3.05, z: 6.48 }} />
-      <Link id="hotspot__backyard" to="suzy-backyard" position={{ x: 0.86, y: -7.10, z: -17.73 }} />
+      <Link
+        id="link__mike-office"
+        to="mike-office"
+        position={{ x: -13.9, y: -3.05, z: 6.48 }}
+        title="Mike's Office"
+      />
+      <Link
+        id="hotspot__backyard"
+        to="suzy-backyard"
+        position={{ x: 0.86, y: -7.10, z: -17.73 }}
+        title="Suzy's Backyard"
+      />
     </Entity>
   ),
 };