2021-11-16 16:01:29 +00:00
|
|
|
import * as React from 'react'
|
2022-02-13 14:59:33 +00:00
|
|
|
import { CheckIcon, ClipboardIcon, CursorArrowIcon } from '@radix-ui/react-icons'
|
2021-11-16 16:01:29 +00:00
|
|
|
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
|
|
|
|
import { useTldrawApp } from '~hooks'
|
2021-11-19 10:19:06 +00:00
|
|
|
import { DMItem, DMContent, DMDivider, DMTriggerIcon } from '~components/Primitives/DropdownMenu'
|
|
|
|
import { SmallIcon } from '~components/Primitives/SmallIcon'
|
|
|
|
import { MultiplayerIcon } from '~components/Primitives/icons'
|
2021-11-16 16:01:29 +00:00
|
|
|
import type { TDSnapshot } from '~types'
|
|
|
|
import { TLDR } from '~state/TLDR'
|
2022-05-18 15:59:30 +00:00
|
|
|
import { Utils } from '@tldraw/core'
|
2021-11-16 16:01:29 +00:00
|
|
|
|
|
|
|
const roomSelector = (state: TDSnapshot) => state.room
|
|
|
|
|
|
|
|
export const MultiplayerMenu = React.memo(function MultiplayerMenu() {
|
|
|
|
const app = useTldrawApp()
|
|
|
|
|
|
|
|
const room = app.useStore(roomSelector)
|
|
|
|
|
|
|
|
const [copied, setCopied] = React.useState(false)
|
|
|
|
|
|
|
|
const handleCopySelect = React.useCallback(() => {
|
|
|
|
setCopied(true)
|
|
|
|
TLDR.copyStringToClipboard(window.location.href)
|
|
|
|
setTimeout(() => setCopied(false), 1200)
|
|
|
|
}, [])
|
|
|
|
|
|
|
|
const handleCreateMultiplayerRoom = React.useCallback(async () => {
|
|
|
|
if (app.isDirty) {
|
|
|
|
if (app.fileSystemHandle) {
|
|
|
|
if (window.confirm('Do you want to save changes to your current project?')) {
|
|
|
|
await app.saveProject()
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
if (window.confirm('Do you want to save your current project?')) {
|
|
|
|
await app.saveProject()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} else if (!app.fileSystemHandle) {
|
|
|
|
if (window.confirm('Do you want to save your current project?')) {
|
|
|
|
await app.saveProject()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}, [])
|
|
|
|
|
|
|
|
const handleCopyToMultiplayerRoom = React.useCallback(async () => {
|
2022-05-18 15:59:30 +00:00
|
|
|
const body = JSON.stringify({
|
|
|
|
roomId: Utils.uniqueId(),
|
|
|
|
pageId: app.currentPageId,
|
|
|
|
document: app.document,
|
|
|
|
})
|
|
|
|
|
2021-11-16 16:01:29 +00:00
|
|
|
const myHeaders = new Headers({
|
|
|
|
'Access-Control-Allow-Origin': '*',
|
|
|
|
'Content-Type': 'application/json',
|
|
|
|
})
|
|
|
|
|
2022-05-18 15:59:30 +00:00
|
|
|
const res = await fetch(`/api/create`, {
|
2021-11-16 16:01:29 +00:00
|
|
|
headers: myHeaders,
|
|
|
|
method: 'POST',
|
2022-05-18 15:59:30 +00:00
|
|
|
mode: 'no-cors',
|
|
|
|
body,
|
2021-11-16 16:01:29 +00:00
|
|
|
}).then((res) => res.json())
|
|
|
|
|
2022-05-18 15:59:30 +00:00
|
|
|
if (res?.roomId) {
|
|
|
|
window.location.href = `/r/${res.roomId}`
|
|
|
|
}
|
2021-11-16 16:01:29 +00:00
|
|
|
}, [])
|
|
|
|
|
|
|
|
return (
|
|
|
|
<DropdownMenu.Root dir="ltr">
|
2022-02-13 16:06:39 +00:00
|
|
|
<DMTriggerIcon id="TD-MultiplayerMenuIcon">
|
|
|
|
{room ? <MultiplayerIcon /> : <CursorArrowIcon />}
|
|
|
|
</DMTriggerIcon>
|
|
|
|
<DMContent variant="menu" align="start" id="TD-MultiplayerMenu">
|
|
|
|
<DMItem id="TD-Multiplayer-CopyInviteLink" onClick={handleCopySelect} disabled={!room}>
|
2022-02-13 14:59:33 +00:00
|
|
|
Copy Invite Link<SmallIcon>{copied ? <CheckIcon /> : <ClipboardIcon />}</SmallIcon>
|
|
|
|
</DMItem>
|
2022-02-13 16:06:39 +00:00
|
|
|
<DMDivider id="TD-Multiplayer-CopyInviteLinkDivider" />
|
|
|
|
<DMItem id="TD-Multiplayer-CreateMultiplayerRoom" onClick={handleCreateMultiplayerRoom}>
|
2022-02-13 14:59:33 +00:00
|
|
|
<a href="https://tldraw.com/r">Create a Multiplayer Project</a>
|
2021-11-16 16:01:29 +00:00
|
|
|
</DMItem>
|
2022-05-18 15:59:30 +00:00
|
|
|
<DMItem id="TD-Multiplayer-CopyToMultiplayerRoom" onClick={handleCopyToMultiplayerRoom}>
|
|
|
|
Copy to Multiplayer Room
|
|
|
|
</DMItem>
|
2021-11-16 16:01:29 +00:00
|
|
|
</DMContent>
|
|
|
|
</DropdownMenu.Root>
|
|
|
|
)
|
|
|
|
})
|