start demo screen

src/App.tsx

@@ -1,8 +1,22 @@
 import 'src/App.css';
 import { useState } from 'react';
-import Prototype3 from './components/Prototype3';
+import Prototype3 from 'src/components/Prototype3';
+import Button from 'src/ui/Button1';
 
 const App = () => {
+  const [playDemo, setPlayDemo] = useState(false);
+
+  if (!playDemo) {
+    return (
+      <div className="h-screen flex items-center justify-center">
+        <Button
+          onClick={() => setPlayDemo(true)}
+          text="START AMAZING DEMO!!!"
+        />
+      </div>
+    );
+  }
+
   return <Prototype3 />;
 };
 

src/components/Element/Element.tsx

@@ -33,7 +33,7 @@ const Element = ({ element, styleClass, children }: ElementProps) => {
           <div>
             <span className="text-xl">{element.text}</span>
             <br></br>
-            Priority: {10 - element.priority!}
+            Priority: {element.priority!}
           </div>
         );
       case 'text':
@@ -41,7 +41,7 @@ const Element = ({ element, styleClass, children }: ElementProps) => {
           <div>
             <span className="text-xl">{element.text}</span>
             <br></br>
-            Priority: {10 - element.priority!}
+            Priority: {element.priority!}
           </div>
         );
       case 'image':

src/components/Prototype3.tsx

@@ -49,7 +49,9 @@ const Prototype3 = () => {
       0.1,
     );
     dispatch(setElementsInGaze(elementsInGaze));
-    console.log('elements in gaze: ', elemsInGaze);
+    if (elementsInGaze.length > 0) {
+      console.log('elements in gaze: ', elemsInGaze);
+    }
   }, [mousePosition]);
 
   // run whenever messages array changes

src/ui/Button1.tsx

@@ -4,15 +4,17 @@ type ButtonProps = {
 };
 
 const Button = ({ text, onClick }: ButtonProps) => {
-  <button
-    onClick={onClick}
-    className="w-100 bg-transparent hover:bg-blue-500 
+  return (
+    <button
+      onClick={onClick}
+      className="w-100 bg-transparent hover:bg-blue-500 
     text-blue-700 font-semibold hover:text-white py-2 
     px-4 border border-blue-500 hover:border-transparent 
     rounded text-4xl"
-  >
-    {text}
-  </button>;
+    >
+      {text}
+    </button>
+  );
 };
 
 export default Button;