From bf9889bc0b4588cc6ebf3a16d8e6cece688c0d80 Mon Sep 17 00:00:00 2001 From: John Edvard Reiten Date: Sun, 21 Aug 2022 00:23:50 +0900 Subject: [PATCH] fix: Load images using data-url. Also reduces space --- package-lock.json | 181 ++++++++++++++++++++++++---------------------- package.json | 8 +- src/Goal.js | 3 +- src/Player.js | 2 +- src/Saw.js | 4 +- 5 files changed, 105 insertions(+), 93 deletions(-) diff --git a/package-lock.json b/package-lock.json index 32c111f..3c7b8d3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,9 +12,8 @@ "kontra": "^8.0.0" }, "devDependencies": { - "@parcel/compressor-brotli": "^2.7.0", - "@parcel/compressor-gzip": "^2.7.0", - "@parcel/reporter-bundle-analyzer": "^2.7.0", + "@parcel/optimizer-data-url": "^2.7.0", + "@parcel/transformer-inline-string": "^2.7.0", "parcel": "^2.7.0", "parcel-reporter-static-files-copy": "^1.4.0", "roadroller": "^2.1.0" @@ -419,40 +418,6 @@ "url": "https://opencollective.com/parcel" } }, - "node_modules/@parcel/compressor-brotli": { - "version": "2.7.0", - "resolved": "https://registry.npmjs.org/@parcel/compressor-brotli/-/compressor-brotli-2.7.0.tgz", - "integrity": "sha512-dXyV/jXS2fqhU9Uj+29xPt/txTXnSJcvUtjo3R8cjKbJYK2vu4e1s0QCo5rndpCYgbYKevwNdHmIuxN2us+A3Q==", - "dev": true, - "dependencies": { - "@parcel/plugin": "2.7.0" - }, - "engines": { - "node": ">= 12.0.0", - "parcel": "^2.7.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/@parcel/compressor-gzip": { - "version": "2.7.0", - "resolved": "https://registry.npmjs.org/@parcel/compressor-gzip/-/compressor-gzip-2.7.0.tgz", - "integrity": "sha512-k4qwF7i+2ouGAyjXfCeeT8nEcSAXQVPdF0eG35pZeMsT+vrQ1+MI1L3AwBhLIuXRPXDMv47Eqx+KTsatP9gVmg==", - "dev": true, - "dependencies": { - "@parcel/plugin": "2.7.0" - }, - "engines": { - "node": ">= 12.0.0", - "parcel": "^2.7.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, "node_modules/@parcel/compressor-raw": { "version": "2.7.0", "resolved": "https://registry.npmjs.org/@parcel/compressor-raw/-/compressor-raw-2.7.0.tgz", @@ -937,6 +902,26 @@ "url": "https://opencollective.com/parcel" } }, + "node_modules/@parcel/optimizer-data-url": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/@parcel/optimizer-data-url/-/optimizer-data-url-2.7.0.tgz", + "integrity": "sha512-rDy/ZOVauVVkOUPffnsBYBNhX7OtqVmU2xQZcQqQtRzeRqFJAshpjkUGmZJ2Aee4vPkbcsSA1/nZDpu1fI7cIw==", + "dev": true, + "dependencies": { + "@parcel/plugin": "2.7.0", + "@parcel/utils": "2.7.0", + "isbinaryfile": "^4.0.2", + "mime": "^2.4.4" + }, + "engines": { + "node": ">= 12.0.0", + "parcel": "^2.7.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, "node_modules/@parcel/optimizer-htmlnano": { "version": "2.7.0", "resolved": "https://registry.npmjs.org/@parcel/optimizer-htmlnano/-/optimizer-htmlnano-2.7.0.tgz", @@ -1163,25 +1148,6 @@ "url": "https://opencollective.com/parcel" } }, - "node_modules/@parcel/reporter-bundle-analyzer": { - "version": "2.7.0", - "resolved": "https://registry.npmjs.org/@parcel/reporter-bundle-analyzer/-/reporter-bundle-analyzer-2.7.0.tgz", - "integrity": "sha512-bPvI+cF0cRXekGsavjemvYCFVsOW6XSNELHSb/b38oTPBE5zAhkDkk4ZNC0neIYqtxcOk/NMZZ4V7XPncddGVg==", - "dev": true, - "dependencies": { - "@parcel/plugin": "2.7.0", - "@parcel/utils": "2.7.0", - "nullthrows": "^1.1.1" - }, - "engines": { - "node": ">= 12.0.0", - "parcel": "^2.7.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, "node_modules/@parcel/reporter-cli": { "version": "2.7.0", "resolved": "https://registry.npmjs.org/@parcel/reporter-cli/-/reporter-cli-2.7.0.tgz", @@ -1417,6 +1383,23 @@ "@parcel/core": "^2.7.0" } }, + "node_modules/@parcel/transformer-inline-string": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/@parcel/transformer-inline-string/-/transformer-inline-string-2.7.0.tgz", + "integrity": "sha512-/WurxNIk85rOMq9YhPUAA2MqkXjgUGmU4BGdpwUeJKSB2xbA9Zu5Q355lCGzIxH50MJpDZ1Nm4As2Ss6BXVURA==", + "dev": true, + "dependencies": { + "@parcel/plugin": "2.7.0" + }, + "engines": { + "node": ">= 12.0.0", + "parcel": "^2.7.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, "node_modules/@parcel/transformer-js": { "version": "2.7.0", "resolved": "https://registry.npmjs.org/@parcel/transformer-js/-/transformer-js-2.7.0.tgz", @@ -2184,6 +2167,18 @@ "integrity": "sha512-6BEnpVn1rcf3ngfmViLM6vjUjGErbdrL4rwlv+u1NO1XO8kqT4YGL8+19Q+Z/bas8tY90BTWMk2+fW1g6hQjbA==", "dev": true }, + "node_modules/isbinaryfile": { + "version": "4.0.10", + "resolved": "https://registry.npmjs.org/isbinaryfile/-/isbinaryfile-4.0.10.tgz", + "integrity": "sha512-iHrqe5shvBUcFbmZq9zOQHBoeOhZJu6RQGrDpBgenUm/Am+F3JM2MgQj+rK3Z601fzrL5gLZWtAPH2OBaSVcyw==", + "dev": true, + "engines": { + "node": ">= 8.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/gjtorikian/" + } + }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -2257,6 +2252,18 @@ "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==", "dev": true }, + "node_modules/mime": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz", + "integrity": "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==", + "dev": true, + "bin": { + "mime": "cli.js" + }, + "engines": { + "node": ">=4.0.0" + } + }, "node_modules/msgpackr": { "version": "1.6.2", "resolved": "https://registry.npmjs.org/msgpackr/-/msgpackr-1.6.2.tgz", @@ -3018,24 +3025,6 @@ "chalk": "^4.1.0" } }, - "@parcel/compressor-brotli": { - "version": "2.7.0", - "resolved": "https://registry.npmjs.org/@parcel/compressor-brotli/-/compressor-brotli-2.7.0.tgz", - "integrity": "sha512-dXyV/jXS2fqhU9Uj+29xPt/txTXnSJcvUtjo3R8cjKbJYK2vu4e1s0QCo5rndpCYgbYKevwNdHmIuxN2us+A3Q==", - "dev": true, - "requires": { - "@parcel/plugin": "2.7.0" - } - }, - "@parcel/compressor-gzip": { - "version": "2.7.0", - "resolved": "https://registry.npmjs.org/@parcel/compressor-gzip/-/compressor-gzip-2.7.0.tgz", - "integrity": "sha512-k4qwF7i+2ouGAyjXfCeeT8nEcSAXQVPdF0eG35pZeMsT+vrQ1+MI1L3AwBhLIuXRPXDMv47Eqx+KTsatP9gVmg==", - "dev": true, - "requires": { - "@parcel/plugin": "2.7.0" - } - }, "@parcel/compressor-raw": { "version": "2.7.0", "resolved": "https://registry.npmjs.org/@parcel/compressor-raw/-/compressor-raw-2.7.0.tgz", @@ -3303,6 +3292,18 @@ "nullthrows": "^1.1.1" } }, + "@parcel/optimizer-data-url": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/@parcel/optimizer-data-url/-/optimizer-data-url-2.7.0.tgz", + "integrity": "sha512-rDy/ZOVauVVkOUPffnsBYBNhX7OtqVmU2xQZcQqQtRzeRqFJAshpjkUGmZJ2Aee4vPkbcsSA1/nZDpu1fI7cIw==", + "dev": true, + "requires": { + "@parcel/plugin": "2.7.0", + "@parcel/utils": "2.7.0", + "isbinaryfile": "^4.0.2", + "mime": "^2.4.4" + } + }, "@parcel/optimizer-htmlnano": { "version": "2.7.0", "resolved": "https://registry.npmjs.org/@parcel/optimizer-htmlnano/-/optimizer-htmlnano-2.7.0.tgz", @@ -3440,17 +3441,6 @@ "@parcel/types": "2.7.0" } }, - "@parcel/reporter-bundle-analyzer": { - "version": "2.7.0", - "resolved": "https://registry.npmjs.org/@parcel/reporter-bundle-analyzer/-/reporter-bundle-analyzer-2.7.0.tgz", - "integrity": "sha512-bPvI+cF0cRXekGsavjemvYCFVsOW6XSNELHSb/b38oTPBE5zAhkDkk4ZNC0neIYqtxcOk/NMZZ4V7XPncddGVg==", - "dev": true, - "requires": { - "@parcel/plugin": "2.7.0", - "@parcel/utils": "2.7.0", - "nullthrows": "^1.1.1" - } - }, "@parcel/reporter-cli": { "version": "2.7.0", "resolved": "https://registry.npmjs.org/@parcel/reporter-cli/-/reporter-cli-2.7.0.tgz", @@ -3596,6 +3586,15 @@ "nullthrows": "^1.1.1" } }, + "@parcel/transformer-inline-string": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/@parcel/transformer-inline-string/-/transformer-inline-string-2.7.0.tgz", + "integrity": "sha512-/WurxNIk85rOMq9YhPUAA2MqkXjgUGmU4BGdpwUeJKSB2xbA9Zu5Q355lCGzIxH50MJpDZ1Nm4As2Ss6BXVURA==", + "dev": true, + "requires": { + "@parcel/plugin": "2.7.0" + } + }, "@parcel/transformer-js": { "version": "2.7.0", "resolved": "https://registry.npmjs.org/@parcel/transformer-js/-/transformer-js-2.7.0.tgz", @@ -4095,6 +4094,12 @@ "integrity": "sha512-6BEnpVn1rcf3ngfmViLM6vjUjGErbdrL4rwlv+u1NO1XO8kqT4YGL8+19Q+Z/bas8tY90BTWMk2+fW1g6hQjbA==", "dev": true }, + "isbinaryfile": { + "version": "4.0.10", + "resolved": "https://registry.npmjs.org/isbinaryfile/-/isbinaryfile-4.0.10.tgz", + "integrity": "sha512-iHrqe5shvBUcFbmZq9zOQHBoeOhZJu6RQGrDpBgenUm/Am+F3JM2MgQj+rK3Z601fzrL5gLZWtAPH2OBaSVcyw==", + "dev": true + }, "js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -4157,6 +4162,12 @@ "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==", "dev": true }, + "mime": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz", + "integrity": "sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==", + "dev": true + }, "msgpackr": { "version": "1.6.2", "resolved": "https://registry.npmjs.org/msgpackr/-/msgpackr-1.6.2.tgz", diff --git a/package.json b/package.json index fd572e9..ff59efc 100644 --- a/package.json +++ b/package.json @@ -8,14 +8,14 @@ "build": "rm -rf dist && parcel build src/index.html", "zip": "cd dist && zip game.zip *.png *.html *.css *.js static/level/*.json", "build:zip": "npm run build && cd dist && zip game.zip *.png *.html *.css *.js static/level/*.json", - "build:roadroller": "npm run build && roadroller dist/index.*.js -o dist/index.*.js && npm run zip" + "build:roadroller": "npm run build && roadroller dist/index.*.js -o dist/index.*.js && npm run zip", + "roadroller": "roadroller dist/index.*.js -o dist/index.*.js" }, "author": "johnedvard", "license": "ISC", "devDependencies": { - "@parcel/compressor-brotli": "^2.7.0", - "@parcel/compressor-gzip": "^2.7.0", - "@parcel/reporter-bundle-analyzer": "^2.7.0", + "@parcel/optimizer-data-url": "^2.7.0", + "@parcel/transformer-inline-string": "^2.7.0", "parcel": "^2.7.0", "parcel-reporter-static-files-copy": "^1.4.0", "roadroller": "^2.1.0" diff --git a/src/Goal.js b/src/Goal.js index 7016499..b694037 100644 --- a/src/Goal.js +++ b/src/Goal.js @@ -1,7 +1,8 @@ +import * as grave from 'data-url:./assets/img/grave-4x-mini.png'; + import { Sprite } from 'kontra'; import { isBoxCollision } from './utils'; -import grave from './assets/img/grave-4x-mini.png'; export class Goal { level; diff --git a/src/Player.js b/src/Player.js index 92b49f0..8b79c1f 100644 --- a/src/Player.js +++ b/src/Player.js @@ -1,4 +1,4 @@ -import skull from './assets/img/skull.png'; +import skull from 'data-url:./assets/img/skull.png'; import { getPointer, Sprite } from 'kontra'; import { PlayerControls } from './PlayerControls'; diff --git a/src/Saw.js b/src/Saw.js index e24c1a9..9393d30 100644 --- a/src/Saw.js +++ b/src/Saw.js @@ -1,5 +1,5 @@ -import saw2 from './assets/img/saw3.png'; -import saw from './assets/img/saw3.png'; +import saw2 from 'data-url:./assets/img/saw3.png'; + import { Sprite } from 'kontra'; import { BACK_FORTH, UP_DOWN } from './sawBehavior';