From e595cc1135a177bc49d12c669730ead34b85cac4 Mon Sep 17 00:00:00 2001
From: Orion Reed <orionreedt@gmail.com>
Date: Mon, 25 Mar 2024 01:13:53 -0700
Subject: [PATCH] some fixes

---
 package.json                                  |  6 +-
 src/App.tsx                                   | 81 ++++-----------
 src/css/style.css                             |  8 ++
 .../causal-islands-integration-domain.pdf     |  0
 src/ts/components/Contact.tsx                 | 13 ++-
 src/ts/components/Default.tsx                 | 10 +-
 src/ts/components/Toggle.tsx                  |  2 -
 src/ts/hooks/usePhysics.ts                    | 99 +++++++++++++++++++
 src/ts/shapes/HTMLShapeUtil.tsx               |  2 +-
 src/utils.tsx                                 | 88 ++++++-----------
 10 files changed, 173 insertions(+), 136 deletions(-)
 rename src/{artifacts => public/artifact}/causal-islands-integration-domain.pdf (100%)
 create mode 100644 src/ts/hooks/usePhysics.ts

diff --git a/package.json b/package.json
index 6852859..1c92dce 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,8 @@
 		"@dimforge/rapier2d": "latest",
 		"@tldraw/tldraw": "2.0.2",
 		"react": "^18.2.0",
-		"react-dom": "^18.2.0"
+		"react-dom": "^18.2.0",
+		"react-router-dom": "^6.22.3"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "1.4.1",
@@ -23,10 +24,9 @@
 		"@types/react": "^18.2.15",
 		"@types/react-dom": "^18.2.7",
 		"@vitejs/plugin-react": "^4.0.3",
-		"concurrently": "^8.2.0",
 		"typescript": "^5.0.2",
 		"vite": "^4.4.5",
 		"vite-plugin-top-level-await": "^1.3.1",
 		"vite-plugin-wasm": "^3.2.2"
 	}
-}
\ No newline at end of file
+}
diff --git a/src/App.tsx b/src/App.tsx
index f7d0bae..f7e80a4 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,76 +7,35 @@ import { HTMLShape } from "./ts/shapes/HTMLShapeUtil";
 import { Default } from "./ts/components/Default";
 import { Canvas } from "./ts/components/Canvas";
 import { Toggle } from "./ts/components/Toggle";
-import { gatherElementsInfo } from "./utils";
+import { usePhysics } from "./ts/hooks/usePhysics.ts"
+import { createShapes } from "./utils";
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { Contact } from "./ts/components/Contact.tsx";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
 
 function App() {
-	const [isPhysicsEnabled, setIsPhysicsEnabled] = useState(false);
-	const [elementsInfo, setElementsInfo] = useState<any[]>([]);
-	const [fadeClass, setFadeClass] = useState(''); // State to control the fade class
 
-	useEffect(() => {
-		const togglePhysics = async () => {
-			if (!isPhysicsEnabled) {
-				const info = await gatherElementsInfo();
-				setElementsInfo(info);
-				setIsPhysicsEnabled(true); // Enable physics only after gathering info
-				setFadeClass('fade-out'); // Start fading out the Default component
-				// setTimeout(() => setFadeClass('fade-in'), 500); // Wait for fade-out to complete before fading in Canvas
-			} else {
-				setIsPhysicsEnabled(false);
-				setElementsInfo([]); // Reset elements info when disabling physics
-				setFadeClass(''); // Reset fade class to show Default component normally
-			}
-		};
-
-		window.addEventListener('togglePhysicsEvent', togglePhysics);
-
-		return () => {
-			window.removeEventListener('togglePhysicsEvent', togglePhysics);
-		};
-	}, [isPhysicsEnabled]);
-
-
-
-	const shapes: HTMLShape[] = elementsInfo.map((element) => ({
-		id: createShapeId(),
-		type: 'html',
-		x: element.x,
-		y: element.y,
-		props: {
-			w: element.w,
-			h: element.h,
-			html: element.html,
-		}
-	}))
-
-	shapes.push({
-		id: createShapeId(),
-		type: 'geo',
-		x: 0,
-		y: window.innerHeight,
-		props: {
-			w: window.innerWidth,
-			h: 50,
-			color: 'grey',
-			fill: 'solid'
-		},
-		meta: {
-			fixed: true
-		}
-	})
 
 	return (
 		<React.StrictMode>
-			<Toggle />
-			<div style={{ zIndex: 999999 }} className={`default-component ${fadeClass}`}>
-				{<Default />}
-			</div>
-			{isPhysicsEnabled && elementsInfo.length > 0 ? <Canvas shapes={shapes} /> : null}
+			<BrowserRouter>
+				<Routes>
+					<Route path="/" element={<Home />} />
+					<Route path="/card/contact" element={<Contact />} />
+				</Routes>
+			</BrowserRouter>
 		</React.StrictMode>
 	);
 };
 
-
+function Home() {
+	const { isPhysicsEnabled, elementsInfo, fadeClass } = usePhysics();
+	const shapes = createShapes(elementsInfo)
+	return (
+		<><Toggle />
+			<div style={{ zIndex: 999999 }} className={`default-component ${fadeClass}`}>
+				{<Default />}
+			</div>
+			{isPhysicsEnabled && elementsInfo.length > 0 ? <Canvas shapes={shapes} /> : null}</>)
+}
\ No newline at end of file
diff --git a/src/css/style.css b/src/css/style.css
index 8bf3b75..c2f7b2a 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -64,6 +64,14 @@ p {
   font-size: 1.1em;
   font-variation-settings: "wght" 350;
 }
+
+a {
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
 .dinkus {
   display: block;
   text-align: center;
diff --git a/src/artifacts/causal-islands-integration-domain.pdf b/src/public/artifact/causal-islands-integration-domain.pdf
similarity index 100%
rename from src/artifacts/causal-islands-integration-domain.pdf
rename to src/public/artifact/causal-islands-integration-domain.pdf
diff --git a/src/ts/components/Contact.tsx b/src/ts/components/Contact.tsx
index 5838f93..f592cd2 100644
--- a/src/ts/components/Contact.tsx
+++ b/src/ts/components/Contact.tsx
@@ -1,14 +1,17 @@
-import React from "react";
-
-function Contact() {
+export function Contact() {
   return (
-    <div>
+    <main>
+      <header>
+        <a href="/">
+          Orion Reed
+        </a>
+      </header>
       <h1>Contact</h1>
       <p>Twitter: <a href="https://twitter.com/OrionReedOne">@OrionReedOne</a></p>
       <p>Mastodon: <a href="https://hci.social/@orion">orion@hci.social</a></p>
       <p>Email: <a href="mailto:me@orionreed.com">me@orionreed.com</a></p>
       <p>GitHub: <a href="https://github.com/orionreed">OrionReed</a></p>
-    </div>
+    </main>
 
   );
 }
diff --git a/src/ts/components/Default.tsx b/src/ts/components/Default.tsx
index f0f16c2..3fe1071 100644
--- a/src/ts/components/Default.tsx
+++ b/src/ts/components/Default.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 export function Default() {
   return (
     <main>
@@ -24,9 +22,9 @@ export function Default() {
 
       <h1>My work</h1>
       <p>
-        Alongside my independent work I am a researcher at <a href="https://block.science/">Block Science</a> building
-        <i>knowledge organisation infrastructure</i> and at <a href="https://economicspace.agency/">ECSA</a> working on
-        <i>computational media</i>. I am also part of the nascent <a href="https://libcomp.org/">Liberatory Computing</a>
+        Alongside my independent work I am a researcher at <a href="https://block.science/">Block Science</a> building{' '}
+        <i>knowledge organisation infrastructure</i> and at <a href="https://economicspace.agency/">ECSA</a> working on{' '}
+        <i>computational media</i>. I am also part of the nascent <a href="https://libcomp.org/">Liberatory Computing</a>{' '}
         collective and a co-organiser of the <a href="https://canvasprotocol.org/">OCWG</a>.
       </p>
 
@@ -42,7 +40,7 @@ export function Default() {
       <h1>Talks</h1>
       <ul>
         <li><a
-          href="objects/causal-islands-integration-domain.pdf">Spatial
+          href="artifact/causal-islands-integration-domain.pdf">Spatial
           Canvases: Towards an Integration Domain for HCI @ Causal Islands LA</a></li>
         <li><a
           href="https://www.youtube.com/watch?v=-q-kk-NMFbA">Knowledge Organisation Infrastructure Demo @ NPC
diff --git a/src/ts/components/Toggle.tsx b/src/ts/components/Toggle.tsx
index d7614f8..b1b3833 100644
--- a/src/ts/components/Toggle.tsx
+++ b/src/ts/components/Toggle.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 export function Toggle() {
   return (
     <>
diff --git a/src/ts/hooks/usePhysics.ts b/src/ts/hooks/usePhysics.ts
new file mode 100644
index 0000000..da27601
--- /dev/null
+++ b/src/ts/hooks/usePhysics.ts
@@ -0,0 +1,99 @@
+import { useState, useEffect } from 'react';
+
+interface ElementInfo {
+  tagName: string;
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  html: string;
+}
+
+export function usePhysics() {
+  const [isPhysicsEnabled, setIsPhysicsEnabled] = useState(false);
+  const [elementsInfo, setElementsInfo] = useState<ElementInfo[]>([]);
+  const [fadeClass, setFadeClass] = useState('');
+
+  useEffect(() => {
+    const togglePhysics = async () => {
+      if (!isPhysicsEnabled) {
+        const info = await gatherElementsInfo();
+        setElementsInfo(info);
+        setIsPhysicsEnabled(true);
+        setFadeClass('fade-out');
+      } else {
+        setIsPhysicsEnabled(false);
+        setElementsInfo([]);
+        setFadeClass('');
+      }
+    };
+
+    window.addEventListener('togglePhysicsEvent', togglePhysics);
+
+    return () => {
+      window.removeEventListener('togglePhysicsEvent', togglePhysics);
+    };
+  }, [isPhysicsEnabled]);
+
+  return { isPhysicsEnabled, elementsInfo, fadeClass };
+}
+
+async function gatherElementsInfo() {
+  const rootElement = document.getElementsByTagName('main')[0];
+  const info: any[] = [];
+  if (rootElement) {
+    for (const child of rootElement.children) {
+      if (['BUTTON'].includes(child.tagName)) continue;
+      const rect = child.getBoundingClientRect();
+      let w = rect.width;
+      if (!['P', 'UL'].includes(child.tagName)) {
+        w = measureElementTextWidth(child as HTMLElement);
+      }
+      // Check if the element is centered
+      const computedStyle = window.getComputedStyle(child);
+      let x = rect.left; // Default x position
+      if (computedStyle.display === 'block' && computedStyle.textAlign === 'center') {
+        // Adjust x position for centered elements
+        const parentWidth = child.parentElement ? child.parentElement.getBoundingClientRect().width : 0;
+        x = (parentWidth - w) / 2 + window.scrollX + (child.parentElement ? child.parentElement.getBoundingClientRect().left : 0);
+      }
+
+      info.push({
+        tagName: child.tagName,
+        x: x,
+        y: rect.top,
+        w: w,
+        h: rect.height,
+        html: child.outerHTML
+      });
+    };
+  }
+  return info;
+}
+
+function measureElementTextWidth(element: HTMLElement) {
+  // Create a temporary span element
+  const tempElement = document.createElement('span');
+  // Get the text content from the passed element
+  tempElement.textContent = element.textContent || element.innerText;
+  // Get the computed style of the passed element
+  const computedStyle = window.getComputedStyle(element);
+  // Apply relevant styles to the temporary element
+  tempElement.style.font = computedStyle.font;
+  tempElement.style.fontWeight = computedStyle.fontWeight;
+  tempElement.style.fontSize = computedStyle.fontSize;
+  tempElement.style.fontFamily = computedStyle.fontFamily;
+  tempElement.style.letterSpacing = computedStyle.letterSpacing;
+  // Ensure the temporary element is not visible in the viewport
+  tempElement.style.position = 'absolute';
+  tempElement.style.visibility = 'hidden';
+  tempElement.style.whiteSpace = 'nowrap'; // Prevent text from wrapping
+  // Append to the body to make measurements possible
+  document.body.appendChild(tempElement);
+  // Measure the width
+  const width = tempElement.getBoundingClientRect().width;
+  // Remove the temporary element from the document
+  document.body.removeChild(tempElement);
+  // Return the measured width
+  return width === 0 ? 10 : width;
+}
\ No newline at end of file
diff --git a/src/ts/shapes/HTMLShapeUtil.tsx b/src/ts/shapes/HTMLShapeUtil.tsx
index d89a892..d62c033 100644
--- a/src/ts/shapes/HTMLShapeUtil.tsx
+++ b/src/ts/shapes/HTMLShapeUtil.tsx
@@ -22,7 +22,7 @@ export class HTMLShapeUtil extends ShapeUtil<HTMLShape> {
     return resizeBox(shape, info)
   }
 
-  getGeometry(shape: IHTMLShape) {
+  getGeometry(shape: HTMLShape) {
     return new Rectangle2d({
       width: shape.props.w,
       height: shape.props.h,
diff --git a/src/utils.tsx b/src/utils.tsx
index 4ab56b6..4717053 100644
--- a/src/utils.tsx
+++ b/src/utils.tsx
@@ -1,61 +1,33 @@
-export function measureElementTextWidth(element: HTMLElement) {
-  // Create a temporary span element
-  const tempElement = document.createElement('span');
-  // Get the text content from the passed element
-  tempElement.textContent = element.textContent || element.innerText;
-  // Get the computed style of the passed element
-  const computedStyle = window.getComputedStyle(element);
-  // Apply relevant styles to the temporary element
-  tempElement.style.font = computedStyle.font;
-  tempElement.style.fontWeight = computedStyle.fontWeight;
-  tempElement.style.fontSize = computedStyle.fontSize;
-  tempElement.style.fontFamily = computedStyle.fontFamily;
-  tempElement.style.letterSpacing = computedStyle.letterSpacing;
-  // Ensure the temporary element is not visible in the viewport
-  tempElement.style.position = 'absolute';
-  tempElement.style.visibility = 'hidden';
-  tempElement.style.whiteSpace = 'nowrap'; // Prevent text from wrapping
-  // Append to the body to make measurements possible
-  document.body.appendChild(tempElement);
-  // Measure the width
-  const width = tempElement.getBoundingClientRect().width;
-  // Remove the temporary element from the document
-  document.body.removeChild(tempElement);
-  // Return the measured width
-  return width === 0 ? 10 : width;
-}
+import { createShapeId } from "@tldraw/tldraw";
 
+export function createShapes(elementsInfo: any) {
+  const shapes = elementsInfo.map((element: any) => ({
+    id: createShapeId(),
+    type: 'html',
+    x: element.x,
+    y: element.y,
+    props: {
+      w: element.w,
+      h: element.h,
+      html: element.html,
+    }
+  }));
 
-// Function to gather elements info asynchronously
-export async function gatherElementsInfo() {
-  const rootElement = document.getElementsByTagName('main')[0];
-  const info: any[] = [];
-  if (rootElement) {
-    for (const child of rootElement.children) {
-      if (['BUTTON'].includes(child.tagName)) continue;
-      const rect = child.getBoundingClientRect();
-      let w = rect.width;
-      if (!['P', 'UL'].includes(child.tagName)) {
-        w = measureElementTextWidth(child);
-      }
-      // Check if the element is centered
-      const computedStyle = window.getComputedStyle(child);
-      let x = rect.left; // Default x position
-      if (computedStyle.display === 'block' && computedStyle.textAlign === 'center') {
-        // Adjust x position for centered elements
-        const parentWidth = child.parentElement ? child.parentElement.getBoundingClientRect().width : 0;
-        x = (parentWidth - w) / 2 + window.scrollX + (child.parentElement ? child.parentElement.getBoundingClientRect().left : 0);
-      }
+  shapes.push({
+    id: createShapeId(),
+    type: 'geo',
+    x: 0,
+    y: window.innerHeight,
+    props: {
+      w: window.innerWidth,
+      h: 50,
+      color: 'grey',
+      fill: 'solid'
+    },
+    meta: {
+      fixed: true
+    }
+  });
 
-      info.push({
-        tagName: child.tagName,
-        x: x,
-        y: rect.top,
-        w: w,
-        h: rect.height,
-        html: child.outerHTML
-      });
-    };
-  }
-  return info;
-}
+  return shapes;
+}
\ No newline at end of file