feat: targeting ghost

app/react-components/ecs.jsx

@@ -8,6 +8,7 @@ import Systems from '@/ecs-systems/index.js';
 import usePacket from '@/hooks/use-packet.js';
 
 import Entities from './entities.jsx';
+import TargetingGhost from './targeting-ghost.jsx';
 import TileLayer from './tile-layer.jsx';
 
 export default function EcsComponent() {
@@ -54,6 +55,12 @@ export default function EcsComponent() {
         x={-cx}
         y={-cy}
       />
+      <TargetingGhost
+        px={mainEntity.Position.x}
+        py={mainEntity.Position.y}
+        cx={cx}
+        cy={cy}
+      />
     </Container>
   )
 }

app/react-components/targeting-ghost.jsx

@@ -0,0 +1,95 @@
+import {RenderTexture} from '@pixi/core';
+import {Container} from '@pixi/display';
+import {BlurFilter} from '@pixi/filter-blur';
+import {Graphics} from '@pixi/graphics';
+import {PixiComponent, useApp} from '@pixi/react';
+import {Sprite} from '@pixi/sprite';
+import {useEffect, useState} from 'react';
+
+const tileSize = {x: 16, y: 16};
+const radius = 11;
+
+function makeFade(renderer) {
+  const fade = new Graphics();
+  fade.beginFill(0xffffff);
+  fade.alpha = 0.35;
+  fade.drawCircle(
+    tileSize.x * (radius / 2),
+    tileSize.y * (radius / 2),
+    ((tileSize.x + tileSize.y) / 2) * (radius * 0.35),
+  )
+  fade.filters = [new BlurFilter(((tileSize.x + tileSize.y) / 2) * 1.25)];
+  const renderTexture = RenderTexture.create({
+    width: tileSize.x * radius,
+    height: tileSize.y * radius,
+  });
+  renderer.render(fade, {renderTexture});
+  return new Sprite(renderTexture);
+}
+
+const TargetingGhostInternal = PixiComponent('TargetingGhost', {
+  create: ({app}) => {
+    const fade = makeFade(app.renderer);
+    const grid = new Graphics();
+    const lineWidth = 1;
+    grid.lineStyle(lineWidth, 0xffffff);
+    for (let y = 0; y < radius; ++y) {
+      for (let x = 0; x < radius; ++x) {
+        grid.drawRect(
+          (x * tileSize.x) + (lineWidth / 2),
+          (y * tileSize.y) + (lineWidth / 2),
+          tileSize.x,
+          tileSize.y,
+        );
+      }
+    }
+    grid.mask = fade;
+    const innerGrid = new Graphics();
+    innerGrid.lineStyle(lineWidth, 0x777777);
+    for (let y = 0; y < radius; ++y) {
+      for (let x = 0; x < radius; ++x) {
+        innerGrid.drawRect(
+          (x * tileSize.x) + (lineWidth / 2) + 1,
+          (y * tileSize.y) + (lineWidth / 2) + 1,
+          tileSize.x - 2,
+          tileSize.y - 2,
+        );
+      }
+    }
+    innerGrid.mask = fade;
+    const container = new Container();
+    container.addChild(fade, grid, innerGrid);
+    return container;
+  },
+  applyProps: (container, oldProps, {cx, cy, px, py, tint}) => {
+    container.x = px - (px % tileSize.x) - cx + (tileSize.x / 2) - (tileSize.x * (radius / 2));
+    container.y = py - (py % tileSize.y) - cy + (tileSize.y / 2) - (tileSize.y * (radius / 2));
+    container.children[0].x = px % tileSize.x - (tileSize.x / 2) ;
+    container.children[0].y = py % tileSize.y - (tileSize.y / 2) ;
+    const color = Math.round(255 - (tint * 255));
+    container.children[2].tint = `rgb(${color}, ${color}, ${color})`;
+  },
+})
+
+export default function TargetingGhost({cx, cy, px, py}) {
+  const app = useApp();
+  const [radians, setRadians] = useState(0);
+  useEffect(() => {
+    const handle = setInterval(() => {
+      setRadians((radians) => (radians + 0.2) % (Math.PI * 2))
+    }, 50);
+    return () => {
+      clearInterval(handle);
+    };
+  }, []);
+  return (
+    <TargetingGhostInternal
+      app={app}
+      cx={cx}
+      cy={cy}
+      px={px}
+      py={py}
+      tint={(Math.cos(radians) + 1) * 0.5}
+    />
+  );
+}

package-lock.json

@@ -19,6 +19,7 @@
         "idb-keyval": "^6.2.1",
         "isbot": "^4.1.0",
         "morgan": "^1.10.0",
+        "pixi.js": "^7.4.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "ws": "^8.17.0"
@@ -3184,11 +3185,20 @@
         "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
+    "node_modules/@pixi/accessibility": {
+      "version": "7.4.2",
+      "resolved": "https://registry.npmjs.org/@pixi/accessibility/-/accessibility-7.4.2.tgz",
+      "integrity": "sha512-R6VEolm8uyy1FB1F2qaLKxVbzXAFTZCF2ka8fl9lsz7We6ZfO4QpXv9ur7DvzratjCQUQVCKo0/V7xL5q1EV/g==",
+      "peerDependencies": {
+        "@pixi/core": "7.4.2",
+        "@pixi/display": "7.4.2",
+        "@pixi/events": "7.4.2"
+      }
+    },
     "node_modules/@pixi/app": {
       "version": "7.4.2",
       "resolved": "https://registry.npmjs.org/@pixi/app/-/app-7.4.2.tgz",
       "integrity": "sha512-ugkH3kOgjT8P1mTMY29yCOgEh+KuVMAn8uBxeY0aMqaUgIMysfpnFv+Aepp2CtvI9ygr22NC+OiKl+u+eEaQHw==",
-      "peer": true,
       "peerDependencies": {
         "@pixi/core": "7.4.2",
         "@pixi/display": "7.4.2"
@@ -3198,7 +3208,6 @@
       "version": "7.4.2",
       "resolved": "https://registry.npmjs.org/@pixi/assets/-/assets-7.4.2.tgz",
       "integrity": "sha512-anxho59H9egZwoaEdM5aLvYyxoz6NCy3CaQIvNHD1bbGg8L16Ih0e26QSBR5fu53jl8OjT6M7s+p6n7uu4+fGA==",
-      "peer": true,
       "dependencies": {
         "@types/css-font-loading-module": "^0.0.12"
       },
@@ -3210,7 +3219,6 @@
       "version": "7.4.2",
       "resolved": "https://registry.npmjs.org/@pixi/color/-/color-7.4.2.tgz",
       "integrity": "sha512-av1LOvhHsiaW8+T4n/FgnOKHby55/w7VcA1HzPIHRBtEcsmxvSCDanT1HU2LslNhrxLPzyVx18nlmalOyt5OBg==",
-      "peer": true,
       "dependencies": {
         "@pixi/colord": "^2.9.6"
       }
@@ -3218,20 +3226,26 @@
     "node_modules/@pixi/colord": {
       "version": "2.9.6",
       "resolved": "https://registry.npmjs.org/@pixi/colord/-/colord-2.9.6.tgz",
-      "integrity": "sha512-nezytU2pw587fQstUu1AsJZDVEynjskwOL+kibwcdxsMBFqPsFFNA7xl0ii/gXuDi6M0xj3mfRJj8pBSc2jCfA==",
+      "integrity": "sha512-nezytU2pw587fQstUu1AsJZDVEynjskwOL+kibwcdxsMBFqPsFFNA7xl0ii/gXuDi6M0xj3mfRJj8pBSc2jCfA=="
-      "peer": true
+    },
+    "node_modules/@pixi/compressed-textures": {
+      "version": "7.4.2",
+      "resolved": "https://registry.npmjs.org/@pixi/compressed-textures/-/compressed-textures-7.4.2.tgz",
+      "integrity": "sha512-VJrt7el6O4ZJSWkeOGXwrhJaiLg1UBhHB3fj42VR4YloYkAxpfd9K6s6IcbcVz7n9L48APKBMgHyaB2pX2Ck/A==",
+      "peerDependencies": {
+        "@pixi/assets": "7.4.2",
+        "@pixi/core": "7.4.2"
+      }
     },
     "node_modules/@pixi/constants": {
       "version": "7.4.2",
       "resolved": "https://registry.npmjs.org/@pixi/constants/-/constants-7.4.2.tgz",
-      "integrity": "sha512-N9vn6Wpz5WIQg7ugUg2+SdqD2u2+NM0QthE8YzLJ4tLH2Iz+/TrnPKUJzeyIqbg3sxJG5ZpGGPiacqIBpy1KyA==",
+      "integrity": "sha512-N9vn6Wpz5WIQg7ugUg2+SdqD2u2+NM0QthE8YzLJ4tLH2Iz+/TrnPKUJzeyIqbg3sxJG5ZpGGPiacqIBpy1KyA=="
-      "peer": true
     },
     "node_modules/@pixi/core": {
       "version": "7.4.2",
       "resolved": "https://registry.npmjs.org/@pixi/core/-/core-7.4.2.tgz",
       "integrity": "sha512-UbMtgSEnyCOFPzbE6ThB9qopXxbZ5GCof2ArB4FXOC5Xi/83MOIIYg5kf5M8689C5HJMhg2SrJu3xLKppF+CMg==",
-      "peer": true,
       "dependencies": {
         "@pixi/color": "7.4.2",
         "@pixi/constants": "7.4.2",
@@ -3251,22 +3265,84 @@
       "version": "7.4.2",
       "resolved": "https://registry.npmjs.org/@pixi/display/-/display-7.4.2.tgz",
       "integrity": "sha512-DaD0J7gIlNlzO0Fdlby/0OH+tB5LtCY6rgFeCBKVDnzmn8wKW3zYZRenWBSFJ0Psx6vLqXYkSIM/rcokaKviIw==",
-      "peer": true,
       "peerDependencies": {
         "@pixi/core": "7.4.2"
       }
     },
+    "node_modules/@pixi/events": {
+      "version": "7.4.2",
+      "resolved": "https://registry.npmjs.org/@pixi/events/-/events-7.4.2.tgz",
+      "integrity": "sha512-Jw/w57heZjzZShIXL0bxOvKB+XgGIevyezhGtfF2ZSzQoSBWo+Fj1uE0QwKd0RIaXegZw/DhSmiMJSbNmcjifA==",
+      "peerDependencies": {
+        "@pixi/core": "7.4.2",
+        "@pixi/display": "7.4.2"
+      }
+    },
     "node_modules/@pixi/extensions": {
       "version": "7.4.2",
       "resolved": "https://registry.npmjs.org/@pixi/extensions/-/extensions-7.4.2.tgz",
-      "integrity": "sha512-Hmx2+O0yZ8XIvgomHM9GZEGcy9S9Dd8flmtOK5Aa3fXs/8v7xD08+ANQpN9ZqWU2Xs+C6UBlpqlt2BWALvKKKA==",
+      "integrity": "sha512-Hmx2+O0yZ8XIvgomHM9GZEGcy9S9Dd8flmtOK5Aa3fXs/8v7xD08+ANQpN9ZqWU2Xs+C6UBlpqlt2BWALvKKKA=="
-      "peer": true
+    },
+    "node_modules/@pixi/extract": {
+      "version": "7.4.2",
+      "resolved": "https://registry.npmjs.org/@pixi/extract/-/extract-7.4.2.tgz",
+      "integrity": "sha512-JOX27TRWjVEjauGBbF8PU7/g6LYXnivehdgqS5QlVDv1CNHTOrz/j3MdKcVWOhyZPbH5c9sh7lxyRxvd9AIuTQ==",
+      "peerDependencies": {
+        "@pixi/core": "7.4.2"
+      }
+    },
+    "node_modules/@pixi/filter-alpha": {
+      "version": "7.4.2",
+      "resolved": "https://registry.npmjs.org/@pixi/filter-alpha/-/filter-alpha-7.4.2.tgz",
+      "integrity": "sha512-9OsKJ+yvY2wIcQXwswj5HQBiwNGymwmqdxfp7mo+nZSBoDmxUqvMZzE9UNJ3eUlswuNvNRO8zNOsQvwdz7WFww==",
+      "peerDependencies": {
+        "@pixi/core": "7.4.2"
+      }
+    },
+    "node_modules/@pixi/filter-blur": {
+      "version": "7.4.2",
+      "resolved": "https://registry.npmjs.org/@pixi/filter-blur/-/filter-blur-7.4.2.tgz",
+      "integrity": "sha512-gOXBbIUx6CRZP1fmsis2wLzzSsofrqmIHhbf1gIkZMIQaLsc9T7brj+PaLTTiOiyJgnvGN5j20RZnkERWWKV0Q==",
+      "peerDependencies": {
+        "@pixi/core": "7.4.2"
+      }
+    },
+    "node_modules/@pixi/filter-color-matrix": {
+      "version": "7.4.2",
+      "resolved": "https://registry.npmjs.org/@pixi/filter-color-matrix/-/filter-color-matrix-7.4.2.tgz",
+      "integrity": "sha512-ykZiR59Gvj80UKs9qm7jeUTKvn+wWk6HBVJOmJbK9jFK5juakDWp7BbH26U78Q61EWj97kI1FdfcbMkuQ7rqkA==",
+      "peerDependencies": {
+        "@pixi/core": "7.4.2"
+      }
+    },
+    "node_modules/@pixi/filter-displacement": {
+      "version": "7.4.2",
+      "resolved": "https://registry.npmjs.org/@pixi/filter-displacement/-/filter-displacement-7.4.2.tgz",
+      "integrity": "sha512-QS/eWp/ivsxef3xapNeGwpPX7vrqQQeo99Fux4k5zsvplnNEsf91t6QYJLG776AbZEu/qh8VYRBA5raIVY/REw==",
+      "peerDependencies": {
+        "@pixi/core": "7.4.2"
+      }
+    },
+    "node_modules/@pixi/filter-fxaa": {
+      "version": "7.4.2",
+      "resolved": "https://registry.npmjs.org/@pixi/filter-fxaa/-/filter-fxaa-7.4.2.tgz",
+      "integrity": "sha512-U/ptJgDsfs/r8y2a6gCaiPfDu2IFAxpQ4wtfmBpz6vRhqeE4kI8yNIUx5dZbui57zlsJaW0BNacOQxHU0vLkyQ==",
+      "peerDependencies": {
+        "@pixi/core": "7.4.2"
+      }
+    },
+    "node_modules/@pixi/filter-noise": {
+      "version": "7.4.2",
+      "resolved": "https://registry.npmjs.org/@pixi/filter-noise/-/filter-noise-7.4.2.tgz",
+      "integrity": "sha512-Vy9ViBFhZEGh6xKkd3kFWErolZTwv1Y5Qb1bV7qPIYbvBECYsqzlR4uCrrjBV6KKm0PufpG/+NKC5vICZaqKzg==",
+      "peerDependencies": {
+        "@pixi/core": "7.4.2"
+      }
     },
     "node_modules/@pixi/graphics": {
       "version": "7.4.2",
       "resolved": "https://registry.npmjs.org/@pixi/graphics/-/graphics-7.4.2.tgz",
       "integrity": "sha512-jH4/Tum2RqWzHGzvlwEr7HIVduoLO57Ze705N2zQPkUD57TInn5911aGUeoua7f/wK8cTLGzgB9BzSo2kTdcHw==",
-      "peer": true,
       "peerDependencies": {
         "@pixi/core": "7.4.2",
         "@pixi/display": "7.4.2",
@@ -3276,14 +3352,12 @@
     "node_modules/@pixi/math": {
       "version": "7.4.2",
       "resolved": "https://registry.npmjs.org/@pixi/math/-/math-7.4.2.tgz",
-      "integrity": "sha512-7jHmCQoYk6e0rfSKjdNFOPl0wCcdgoraxgteXJTTHv3r0bMNx2pHD9FJ0VvocEUG7XHfj55O3+u7yItOAx0JaQ==",
+      "integrity": "sha512-7jHmCQoYk6e0rfSKjdNFOPl0wCcdgoraxgteXJTTHv3r0bMNx2pHD9FJ0VvocEUG7XHfj55O3+u7yItOAx0JaQ=="
-      "peer": true
     },
     "node_modules/@pixi/mesh": {
       "version": "7.4.2",
       "resolved": "https://registry.npmjs.org/@pixi/mesh/-/mesh-7.4.2.tgz",
       "integrity": "sha512-mEkKyQvvMrYXC3pahvH5WBIKtrtB63WixRr91ANFI7zXD+ESG6Ap6XtxMCJmXDQPwBDNk7SWVMiCflYuchG7kA==",
-      "peer": true,
       "peerDependencies": {
         "@pixi/core": "7.4.2",
         "@pixi/display": "7.4.2"
@@ -3293,23 +3367,59 @@
       "version": "7.4.2",
       "resolved": "https://registry.npmjs.org/@pixi/mesh-extras/-/mesh-extras-7.4.2.tgz",
       "integrity": "sha512-vNR/7wjxjs7sv9fGoKkHyU91ZAD+7EnMHBS5F3CVISlOIFxLi96NNZCB81oUIdky/90pHw40johd/4izR5zTyw==",
-      "peer": true,
       "peerDependencies": {
         "@pixi/core": "7.4.2",
         "@pixi/mesh": "7.4.2"
       }
     },
+    "node_modules/@pixi/mixin-cache-as-bitmap": {
+      "version": "7.4.2",
+      "resolved": "https://registry.npmjs.org/@pixi/mixin-cache-as-bitmap/-/mixin-cache-as-bitmap-7.4.2.tgz",
+      "integrity": "sha512-6dgthi2ruUT/lervSrFDQ7vXkEsHo6CxdgV7W/wNdW1dqgQlKfDvO6FhjXzyIMRLSooUf5FoeluVtfsjkUIYrw==",
+      "peerDependencies": {
+        "@pixi/core": "7.4.2",
+        "@pixi/display": "7.4.2",
+        "@pixi/sprite": "7.4.2"
+      }
+    },
+    "node_modules/@pixi/mixin-get-child-by-name": {
+      "version": "7.4.2",
+      "resolved": "https://registry.npmjs.org/@pixi/mixin-get-child-by-name/-/mixin-get-child-by-name-7.4.2.tgz",
+      "integrity": "sha512-0Cfw8JpQhsixprxiYph4Lj+B5n83Kk4ftNMXgM5xtZz+tVLz5s91qR0MqcdzwTGTJ7utVygiGmS4/3EfR/duRQ==",
+      "peerDependencies": {
+        "@pixi/display": "7.4.2"
+      }
+    },
+    "node_modules/@pixi/mixin-get-global-position": {
+      "version": "7.4.2",
+      "resolved": "https://registry.npmjs.org/@pixi/mixin-get-global-position/-/mixin-get-global-position-7.4.2.tgz",
+      "integrity": "sha512-LcsahbVdX4DFS2IcGfNp4KaXuu7SjAwUp/flZSGIfstyKOKb5FWFgihtqcc9ZT4coyri3gs2JbILZub/zPZj1w==",
+      "peerDependencies": {
+        "@pixi/core": "7.4.2",
+        "@pixi/display": "7.4.2"
+      }
+    },
     "node_modules/@pixi/particle-container": {
       "version": "7.4.2",
       "resolved": "https://registry.npmjs.org/@pixi/particle-container/-/particle-container-7.4.2.tgz",
       "integrity": "sha512-B78Qq86kt0lEa5WtB2YFIm3+PjhKfw9La9R++GBSgABl+g13s2UaZ6BIPxvY3JxWMdxPm4iPrQPFX1QWRN68mw==",
-      "peer": true,
       "peerDependencies": {
         "@pixi/core": "7.4.2",
         "@pixi/display": "7.4.2",
         "@pixi/sprite": "7.4.2"
       }
     },
+    "node_modules/@pixi/prepare": {
+      "version": "7.4.2",
+      "resolved": "https://registry.npmjs.org/@pixi/prepare/-/prepare-7.4.2.tgz",
+      "integrity": "sha512-PugyMzReCHXUzc3so9PPJj2OdHwibpUNWyqG4mWY2UUkb6c8NAGK1AnAPiscOvLilJcv/XQSFoNhX+N1jrvJEg==",
+      "peerDependencies": {
+        "@pixi/core": "7.4.2",
+        "@pixi/display": "7.4.2",
+        "@pixi/graphics": "7.4.2",
+        "@pixi/text": "7.4.2"
+      }
+    },
     "node_modules/@pixi/react": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/@pixi/react/-/react-7.1.2.tgz",
@@ -3346,14 +3456,12 @@
     "node_modules/@pixi/runner": {
       "version": "7.4.2",
       "resolved": "https://registry.npmjs.org/@pixi/runner/-/runner-7.4.2.tgz",
-      "integrity": "sha512-LPBpwym4vdyyDY5ucF4INQccaGyxztERyLTY1YN6aqJyyMmnc7iqXlIKt+a0euMBtNoLoxy6MWMvIuZj0JfFPA==",
+      "integrity": "sha512-LPBpwym4vdyyDY5ucF4INQccaGyxztERyLTY1YN6aqJyyMmnc7iqXlIKt+a0euMBtNoLoxy6MWMvIuZj0JfFPA=="
-      "peer": true
     },
     "node_modules/@pixi/settings": {
       "version": "7.4.2",
       "resolved": "https://registry.npmjs.org/@pixi/settings/-/settings-7.4.2.tgz",
       "integrity": "sha512-pMN+L6aWgvUbwhFIL/BTHKe2ShYGPZ8h9wlVBnFHMtUcJcFLMF1B3lzuvCayZRepOphs6RY0TqvnDvVb585JhQ==",
-      "peer": true,
       "dependencies": {
         "@pixi/constants": "7.4.2",
         "@types/css-font-loading-module": "^0.0.12",
@@ -3364,7 +3472,6 @@
       "version": "7.4.2",
       "resolved": "https://registry.npmjs.org/@pixi/sprite/-/sprite-7.4.2.tgz",
       "integrity": "sha512-Ccf/OVQsB+HQV0Fyf5lwD+jk1jeU7uSIqEjbxenNNssmEdB7S5qlkTBV2EJTHT83+T6Z9OMOHsreJZerydpjeg==",
-      "peer": true,
       "peerDependencies": {
         "@pixi/core": "7.4.2",
         "@pixi/display": "7.4.2"
@@ -3374,7 +3481,6 @@
       "version": "7.4.2",
       "resolved": "https://registry.npmjs.org/@pixi/sprite-animated/-/sprite-animated-7.4.2.tgz",
       "integrity": "sha512-QPT6yxCUGOBN+98H3pyIZ1ZO6Y7BN1o0Q2IMZEsD1rNfZJrTYS3Q8VlCG5t2YlFlcB8j5iBo24bZb6FUxLOmsQ==",
-      "peer": true,
       "peerDependencies": {
         "@pixi/core": "7.4.2",
         "@pixi/sprite": "7.4.2"
@@ -3384,7 +3490,6 @@
       "version": "7.4.2",
       "resolved": "https://registry.npmjs.org/@pixi/sprite-tiling/-/sprite-tiling-7.4.2.tgz",
       "integrity": "sha512-Z8PP6ewy3nuDYL+NeEdltHAhuucVgia33uzAitvH3OqqRSx6a6YRBFbNLUM9Sx+fBO2Lk3PpV1g6QZX+NE5LOg==",
-      "peer": true,
       "peerDependencies": {
         "@pixi/core": "7.4.2",
         "@pixi/display": "7.4.2",
@@ -3404,7 +3509,6 @@
       "version": "7.4.2",
       "resolved": "https://registry.npmjs.org/@pixi/text/-/text-7.4.2.tgz",
       "integrity": "sha512-rZZWpJNsIQ8WoCWrcVg8Gi6L/PDakB941clo6dO3XjoII2ucoOUcnpe5HIkudxi2xPvS/8Bfq990gFEx50TP5A==",
-      "peer": true,
       "peerDependencies": {
         "@pixi/core": "7.4.2",
         "@pixi/sprite": "7.4.2"
@@ -3414,7 +3518,6 @@
       "version": "7.4.2",
       "resolved": "https://registry.npmjs.org/@pixi/text-bitmap/-/text-bitmap-7.4.2.tgz",
       "integrity": "sha512-lPBMJ83JnpFVL+6ckQ8KO8QmwdPm0z9Zs/M0NgFKH2F+BcjelRNnk80NI3O0qBDYSEDQIE+cFbKoZ213kf7zwA==",
-      "peer": true,
       "peerDependencies": {
         "@pixi/assets": "7.4.2",
         "@pixi/core": "7.4.2",
@@ -3423,11 +3526,21 @@
         "@pixi/text": "7.4.2"
       }
     },
+    "node_modules/@pixi/text-html": {
+      "version": "7.4.2",
+      "resolved": "https://registry.npmjs.org/@pixi/text-html/-/text-html-7.4.2.tgz",
+      "integrity": "sha512-duOu8oDYeDNuyPozj2DAsQ5VZBbRiwIXy78Gn7H2pCiEAefw/Uv5jJYwdgneKME0e1tOxz1eOUGKPcI6IJnZjw==",
+      "peerDependencies": {
+        "@pixi/core": "7.4.2",
+        "@pixi/display": "7.4.2",
+        "@pixi/sprite": "7.4.2",
+        "@pixi/text": "7.4.2"
+      }
+    },
     "node_modules/@pixi/ticker": {
       "version": "7.4.2",
       "resolved": "https://registry.npmjs.org/@pixi/ticker/-/ticker-7.4.2.tgz",
       "integrity": "sha512-cAvxCh/KI6IW4m3tp2b+GQIf+DoSj9NNmPJmsOeEJ7LzvruG8Ps7SKI6CdjQob5WbceL1apBTDbqZ/f77hFDiQ==",
-      "peer": true,
       "dependencies": {
         "@pixi/extensions": "7.4.2",
         "@pixi/settings": "7.4.2",
@@ -3443,7 +3556,6 @@
       "version": "7.4.2",
       "resolved": "https://registry.npmjs.org/@pixi/utils/-/utils-7.4.2.tgz",
       "integrity": "sha512-aU/itcyMC4TxFbmdngmak6ey4kC5c16Y5ntIYob9QnjNAfD/7GTsYIBnP6FqEAyO1eq0MjkAALxdONuay1BG3g==",
-      "peer": true,
       "dependencies": {
         "@pixi/color": "7.4.2",
         "@pixi/constants": "7.4.2",
@@ -6714,8 +6826,7 @@
     "node_modules/@types/css-font-loading-module": {
       "version": "0.0.12",
       "resolved": "https://registry.npmjs.org/@types/css-font-loading-module/-/css-font-loading-module-0.0.12.tgz",
-      "integrity": "sha512-x2tZZYkSxXqWvTDgveSynfjq/T2HyiZHXb00j/+gy19yp70PHCizM48XFdjBCWH7eHBD0R5i/pw9yMBP/BH5uA==",
+      "integrity": "sha512-x2tZZYkSxXqWvTDgveSynfjq/T2HyiZHXb00j/+gy19yp70PHCizM48XFdjBCWH7eHBD0R5i/pw9yMBP/BH5uA=="
-      "peer": true
     },
     "node_modules/@types/debug": {
       "version": "4.1.12",
@@ -6747,8 +6858,7 @@
     "node_modules/@types/earcut": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@types/earcut/-/earcut-2.1.4.tgz",
-      "integrity": "sha512-qp3m9PPz4gULB9MhjGID7wpo3gJ4bTGXm7ltNDsmOvsPduTeHp8wSW9YckBj3mljeOh4F0m2z/0JKAALRKbmLQ==",
+      "integrity": "sha512-qp3m9PPz4gULB9MhjGID7wpo3gJ4bTGXm7ltNDsmOvsPduTeHp8wSW9YckBj3mljeOh4F0m2z/0JKAALRKbmLQ=="
-      "peer": true
     },
     "node_modules/@types/ejs": {
       "version": "3.1.5",
@@ -9171,8 +9281,7 @@
     "node_modules/earcut": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz",
-      "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==",
+      "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ=="
-      "peer": true
     },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
@@ -10200,8 +10309,7 @@
     "node_modules/eventemitter3": {
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
-      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
-      "peer": true
     },
     "node_modules/execa": {
       "version": "5.1.1",
@@ -12059,8 +12167,7 @@
     "node_modules/ismobilejs": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ismobilejs/-/ismobilejs-1.1.1.tgz",
-      "integrity": "sha512-VaFW53yt8QO61k2WJui0dHf4SlL8lxBofUuUmwBo0ljPk0Drz2TiuDW4jo3wDcv41qy/SxrJ+VAzJ/qYqsmzRw==",
+      "integrity": "sha512-VaFW53yt8QO61k2WJui0dHf4SlL8lxBofUuUmwBo0ljPk0Drz2TiuDW4jo3wDcv41qy/SxrJ+VAzJ/qYqsmzRw=="
-      "peer": true
     },
     "node_modules/isobject": {
       "version": "3.0.1",
@@ -14723,6 +14830,47 @@
         "node": ">= 6"
       }
     },
+    "node_modules/pixi.js": {
+      "version": "7.4.2",
+      "resolved": "https://registry.npmjs.org/pixi.js/-/pixi.js-7.4.2.tgz",
+      "integrity": "sha512-TifqgHGNofO7UCEbdZJOpUu7dUnpu4YZ0o76kfCqxDa4RS8ITc9zjECCbtalmuNXkVhSEZmBKQvE7qhHMqw/xg==",
+      "dependencies": {
+        "@pixi/accessibility": "7.4.2",
+        "@pixi/app": "7.4.2",
+        "@pixi/assets": "7.4.2",
+        "@pixi/compressed-textures": "7.4.2",
+        "@pixi/core": "7.4.2",
+        "@pixi/display": "7.4.2",
+        "@pixi/events": "7.4.2",
+        "@pixi/extensions": "7.4.2",
+        "@pixi/extract": "7.4.2",
+        "@pixi/filter-alpha": "7.4.2",
+        "@pixi/filter-blur": "7.4.2",
+        "@pixi/filter-color-matrix": "7.4.2",
+        "@pixi/filter-displacement": "7.4.2",
+        "@pixi/filter-fxaa": "7.4.2",
+        "@pixi/filter-noise": "7.4.2",
+        "@pixi/graphics": "7.4.2",
+        "@pixi/mesh": "7.4.2",
+        "@pixi/mesh-extras": "7.4.2",
+        "@pixi/mixin-cache-as-bitmap": "7.4.2",
+        "@pixi/mixin-get-child-by-name": "7.4.2",
+        "@pixi/mixin-get-global-position": "7.4.2",
+        "@pixi/particle-container": "7.4.2",
+        "@pixi/prepare": "7.4.2",
+        "@pixi/sprite": "7.4.2",
+        "@pixi/sprite-animated": "7.4.2",
+        "@pixi/sprite-tiling": "7.4.2",
+        "@pixi/spritesheet": "7.4.2",
+        "@pixi/text": "7.4.2",
+        "@pixi/text-bitmap": "7.4.2",
+        "@pixi/text-html": "7.4.2"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/pixijs"
+      }
+    },
     "node_modules/pkg-dir": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-5.0.0.tgz",
@@ -17905,7 +18053,6 @@
       "version": "0.11.3",
       "resolved": "https://registry.npmjs.org/url/-/url-0.11.3.tgz",
       "integrity": "sha512-6hxOLGfZASQK/cijlZnZJTq8OXAkt/3YGfQX45vvMYXpZoo8NdWZcY73K108Jf759lS1Bv/8wXnHDTSz17dSRw==",
-      "peer": true,
       "dependencies": {
         "punycode": "^1.4.1",
         "qs": "^6.11.2"
@@ -17914,14 +18061,12 @@
     "node_modules/url/node_modules/punycode": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
-      "integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==",
+      "integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ=="
-      "peer": true
     },
     "node_modules/url/node_modules/qs": {
       "version": "6.12.1",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.12.1.tgz",
       "integrity": "sha512-zWmv4RSuB9r2mYQw3zxQuHWeU+42aKi1wWig/j4ele4ygELZ7PEO6MM7rim9oAQH2A5MWfsAVf/jPvTPgCbvUQ==",
-      "peer": true,
       "dependencies": {
         "side-channel": "^1.0.6"
       },

package.json

@@ -26,6 +26,7 @@
     "idb-keyval": "^6.2.1",
     "isbot": "^4.1.0",
     "morgan": "^1.10.0",
+    "pixi.js": "^7.4.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "ws": "^8.17.0"