A lot of IOS improvements! (#33)

.eslintignore

@@ -0,0 +1 @@
+node_modules

.eslintrc.json

@@ -7,6 +7,7 @@
     "rules": {
         "space-infix-ops": "error",
         "no-multi-spaces": "error",
+        "space-before-function-paren": "error",
         "space-in-parens": [
             "error",
             "never"
@@ -94,5 +95,6 @@
         "no-bitwise": "off",
         "unicorn/filename-case": "off",
         "max-depth": "off"
-    }
+    },
+    "root": true
 }

.github/workflows/ci.yml

@@ -15,7 +15,7 @@ jobs:
       - run: pnpm lint
       - run: pnpm check-build
       - run: nohup pnpm prod-start &
-      - run: nohup node cypress/minecraft-server.mjs &
+      - run: nohup pnpm test-mc-server &
       - uses: cypress-io/github-action@v5
         with:
           install: false

.gitignore

@@ -15,3 +15,4 @@ out
 *.iml
 .vercel
 generated
+storybook-static

.storybook/main.ts

@@ -0,0 +1,14 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

.storybook/preview.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+import type { Preview } from "@storybook/react";
+
+import '../src/styles.css'
+import './storybook.css'
+
+const preview: Preview = {
+  decorators: [
+    (Story) => (
+      <div id='ui-root'>
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

.storybook/storybook.css

@@ -0,0 +1,18 @@
+#storybook-root::before {
+    content: "";
+    position: fixed;
+    inset: 0;
+    background-image: url("../assets/storybook-bg.jpg");
+    background-size: cover;
+    background-position: center;
+}
+
+@font-face {
+    font-family: minecraft;
+    src: url(../assets/minecraftia.woff);
+}
+
+@font-face {
+    font-family: mojangles;
+    src: url(../assets/mojangles.ttf);
+}

README.MD

@@ -48,6 +48,9 @@ To open the console, press `F12`, or if you are on mobile, you can type `#debug`
 
 It should be easy to build/start the project locally. See [CONTRIBUTING.MD](./CONTRIBUTING.md) for more info.
 
+There is storybook for fast UI development. Run `pnpm storybook` to start it.
+There is world renderer playground ([link](https://mcon.vercel.app/playground.html)).
+
 However, there are many things that can be done in online version. You can access some global variables in the console and useful examples:
 
 - `localStorage.debug = '*'` - Enables all debug messages!

cypress/integration/index.spec.ts

@@ -49,24 +49,26 @@ it('Loads & renders singleplayer', () => {
     },
     renderDistance: 2
   })
-  cy.get('#title-screen').find('[data-test-id="singleplayer-button"]', { includeShadowDom: true }).click()
+  cy.get('[data-test-id="singleplayer-button"]', { includeShadowDom: true }).click()
   testWorldLoad()
 })
 
-it('Joins to server', () => {
+it('Joins to server', {
+  retries: 3
+}, () => {
   // visit('/?version=1.16.1')
   window.localStorage.version = ''
   visit()
   // todo replace with data-test
-  cy.get('#title-screen').find('[data-test-id="connect-screen-button"]', { includeShadowDom: true }).click()
+  cy.get('[data-test-id="connect-screen-button"]', { includeShadowDom: true }).click()
   cy.get('input#serverip', { includeShadowDom: true }).clear().focus().type('localhost')
   cy.get('[data-test-id="connect-to-server"]', { includeShadowDom: true }).click()
   testWorldLoad()
 })
 
 it('Loads & renders zip world', () => {
   cleanVisit()
-  cy.get('#title-screen').find('[data-test-id="select-file-folder"]', { includeShadowDom: true }).click({ shiftKey: true })
+  cy.get('[data-test-id="select-file-folder"]', { includeShadowDom: true }).click({ shiftKey: true })
   cy.get('input[type="file"]').selectFile('cypress/superflat.zip', { force: true })
   testWorldLoad()
 })

index.html

@@ -30,7 +30,7 @@
     <meta name="language" content="English">
     <meta name="author" content="PrismarineJS">
     <meta name="theme-color" content="#349474">
-    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no'>
+    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover'>
     <meta property="og:title" content="Prismarine Web Client" />
     <meta property="og:type" content="website" />
     <meta property="og:image" content="https://prismarinejs.github.io/prismarine-web-client/favicon.png" />
@@ -41,12 +41,8 @@
     <div id="ui-root">
       <pmui-hud id="hud" style="display: none;"></pmui-hud>
       <pmui-pausescreen id="pause-screen" style="display: none;"></pmui-pausescreen>
-      <pmui-loading-error-screen id="loading-error-screen" style="display: none;"></pmui-loading-error-screen>
       <pmui-playscreen id="play-screen" style="display: none;"></pmui-playscreen>
       <pmui-keybindsscreen id="keybinds-screen" style="display: none;"></pmui-keybindsscreen>
-      <pmui-optionsscreen id="options-screen" style="display: none;"></pmui-optionsscreen>
-      <pmui-advanced-optionsscreen style="display: none;"></pmui-advanced-optionsscreen>
-      <pmui-titlescreen id="title-screen" style="display: none;"></pmui-titlescreen>
       <pmui-notification></pmui-notification>
       <context-menu id="context-menu"></context-menu>
     </div>

package.json

@@ -12,7 +12,10 @@
     "prod-start": "node server.js",
     "postinstall": "node scripts/gen-texturepack-files.mjs",
     "test-mc-server": "tsx cypress/minecraft-server.mjs",
-    "lint": "eslint \"{src,cypress}/**/*.{ts,js,jsx,tsx}\""
+    "lint": "eslint \"{src,cypress}/**/*.{ts,js,jsx,tsx}\"",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "watch-worker": "node prismarine-viewer/buildWorker.mjs -w"
   },
   "keywords": [
     "prismarine",
@@ -51,13 +54,24 @@
     "qrcode.react": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-transition-group": "^4.4.5",
     "stats-gl": "^1.0.5",
     "stats.js": "^0.17.0",
+    "tippy.js": "^6.3.7",
+    "title-case": "3.x",
     "valtio": "^1.11.1",
     "workbox-build": "^7.0.0"
   },
   "devDependencies": {
+    "@storybook/addon-essentials": "^7.4.6",
+    "@storybook/addon-links": "^7.4.6",
+    "@storybook/blocks": "^7.4.6",
+    "@storybook/react": "^7.4.6",
+    "@storybook/react-vite": "^7.4.6",
+    "@storybook/web-components": "^7.4.6",
+    "@storybook/web-components-vite": "^7.4.6",
     "@types/lodash-es": "^4.17.9",
+    "@types/react-transition-group": "^4.4.7",
     "@types/stats.js": "^0.17.1",
     "@types/three": "0.128.0",
     "@xmcl/installer": "^5.1.0",
@@ -86,6 +100,7 @@
     "prismarine-viewer": "link:prismarine-viewer",
     "process": "github:PrismarineJS/node-process",
     "rimraf": "^5.0.1",
+    "storybook": "^7.4.6",
     "stream-browserify": "^3.0.0",
     "three": "0.128.0",
     "timers-browserify": "^2.0.12",
@@ -100,7 +115,8 @@
       "prismarine-world": "github:zardoy/prismarine-world#next-era",
       "minecraft-data": "3.45.0",
       "prismarine-provider-anvil": "github:zardoy/prismarine-provider-anvil#everything",
-      "minecraft-protocol": "github:zardoy/minecraft-protocol#custom-client-extra"
+      "minecraft-protocol": "github:zardoy/minecraft-protocol#custom-client-extra",
+      "react": "^18.2.0"
     }
   }
 }