From ad0b545301db0ff50cf7e2d5aa34c884e64f2c56 Mon Sep 17 00:00:00 2001 From: Vitaly Date: Wed, 30 Aug 2023 10:53:58 +0300 Subject: [PATCH] copy only entity textures, inline others! it reduces copy time and deploy size --- esbuild.mjs | 1 + package.json | 4 ++-- scripts/build.js | 18 +++++++-------- scripts/esbuildPlugins.mjs | 3 +-- src/cursor.js | 35 ++++++++++++++++++++++++++---- src/globals.d.ts | 9 ++++---- src/menus/components/breath_bar.js | 7 +++--- src/menus/components/button.js | 9 +++++--- src/menus/components/food_bar.js | 5 +++-- src/menus/components/health_bar.js | 5 +++-- src/menus/components/hotbar.js | 8 ++++--- src/menus/components/slider.js | 8 ++++--- src/menus/hud.js | 11 ++++++---- src/menus/title_screen.js | 8 ++++--- src/styles.css | 2 +- 15 files changed, 88 insertions(+), 45 deletions(-) diff --git a/esbuild.mjs b/esbuild.mjs index c6760785..43ee2b1d 100644 --- a/esbuild.mjs +++ b/esbuild.mjs @@ -98,6 +98,7 @@ const ctx = await esbuild.context({ JSON.stringify(`https://github.com/${process.env.GITHUB_REPOSITORY || `${process.env.VERCEL_GIT_REPO_OWNER}/${process.env.VERCEL_GIT_REPO_SLUG}`}`) }, loader: { + // todo use external or resolve issues with duplicating '.png': 'dataurl' }, write: false, diff --git a/package.json b/package.json index ba239575..d09a2db9 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,6 @@ "start-watch-script": "nodemon -w esbuild.mjs esbuild.mjs", "build": "node scripts/build.js copyFiles && node esbuild.mjs --minify --prod", "watch": "node scripts/build.js copyFilesDev && webpack serve --config webpack.dev.js --progress", - "postinstall": "node scripts/patchPackages.js", "test:cypress": "cypress run", "test:e2e": "start-test http-get://localhost:8080 test:cypress", "prod-start": "node server.js", @@ -74,7 +73,7 @@ "https-browserify": "^1.0.0", "lodash-webpack-plugin": "^0.11.6", "memfs": "^3.5.3", - "mineflayer": "^4.11.0", + "mineflayer": "github:zardoy/mineflayer#custom", "mineflayer-pathfinder": "^2.4.4", "npm-run-all": "^4.1.5", "os-browserify": "^0.3.0", @@ -98,6 +97,7 @@ "pnpm": { "overrides": { "minecraft-data": "latest", + "prismarine-provider-anvil": "github:zardoy/prismarine-provider-anvil#chunk-impl-require-fix", "minecraft-protocol": "github:zardoy/minecraft-protocol#custom-client-extra" } } diff --git a/scripts/build.js b/scripts/build.js index ffd1c8dc..9f30fd36 100644 --- a/scripts/build.js +++ b/scripts/build.js @@ -12,7 +12,7 @@ const filesAlwaysToCopy = [ // these files could be copied at build time eg with copy plugin, but copy plugin slows down the config (2x in my testing, sometimes with too many open files error) is slow so we also copy them there const webpackFilesToCopy = [ { from: './node_modules/prismarine-viewer2/public/blocksStates/', to: 'dist/blocksStates/' }, - { from: './node_modules/prismarine-viewer2/public/textures/', to: 'dist/textures/' }, + // { from: './node_modules/prismarine-viewer2/public/textures/', to: 'dist/textures/' }, { from: './node_modules/prismarine-viewer2/public/worker.js', to: 'dist/worker.js' }, { from: './node_modules/prismarine-viewer2/public/supportedVersions.json', to: 'dist/supportedVersions.json' }, { from: './assets/', to: './dist/' }, @@ -24,6 +24,13 @@ exports.copyFiles = (isDev = false) => { [...filesAlwaysToCopy, ...webpackFilesToCopy].forEach(file => { fsExtra.copySync(file.from, file.to) }) + const cwd = './node_modules/prismarine-viewer2/public/textures/' + const files = glob.sync('{*/entity/**,*.png}', { cwd: cwd, nodir: true, }) + for (const file of files) { + const copyDest = path.join('dist/textures/', file) + fs.mkdirSync(path.dirname(copyDest), { recursive: true, }) + fs.copyFileSync(path.join(cwd, file), copyDest) + } console.timeEnd('copy files') } @@ -48,15 +55,8 @@ exports.getSwAdditionalEntries = () => { '*.png', '*.woff', 'worker.js', - // todo add gui textures (1.17.1) - // todo if we uncomment it it will spam the server with requests for textures on initial page load - // we need to put all textures into on file instead! - // `textures/${singlePlayerVersion}/**`, - `textures/${singlePlayerVersion}/blocks/destroy_stage_0.png.png`, - `textures/${singlePlayerVersion}/blocks/destroy_stage_1.png.png`, + // todo-low preload entity atlas? `textures/${singlePlayerVersion}.png`, - `textures/1.16.4/gui/widgets.png`, - `textures/1.16.4/gui/icons.png`, `textures/1.16.4/entity/squid.png`, ] const filesNeedsCacheKey = [ diff --git a/scripts/esbuildPlugins.mjs b/scripts/esbuildPlugins.mjs index c415db3d..42ca70b9 100644 --- a/scripts/esbuildPlugins.mjs +++ b/scripts/esbuildPlugins.mjs @@ -76,8 +76,7 @@ const plugins = [ path } } - if (path.includes('stage')) return - if (['.woff', '.woff2', '.ttf', '.png', '.jpg', '.jpeg', '.gif', '.svg'].some(ext => path.endsWith(ext))) { + if (['.woff', '.woff2', '.ttf'].some(ext => path.endsWith(ext))) { return { path, namespace: 'assets', diff --git a/src/cursor.js b/src/cursor.js index 4c47de7a..bb3c1bbe 100644 --- a/src/cursor.js +++ b/src/cursor.js @@ -1,7 +1,20 @@ +//@ts-check /* global THREE performance */ -const { Vec3 } = require('vec3') -const { isGameActive } = require('./globalState') +// wouldn't better to create atlas instead? +import destroyStage0 from 'minecraft-assets/minecraft-assets/data/1.10/blocks/destroy_stage_0.png' +import destroyStage1 from 'minecraft-assets/minecraft-assets/data/1.10/blocks/destroy_stage_1.png' +import destroyStage2 from 'minecraft-assets/minecraft-assets/data/1.10/blocks/destroy_stage_2.png' +import destroyStage3 from 'minecraft-assets/minecraft-assets/data/1.10/blocks/destroy_stage_3.png' +import destroyStage4 from 'minecraft-assets/minecraft-assets/data/1.10/blocks/destroy_stage_4.png' +import destroyStage5 from 'minecraft-assets/minecraft-assets/data/1.10/blocks/destroy_stage_5.png' +import destroyStage6 from 'minecraft-assets/minecraft-assets/data/1.10/blocks/destroy_stage_6.png' +import destroyStage7 from 'minecraft-assets/minecraft-assets/data/1.10/blocks/destroy_stage_7.png' +import destroyStage8 from 'minecraft-assets/minecraft-assets/data/1.10/blocks/destroy_stage_8.png' +import destroyStage9 from 'minecraft-assets/minecraft-assets/data/1.10/blocks/destroy_stage_9.png' + +import { Vec3 } from 'vec3' +import { isGameActive } from './globalState' function getViewDirection (pitch, yaw) { const csPitch = Math.cos(pitch) @@ -27,8 +40,20 @@ class Cursor { const loader = new THREE.TextureLoader() this.breakTextures = [] + const destroyStagesImages = [ + destroyStage0, + destroyStage1, + destroyStage2, + destroyStage3, + destroyStage4, + destroyStage5, + destroyStage6, + destroyStage7, + destroyStage8, + destroyStage9 + ] for (let i = 0; i < 10; i++) { - const texture = loader.load('textures/' + viewer.version + '/blocks/destroy_stage_' + i + '.png') + const texture = loader.load(destroyStagesImages[i]) texture.magFilter = THREE.NearestFilter texture.minFilter = THREE.NearestFilter this.breakTextures.push(texture) @@ -96,8 +121,10 @@ class Cursor { // Place if (cursorBlock && this.buttons[2] && (!this.lastButtons[2] || cursorChanged) && this.lastBlockPlaced >= 4) { const vecArray = [new Vec3(0, -1, 0), new Vec3(0, 1, 0), new Vec3(0, 0, -1), new Vec3(0, 0, 1), new Vec3(-1, 0, 0), new Vec3(1, 0, 0)] + //@ts-ignore const delta = cursorBlock.intersect.minus(cursorBlock.position) // check instead? + //@ts-ignore bot._placeBlockWithOptions(cursorBlock, vecArray[cursorBlock.face], { delta, forceLook: 'ignore' }).catch(console.warn) // this.lastBlockPlaced = 0 } @@ -148,4 +175,4 @@ class Cursor { } } -module.exports = Cursor +export default Cursor diff --git a/src/globals.d.ts b/src/globals.d.ts index db486c6a..cc13b180 100644 --- a/src/globals.d.ts +++ b/src/globals.d.ts @@ -1,6 +1,6 @@ /// -declare const THREE: typeof import('three'); +declare const THREE: typeof import('three') // todo declare const bot: import('mineflayer').Bot declare const singlePlayerServer: any @@ -30,9 +30,10 @@ interface ObjectConstructor { } declare module '*.css' { - /** - * @deprecated Use `import style from './style.css?inline'` instead. - */ const css: string export default css } +declare module '*.png' { + const png: string + export default png +} diff --git a/src/menus/components/breath_bar.js b/src/menus/components/breath_bar.js index d0ff1394..3c03602c 100644 --- a/src/menus/components/breath_bar.js +++ b/src/menus/components/breath_bar.js @@ -1,4 +1,5 @@ -const { LitElement, html, css } = require('lit') +const { LitElement, html, css, unsafeCSS } = require('lit') +const { guiIcons1_17_1 } = require('../hud') class BreathBar extends LitElement { static get styles () { @@ -22,13 +23,13 @@ class BreathBar extends LitElement { } .breath.full { - background-image: url('textures/1.17.1/gui/icons.png'); + background-image: url('${unsafeCSS(guiIcons1_17_1)}'); background-size: 256px; background-position: var(--offset) var(--bg-y); } .breath.half { - background-image: url('textures/1.17.1/gui/icons.png'); + background-image: url('${unsafeCSS(guiIcons1_17_1)}'); background-size: 256px; background-position: calc(var(--offset) - 9) var(--bg-y); } diff --git a/src/menus/components/button.js b/src/menus/components/button.js index dbbb693a..0ab40280 100644 --- a/src/menus/components/button.js +++ b/src/menus/components/button.js @@ -1,4 +1,6 @@ -const { LitElement, html, css } = require('lit') +//@ts-check +const widgetsGui = require('minecraft-assets/minecraft-assets/data/1.17.1/gui/widgets.png') +const { LitElement, html, css, unsafeCSS } = require('lit') const audioContext = new window.AudioContext() const sounds = {} @@ -74,7 +76,7 @@ class Button extends LitElement { left: 0; width: calc(50% + 1px); height: 20px; - background: url('textures/1.17.1/gui/widgets.png'); + background: url('${unsafeCSS(widgetsGui)}'); background-size: 256px; background-position-y: calc(var(--txrV) * -1); z-index: -1; @@ -88,7 +90,7 @@ class Button extends LitElement { left: 50%; width: 50%; height: 20px; - background: url('textures/1.17.1/gui/widgets.png'); + background: url('${unsafeCSS(widgetsGui)}'); background-size: 256px; background-position-x: calc(-200px + 100%); background-position-y: calc(var(--txrV) * -1); @@ -131,6 +133,7 @@ class Button extends LitElement { constructor () { super() this.label = '' + this.icon = undefined this.disabled = false this.width = '200px' this.onPress = () => { } diff --git a/src/menus/components/food_bar.js b/src/menus/components/food_bar.js index 17bdcccb..7f71ad0f 100644 --- a/src/menus/components/food_bar.js +++ b/src/menus/components/food_bar.js @@ -1,4 +1,5 @@ -const { LitElement, html, css } = require('lit') +const { LitElement, html, css, unsafeCSS } = require('lit') +const { guiIcons1_17_1 } = require('../hud') class FoodBar extends LitElement { static get styles () { @@ -19,7 +20,7 @@ class FoodBar extends LitElement { .food { width: 9px; height: 9px; - background-image: url('textures/1.17.1/gui/icons.png'), url('textures/1.17.1/gui/icons.png'); + background-image: url('${unsafeCSS(guiIcons1_17_1)}'), url('${unsafeCSS(guiIcons1_17_1)}'); background-size: 256px, 256px; background-position: var(--bg-x) var(--bg-y), var(--bg-x) var(--bg-y); margin-left: -1px; diff --git a/src/menus/components/health_bar.js b/src/menus/components/health_bar.js index fdbc3b8c..a6dacef8 100644 --- a/src/menus/components/health_bar.js +++ b/src/menus/components/health_bar.js @@ -1,4 +1,5 @@ -const { LitElement, html, css } = require('lit') +const { LitElement, html, css, unsafeCSS } = require('lit') +const { guiIcons1_17_1 } = require('../hud') function getEffectClass (effect) { switch (effect.id) { @@ -49,7 +50,7 @@ class HealthBar extends LitElement { .heart { width: 9px; height: 9px; - background-image: url('textures/1.17.1/gui/icons.png'), url('textures/1.17.1/gui/icons.png'); + background-image: url('${unsafeCSS(guiIcons1_17_1)}'), url('${unsafeCSS(guiIcons1_17_1)}'); background-size: 256px, 256px; background-position: var(--bg-x) var(--bg-y), var(--bg-x) var(--bg-y); margin-left: -1px; diff --git a/src/menus/components/hotbar.js b/src/menus/components/hotbar.js index d347b4f9..32b78606 100644 --- a/src/menus/components/hotbar.js +++ b/src/menus/components/hotbar.js @@ -1,7 +1,9 @@ -const { LitElement, html, css } = require('lit') +const { LitElement, html, css, unsafeCSS } = require('lit') const invsprite = require('../../invsprite.json') const { isGameActive } = require('../../globalState') +const widgetsTexture = require('minecraft-assets/minecraft-assets/data/1.16.4/gui/widgets.png') + class Hotbar extends LitElement { static get styles () { return css` @@ -12,7 +14,7 @@ class Hotbar extends LitElement { transform: translate(-50%); width: 182px; height: 22px; - background: url("textures/1.16.4/gui/widgets.png"); + background: url("${unsafeCSS(widgetsTexture)}"); background-size: 256px; } @@ -22,7 +24,7 @@ class Hotbar extends LitElement { top: -1px; width: 24px; height: 24px; - background: url("textures/1.16.4/gui/widgets.png"); + background: url("${unsafeCSS(widgetsTexture)}"); background-size: 256px; background-position-y: -22px; } diff --git a/src/menus/components/slider.js b/src/menus/components/slider.js index 25ced293..bb72f9f2 100644 --- a/src/menus/components/slider.js +++ b/src/menus/components/slider.js @@ -1,4 +1,6 @@ -const { LitElement, html, css } = require('lit') +const { LitElement, html, css, unsafeCSS } = require('lit') + +const widgetsGui = require('minecraft-assets/minecraft-assets/data/1.17.1/gui/widgets.png') class Slider extends LitElement { static get styles () { @@ -39,7 +41,7 @@ class Slider extends LitElement { left: 0; width: 50%; height: 20px; - background: url('textures/1.17.1/gui/widgets.png'); + background: url('${unsafeCSS(widgetsGui)}'); background-size: 256px; background-position-y: var(--txrV); z-index: -1; @@ -54,7 +56,7 @@ class Slider extends LitElement { left: 50%; width: 50%; height: 20px; - background: url('textures/1.17.1/gui/widgets.png'); + background: url('${unsafeCSS(widgetsGui)}'); background-size: 256px; background-position-x: calc(-200px + 100%); background-position-y: var(--txrV); diff --git a/src/menus/hud.js b/src/menus/hud.js index f465b50e..fa82f86f 100644 --- a/src/menus/hud.js +++ b/src/menus/hud.js @@ -1,10 +1,13 @@ //@ts-check -const { LitElement, html, css } = require('lit') +const { LitElement, html, css, unsafeCSS } = require('lit') const { isMobile } = require('./components/common') const { showModal, miscUiState } = require('../globalState') const { options, watchValue } = require('../optionsStorage') const { getGamemodeNumber } = require('../utils') +export const guiIcons1_17_1 = require('minecraft-assets/minecraft-assets/data/1.17.1/gui/icons.png') +export const guiIcons1_16_4 = require('minecraft-assets/minecraft-assets/data/1.16.4/gui/icons.png') + class Hud extends LitElement { static get styles () { return css` @@ -21,7 +24,7 @@ class Hud extends LitElement { .crosshair { width: 16px; height: 16px; - background: url('textures/1.17.1/gui/icons.png'); + background: url('${unsafeCSS(guiIcons1_17_1)}'); background-size: 256px; position: absolute; top: 50%; @@ -49,7 +52,7 @@ class Hud extends LitElement { transform: translate(-50%); width: 182px; height: 5px; - background-image: url('textures/1.16.4/gui/icons.png'); + background-image: url('${unsafeCSS(guiIcons1_16_4)}'); background-size: 256px; background-position-y: -64px; } @@ -57,7 +60,7 @@ class Hud extends LitElement { .xp-bar { width: 182px; height: 5px; - background-image: url('textures/1.17.1/gui/icons.png'); + background-image: url('${unsafeCSS(guiIcons1_17_1)}'); background-size: 256px; background-position-y: -69px; } diff --git a/src/menus/title_screen.js b/src/menus/title_screen.js index f1d8a52b..93c6e1ff 100644 --- a/src/menus/title_screen.js +++ b/src/menus/title_screen.js @@ -2,7 +2,9 @@ const { openWorldDirectory, openWorldZip } = require('../browserfs') const { showModal } = require('../globalState') const { fsState } = require('../loadFolder') const { openURL } = require('./components/common') -const { LitElement, html, css } = require('lit') +const { LitElement, html, css, unsafeCSS } = require('lit') + +const mcImage = require('minecraft-assets/minecraft-assets/data/1.17.1/gui/title/minecraft.png') // const SUPPORT_WORLD_LOADING = !!window.showDirectoryPicker const SUPPORT_WORLD_LOADING = true @@ -21,7 +23,7 @@ class TitleScreen extends LitElement { position: absolute; top: 0; left: 0; - background-image: url('textures/1.17.1/gui/title/minecraft.png'); + background-image: url('${unsafeCSS(mcImage)}'); background-size: 256px; width: 155px; height: 44px; @@ -32,7 +34,7 @@ class TitleScreen extends LitElement { position: absolute; top: 0; left: 155px; - background-image: url('textures/1.17.1/gui/title/minecraft.png'); + background-image: url('${unsafeCSS(mcImage)}'); background-size: 256px; width: 155px; height: 44px; diff --git a/src/styles.css b/src/styles.css index 7f2b0a59..726d4aef 100644 --- a/src/styles.css +++ b/src/styles.css @@ -26,7 +26,7 @@ html { position: absolute; top: 0; left: 0; - background: url('textures/1.17.1/gui/options_background.png'), rgba(0, 0, 0, 0.7); + background: url('minecraft-assets/minecraft-assets/data/1.17.1/gui/options_background.png'), rgba(0, 0, 0, 0.7); background-size: 16px; background-repeat: repeat; width: 100%;