From 754e7afd5b514317e2295886b837a04720d7da07 Mon Sep 17 00:00:00 2001 From: Orion Reed Date: Sat, 20 Jul 2024 03:21:16 +0200 Subject: [PATCH] palace --- index.html | 2 +- partykit.json | 2 +- src/App.tsx | 136 ++++++++++++++++++++++------------------- src/CustomMainMenu.tsx | 57 +++++++++++++++++ src/ui.tsx | 4 +- 5 files changed, 136 insertions(+), 65 deletions(-) create mode 100644 src/CustomMainMenu.tsx diff --git a/index.html b/index.html index a2b24bd..7e0df10 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - ggraph + Palace
diff --git a/partykit.json b/partykit.json index 81e67a8..6397baa 100644 --- a/partykit.json +++ b/partykit.json @@ -1,5 +1,5 @@ { - "name": "ggraph", + "name": "palace", "main": "src/server.ts", "serve": { "path": "dist" diff --git a/src/App.tsx b/src/App.tsx index e6fee55..0f3394c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,14 +1,13 @@ import "tldraw/tldraw.css"; -import { Tldraw } from "tldraw"; +import { Tldraw, track, useEditor } from "tldraw"; import { useYjsStore } from "./useYjsStore"; -import { AgentButton } from "./components/AgentButton"; import { SocialShapeUtil } from "./SocialShapeUtil"; import { SocialShapeTool } from "./SocialShapeTool"; import { CustomToolbar, overrides } from "./ui"; -// import { getDocumentMeta, getUserId, getUsersInRoom, setDocumentMeta } from "./storeUtils"; import { registerDefaultPropagators } from "./propagators/ScopedPropagators"; import { PromptShape } from "./PromptShape"; import { PromptShapeTool } from "./PromptTool"; +import { CustomMainMenu } from "./CustomMainMenu"; const shapeUtils = [SocialShapeUtil, PromptShape]; const tools = [SocialShapeTool, PromptShapeTool]; @@ -41,74 +40,87 @@ export default function Canvas() { registerDefaultPropagators(editor) - // const userId = getUserId(editor) - // setDocumentMeta(editor, { - // [userId]: 123 - // }) - // // console.log(getDocumentMeta(editor)) - // // removeDocumentMeta(editor, 'test') - // setTimeout(() => { - // console.log(getDocumentMeta(editor)) - // console.log(getUsersInRoom(editor)) - // }, 2000); - }} components={{ - SharePanel: AgentButton, + SharePanel: NameEditor, Toolbar: CustomToolbar, + MainMenu: CustomMainMenu, }} /> ); } -// const NameEditor = track(() => { -// const editor = useEditor(); +const NameEditor = track(() => { + const editor = useEditor(); + const { color, name } = editor.user.getUserPreferences(); + function randomName(): string { + const firstNames = ['Boba', 'Zap', 'Fizz', 'Glorp', 'Squish', 'Blip', 'Floof', 'Ziggy', 'Quark', 'Noodle', 'AI']; + const lastNames = ['Bubbles', 'Zoomers', 'Wiggles', 'Snazzle', 'Boop', 'Fizzle', 'Wobble', 'Giggle', 'Squeak', 'Noodle', 'Palace']; + return `${firstNames[Math.floor(Math.random() * firstNames.length)]} ${lastNames[Math.floor(Math.random() * lastNames.length)]}` + } -// const { color, name } = editor.user.getUserPreferences(); + function randomHexColor(): string { + return `#${Math.floor(Math.random() * 16777215).toString(16)}` + } -// return ( -//
-// { -// editor.user.updateUserPreferences({ -// color: e.currentTarget.value, -// }); -// }} -// /> -// { -// editor.user.updateUserPreferences({ -// name: e.currentTarget.value, -// }); -// }} -// /> -//
-// ); -// }); + const userPrefs = editor.user.getUserPreferences() + + if (userPrefs.name === "New User") { + editor.user.updateUserPreferences({ + name: randomName(), + color: randomHexColor() + }) + } + + return ( +
+ { + editor.user.updateUserPreferences({ + color: e.currentTarget.value, + }); + }} + /> + { + editor.user.updateUserPreferences({ + name: e.currentTarget.value, + }); + }} + /> +
+ ); +}); diff --git a/src/CustomMainMenu.tsx b/src/CustomMainMenu.tsx new file mode 100644 index 0000000..a84bd47 --- /dev/null +++ b/src/CustomMainMenu.tsx @@ -0,0 +1,57 @@ +import { + DefaultMainMenu, + TldrawUiMenuItem, + Editor, + TLContent, + DefaultMainMenuContent, + useEditor, + useExportAs, +} from "tldraw"; + +export function CustomMainMenu() { + const editor = useEditor() + const exportAs = useExportAs() + + const importJSON = (editor: Editor) => { + const input = document.createElement("input"); + input.type = "file"; + input.accept = ".json"; + input.onchange = (event) => { + const file = (event.target as HTMLInputElement).files?.[0]; + const reader = new FileReader(); + reader.onload = (event) => { + if (typeof event.target?.result !== 'string') { + return + } + const jsonData = JSON.parse(event.target.result) as TLContent + editor.putContentOntoCurrentPage(jsonData, { select: true }) + }; + reader.readAsText(file as Blob); + }; + input.click(); + }; + const exportJSON = (editor: Editor) => { + const exportName = `palace-${Math.round(+new Date() / 1000).toString().slice(5)}` + exportAs(Array.from(editor.getCurrentPageShapeIds()), 'json', exportName) + }; + + return ( + + + exportJSON(editor)} + /> + importJSON(editor)} + /> + + ) +} diff --git a/src/ui.tsx b/src/ui.tsx index ff25e34..b694d95 100644 --- a/src/ui.tsx +++ b/src/ui.tsx @@ -25,7 +25,7 @@ export const overrides: TLUiOverrides = { prompt: { id: "prompt", name: "Prompt", - icon: "code", + icon: "fill-solid", kbd: "p", label: "Prompt", onSelect: () => { @@ -39,9 +39,11 @@ export const overrides: TLUiOverrides = { export const CustomToolbar = (props: DefaultToolbarProps) => { const tools = useTools() const isSocialSelected = useIsToolSelected(tools.social) + const isPromptSelected = useIsToolSelected(tools.prompt) return ( + )