diff --git a/prismarine-viewer/examples/playground.ts b/prismarine-viewer/examples/playground.ts index 223fc6f2..bd4673e4 100644 --- a/prismarine-viewer/examples/playground.ts +++ b/prismarine-viewer/examples/playground.ts @@ -113,6 +113,7 @@ async function main () { const chunk2 = new Chunk() chunk1.setBlockStateId(targetPos, 34) chunk2.setBlockStateId(targetPos.offset(1, 0, 0), 34) + //@ts-ignore const world = new World((chunkX, chunkZ) => { // if (chunkX === 0 && chunkZ === 0) return chunk1 // if (chunkX === 1 && chunkZ === 0) return chunk2 diff --git a/src/react/DiscordButton.tsx b/src/react/DiscordButton.tsx new file mode 100644 index 00000000..4778c80a --- /dev/null +++ b/src/react/DiscordButton.tsx @@ -0,0 +1,74 @@ +import { useFloating, arrow, FloatingArrow, offset as offsetMiddleware, Placement, autoPlacement } from '@floating-ui/react' +import { openURL } from 'prismarine-viewer/viewer/lib/simpleUtils' +import { CSSProperties, useState } from 'react' +import Button from './Button' +import PixelartIcon, { pixelartIcons } from './PixelartIcon' + +export const DiscordButton = () => { + const links: DropdownButtonItem[] = [ + { + text: 'Support Official Server (mcraft.fun)', + clickHandler: () => openURL('https://discord.gg/JCPnD4Qh') + }, + { + text: 'Community Server (PrismarineJS)', + clickHandler: () => openURL('https://discord.gg/4Ucm684Fq3') + } + ] + + return +} + +export type DropdownButtonItem = { + text: string, + clickHandler: () => void +} + +export const DropdownButton = ({ text, links }: { text: string, links: DropdownButtonItem[] }) => { + const [isOpen, setIsOpen] = useState(false) + const { refs, floatingStyles } = useFloating({ + open: isOpen, + onOpenChange: setIsOpen, + middleware: [ + autoPlacement() + ], + }) + + const styles: CSSProperties = { + ...floatingStyles, + background: 'rgba(0, 0, 0, 0.3)', + fontSize: 8, + userSelect: 'text', + padding: '2px 4px', + opacity: 1, + transition: 'opacity 0.3s ease-in-out', + textShadow: '1px 1px 2px BLACK', + display: 'flex', + flexDirection: 'column', + zIndex: 11 + } + + return <> + + { + isOpen &&
+ {links.map(el => { + return + })} +
+ } + +} diff --git a/src/react/MainMenu.tsx b/src/react/MainMenu.tsx index 03e61d96..f8da4286 100644 --- a/src/react/MainMenu.tsx +++ b/src/react/MainMenu.tsx @@ -14,7 +14,7 @@ interface Props { singleplayerAction?: Action optionsAction?: Action githubAction?: Action - discordAction?: Action + linksButton?: JSX.Element openFileAction?: Action mapsProvider?: string } @@ -41,7 +41,7 @@ const refreshApp = async (failedUpdate = false) => { const httpsRegex = /^https?:\/\// -export default ({ connectToServerAction, mapsProvider, singleplayerAction, optionsAction, githubAction, discordAction, openFileAction }: Props) => { +export default ({ connectToServerAction, mapsProvider, singleplayerAction, optionsAction, githubAction, linksButton, openFileAction }: Props) => { const [versionStatus, setVersionStatus] = useState('') const [versionTitle, setVersionTitle] = useState('') @@ -64,7 +64,6 @@ export default ({ connectToServerAction, mapsProvider, singleplayerAction, optio } }, []) - return (
@@ -124,12 +123,7 @@ export default ({ connectToServerAction, mapsProvider, singleplayerAction, optio > GitHub - + {linksButton}
diff --git a/src/react/MainMenuRenderApp.tsx b/src/react/MainMenuRenderApp.tsx index 40439564..7262960c 100644 --- a/src/react/MainMenuRenderApp.tsx +++ b/src/react/MainMenuRenderApp.tsx @@ -8,6 +8,7 @@ import { openGithub, setLoadingScreenStatus } from '../utils' import { openFilePicker, copyFilesAsync, mkdirRecursive, openWorldDirectory, removeFileRecursiveAsync } from '../browserfs' import MainMenu from './MainMenu' +import { DiscordButton } from './DiscordButton' // todo clean let disableAnimation = false @@ -49,7 +50,7 @@ export default () => { }} githubAction={() => openGithub()} optionsAction={() => openOptionsMenu('main')} - discordAction={() => openURL('https://discord.gg/4Ucm684Fq3')} + linksButton={} openFileAction={e => { if (!!window.showDirectoryPicker && !e.shiftKey) { void openWorldDirectory() diff --git a/src/react/PauseScreen.tsx b/src/react/PauseScreen.tsx index c6da297b..adb91ac3 100644 --- a/src/react/PauseScreen.tsx +++ b/src/react/PauseScreen.tsx @@ -20,6 +20,7 @@ import { showOptionsModal } from './SelectOption' import Button from './Button' import Screen from './Screen' import styles from './PauseScreen.module.css' +import { DiscordButton } from './DiscordButton' export const saveToBrowserMemory = async () => { setLoadingScreenStatus('Saving world') @@ -114,7 +115,7 @@ export default () => {
- +
{singleplayer ? (