feat: brand new Servers List UI /w auto login feature! (#110)

config.json

@@ -2,6 +2,20 @@
   "version": 1,
   "defaultHost": "<from-proxy>",
   "defaultProxy": "proxy.mcraft.fun",
-  "defaultVersion": "1.18.2",
-  "mapsProvider": "https://maps.mcraft.fun/"
+  "mapsProvider": "https://maps.mcraft.fun/",
+  "promoteServers": [
+    {
+      "ip": "kaboom.pw",
+      "description": "Chaos and destruction server. Free for everyone."
+    },
+    {
+      "ip": "go.mineberry.org",
+      "version": "1.18.2",
+      "description": "One of the best servers here. Join now!"
+    },
+    {
+      "ip": "play.minemalia.com",
+      "description": "Only login with existing accounts."
+    }
+  ]
 }

cypress/e2e/index.spec.ts

@@ -53,20 +53,19 @@ it('Loads & renders singleplayer', () => {
 })
 
 it.only('Joins to server', () => {
-  // visit('/?version=1.16.1')
+  visit('/?ip=localhost&version=1.16.1')
   window.localStorage.version = ''
-  visit()
   // todo replace with data-test
-  cy.get('[data-test-id="connect-screen-button"]', { includeShadowDom: true }).click()
-  cy.get('input#serverip', { includeShadowDom: true }).clear().focus().type('localhost')
-  cy.get('input#botversion', { includeShadowDom: true }).clear().focus().type('1.16.1') // todo needs to fix autoversion
-  cy.get('[data-test-id="connect-to-server"]', { includeShadowDom: true }).click()
+  // cy.get('[data-test-id="servers-screen-button"]').click()
+  // cy.get('[data-test-id="server-ip"]').clear().focus().type('localhost')
+  // cy.get('[data-test-id="version"]').clear().focus().type('1.16.1') // todo needs to fix autoversion
+  cy.get('[data-test-id="connect-qs"]').click()
   testWorldLoad()
 })
 
 it('Loads & renders zip world', () => {
   cleanVisit()
-  cy.get('[data-test-id="select-file-folder"]', { includeShadowDom: true }).click({ shiftKey: true })
+  cy.get('[data-test-id="select-file-folder"]').click({ shiftKey: true })
   cy.get('input[type="file"]').selectFile('cypress/superflat.zip', { force: true })
   testWorldLoad()
 })

package.json

@@ -34,6 +34,7 @@
   "dependencies": {
     "@dimaka/interface": "0.0.3-alpha.0",
     "@floating-ui/react": "^0.26.1",
+    "@mui/base": "5.0.0-beta.40",
     "@nxg-org/mineflayer-auto-jump": "^0.7.7",
     "@nxg-org/mineflayer-tracker": "^1.2.1",
     "@react-oauth/google": "^0.12.1",
@@ -60,7 +61,6 @@
     "google-drive-browserfs": "github:zardoy/browserfs#google-drive",
     "iconify-icon": "^1.0.8",
     "jszip": "^3.10.1",
-    "lit": "^2.8.0",
     "lodash-es": "^4.17.21",
     "minecraft-assets": "^1.12.2",
     "minecraft-data": "3.62.0",

prismarine-viewer/viewer/lib/simpleUtils.ts

@@ -19,6 +19,10 @@ export function openURL (url, newTab = true) {
   }
 }
 
+export const isMobile = () => {
+  return window.matchMedia('(pointer: coarse)').matches || navigator.userAgent.includes('Mobile')
+}
+
 export function chunkPos (pos: { x: number, z: number }) {
   const x = Math.floor(pos.x / 16)
   const z = Math.floor(pos.z / 16)

src/connect.ts

@@ -0,0 +1,15 @@
+export type ConnectOptions = {
+  server?: string;
+  singleplayer?: any;
+  username: string;
+  password?: any;
+  proxy?: any;
+  botVersion?: any;
+  serverOverrides?;
+  serverOverridesFlat?;
+  peerId?: string;
+  ignoreQs?: boolean;
+  onSuccessfulPlay?: () => void
+  autoLoginPassword?: string
+  serverIndex?: string
+}

src/devReload.ts

@@ -1,5 +1,5 @@
+import { isMobile } from 'prismarine-viewer/viewer/lib/simpleUtils'
 import { WorldRendererThree } from 'prismarine-viewer/viewer/lib/worldrendererThree'
-import { isMobile } from './menus/components/common'
 
 if (process.env.NODE_ENV === 'development') {
   if (sessionStorage.lastReload) {

src/downloadAndOpenFile.ts

@@ -20,9 +20,6 @@ const inner = async () => {
     if (resourcePackState.resourcePackInstalled) {
       if (!confirm(`You are going to install a new resource pack, which will REPLACE the current one: ${await getResourcePackName()} Continue?`)) return
     }
-  } else {
-    const menu = document.getElementById('play-screen')
-    menu.style = 'display: none;'
   }
   const name = mapUrl.slice(mapUrl.lastIndexOf('/') + 1).slice(-25)
   const downloadThing = texturepack ? 'texturepack' : 'world'
@@ -78,7 +75,7 @@ export default async () => {
   try {
     return await inner()
   } catch (err) {
-    setLoadingScreenStatus(`Failed to download. Either refresh page or remove mapUrl param from URL. Reason: ${err.message}`)
+    setLoadingScreenStatus(`Failed to download. Either refresh page or remove map param from URL. Reason: ${err.message}`)
     return true
   }
 }

src/globalState.ts

@@ -56,10 +56,10 @@ const showModalInner = (modal: Modal) => {
   return true
 }
 
-export const showModal = (elem: (HTMLElement & Record<string, any>) | { reactType: string }) => {
+export const showModal = (elem: /* (HTMLElement & Record<string, any>) |  */{ reactType: string }) => {
   const resolved = elem instanceof HTMLElement ? { elem: ref(elem) } : elem
   const curModal = activeModalStack.at(-1)
-  if (elem === curModal?.elem || (elem.reactType && elem.reactType === curModal?.reactType) || !showModalInner(resolved)) return
+  if (/* elem === curModal?.elem ||  */(elem.reactType && elem.reactType === curModal?.reactType) || !showModalInner(resolved)) return
   if (curModal) defaultModalActions.hide(curModal)
   activeModalStack.push(resolved)
 }
@@ -118,24 +118,27 @@ export const showContextmenu = (items: ContextMenuItem[], { clientX, clientY })
 // ---
 
 export type AppConfig = {
-  defaultHost?: string
-  defaultHostSave?: string
+  // defaultHost?: string
+  // defaultHostSave?: string
   defaultProxy?: string
-  defaultProxySave?: string
-  defaultVersion?: string
+  // defaultProxySave?: string
+  // defaultVersion?: string
+  promoteServers?: Array<{ip, description, version?}>
   mapsProvider?: string
 }
 
 export const miscUiState = proxy({
   currentDisplayQr: null as string | null,
   currentTouch: null as boolean | null,
   serverIp: null as string | null,
+  username: '',
   hasErrors: false,
   singleplayer: false,
   flyingSquid: false,
   wanOpened: false,
   /** wether game hud is shown (in playing state) */
   gameLoaded: false,
+  loadedServerIndex: '',
   /** currently trying to load or loaded mc version, after all data is loaded */
   loadedDataVersion: null as string | null,
   appLoaded: false,

src/globals.d.ts

@@ -27,7 +27,6 @@ declare const customEvents: import('typed-emitter').default<{
 declare const beforeRenderFrame: Array<() => void>
 
 declare interface Document {
-    getElementById (id): any
     exitPointerLock?(): void
 }
 
@@ -37,14 +36,7 @@ declare namespace JSX {
     }
 }
 
-declare interface DocumentFragment {
-    getElementById (id): HTMLElement & Record<string, any>
-    querySelector (id): HTMLElement & Record<string, any>
-}
-
-declare interface Window extends Record<string, any> {
-
-}
+declare interface Window extends Record<string, any> {}
 
 type StringKeys<T extends object> = Extract<keyof T, string>