From d8261c2659acd6f90e6d95decbd45b665a7aac2d Mon Sep 17 00:00:00 2001 From: Vitaly Turovsky Date: Sun, 7 Jul 2024 19:18:48 +0300 Subject: [PATCH] fix: bundle pixealrticons with the app instead of fetching them from remote location in runtime --- .storybook/preview.tsx | 8 +- README.MD | 12 +- esbuild.mjs | 3 + package.json | 5 +- patches/pixelarticons@1.8.1.patch | 27 + pnpm-lock.yaml | 26 +- scripts/genPixelartTypes.ts | 16 + src/index.ts | 1 - src/packetsPatcher.ts | 16 +- src/react/Button.tsx | 5 +- src/react/ConceptCommandsGui.stories.tsx | 3 +- src/react/IndicatorEffects.stories.tsx | 12 +- src/react/KeybindingsScreen.tsx | 21 +- src/react/MainMenu.tsx | 5 +- src/react/PixelartIcon.tsx | 22 +- src/react/ServersList.stories.tsx | 1 - src/react/globals.d.ts | 9 +- src/react/pixelartIcons.generated.ts | 974 +++++++++++++++++++++++ src/styles.css | 5 + 19 files changed, 1102 insertions(+), 69 deletions(-) create mode 100644 patches/pixelarticons@1.8.1.patch create mode 100644 scripts/genPixelartTypes.ts create mode 100644 src/react/pixelartIcons.generated.ts diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index a8a219f1..74b0f05c 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -1,6 +1,6 @@ import React from 'react' -import type { Preview } from "@storybook/react"; +import type { Preview } from "@storybook/react" import '../src/styles.css' import './storybook.css' @@ -11,7 +11,7 @@ const preview: Preview = { const noScaling = c.parameters.noScaling return
-
; + }, ], parameters: { @@ -23,6 +23,6 @@ const preview: Preview = { }, }, }, -}; +} -export default preview; +export default preview diff --git a/README.MD b/README.MD index ad120dbf..9a4ba24a 100644 --- a/README.MD +++ b/README.MD @@ -4,14 +4,14 @@ A true Minecraft client running in your browser! A port of the original game to the web, written in JavaScript using modern web technologies. -If you encounter any bugs or usability issues, please report them! +If you encounter any bugs or usability issues, please report them! For development, see [development](#development--debugging). You can try this out at [mcraft.fun](https://mcraft.fun/), [pcm.gg](https://pcm.gg) (short link) [mcon.vercel.app](https://mcon.vercel.app/) or the GitHub pages deploy. Every commit from the `develop` (default) branch is deployed to [s.mcraft.fun](https://s.mcraft.fun/) - so it's usually newer, but might be less stable. ### Big Features - Open any zip world file or even folder in read-write mode! -- Connect to cracked servers* (it's possible because of proxy servers, see below) +- Connect to Java servers running in both offline (cracked) and online mode* (it's possible because of proxy servers, see below) - Singleplayer mode with simple world generations! - Works offline - Play with friends over internet! (P2P is powered by Peer.js discovery servers) @@ -39,9 +39,9 @@ Whatever offline mode you used (zip, folder, just single player), you can always ### Servers -You can play almost on any server, supporting offline connections. +You can play almost on any Java server, vanilla servers are fully supported. See the [Mineflayer](https://github.com/PrismarineJS/mineflayer) repo for the list of supported versions (should support majority of versions). -There is a builtin proxy, but you can also host a your one! Just clone the repo, run `pnpm i` (following CONTRIBUTING.MD) and run `pnpm prod-start`, then you can specify `http://localhost:8080` in the proxy field. +There is a builtin proxy, but you can also host your one! Just clone the repo, run `pnpm i` (following CONTRIBUTING.MD) and run `pnpm prod-start`, then you can specify `http://localhost:8080` in the proxy field. MS account authentication will be supported soon. ### Rendering @@ -67,9 +67,9 @@ There are many many settings, that are not exposed in the UI yet. You can find o To open the console, press `F12`, or if you are on mobile, you can type `#debug` in the URL (browser address bar), it wont't reload the page, but you will see a button to open the console. This way you can change advanced settings and see all errors or warnings. Also this way you can access global variables (described below). -### Debugging +### Development & Debugging -It should be easy to build/start the project locally. See [CONTRIBUTING.MD](./CONTRIBUTING.md) for more info. +It should be easy to build/start the project locally. See [CONTRIBUTING.MD](./CONTRIBUTING.md) for more info. Also you can look at Dockerfile for reference. There is world renderer playground ([link](https://mcon.vercel.app/playground.html)). diff --git a/esbuild.mjs b/esbuild.mjs index 28b233bf..1f075a62 100644 --- a/esbuild.mjs +++ b/esbuild.mjs @@ -85,6 +85,9 @@ const buildOptions = { '.vert': 'text', '.frag': 'text', '.obj': 'text', + '.woff': 'dataurl', + '.woff2': 'dataurl', + '.ttf': 'dataurl', }, write: false, // todo would be better to enable? diff --git a/package.json b/package.json index 5bf32a69..07e9ff0b 100644 --- a/package.json +++ b/package.json @@ -66,7 +66,6 @@ "flying-squid": "npm:@zardoy/flying-squid@^0.0.33", "fs-extra": "^11.1.1", "google-drive-browserfs": "github:zardoy/browserfs#google-drive", - "iconify-icon": "^1.0.8", "jszip": "^3.10.1", "lodash-es": "^4.17.21", "minecraft-assets": "^1.12.2", @@ -77,6 +76,7 @@ "net-browserify": "github:zardoy/prismarinejs-net-browserify", "node-gzip": "^1.1.2", "peerjs": "^1.5.0", + "pixelarticons": "^1.8.1", "pretty-bytes": "^6.1.1", "prismarine-provider-anvil": "github:zardoy/prismarine-provider-anvil#everything", "prosemirror-example-setup": "^1.2.2", @@ -169,7 +169,8 @@ }, "patchedDependencies": { "minecraft-protocol@1.47.0": "patches/minecraft-protocol@1.47.0.patch", - "three@0.154.0": "patches/three@0.154.0.patch" + "three@0.154.0": "patches/three@0.154.0.patch", + "pixelarticons@1.8.1": "patches/pixelarticons@1.8.1.patch" } }, "packageManager": "pnpm@9.0.4" diff --git a/patches/pixelarticons@1.8.1.patch b/patches/pixelarticons@1.8.1.patch new file mode 100644 index 00000000..10044536 --- /dev/null +++ b/patches/pixelarticons@1.8.1.patch @@ -0,0 +1,27 @@ +diff --git a/fonts/pixelart-icons-font.css b/fonts/pixelart-icons-font.css +index 3b2ebe839370d96bf93ef5ca94a827f07e49378d..103ab4d6b9f3b5c9f41d1407e3cbf4ac392fbf41 100644 +--- a/fonts/pixelart-icons-font.css ++++ b/fonts/pixelart-icons-font.css +@@ -1,16 +1,13 @@ + @font-face { + font-family: "pixelart-icons-font"; +- src: url('pixelart-icons-font.eot?t=1711815892278'); /* IE9*/ +- src: url('pixelart-icons-font.eot?t=1711815892278#iefix') format('embedded-opentype'), /* IE6-IE8 */ ++ src: + url("pixelart-icons-font.woff2?t=1711815892278") format("woff2"), + url("pixelart-icons-font.woff?t=1711815892278") format("woff"), + url('pixelart-icons-font.ttf?t=1711815892278') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ +- url('pixelart-icons-font.svg?t=1711815892278#pixelart-icons-font') format('svg'); /* iOS 4.1- */ + } + + [class^="pixelart-icons-font-"], [class*=" pixelart-icons-font-"] { + font-family: 'pixelart-icons-font' !important; +- font-size:24px; + font-style:normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +@@ -503,4 +500,3 @@ + .pixelart-icons-font-zap:before { content: "\ebe4"; } + .pixelart-icons-font-zoom-in:before { content: "\ebe5"; } + .pixelart-icons-font-zoom-out:before { content: "\ebe6"; } +- diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cf890476..2208e681 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -20,6 +20,9 @@ patchedDependencies: minecraft-protocol@1.47.0: hash: 7otpchsbv7hxsuis4rrrwdtbve path: patches/minecraft-protocol@1.47.0.patch + pixelarticons@1.8.1: + hash: cclg2qo6d4yjs4evj64nr2mbwa + path: patches/pixelarticons@1.8.1.patch three@0.154.0: hash: sj7ocb4p23jym6bkfgueanti2e path: patches/three@0.154.0.patch @@ -115,9 +118,6 @@ importers: google-drive-browserfs: specifier: github:zardoy/browserfs#google-drive version: browserfs@https://codeload.github.com/zardoy/browserfs/tar.gz/ab58ae8ef00e3a31db01909e365e6cb5188436e0 - iconify-icon: - specifier: ^1.0.8 - version: 1.0.8 jszip: specifier: ^3.10.1 version: 3.10.1 @@ -148,6 +148,9 @@ importers: peerjs: specifier: ^1.5.0 version: 1.5.0 + pixelarticons: + specifier: ^1.8.1 + version: 1.8.1(patch_hash=cclg2qo6d4yjs4evj64nr2mbwa) pretty-bytes: specifier: ^6.1.1 version: 6.1.1 @@ -1723,9 +1726,6 @@ packages: '@humanwhocodes/object-schema@1.2.1': resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==} - '@iconify/types@2.0.0': - resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==} - '@isaacs/cliui@8.0.2': resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==} engines: {node: '>=12'} @@ -5158,9 +5158,6 @@ packages: hyphenate-style-name@1.0.4: resolution: {integrity: sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==} - iconify-icon@1.0.8: - resolution: {integrity: sha512-jvbUKHXf8EnGGArmhlP2IG8VqQLFFyTvTqb9LVL2TKTh7/eCCD1o2HHE9thpbJJb6B8hzhcFb6rOKhvo7reNKA==} - iconv-lite@0.4.24: resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==} engines: {node: '>=0.10.0'} @@ -6633,6 +6630,9 @@ packages: resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==} engines: {node: '>= 6'} + pixelarticons@1.8.1: + resolution: {integrity: sha512-4taoDCleft9RtzVHLA73VDnRBwJNqlwbW8ShO6S0G9b+bM5ArGe1MVFW9xpromuPvQgVUYCSjRxNAQuNtADqyA==} + pixelmatch@4.0.2: resolution: {integrity: sha512-J8B6xqiO37sU/gkcMglv6h5Jbd9xNER7aHzpfRdNmV4IbQBzBpe4l9XmbG+xPF/znacgu2jfEw+wHffaq/YkXA==} hasBin: true @@ -9985,8 +9985,6 @@ snapshots: '@humanwhocodes/object-schema@1.2.1': {} - '@iconify/types@2.0.0': {} - '@isaacs/cliui@8.0.2': dependencies: string-width: 5.1.2 @@ -14722,10 +14720,6 @@ snapshots: hyphenate-style-name@1.0.4: {} - iconify-icon@1.0.8: - dependencies: - '@iconify/types': 2.0.0 - iconv-lite@0.4.24: dependencies: safer-buffer: 2.1.2 @@ -16433,6 +16427,8 @@ snapshots: pirates@4.0.6: {} + pixelarticons@1.8.1(patch_hash=cclg2qo6d4yjs4evj64nr2mbwa): {} + pixelmatch@4.0.2: dependencies: pngjs: 3.4.0 diff --git a/scripts/genPixelartTypes.ts b/scripts/genPixelartTypes.ts new file mode 100644 index 00000000..e7c9649a --- /dev/null +++ b/scripts/genPixelartTypes.ts @@ -0,0 +1,16 @@ +import fs from 'fs' + +const icons = fs.readdirSync('node_modules/pixelarticons/svg') + +const addIconPath = '../../node_modules/pixelarticons/svg/' + +let str = 'export type PixelartIconsGenerated = {\n' +for (const icon of icons) { + const name = icon.replace('.svg', '') + // jsdoc + const jsdocImage = '![image](' + addIconPath + icon + ')' + str += ` /** ${jsdocImage} */\n` + str += ` '${name}': string;\n` +} +str += '}\n' +fs.writeFileSync('./src/react/pixelartIcons.generated.ts', str, 'utf8') diff --git a/src/index.ts b/src/index.ts index e73e8240..e34e81ab 100644 --- a/src/index.ts +++ b/src/index.ts @@ -2,7 +2,6 @@ import './importsWorkaround' import './styles.css' import './globals' -import 'iconify-icon' import './devtools' import './entities' import './globalDomListeners' diff --git a/src/packetsPatcher.ts b/src/packetsPatcher.ts index f877d6ed..587c41c9 100644 --- a/src/packetsPatcher.ts +++ b/src/packetsPatcher.ts @@ -2,13 +2,13 @@ // todo these fixes should be ported to mineflayer export default () => { - customEvents.on('mineflayerBotCreated', () => { - bot._client.on('packet', (data, meta) => { - if (meta.name === 'map_chunk') { - if (data.groundUp && data.bitMap === 1 && data.chunkData.every(x => x === 0)) { - data.chunkData = Buffer.from(Array.from({ length: 12_544 }).fill(0) as any) - } - } - }) + customEvents.on('mineflayerBotCreated', () => { + bot._client.on('packet', (data, meta) => { + if (meta.name === 'map_chunk') { + if (data.groundUp && data.bitMap === 1 && data.chunkData.every(x => x === 0)) { + data.chunkData = Buffer.from(Array.from({ length: 12_544 }).fill(0) as any) + } + } }) + }) } diff --git a/src/react/Button.tsx b/src/react/Button.tsx index 20dc0801..10ff2fb0 100644 --- a/src/react/Button.tsx +++ b/src/react/Button.tsx @@ -2,6 +2,7 @@ import classNames from 'classnames' import { createContext, FC, Ref, useContext } from 'react' import buttonCss from './button.module.css' import SharedHudVars from './SharedHudVars' +import PixelartIcon from './PixelartIcon' // testing in storybook from deathscreen @@ -17,7 +18,7 @@ const ButtonContext = createContext({ onClick () { }, }) -export const ButtonProvider: FC<{children, onClick}> = ({ children, onClick }) => { +export const ButtonProvider: FC<{ children, onClick }> = ({ children, onClick }) => { return {children} } @@ -39,7 +40,7 @@ export default (({ label, icon, children, inScreen, rootRef, type = 'button', .. return diff --git a/src/react/ConceptCommandsGui.stories.tsx b/src/react/ConceptCommandsGui.stories.tsx index 89cb6eff..4f3586d4 100644 --- a/src/react/ConceptCommandsGui.stories.tsx +++ b/src/react/ConceptCommandsGui.stories.tsx @@ -11,7 +11,6 @@ const Button2 = ({ title, icon }) => {
{title}
- {/*