diff --git a/README.MD b/README.MD index 6b8bdc97d..34f9f2720 100644 --- a/README.MD +++ b/README.MD @@ -133,6 +133,7 @@ There are some parameters you can set in the url to archive some specific behavi General: - **`?setting=:`** - Set and lock the setting on load. You can set multiple settings by separating them with `&` e.g. `?setting=autoParkour:true&setting=renderDistance:4` +- `?modal=` - Open specific modal on page load eg `keybindings`. Very useful on UI changes testing during dev. For path use `,` as separator. To get currently opened modal type this in the console: `activeModalStack.at(-1).reactType` Server specific: @@ -142,7 +143,6 @@ Server specific: - `?proxy=` - Set the proxy server address to use for the server - `?username=` - Set the username for the server - `?lockConnect=true` - Only works then `ip` parameter is set. Disables cancel/save buttons and all inputs in the connect screen already set as parameters. Useful for integrates iframes. -- `?reconnect=true` - Reconnect to the server on page reloads. Available in **dev mode only** and very useful on server testing. - `?serversList=` - `` can be a list of servers in the format `ip:version,ip` or a url to a json file with the same format (array) or a txt file with line-delimited list of server IPs. Single player specific: @@ -176,6 +176,10 @@ In this case you must use `?mapDirBaseUrl` to specify the base URL to fetch the - `?mapDirBaseUrl` - See above. +Only during development: + +- `?reconnect=true` - Reconnect to the server on page reloads. Very useful on server testing. + ### Notable Things that Power this Project diff --git a/src/index.ts b/src/index.ts index 36eda63cc..81e0d78d2 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1065,6 +1065,13 @@ downloadAndOpenFile().then((downloadAction) => { viewerWsConnect, }) } + + if (qs.get('modal')) { + const modals = qs.get('modal')!.split(',') + for (const modal of modals) { + showModal({ reactType: modal }) + } + } }, (err) => { console.error(err) alert(`Failed to download file: ${err}`) diff --git a/src/react/Input.tsx b/src/react/Input.tsx index 1da36cc3f..72baef53e 100644 --- a/src/react/Input.tsx +++ b/src/react/Input.tsx @@ -2,14 +2,17 @@ import React, { CSSProperties, useEffect, useRef, useState } from 'react' import { isMobile } from 'prismarine-viewer/viewer/lib/simpleUtils' import styles from './input.module.css' -interface Props extends React.ComponentProps<'input'> { +interface Props extends Omit, 'width'> { rootStyles?: React.CSSProperties autoFocus?: boolean inputRef?: React.RefObject validateInput?: (value: string) => CSSProperties | undefined + width?: number } -export default ({ autoFocus, rootStyles, inputRef, validateInput, defaultValue, ...inputProps }: Props) => { +export default ({ autoFocus, rootStyles, inputRef, validateInput, defaultValue, width, ...inputProps }: Props) => { + if (width) rootStyles = { ...rootStyles, width } + const ref = useRef(null!) const [validationStyle, setValidationStyle] = useState({}) const [value, setValue] = useState(defaultValue ?? '') diff --git a/src/react/ServersList.tsx b/src/react/ServersList.tsx index 57316d222..cc75e0370 100644 --- a/src/react/ServersList.tsx +++ b/src/react/ServersList.tsx @@ -2,9 +2,10 @@ import React from 'react' import Singleplayer from './Singleplayer' import Input from './Input' import Button from './Button' -import PixelartIcon from './PixelartIcon' +import PixelartIcon, { pixelartIcons } from './PixelartIcon' import Select from './Select' import { BaseServerInfo } from './AddServerOrConnect' +import { useIsSmallWidth } from './simpleHooks' interface Props extends React.ComponentProps { joinServer: (info: BaseServerInfo, additional: { @@ -52,6 +53,8 @@ export default ({ initialProxies, updateProxies: updateProxiesProp, joinServer, return styles } + const isSmallWidth = useIsSmallWidth() + return - + } searchRowChildrenOverride={ @@ -110,14 +114,18 @@ export default ({ initialProxies, updateProxies: updateProxiesProp, joinServer, }} >
- Proxy: + {isSmallWidth + ? + : Proxy:} setUsername(value)} /> diff --git a/src/react/Singleplayer.tsx b/src/react/Singleplayer.tsx index 024f77640..e8fa8224c 100644 --- a/src/react/Singleplayer.tsx +++ b/src/react/Singleplayer.tsx @@ -11,6 +11,7 @@ import Input from './Input' import Button from './Button' import Tabs from './Tabs' import MessageFormattedString from './MessageFormattedString' +import { useIsSmallWidth } from './simpleHooks' export interface WorldProps { name: string @@ -146,6 +147,8 @@ export default ({ onRowSelect?.(name, index) setFocusedWorld(name) } + const isSmallWidth = useIsSmallWidth() + return