feat: add config option for pause screen links (#288)

config.json

@@ -17,5 +17,15 @@
       "version": "1.20.3",
       "description": "Very nice a polite server. Must try for everyone!"
     }
+  ],
+  "pauseLinks": [
+    [
+      {
+        "type": "github"
+      },
+      {
+        "type": "discord"
+      }
+    ]
   ]
 }

src/globalState.ts

@@ -127,6 +127,7 @@ export type AppConfig = {
   forceSettings?: Record<string, boolean>
   // hideSettings?: Record<string, boolean>
   allowAutoConnect?: boolean
+  pauseLinks?: Array<Array<Record<string, any>>>
 }
 
 export const miscUiState = proxy({

src/react/DiscordButton.tsx

@@ -4,7 +4,7 @@ import { CSSProperties, useState } from 'react'
 import Button from './Button'
 import PixelartIcon, { pixelartIcons } from './PixelartIcon'
 
-export const DiscordButton = () => {
+export const DiscordButton = ({ text, style }: { text?: string, style?: Record<string, any> }) => {
   const links: DropdownButtonItem[] = [
     {
       text: 'Support Official Server (mcraft.fun)',
@@ -16,7 +16,7 @@ export const DiscordButton = () => {
     }
   ]
 
-  return <DropdownButton text="Discord" links={links} />
+  return <DropdownButton text={text ?? 'Discord'} style={style} links={links} />
 }
 
 export type DropdownButtonItem = {
@@ -24,7 +24,7 @@ export type DropdownButtonItem = {
   clickHandler: () => void
 }
 
-export const DropdownButton = ({ text, links }: { text: string, links: DropdownButtonItem[] }) => {
+export const DropdownButton = ({ text, style, links }: { text: string, style?: Record<string, any>, links: DropdownButtonItem[] }) => {
   const [isOpen, setIsOpen] = useState(false)
   const { refs, floatingStyles } = useFloating({
     open: isOpen,
@@ -50,7 +50,7 @@ export const DropdownButton = ({ text, links }: { text: string, links: DropdownB
 
   return <>
     <Button
-      style={{ position: 'relative', width: '98px' }}
+      style={style ?? { position: 'relative', width: '98px' }}
       rootRef={refs.setReference}
       onClick={() => {
         setIsOpen(!isOpen)

src/react/PauseScreen.tsx

@@ -18,7 +18,7 @@ import {
 } from '../globalState'
 import { fsState } from '../loadSave'
 import { disconnect } from '../flyingSquidUtils'
-import { pointerLock } from '../utils'
+import { openGithub, pointerLock } from '../utils'
 import { setLoadingScreenStatus } from '../appStatus'
 import { closeWan, openToWanAndCopyJoinLink, getJoinLink } from '../localServerMultiplayer'
 import { collectFilesToCopy, fileExistsAsyncOptimized, mkdirRecursive, uniqueFileNameFromWorldName } from '../browserfs'
@@ -222,6 +222,26 @@ export default () => {
   }
 
   if (!isModalActive) return null
+
+  const pauseLinks: any[] = []
+  const pauseLinksConfig = miscUiState.appConfig?.pauseLinks
+  if (pauseLinksConfig) {
+    for (const row of pauseLinksConfig) {
+      const rowButtons: any[] = []
+      for (const button of row) {
+        const style = { width: (204 / row.length - (row.length > 1 ? 4 : 0)) + 'px' }
+        if (button.type === 'discord') {
+          rowButtons.push(<DiscordButton style={style} text={button.text}/>)
+        } else if (button.type === 'github') {
+          rowButtons.push(<Button className="button" style={style} onClick={() => openGithub()}>{button.text ?? 'GitHub'}</Button>)
+        } else if (button.type === 'url' && button.text) {
+          rowButtons.push(<Button className="button" style={style} onClick={() => openURL(button.url)}>{button.text}</Button>)
+        }
+      }
+      pauseLinks.push(<div className={styles.row}>{rowButtons}</div>)
+    }
+  }
+
   return <Screen title='Game Menu'>
     <Button
       icon="pixelarticons:folder"
@@ -235,10 +255,7 @@ export default () => {
     </ErrorBoundary>
     <div className={styles.pause_container}>
       <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>
-        <DiscordButton />
-      </div>
+      {pauseLinks}
       <Button className="button" style={{ width: '204px' }} onClick={() => openOptionsMenu('main')}>Options</Button>
       {singleplayer ? (
         <div className={styles.row}>