diff --git a/__________src/default_store.ts b/__________src/default_store.ts deleted file mode 100644 index 98176bb..0000000 --- a/__________src/default_store.ts +++ /dev/null @@ -1,141 +0,0 @@ -export const DEFAULT_STORE = { - store: { - "document:document": { - gridSize: 10, - name: "", - meta: {}, - id: "document:document", - typeName: "document", - }, - "pointer:pointer": { - id: "pointer:pointer", - typeName: "pointer", - x: 0, - y: 0, - lastActivityTimestamp: 0, - meta: {}, - }, - "page:page": { - meta: {}, - id: "page:page", - name: "Page 1", - index: "a1", - typeName: "page", - }, - "camera:page:page": { - x: 0, - y: 0, - z: 1, - meta: {}, - id: "camera:page:page", - typeName: "camera", - }, - "instance_page_state:page:page": { - editingShapeId: null, - croppingShapeId: null, - selectedShapeIds: [], - hoveredShapeId: null, - erasingShapeIds: [], - hintingShapeIds: [], - focusedGroupId: null, - meta: {}, - id: "instance_page_state:page:page", - pageId: "page:page", - typeName: "instance_page_state", - }, - "instance:instance": { - followingUserId: null, - opacityForNextShape: 1, - stylesForNextShape: {}, - brush: null, - scribble: null, - cursor: { - type: "default", - rotation: 0, - }, - isFocusMode: false, - exportBackground: true, - isDebugMode: false, - isToolLocked: false, - screenBounds: { - x: 0, - y: 0, - w: 720, - h: 400, - }, - zoomBrush: null, - isGridMode: false, - isPenMode: false, - chatMessage: "", - isChatting: false, - highlightedUserIds: [], - canMoveCamera: true, - isFocused: true, - devicePixelRatio: 2, - isCoarsePointer: false, - isHoveringCanvas: false, - openMenus: [], - isChangingStyle: false, - isReadonly: false, - meta: {}, - id: "instance:instance", - currentPageId: "page:page", - typeName: "instance", - }, - }, - schema: { - schemaVersion: 1, - storeVersion: 4, - recordVersions: { - asset: { - version: 1, - subTypeKey: "type", - subTypeVersions: { - image: 2, - video: 2, - bookmark: 0, - }, - }, - camera: { - version: 1, - }, - document: { - version: 2, - }, - instance: { - version: 21, - }, - instance_page_state: { - version: 5, - }, - page: { - version: 1, - }, - shape: { - version: 3, - subTypeKey: "type", - subTypeVersions: { - group: 0, - text: 1, - bookmark: 1, - draw: 1, - geo: 7, - note: 4, - line: 1, - frame: 0, - arrow: 1, - highlight: 0, - embed: 4, - image: 2, - video: 1, - }, - }, - instance_presence: { - version: 5, - }, - pointer: { - version: 1, - }, - }, - }, -}; diff --git a/index.html b/index.html index 3c1fd8a..d37cc60 100644 --- a/index.html +++ b/index.html @@ -8,69 +8,11 @@ - - -
- Orion Reed -
- -
-

Hello! 👋

-

- My research investigates the intersection of computing, human-system - interfaces, and emancipatory politics. I am interested in the - potential of computing as a medium for thought, as a tool for - collective action, and as a means of emancipation. -

- -

- My current focus is basic research into the nature of digital - organisation, developing theoretical toolkits to improve shared - infrastructure, and applying this research to the design of new - systems and protocols which support the self-organisation of knowledge - and computational artifacts. -

- -

My work

-

- Alongside my independent work I am a researcher at - Block Science building - knowledge organisation infrastructure and at - ECSA working on - computational media. I am also part of the nascent Liberatory Computing - collective and a co-organiser of the OCWG. -

- -

Get in touch

-

- I am on Twitter as @OrionReedOne and on - Mastodon as @orion@hci.social. The best way to reach me is - through Twitter or my email, me@orionreed.com -

- - *** - -

Talks

- -

Writing

- -
+ + \ No newline at end of file diff --git a/package.json b/package.json index d99d5db..3556c24 100644 --- a/package.json +++ b/package.json @@ -14,8 +14,10 @@ "dependencies": { "@dimforge/rapier2d": "latest", "@tldraw/tldraw": "2.0.2", + "@types/react-helmet": "^6.1.11", "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-helmet": "^6.1.0" }, "devDependencies": { "@biomejs/biome": "1.4.1", @@ -30,4 +32,4 @@ "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 49d4cc1..6ec1d08 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,17 +1,128 @@ -import { Tldraw, track, useEditor } from "@tldraw/tldraw"; +import { createTLUser, setUserPreferences, Tldraw, track, useEditor } from "@tldraw/tldraw"; import "@tldraw/tldraw/tldraw.css"; import { SimControls } from "./physics/ui/PhysicsControls"; import { uiOverrides } from "./physics/ui/overrides"; +import { Helmet } from "react-helmet"; +import React, { useEffect, useState } from "react"; +import ReactDOM from "react-dom/client"; -export default function Canvas() { +ReactDOM.createRoot(document.getElementById("root")!).render(); + +function App() { + const [isPhysicsEnabled, setIsPhysicsEnabled] = useState(false); + + useEffect(() => { + const togglePhysics = () => setIsPhysicsEnabled(prev => !prev); + + window.addEventListener('togglePhysicsEvent', togglePhysics); + + return () => { + window.removeEventListener('togglePhysicsEvent', togglePhysics); + }; + }, []); + + return ( + + + {isPhysicsEnabled ? : } + + ); +}; + +function Default() { + return ( + <> + + + +
+ Orion Reed +
+

Hello! 👋

+

+ My research investigates the intersection of computing, human-system + interfaces, and emancipatory politics. I am interested in the + potential of computing as a medium for thought, as a tool for + collective action, and as a means of emancipation. +

+ +

+ My current focus is basic research into the nature of digital + organisation, developing theoretical toolkits to improve shared + infrastructure, and applying this research to the design of new + systems and protocols which support the self-organisation of knowledge + and computational artifacts. +

+ +

My work

+

+ Alongside my independent work I am a researcher at + Block Science building + knowledge organisation infrastructure and at + ECSA working on + computational media. I am also part of the nascent Liberatory Computing + collective and a co-organiser of the OCWG. +

+ +

Get in touch

+

+ I am on Twitter as @OrionReedOne and on + Mastodon as @orion@hci.social. The best way to reach me is + through Twitter or my email, me@orionreed.com +

+ + *** + +

Talks

+ +

Writing

+ + + ); +} + +function Canvas() { return (
+ + + - + {/* */} + {/* {()=> { + setUserPreferences({id: 'orion', isDarkMode: true }) + }} */} +
); } + +function Toggle() { + return ( + <> + + + + + + ); +} + diff --git a/src/css/style.css b/src/css/default.css similarity index 83% rename from src/css/style.css rename to src/css/default.css index 78176f0..7a6da37 100644 --- a/src/css/style.css +++ b/src/css/default.css @@ -44,21 +44,6 @@ p { margin-bottom: 0em; } -#toggle-physics { - position: absolute; - top: 10px; - right: 10px; - width: 50px; - height: 50px; - background: none; - border: none; - cursor: pointer; - opacity: 0.5; - &:hover { - opacity: 1; - } -} - ul { padding-left: 0; list-style: decimal-leading-zero; diff --git a/src/css/index.css b/src/css/index.css deleted file mode 100644 index 2f8e1a1..0000000 --- a/src/css/index.css +++ /dev/null @@ -1,64 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap"); - -html, -body { - padding: 0; - margin: 0; - font-family: "Inter", sans-serif; - overscroll-behavior: none; - touch-action: none; - min-height: 100vh; - font-size: 16px; - /* mobile viewport bug fix */ - min-height: -webkit-fill-available; - height: 100%; -} - -html, -* { - box-sizing: border-box; -} - -.tldraw__editor { - position: fixed; - inset: 0px; - overflow: hidden; -} - -.examples { - padding: 16px; -} - -.examples__header { - width: fit-content; - padding-bottom: 32px; -} - -.examples__lockup { - height: 56px; - width: auto; -} - -.examples__list { - display: flex; - flex-direction: column; - padding: 0; - margin: 0; - list-style: none; -} - -.examples__list__item { - padding: 8px 12px; - margin: 0px -12px; -} - -.examples__list__item a { - padding: 8px 12px; - margin: 0px -12px; - text-decoration: none; - color: inherit; -} - -.examples__list__item a:hover { - text-decoration: underline; -} diff --git a/src/css/tldraw.css b/src/css/tldraw.css new file mode 100644 index 0000000..6b5cb6e --- /dev/null +++ b/src/css/tldraw.css @@ -0,0 +1,30 @@ +@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap"); + +html, +body { + padding: 0; + margin: 0; + font-family: "Inter", sans-serif; + overscroll-behavior: none; + touch-action: none; + min-height: 100vh; + /* font-size: 16px; */ + /* mobile viewport bug fix */ + min-height: -webkit-fill-available; + height: 100%; +} + +html, +* { + box-sizing: border-box; +} + +.tldraw__editor { + position: fixed; + inset: 0px; + overflow: hidden; +} + +.tl-background { + background-color: transparent !important; +} diff --git a/src/css/toggle.css b/src/css/toggle.css new file mode 100644 index 0000000..94f0ab1 --- /dev/null +++ b/src/css/toggle.css @@ -0,0 +1,19 @@ +#toggle-physics { + position: absolute; + z-index: 99999; + top: 10px; + right: 10px; + width: 50px; + height: 50px; + background: none; + border: none; + cursor: pointer; + opacity: 0.25; + &:hover { + opacity: 1; + } + & img { + width: 100%; + height: 100%; + } +} diff --git a/src/main.tsx b/src/main.tsx deleted file mode 100644 index 07e30df..0000000 --- a/src/main.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from "react"; -import ReactDOM from "react-dom/client"; -import App from "./App.tsx"; -import "./css/index.css"; - -ReactDOM.createRoot(document.getElementById("root")!).render( - - - , -); diff --git a/src/physics/ui/PhysicsControls.tsx b/src/physics/ui/PhysicsControls.tsx index 2ccf828..477e264 100644 --- a/src/physics/ui/PhysicsControls.tsx +++ b/src/physics/ui/PhysicsControls.tsx @@ -1,7 +1,7 @@ import { track, useEditor } from "@tldraw/tldraw"; import { useEffect, useState } from "react"; import { usePhysicsSimulation } from "../simulation"; -import "../../css/physics-ui.css"; +// import "../../css/physics-ui.css"; export const SimControls = track(() => { const editor = useEditor();