feedback: update discord links (provide alt) (#167)

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

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 <DropdownButton text="Discord" links={links} />
+}
+
+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 <>
+    <Button
+      style={{ position: 'relative', width: '98px' }}
+      rootRef={refs.setReference}
+      onClick={() => {
+        setIsOpen(!isOpen)
+      }}
+    >{text}<PixelartIcon
+        styles={{ position: 'absolute', top: '5px', right: '5px' }}
+        iconName={isOpen ? pixelartIcons['chevron-up'] : pixelartIcons['chevron-down']}
+      />
+    </Button>
+    {
+      isOpen && <div ref={refs.setFloating} style={styles}>
+        {links.map(el => {
+          return <Button
+            style={{ width: '98px', fontSize: '7px' }}
+            onClick={el.clickHandler}
+          >{el.text}</Button>
+        })}
+      </div>
+    }
+  </>
+}

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 (
     <div className={styles.root}>
       <div className={styles['game-title']}>
@@ -124,12 +123,7 @@ export default ({ connectToServerAction, mapsProvider, singleplayerAction, optio
           >
             GitHub
           </ButtonWithTooltip>
-          <Button
-            style={{ width: '98px' }}
-            onClick={discordAction}
-          >
-            Discord
-          </Button>
+          {linksButton}
         </div>
       </div>
 

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={<DiscordButton />}
         openFileAction={e => {
           if (!!window.showDirectoryPicker && !e.shiftKey) {
             void openWorldDirectory()

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 () => {
       <Button className="button" style={{ width: '204px' }} onClick={onReturnPress}>Back to Game</Button>
       <div className={styles.row}>
         <Button className="button" style={{ width: '98px' }} onClick={() => openURL(process.env.GITHUB_URL!)}>GitHub</Button>
-        <Button className="button" style={{ width: '98px' }} onClick={() => openURL('https://discord.gg/4Ucm684Fq3')}>Discord</Button>
+        <DiscordButton />
       </div>
       <Button className="button" style={{ width: '204px' }} onClick={() => openOptionsMenu('main')}>Options</Button>
       {singleplayer ? (