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 ? (