diff --git a/package.json b/package.json index ff9727b..52abae8 100644 --- a/package.json +++ b/package.json @@ -10,16 +10,16 @@ "preview": "vite preview" }, "dependencies": { + "@pixi/react": "7", "@radix-ui/react-menubar": "^1.1.2", "@radix-ui/react-toggle": "^1.1.0", "@radix-ui/react-toggle-group": "^1.1.0", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", - "konva": "^9.3.16", "lucide-react": "^0.464.0", + "pixi.js": "7", "react": "^18.3.1", "react-dom": "^18.3.1", - "react-konva": "^18.2.10", "tailwind-merge": "^2.5.5", "tailwindcss-animate": "^1.0.7" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0b2cbdc..61777c5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,9 @@ importers: .: dependencies: + '@pixi/react': + specifier: '7' + version: 7.1.2(rbk2pa5kjfujbi7gk4qxenqa5a) '@radix-ui/react-menubar': specifier: ^1.1.2 version: 1.1.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -23,21 +26,18 @@ importers: clsx: specifier: ^2.1.1 version: 2.1.1 - konva: - specifier: ^9.3.16 - version: 9.3.16 lucide-react: specifier: ^0.464.0 version: 0.464.0(react@18.3.1) + pixi.js: + specifier: '7' + version: 7.4.2 react: specifier: ^18.3.1 version: 18.3.1 react-dom: specifier: ^18.3.1 version: 18.3.1(react@18.3.1) - react-konva: - specifier: ^18.2.10 - version: 18.2.10(konva@9.3.16)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) tailwind-merge: specifier: ^2.5.5 version: 2.5.5 @@ -168,6 +168,10 @@ packages: peerDependencies: '@babel/core': ^7.0.0-0 + '@babel/runtime@7.26.0': + resolution: {integrity: sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==} + engines: {node: '>=6.9.0'} + '@babel/template@7.25.9': resolution: {integrity: sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==} engines: {node: '>=6.9.0'} @@ -427,6 +431,230 @@ packages: resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==} engines: {node: '>= 8'} + '@pixi/accessibility@7.4.2': + resolution: {integrity: sha512-R6VEolm8uyy1FB1F2qaLKxVbzXAFTZCF2ka8fl9lsz7We6ZfO4QpXv9ur7DvzratjCQUQVCKo0/V7xL5q1EV/g==} + peerDependencies: + '@pixi/core': 7.4.2 + '@pixi/display': 7.4.2 + '@pixi/events': 7.4.2 + + '@pixi/app@7.4.2': + resolution: {integrity: sha512-ugkH3kOgjT8P1mTMY29yCOgEh+KuVMAn8uBxeY0aMqaUgIMysfpnFv+Aepp2CtvI9ygr22NC+OiKl+u+eEaQHw==} + peerDependencies: + '@pixi/core': 7.4.2 + '@pixi/display': 7.4.2 + + '@pixi/assets@7.4.2': + resolution: {integrity: sha512-anxho59H9egZwoaEdM5aLvYyxoz6NCy3CaQIvNHD1bbGg8L16Ih0e26QSBR5fu53jl8OjT6M7s+p6n7uu4+fGA==} + peerDependencies: + '@pixi/core': 7.4.2 + + '@pixi/color@7.4.2': + resolution: {integrity: sha512-av1LOvhHsiaW8+T4n/FgnOKHby55/w7VcA1HzPIHRBtEcsmxvSCDanT1HU2LslNhrxLPzyVx18nlmalOyt5OBg==} + + '@pixi/colord@2.9.6': + resolution: {integrity: sha512-nezytU2pw587fQstUu1AsJZDVEynjskwOL+kibwcdxsMBFqPsFFNA7xl0ii/gXuDi6M0xj3mfRJj8pBSc2jCfA==} + + '@pixi/compressed-textures@7.4.2': + resolution: {integrity: sha512-VJrt7el6O4ZJSWkeOGXwrhJaiLg1UBhHB3fj42VR4YloYkAxpfd9K6s6IcbcVz7n9L48APKBMgHyaB2pX2Ck/A==} + peerDependencies: + '@pixi/assets': 7.4.2 + '@pixi/core': 7.4.2 + + '@pixi/constants@7.4.2': + resolution: {integrity: sha512-N9vn6Wpz5WIQg7ugUg2+SdqD2u2+NM0QthE8YzLJ4tLH2Iz+/TrnPKUJzeyIqbg3sxJG5ZpGGPiacqIBpy1KyA==} + + '@pixi/core@7.4.2': + resolution: {integrity: sha512-UbMtgSEnyCOFPzbE6ThB9qopXxbZ5GCof2ArB4FXOC5Xi/83MOIIYg5kf5M8689C5HJMhg2SrJu3xLKppF+CMg==} + + '@pixi/display@7.4.2': + resolution: {integrity: sha512-DaD0J7gIlNlzO0Fdlby/0OH+tB5LtCY6rgFeCBKVDnzmn8wKW3zYZRenWBSFJ0Psx6vLqXYkSIM/rcokaKviIw==} + peerDependencies: + '@pixi/core': 7.4.2 + + '@pixi/events@7.4.2': + resolution: {integrity: sha512-Jw/w57heZjzZShIXL0bxOvKB+XgGIevyezhGtfF2ZSzQoSBWo+Fj1uE0QwKd0RIaXegZw/DhSmiMJSbNmcjifA==} + peerDependencies: + '@pixi/core': 7.4.2 + '@pixi/display': 7.4.2 + + '@pixi/extensions@7.4.2': + resolution: {integrity: sha512-Hmx2+O0yZ8XIvgomHM9GZEGcy9S9Dd8flmtOK5Aa3fXs/8v7xD08+ANQpN9ZqWU2Xs+C6UBlpqlt2BWALvKKKA==} + + '@pixi/extract@7.4.2': + resolution: {integrity: sha512-JOX27TRWjVEjauGBbF8PU7/g6LYXnivehdgqS5QlVDv1CNHTOrz/j3MdKcVWOhyZPbH5c9sh7lxyRxvd9AIuTQ==} + peerDependencies: + '@pixi/core': 7.4.2 + + '@pixi/filter-alpha@7.4.2': + resolution: {integrity: sha512-9OsKJ+yvY2wIcQXwswj5HQBiwNGymwmqdxfp7mo+nZSBoDmxUqvMZzE9UNJ3eUlswuNvNRO8zNOsQvwdz7WFww==} + peerDependencies: + '@pixi/core': 7.4.2 + + '@pixi/filter-blur@7.4.2': + resolution: {integrity: sha512-gOXBbIUx6CRZP1fmsis2wLzzSsofrqmIHhbf1gIkZMIQaLsc9T7brj+PaLTTiOiyJgnvGN5j20RZnkERWWKV0Q==} + peerDependencies: + '@pixi/core': 7.4.2 + + '@pixi/filter-color-matrix@7.4.2': + resolution: {integrity: sha512-ykZiR59Gvj80UKs9qm7jeUTKvn+wWk6HBVJOmJbK9jFK5juakDWp7BbH26U78Q61EWj97kI1FdfcbMkuQ7rqkA==} + peerDependencies: + '@pixi/core': 7.4.2 + + '@pixi/filter-displacement@7.4.2': + resolution: {integrity: sha512-QS/eWp/ivsxef3xapNeGwpPX7vrqQQeo99Fux4k5zsvplnNEsf91t6QYJLG776AbZEu/qh8VYRBA5raIVY/REw==} + peerDependencies: + '@pixi/core': 7.4.2 + + '@pixi/filter-fxaa@7.4.2': + resolution: {integrity: sha512-U/ptJgDsfs/r8y2a6gCaiPfDu2IFAxpQ4wtfmBpz6vRhqeE4kI8yNIUx5dZbui57zlsJaW0BNacOQxHU0vLkyQ==} + peerDependencies: + '@pixi/core': 7.4.2 + + '@pixi/filter-noise@7.4.2': + resolution: {integrity: sha512-Vy9ViBFhZEGh6xKkd3kFWErolZTwv1Y5Qb1bV7qPIYbvBECYsqzlR4uCrrjBV6KKm0PufpG/+NKC5vICZaqKzg==} + peerDependencies: + '@pixi/core': 7.4.2 + + '@pixi/graphics@7.4.2': + resolution: {integrity: sha512-jH4/Tum2RqWzHGzvlwEr7HIVduoLO57Ze705N2zQPkUD57TInn5911aGUeoua7f/wK8cTLGzgB9BzSo2kTdcHw==} + peerDependencies: + '@pixi/core': 7.4.2 + '@pixi/display': 7.4.2 + '@pixi/sprite': 7.4.2 + + '@pixi/math@7.4.2': + resolution: {integrity: sha512-7jHmCQoYk6e0rfSKjdNFOPl0wCcdgoraxgteXJTTHv3r0bMNx2pHD9FJ0VvocEUG7XHfj55O3+u7yItOAx0JaQ==} + + '@pixi/mesh-extras@7.4.2': + resolution: {integrity: sha512-vNR/7wjxjs7sv9fGoKkHyU91ZAD+7EnMHBS5F3CVISlOIFxLi96NNZCB81oUIdky/90pHw40johd/4izR5zTyw==} + peerDependencies: + '@pixi/core': 7.4.2 + '@pixi/mesh': 7.4.2 + + '@pixi/mesh@7.4.2': + resolution: {integrity: sha512-mEkKyQvvMrYXC3pahvH5WBIKtrtB63WixRr91ANFI7zXD+ESG6Ap6XtxMCJmXDQPwBDNk7SWVMiCflYuchG7kA==} + peerDependencies: + '@pixi/core': 7.4.2 + '@pixi/display': 7.4.2 + + '@pixi/mixin-cache-as-bitmap@7.4.2': + resolution: {integrity: sha512-6dgthi2ruUT/lervSrFDQ7vXkEsHo6CxdgV7W/wNdW1dqgQlKfDvO6FhjXzyIMRLSooUf5FoeluVtfsjkUIYrw==} + peerDependencies: + '@pixi/core': 7.4.2 + '@pixi/display': 7.4.2 + '@pixi/sprite': 7.4.2 + + '@pixi/mixin-get-child-by-name@7.4.2': + resolution: {integrity: sha512-0Cfw8JpQhsixprxiYph4Lj+B5n83Kk4ftNMXgM5xtZz+tVLz5s91qR0MqcdzwTGTJ7utVygiGmS4/3EfR/duRQ==} + peerDependencies: + '@pixi/display': 7.4.2 + + '@pixi/mixin-get-global-position@7.4.2': + resolution: {integrity: sha512-LcsahbVdX4DFS2IcGfNp4KaXuu7SjAwUp/flZSGIfstyKOKb5FWFgihtqcc9ZT4coyri3gs2JbILZub/zPZj1w==} + peerDependencies: + '@pixi/core': 7.4.2 + '@pixi/display': 7.4.2 + + '@pixi/particle-container@7.4.2': + resolution: {integrity: sha512-B78Qq86kt0lEa5WtB2YFIm3+PjhKfw9La9R++GBSgABl+g13s2UaZ6BIPxvY3JxWMdxPm4iPrQPFX1QWRN68mw==} + peerDependencies: + '@pixi/core': 7.4.2 + '@pixi/display': 7.4.2 + '@pixi/sprite': 7.4.2 + + '@pixi/prepare@7.4.2': + resolution: {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 + + '@pixi/react@7.1.2': + resolution: {integrity: sha512-ZhqeXcFCRfFYCvncGW6Bxc3PFCYN1PgpF60iZwQJA6/UD3DB70JQvtDkRnyQcy5yqsjNtdxS8HB42oNjQFnZrA==} + peerDependencies: + '@babel/runtime': ^7.14.8 + '@pixi/app': '>=6.0.0' + '@pixi/constants': '>=6.0.0' + '@pixi/core': '>=6.0.0' + '@pixi/display': '>=6.0.0' + '@pixi/extensions': '>=6.0.0' + '@pixi/graphics': '>=6.0.0' + '@pixi/math': '>=6.0.0' + '@pixi/mesh': '>=6.0.0' + '@pixi/mesh-extras': '>=6.0.0' + '@pixi/particle-container': '>=6.0.0' + '@pixi/sprite': '>=6.0.0' + '@pixi/sprite-animated': '>=6.0.0' + '@pixi/sprite-tiling': '>=6.0.0' + '@pixi/text': '>=6.0.0' + '@pixi/text-bitmap': '>=6.0.0' + '@pixi/ticker': '>=6.0.0' + prop-types: ^15.8.1 + react: '>=17.0.0' + react-dom: '>=17.0.0' + + '@pixi/runner@7.4.2': + resolution: {integrity: sha512-LPBpwym4vdyyDY5ucF4INQccaGyxztERyLTY1YN6aqJyyMmnc7iqXlIKt+a0euMBtNoLoxy6MWMvIuZj0JfFPA==} + + '@pixi/settings@7.4.2': + resolution: {integrity: sha512-pMN+L6aWgvUbwhFIL/BTHKe2ShYGPZ8h9wlVBnFHMtUcJcFLMF1B3lzuvCayZRepOphs6RY0TqvnDvVb585JhQ==} + + '@pixi/sprite-animated@7.4.2': + resolution: {integrity: sha512-QPT6yxCUGOBN+98H3pyIZ1ZO6Y7BN1o0Q2IMZEsD1rNfZJrTYS3Q8VlCG5t2YlFlcB8j5iBo24bZb6FUxLOmsQ==} + peerDependencies: + '@pixi/core': 7.4.2 + '@pixi/sprite': 7.4.2 + + '@pixi/sprite-tiling@7.4.2': + resolution: {integrity: sha512-Z8PP6ewy3nuDYL+NeEdltHAhuucVgia33uzAitvH3OqqRSx6a6YRBFbNLUM9Sx+fBO2Lk3PpV1g6QZX+NE5LOg==} + peerDependencies: + '@pixi/core': 7.4.2 + '@pixi/display': 7.4.2 + '@pixi/sprite': 7.4.2 + + '@pixi/sprite@7.4.2': + resolution: {integrity: sha512-Ccf/OVQsB+HQV0Fyf5lwD+jk1jeU7uSIqEjbxenNNssmEdB7S5qlkTBV2EJTHT83+T6Z9OMOHsreJZerydpjeg==} + peerDependencies: + '@pixi/core': 7.4.2 + '@pixi/display': 7.4.2 + + '@pixi/spritesheet@7.4.2': + resolution: {integrity: sha512-YIvHdpXW+AYp8vD0NkjJmrdnVHTZKidCnx6k8ATSuuvCT6O5Tuh2N/Ul2oDj4/QaePy0lVhyhAbZpJW00Jr7mQ==} + peerDependencies: + '@pixi/assets': 7.4.2 + '@pixi/core': 7.4.2 + + '@pixi/text-bitmap@7.4.2': + resolution: {integrity: sha512-lPBMJ83JnpFVL+6ckQ8KO8QmwdPm0z9Zs/M0NgFKH2F+BcjelRNnk80NI3O0qBDYSEDQIE+cFbKoZ213kf7zwA==} + peerDependencies: + '@pixi/assets': 7.4.2 + '@pixi/core': 7.4.2 + '@pixi/display': 7.4.2 + '@pixi/mesh': 7.4.2 + '@pixi/text': 7.4.2 + + '@pixi/text-html@7.4.2': + resolution: {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 + + '@pixi/text@7.4.2': + resolution: {integrity: sha512-rZZWpJNsIQ8WoCWrcVg8Gi6L/PDakB941clo6dO3XjoII2ucoOUcnpe5HIkudxi2xPvS/8Bfq990gFEx50TP5A==} + peerDependencies: + '@pixi/core': 7.4.2 + '@pixi/sprite': 7.4.2 + + '@pixi/ticker@7.4.2': + resolution: {integrity: sha512-cAvxCh/KI6IW4m3tp2b+GQIf+DoSj9NNmPJmsOeEJ7LzvruG8Ps7SKI6CdjQob5WbceL1apBTDbqZ/f77hFDiQ==} + + '@pixi/utils@7.4.2': + resolution: {integrity: sha512-aU/itcyMC4TxFbmdngmak6ey4kC5c16Y5ntIYob9QnjNAfD/7GTsYIBnP6FqEAyO1eq0MjkAALxdONuay1BG3g==} + '@pkgjs/parseargs@0.11.0': resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==} engines: {node: '>=14'} @@ -825,6 +1053,12 @@ packages: '@types/babel__traverse@7.20.6': resolution: {integrity: sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==} + '@types/css-font-loading-module@0.0.12': + resolution: {integrity: sha512-x2tZZYkSxXqWvTDgveSynfjq/T2HyiZHXb00j/+gy19yp70PHCizM48XFdjBCWH7eHBD0R5i/pw9yMBP/BH5uA==} + + '@types/earcut@2.1.4': + resolution: {integrity: sha512-qp3m9PPz4gULB9MhjGID7wpo3gJ4bTGXm7ltNDsmOvsPduTeHp8wSW9YckBj3mljeOh4F0m2z/0JKAALRKbmLQ==} + '@types/estree@1.0.6': resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==} @@ -840,9 +1074,6 @@ packages: '@types/react-dom@18.3.1': resolution: {integrity: sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==} - '@types/react-reconciler@0.28.8': - resolution: {integrity: sha512-SN9c4kxXZonFhbX4hJrZy37yw9e7EIxcpHCxQv5JUS18wDE5ovkQKlqQEkufdJCCMfuI9BnjUJvhYeJ9x5Ra7g==} - '@types/react@18.3.12': resolution: {integrity: sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==} @@ -989,6 +1220,14 @@ packages: engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} hasBin: true + call-bind-apply-helpers@1.0.0: + resolution: {integrity: sha512-CCKAP2tkPau7D3GE8+V8R6sQubA9R5foIzGp+85EXCVSCivuxBNAWqcpn72PKYiIcqoViv/kcUDpaEIMBVi1lQ==} + engines: {node: '>= 0.4'} + + call-bind@1.0.8: + resolution: {integrity: sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==} + engines: {node: '>= 0.4'} + callsites@3.1.0: resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==} engines: {node: '>=6'} @@ -1056,6 +1295,10 @@ packages: deep-is@0.1.4: resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==} + define-data-property@1.1.4: + resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==} + engines: {node: '>= 0.4'} + detect-node-es@1.1.0: resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==} @@ -1065,6 +1308,9 @@ packages: dlv@1.1.3: resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==} + earcut@2.2.4: + resolution: {integrity: sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==} + eastasianwidth@0.2.0: resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==} @@ -1077,6 +1323,14 @@ packages: emoji-regex@9.2.2: resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==} + es-define-property@1.0.0: + resolution: {integrity: sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==} + engines: {node: '>= 0.4'} + + es-errors@1.3.0: + resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==} + engines: {node: '>= 0.4'} + esbuild@0.24.0: resolution: {integrity: sha512-FuLPevChGDshgSicjisSooU0cemp/sGXR841D5LHMB7mTVOmsEHcAxaH3irL53+8YDIeVNQEySh4DaYU/iuPqQ==} engines: {node: '>=18'} @@ -1143,6 +1397,9 @@ packages: resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==} engines: {node: '>=0.10.0'} + eventemitter3@4.0.7: + resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==} + fast-deep-equal@3.1.3: resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==} @@ -1197,6 +1454,10 @@ packages: resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==} engines: {node: '>=6.9.0'} + get-intrinsic@1.2.4: + resolution: {integrity: sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==} + engines: {node: '>= 0.4'} + get-nonce@1.0.1: resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==} engines: {node: '>=6'} @@ -1225,6 +1486,10 @@ packages: resolution: {integrity: sha512-49TewVEz0UxZjr1WYYsWpPrhyC/B/pA8Bq0fUmet2n+eR7yn0IvNzNaoBwnK6mdkzcN+se7Ez9zUgULTz2QH4g==} engines: {node: '>=18'} + gopd@1.2.0: + resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==} + engines: {node: '>= 0.4'} + graphemer@1.4.0: resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==} @@ -1232,6 +1497,17 @@ packages: resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==} engines: {node: '>=8'} + has-property-descriptors@1.0.2: + resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==} + + has-proto@1.1.0: + resolution: {integrity: sha512-QLdzI9IIO1Jg7f9GT1gXpPpXArAn6cS31R1eEZqz08Gc+uQ8/XiqHWt17Fiw+2p6oTTIq5GXEpQkAlA88YRl/Q==} + engines: {node: '>= 0.4'} + + has-symbols@1.1.0: + resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==} + engines: {node: '>= 0.4'} + hasown@2.0.2: resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==} engines: {node: '>= 0.4'} @@ -1278,10 +1554,8 @@ packages: isexe@2.0.0: resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==} - its-fine@1.2.5: - resolution: {integrity: sha512-fXtDA0X0t0eBYAGLVM5YsgJGsJ5jEmqZEPrGbzdf5awjv0xE7nqv3TVnvtUF060Tkes15DbDAKW/I48vsb6SyA==} - peerDependencies: - react: '>=18.0' + ismobilejs@1.1.1: + resolution: {integrity: sha512-VaFW53yt8QO61k2WJui0dHf4SlL8lxBofUuUmwBo0ljPk0Drz2TiuDW4jo3wDcv41qy/SxrJ+VAzJ/qYqsmzRw==} jackspeak@3.4.3: resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==} @@ -1319,9 +1593,6 @@ packages: keyv@4.5.4: resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==} - konva@9.3.16: - resolution: {integrity: sha512-qa47cefGDDHzkToGRGDsy24f/Njrz7EHP56jQ8mlDcjAPO7vkfTDeoBDIfmF7PZtpfzDdooafQmEUJMDU2F7FQ==} - levn@0.4.1: resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==} engines: {node: '>= 0.8.0'} @@ -1337,9 +1608,15 @@ packages: resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==} engines: {node: '>=10'} + lodash.isnil@4.0.0: + resolution: {integrity: sha512-up2Mzq3545mwVnMhTDMdfoG1OurpA/s5t88JmQX809eH3C8491iu2sfKhTfhQtKY78oPNhiaHJUpT/dUDAAtng==} + lodash.merge@4.6.2: resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==} + lodash.times@4.3.2: + resolution: {integrity: sha512-FfaJzl0SA35CRPDh5SWe2BTght6y5KSK7yJv166qIp/8q7qOwBDCvuDZE2RUSMRpBkLF6rZKbLEUoTmaP3qg6A==} + loose-envify@1.4.0: resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==} hasBin: true @@ -1407,6 +1684,10 @@ packages: resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==} engines: {node: '>= 6'} + object-inspect@1.13.3: + resolution: {integrity: sha512-kDCGIbxkDSXE3euJZZXzc6to7fCrKHNI/hSRQnRuQ+BWjFNzZwiFF8fj/6o2t2G9/jTj8PSIYTfCLelLZEeRpA==} + engines: {node: '>= 0.4'} + optionator@0.9.4: resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==} engines: {node: '>= 0.8.0'} @@ -1441,6 +1722,9 @@ packages: resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==} engines: {node: '>=16 || 14 >=14.18'} + performance-now@2.1.0: + resolution: {integrity: sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==} + picocolors@1.1.1: resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==} @@ -1456,6 +1740,9 @@ packages: resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==} engines: {node: '>= 6'} + pixi.js@7.4.2: + resolution: {integrity: sha512-TifqgHGNofO7UCEbdZJOpUu7dUnpu4YZ0o76kfCqxDa4RS8ITc9zjECCbtalmuNXkVhSEZmBKQvE7qhHMqw/xg==} + postcss-import@15.1.0: resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==} engines: {node: '>=14.0.0'} @@ -1501,10 +1788,20 @@ packages: resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==} engines: {node: '>= 0.8.0'} + prop-types@15.8.1: + resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==} + + punycode@1.4.1: + resolution: {integrity: sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==} + punycode@2.3.1: resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==} engines: {node: '>=6'} + qs@6.13.1: + resolution: {integrity: sha512-EJPeIn0CYrGu+hli1xilKAPXODtJ12T0sP63Ijx2/khC2JtuaN3JyNIpvmnkmaEtha9ocbG4A4cMcr+TvqvwQg==} + engines: {node: '>=0.6'} + queue-microtask@1.2.3: resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==} @@ -1513,18 +1810,8 @@ packages: peerDependencies: react: ^18.3.1 - react-konva@18.2.10: - resolution: {integrity: sha512-ohcX1BJINL43m4ynjZ24MxFI1syjBdrXhqVxYVDw2rKgr3yuS0x/6m1Y2Z4sl4T/gKhfreBx8KHisd0XC6OT1g==} - peerDependencies: - konva: ^8.0.1 || ^7.2.5 || ^9.0.0 - react: '>=18.0.0' - react-dom: '>=18.0.0' - - react-reconciler@0.29.2: - resolution: {integrity: sha512-zZQqIiYgDCTP/f1N/mAR10nJGrPD2ZR+jDSEsKWJHYC7Cm2wodlwbR3upZRdC3cjIjSlTLNVyO7Iu0Yy7t2AYg==} - engines: {node: '>=0.10.0'} - peerDependencies: - react: ^18.3.1 + react-is@16.13.1: + resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} react-refresh@0.14.2: resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==} @@ -1571,6 +1858,9 @@ packages: resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==} engines: {node: '>=8.10.0'} + regenerator-runtime@0.14.1: + resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==} + resolve-from@4.0.0: resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==} engines: {node: '>=4'} @@ -1603,6 +1893,10 @@ packages: engines: {node: '>=10'} hasBin: true + set-function-length@1.2.2: + resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==} + engines: {node: '>= 0.4'} + shebang-command@2.0.0: resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==} engines: {node: '>=8'} @@ -1611,6 +1905,10 @@ packages: resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==} engines: {node: '>=8'} + side-channel@1.0.6: + resolution: {integrity: sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==} + engines: {node: '>= 0.4'} + signal-exit@4.1.0: resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==} engines: {node: '>=14'} @@ -1719,6 +2017,10 @@ packages: uri-js@4.4.1: resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==} + url@0.11.4: + resolution: {integrity: sha512-oCwdVC7mTuWiPyjLUz/COz5TLk6wgp0RCsN+wHZ2Ekneac9w8uuV0njcbbie2ME+Vs+d6duwmYuR3HgQXs1fOg==} + engines: {node: '>= 0.4'} + use-callback-ref@1.3.2: resolution: {integrity: sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==} engines: {node: '>=10'} @@ -1907,6 +2209,10 @@ snapshots: '@babel/core': 7.26.0 '@babel/helper-plugin-utils': 7.25.9 + '@babel/runtime@7.26.0': + dependencies: + regenerator-runtime: 0.14.1 + '@babel/template@7.25.9': dependencies: '@babel/code-frame': 7.26.2 @@ -2109,6 +2415,222 @@ snapshots: '@nodelib/fs.scandir': 2.1.5 fastq: 1.17.1 + '@pixi/accessibility@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))(@pixi/events@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2)))': + dependencies: + '@pixi/core': 7.4.2 + '@pixi/display': 7.4.2(@pixi/core@7.4.2) + '@pixi/events': 7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2)) + + '@pixi/app@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))': + dependencies: + '@pixi/core': 7.4.2 + '@pixi/display': 7.4.2(@pixi/core@7.4.2) + + '@pixi/assets@7.4.2(@pixi/core@7.4.2)': + dependencies: + '@pixi/core': 7.4.2 + '@types/css-font-loading-module': 0.0.12 + + '@pixi/color@7.4.2': + dependencies: + '@pixi/colord': 2.9.6 + + '@pixi/colord@2.9.6': {} + + '@pixi/compressed-textures@7.4.2(@pixi/assets@7.4.2(@pixi/core@7.4.2))(@pixi/core@7.4.2)': + dependencies: + '@pixi/assets': 7.4.2(@pixi/core@7.4.2) + '@pixi/core': 7.4.2 + + '@pixi/constants@7.4.2': {} + + '@pixi/core@7.4.2': + dependencies: + '@pixi/color': 7.4.2 + '@pixi/constants': 7.4.2 + '@pixi/extensions': 7.4.2 + '@pixi/math': 7.4.2 + '@pixi/runner': 7.4.2 + '@pixi/settings': 7.4.2 + '@pixi/ticker': 7.4.2 + '@pixi/utils': 7.4.2 + + '@pixi/display@7.4.2(@pixi/core@7.4.2)': + dependencies: + '@pixi/core': 7.4.2 + + '@pixi/events@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))': + dependencies: + '@pixi/core': 7.4.2 + '@pixi/display': 7.4.2(@pixi/core@7.4.2) + + '@pixi/extensions@7.4.2': {} + + '@pixi/extract@7.4.2(@pixi/core@7.4.2)': + dependencies: + '@pixi/core': 7.4.2 + + '@pixi/filter-alpha@7.4.2(@pixi/core@7.4.2)': + dependencies: + '@pixi/core': 7.4.2 + + '@pixi/filter-blur@7.4.2(@pixi/core@7.4.2)': + dependencies: + '@pixi/core': 7.4.2 + + '@pixi/filter-color-matrix@7.4.2(@pixi/core@7.4.2)': + dependencies: + '@pixi/core': 7.4.2 + + '@pixi/filter-displacement@7.4.2(@pixi/core@7.4.2)': + dependencies: + '@pixi/core': 7.4.2 + + '@pixi/filter-fxaa@7.4.2(@pixi/core@7.4.2)': + dependencies: + '@pixi/core': 7.4.2 + + '@pixi/filter-noise@7.4.2(@pixi/core@7.4.2)': + dependencies: + '@pixi/core': 7.4.2 + + '@pixi/graphics@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))(@pixi/sprite@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2)))': + dependencies: + '@pixi/core': 7.4.2 + '@pixi/display': 7.4.2(@pixi/core@7.4.2) + '@pixi/sprite': 7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2)) + + '@pixi/math@7.4.2': {} + + '@pixi/mesh-extras@7.4.2(@pixi/core@7.4.2)(@pixi/mesh@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2)))': + dependencies: + '@pixi/core': 7.4.2 + '@pixi/mesh': 7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2)) + + '@pixi/mesh@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))': + dependencies: + '@pixi/core': 7.4.2 + '@pixi/display': 7.4.2(@pixi/core@7.4.2) + + '@pixi/mixin-cache-as-bitmap@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))(@pixi/sprite@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2)))': + dependencies: + '@pixi/core': 7.4.2 + '@pixi/display': 7.4.2(@pixi/core@7.4.2) + '@pixi/sprite': 7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2)) + + '@pixi/mixin-get-child-by-name@7.4.2(@pixi/display@7.4.2(@pixi/core@7.4.2))': + dependencies: + '@pixi/display': 7.4.2(@pixi/core@7.4.2) + + '@pixi/mixin-get-global-position@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))': + dependencies: + '@pixi/core': 7.4.2 + '@pixi/display': 7.4.2(@pixi/core@7.4.2) + + '@pixi/particle-container@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))(@pixi/sprite@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2)))': + dependencies: + '@pixi/core': 7.4.2 + '@pixi/display': 7.4.2(@pixi/core@7.4.2) + '@pixi/sprite': 7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2)) + + '@pixi/prepare@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))(@pixi/graphics@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))(@pixi/sprite@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))))(@pixi/text@7.4.2(@pixi/core@7.4.2)(@pixi/sprite@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))))': + dependencies: + '@pixi/core': 7.4.2 + '@pixi/display': 7.4.2(@pixi/core@7.4.2) + '@pixi/graphics': 7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))(@pixi/sprite@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))) + '@pixi/text': 7.4.2(@pixi/core@7.4.2)(@pixi/sprite@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))) + + '@pixi/react@7.1.2(rbk2pa5kjfujbi7gk4qxenqa5a)': + dependencies: + '@babel/runtime': 7.26.0 + '@pixi/app': 7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2)) + '@pixi/constants': 7.4.2 + '@pixi/core': 7.4.2 + '@pixi/display': 7.4.2(@pixi/core@7.4.2) + '@pixi/extensions': 7.4.2 + '@pixi/graphics': 7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))(@pixi/sprite@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))) + '@pixi/math': 7.4.2 + '@pixi/mesh': 7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2)) + '@pixi/mesh-extras': 7.4.2(@pixi/core@7.4.2)(@pixi/mesh@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))) + '@pixi/particle-container': 7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))(@pixi/sprite@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))) + '@pixi/sprite': 7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2)) + '@pixi/sprite-animated': 7.4.2(@pixi/core@7.4.2)(@pixi/sprite@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))) + '@pixi/sprite-tiling': 7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))(@pixi/sprite@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))) + '@pixi/text': 7.4.2(@pixi/core@7.4.2)(@pixi/sprite@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))) + '@pixi/text-bitmap': 7.4.2(@pixi/assets@7.4.2(@pixi/core@7.4.2))(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))(@pixi/mesh@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2)))(@pixi/text@7.4.2(@pixi/core@7.4.2)(@pixi/sprite@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2)))) + '@pixi/ticker': 7.4.2 + lodash.isnil: 4.0.0 + lodash.times: 4.3.2 + performance-now: 2.1.0 + prop-types: 15.8.1 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + + '@pixi/runner@7.4.2': {} + + '@pixi/settings@7.4.2': + dependencies: + '@pixi/constants': 7.4.2 + '@types/css-font-loading-module': 0.0.12 + ismobilejs: 1.1.1 + + '@pixi/sprite-animated@7.4.2(@pixi/core@7.4.2)(@pixi/sprite@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2)))': + dependencies: + '@pixi/core': 7.4.2 + '@pixi/sprite': 7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2)) + + '@pixi/sprite-tiling@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))(@pixi/sprite@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2)))': + dependencies: + '@pixi/core': 7.4.2 + '@pixi/display': 7.4.2(@pixi/core@7.4.2) + '@pixi/sprite': 7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2)) + + '@pixi/sprite@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))': + dependencies: + '@pixi/core': 7.4.2 + '@pixi/display': 7.4.2(@pixi/core@7.4.2) + + '@pixi/spritesheet@7.4.2(@pixi/assets@7.4.2(@pixi/core@7.4.2))(@pixi/core@7.4.2)': + dependencies: + '@pixi/assets': 7.4.2(@pixi/core@7.4.2) + '@pixi/core': 7.4.2 + + '@pixi/text-bitmap@7.4.2(@pixi/assets@7.4.2(@pixi/core@7.4.2))(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))(@pixi/mesh@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2)))(@pixi/text@7.4.2(@pixi/core@7.4.2)(@pixi/sprite@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))))': + dependencies: + '@pixi/assets': 7.4.2(@pixi/core@7.4.2) + '@pixi/core': 7.4.2 + '@pixi/display': 7.4.2(@pixi/core@7.4.2) + '@pixi/mesh': 7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2)) + '@pixi/text': 7.4.2(@pixi/core@7.4.2)(@pixi/sprite@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))) + + '@pixi/text-html@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))(@pixi/sprite@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2)))(@pixi/text@7.4.2(@pixi/core@7.4.2)(@pixi/sprite@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))))': + dependencies: + '@pixi/core': 7.4.2 + '@pixi/display': 7.4.2(@pixi/core@7.4.2) + '@pixi/sprite': 7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2)) + '@pixi/text': 7.4.2(@pixi/core@7.4.2)(@pixi/sprite@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))) + + '@pixi/text@7.4.2(@pixi/core@7.4.2)(@pixi/sprite@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2)))': + dependencies: + '@pixi/core': 7.4.2 + '@pixi/sprite': 7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2)) + + '@pixi/ticker@7.4.2': + dependencies: + '@pixi/extensions': 7.4.2 + '@pixi/settings': 7.4.2 + '@pixi/utils': 7.4.2 + + '@pixi/utils@7.4.2': + dependencies: + '@pixi/color': 7.4.2 + '@pixi/constants': 7.4.2 + '@pixi/settings': 7.4.2 + '@types/earcut': 2.1.4 + earcut: 2.2.4 + eventemitter3: 4.0.7 + url: 0.11.4 + '@pkgjs/parseargs@0.11.0': optional: true @@ -2454,6 +2976,10 @@ snapshots: dependencies: '@babel/types': 7.26.0 + '@types/css-font-loading-module@0.0.12': {} + + '@types/earcut@2.1.4': {} + '@types/estree@1.0.6': {} '@types/json-schema@7.0.15': {} @@ -2468,10 +2994,6 @@ snapshots: dependencies: '@types/react': 18.3.12 - '@types/react-reconciler@0.28.8': - dependencies: - '@types/react': 18.3.12 - '@types/react@18.3.12': dependencies: '@types/prop-types': 15.7.13 @@ -2642,6 +3164,18 @@ snapshots: node-releases: 2.0.18 update-browserslist-db: 1.1.1(browserslist@4.24.2) + call-bind-apply-helpers@1.0.0: + dependencies: + es-errors: 1.3.0 + function-bind: 1.1.2 + + call-bind@1.0.8: + dependencies: + call-bind-apply-helpers: 1.0.0 + es-define-property: 1.0.0 + get-intrinsic: 1.2.4 + set-function-length: 1.2.2 + callsites@3.1.0: {} camelcase-css@2.0.1: {} @@ -2699,12 +3233,20 @@ snapshots: deep-is@0.1.4: {} + define-data-property@1.1.4: + dependencies: + es-define-property: 1.0.0 + es-errors: 1.3.0 + gopd: 1.2.0 + detect-node-es@1.1.0: {} didyoumean@1.2.2: {} dlv@1.1.3: {} + earcut@2.2.4: {} + eastasianwidth@0.2.0: {} electron-to-chromium@1.5.68: {} @@ -2713,6 +3255,12 @@ snapshots: emoji-regex@9.2.2: {} + es-define-property@1.0.0: + dependencies: + get-intrinsic: 1.2.4 + + es-errors@1.3.0: {} + esbuild@0.24.0: optionalDependencies: '@esbuild/aix-ppc64': 0.24.0 @@ -2820,6 +3368,8 @@ snapshots: esutils@2.0.3: {} + eventemitter3@4.0.7: {} + fast-deep-equal@3.1.3: {} fast-glob@3.3.2: @@ -2872,6 +3422,14 @@ snapshots: gensync@1.0.0-beta.2: {} + get-intrinsic@1.2.4: + dependencies: + es-errors: 1.3.0 + function-bind: 1.1.2 + has-proto: 1.1.0 + has-symbols: 1.1.0 + hasown: 2.0.2 + get-nonce@1.0.1: {} glob-parent@5.1.2: @@ -2897,10 +3455,22 @@ snapshots: globals@15.13.0: {} + gopd@1.2.0: {} + graphemer@1.4.0: {} has-flag@4.0.0: {} + has-property-descriptors@1.0.2: + dependencies: + es-define-property: 1.0.0 + + has-proto@1.1.0: + dependencies: + call-bind: 1.0.8 + + has-symbols@1.1.0: {} + hasown@2.0.2: dependencies: function-bind: 1.1.2 @@ -2938,10 +3508,7 @@ snapshots: isexe@2.0.0: {} - its-fine@1.2.5(react@18.3.1): - dependencies: - '@types/react-reconciler': 0.28.8 - react: 18.3.1 + ismobilejs@1.1.1: {} jackspeak@3.4.3: dependencies: @@ -2971,8 +3538,6 @@ snapshots: dependencies: json-buffer: 3.0.1 - konva@9.3.16: {} - levn@0.4.1: dependencies: prelude-ls: 1.2.1 @@ -2986,8 +3551,12 @@ snapshots: dependencies: p-locate: 5.0.0 + lodash.isnil@4.0.0: {} + lodash.merge@4.6.2: {} + lodash.times@4.3.2: {} + loose-envify@1.4.0: dependencies: js-tokens: 4.0.0 @@ -3041,6 +3610,8 @@ snapshots: object-hash@3.0.0: {} + object-inspect@1.13.3: {} + optionator@0.9.4: dependencies: deep-is: 0.1.4 @@ -3075,6 +3646,8 @@ snapshots: lru-cache: 10.4.3 minipass: 7.1.2 + performance-now@2.1.0: {} + picocolors@1.1.1: {} picomatch@2.3.1: {} @@ -3083,6 +3656,39 @@ snapshots: pirates@4.0.6: {} + pixi.js@7.4.2: + dependencies: + '@pixi/accessibility': 7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))(@pixi/events@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))) + '@pixi/app': 7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2)) + '@pixi/assets': 7.4.2(@pixi/core@7.4.2) + '@pixi/compressed-textures': 7.4.2(@pixi/assets@7.4.2(@pixi/core@7.4.2))(@pixi/core@7.4.2) + '@pixi/core': 7.4.2 + '@pixi/display': 7.4.2(@pixi/core@7.4.2) + '@pixi/events': 7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2)) + '@pixi/extensions': 7.4.2 + '@pixi/extract': 7.4.2(@pixi/core@7.4.2) + '@pixi/filter-alpha': 7.4.2(@pixi/core@7.4.2) + '@pixi/filter-blur': 7.4.2(@pixi/core@7.4.2) + '@pixi/filter-color-matrix': 7.4.2(@pixi/core@7.4.2) + '@pixi/filter-displacement': 7.4.2(@pixi/core@7.4.2) + '@pixi/filter-fxaa': 7.4.2(@pixi/core@7.4.2) + '@pixi/filter-noise': 7.4.2(@pixi/core@7.4.2) + '@pixi/graphics': 7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))(@pixi/sprite@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))) + '@pixi/mesh': 7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2)) + '@pixi/mesh-extras': 7.4.2(@pixi/core@7.4.2)(@pixi/mesh@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))) + '@pixi/mixin-cache-as-bitmap': 7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))(@pixi/sprite@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))) + '@pixi/mixin-get-child-by-name': 7.4.2(@pixi/display@7.4.2(@pixi/core@7.4.2)) + '@pixi/mixin-get-global-position': 7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2)) + '@pixi/particle-container': 7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))(@pixi/sprite@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))) + '@pixi/prepare': 7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))(@pixi/graphics@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))(@pixi/sprite@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))))(@pixi/text@7.4.2(@pixi/core@7.4.2)(@pixi/sprite@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2)))) + '@pixi/sprite': 7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2)) + '@pixi/sprite-animated': 7.4.2(@pixi/core@7.4.2)(@pixi/sprite@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))) + '@pixi/sprite-tiling': 7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))(@pixi/sprite@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))) + '@pixi/spritesheet': 7.4.2(@pixi/assets@7.4.2(@pixi/core@7.4.2))(@pixi/core@7.4.2) + '@pixi/text': 7.4.2(@pixi/core@7.4.2)(@pixi/sprite@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))) + '@pixi/text-bitmap': 7.4.2(@pixi/assets@7.4.2(@pixi/core@7.4.2))(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))(@pixi/mesh@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2)))(@pixi/text@7.4.2(@pixi/core@7.4.2)(@pixi/sprite@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2)))) + '@pixi/text-html': 7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2))(@pixi/sprite@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2)))(@pixi/text@7.4.2(@pixi/core@7.4.2)(@pixi/sprite@7.4.2(@pixi/core@7.4.2)(@pixi/display@7.4.2(@pixi/core@7.4.2)))) + postcss-import@15.1.0(postcss@8.4.49): dependencies: postcss: 8.4.49 @@ -3122,8 +3728,20 @@ snapshots: prelude-ls@1.2.1: {} + prop-types@15.8.1: + dependencies: + loose-envify: 1.4.0 + object-assign: 4.1.1 + react-is: 16.13.1 + + punycode@1.4.1: {} + punycode@2.3.1: {} + qs@6.13.1: + dependencies: + side-channel: 1.0.6 + queue-microtask@1.2.3: {} react-dom@18.3.1(react@18.3.1): @@ -3132,21 +3750,7 @@ snapshots: react: 18.3.1 scheduler: 0.23.2 - react-konva@18.2.10(konva@9.3.16)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): - dependencies: - '@types/react-reconciler': 0.28.8 - its-fine: 1.2.5(react@18.3.1) - konva: 9.3.16 - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - react-reconciler: 0.29.2(react@18.3.1) - scheduler: 0.23.2 - - react-reconciler@0.29.2(react@18.3.1): - dependencies: - loose-envify: 1.4.0 - react: 18.3.1 - scheduler: 0.23.2 + react-is@16.13.1: {} react-refresh@0.14.2: {} @@ -3190,6 +3794,8 @@ snapshots: dependencies: picomatch: 2.3.1 + regenerator-runtime@0.14.1: {} + resolve-from@4.0.0: {} resolve@1.22.8: @@ -3236,12 +3842,28 @@ snapshots: semver@7.6.3: {} + set-function-length@1.2.2: + dependencies: + define-data-property: 1.1.4 + es-errors: 1.3.0 + function-bind: 1.1.2 + get-intrinsic: 1.2.4 + gopd: 1.2.0 + has-property-descriptors: 1.0.2 + shebang-command@2.0.0: dependencies: shebang-regex: 3.0.0 shebang-regex@3.0.0: {} + side-channel@1.0.6: + dependencies: + call-bind: 1.0.8 + es-errors: 1.3.0 + get-intrinsic: 1.2.4 + object-inspect: 1.13.3 + signal-exit@4.1.0: {} source-map-js@1.2.1: {} @@ -3366,6 +3988,11 @@ snapshots: dependencies: punycode: 2.3.1 + url@0.11.4: + dependencies: + punycode: 1.4.1 + qs: 6.13.1 + use-callback-ref@1.3.2(@types/react@18.3.12)(react@18.3.1): dependencies: react: 18.3.1 diff --git a/src/App.tsx b/src/App.tsx index 157fcb9..9c0d05b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,9 @@ -import { useEffect, useRef, useState } from "react"; -import { Layer, Stage } from "react-konva"; +import React, { useEffect, useRef, useState } from "react"; import { Eraser, Hand, Pencil } from "lucide-react"; +import * as PIXI from "pixi.js"; +import { Container, Stage } from "@pixi/react"; + import { Menubar, MenubarContent, @@ -20,80 +22,62 @@ import Blocks from "./components/blocks"; import Cursor from "./components/cursor"; import CursorInformation from "./components/cursor-information"; +// Set scale mode to NEAREST +PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST; + function App() { const stageContainerRef = useRef(null); - const stageRef = useRef(null); - const [stageSize, setStageSize] = useState({ - width: 0, - height: 0, - }); - - const [stageScale, setStageScale] = useState(1); - const [stageCoords, setStageCoords] = useState({ x: 0, y: 0 }); + const [stageSize, setStageSize] = useState({ width: 0, height: 0 }); + const [coords, setCoords] = useState({ x: 0, y: 0 }); const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }); - - const [tool, setTool] = useState("hand"); - const [selectedBlock, setSelectedBlock] = useState("stone"); + const [localMousePosition, setLocalMousePosition] = useState({ x: 0, y: 0 }); + const [dragging, setDragging] = useState(false); + const [scale, setScale] = useState(1); const [blocks, setBlocks] = useState([]); const [cssCursor, setCssCursor] = useState("grab"); - const [mouseDown, setMouseDown] = useState(false); + const [tool, setTool] = useState("hand"); + const [selectedBlock, setSelectedBlock] = useState("stone"); - const onToolChange = (value) => { + const onToolChange = (value: Tool) => { setTool(value); - - switch (value) { - case "hand": - setCssCursor("grab"); - break; - - default: - setCssCursor("auto"); - break; - } + setCssCursor(value === "hand" ? "grab" : "pointer"); }; - const onMouseMove = (e) => { - const stage = e.target.getStage(); - const oldScale = stage.scaleX(); - const pointer = stage.getPointerPosition(); + const onMouseMove = (e: React.MouseEvent) => { + if (dragging) { + if (tool === "hand") { + setCoords((prevCoords) => ({ + x: prevCoords.x + e.movementX, + y: prevCoords.y + e.movementY, + })); + } + + onMouseDown(e); + } + + const stageRect = stageContainerRef.current?.getBoundingClientRect(); + if (!stageRect) return; + + const mouseX = e.clientX - stageRect.left; + const mouseY = e.clientY - stageRect.top; setMousePosition({ - x: (pointer.x - stage.x()) / oldScale, - y: (pointer.y - stage.y()) / oldScale, + x: mouseX, + y: mouseY }); - - if (mouseDown) { - onClick(e); - } - }; - - const onMouseUp = (e) => { - setMouseDown(false); - - if (tool == "hand") { - setCssCursor("grab"); - } - }; - - const onWheel = (e) => { - const stage = e.target.getStage(); - const oldScale = stage.scaleX(); - const pointer = stage.getPointerPosition(); - - const newScale = e.evt.deltaY < 0 ? oldScale * 1.05 : oldScale / 1.05; - - setStageScale(newScale); - setStageCoords({ - x: pointer.x - mousePosition.x * newScale, - y: pointer.y - mousePosition.y * newScale, + setLocalMousePosition({ + x: (mouseX - coords.x) / scale, + y: (mouseY - coords.y) / scale }); }; - const onClick = (e) => { - const blockX = Math.floor(mousePosition.x / 16); - const blockY = Math.floor(mousePosition.y / 16); + const onMouseDown = (e: React.MouseEvent) => { + setDragging(true); + + const blockX = Math.floor(localMousePosition.x / 16); + const blockY = Math.floor(localMousePosition.y / 16); const updatedBlocks = blocks.filter((b) => !(b.x === blockX && b.y === blockY)); switch (tool) { @@ -111,15 +95,32 @@ function App() { ]); break; } - case "eraser": { + case "eraser": setBlocks(updatedBlocks); break; - } } }; + const onMouseUp = () => { + setDragging(false); + setCssCursor(tool === "hand" ? "grab" : "pointer"); + }; + + const onWheel = (e: React.WheelEvent) => { + e.preventDefault(); + + const scaleChange = e.deltaY > 0 ? -0.1 : 0.1; + const newScale = Math.min(Math.max(scale + scaleChange, 0.25), 16); + + setScale(newScale); + setCoords({ + x: mousePosition.x - localMousePosition.x * newScale, + y: mousePosition.y - localMousePosition.y * newScale, + }); + }; + useEffect(() => { - if (stageContainerRef.current && stageRef.current) { + if (stageContainerRef.current) { setStageSize({ width: stageContainerRef.current.offsetWidth, height: stageContainerRef.current.offsetHeight, @@ -182,26 +183,19 @@ function App() { setMouseDown(true)} + onMouseDown={onMouseDown} onMouseUp={onMouseUp} onWheel={onWheel} - onClick={onClick} style={{ cursor: cssCursor }} > - + - - + + - + ); diff --git a/src/components/blocks.tsx b/src/components/blocks.tsx index aeeb975..87e0f81 100644 --- a/src/components/blocks.tsx +++ b/src/components/blocks.tsx @@ -1,7 +1,7 @@ import { useEffect, useState } from "react"; -import { Image as KonvaImage } from "react-konva"; import blocksData from "@/lib/blocks/programmer-art/average_colors.json"; +import { Sprite } from "@pixi/react"; function Blocks({ blocks, setBlocks }: { blocks: Block[]; setBlocks: React.Dispatch> }) { const [images, setImages] = useState<{ [key: string]: HTMLImageElement }>({}); @@ -43,9 +43,9 @@ function Blocks({ blocks, setBlocks }: { blocks: Block[]; setBlocks: React.Dispa if (ctx) { canvas.width = image.width; canvas.height = image.height; - ctx.drawImage(image, 0, 0, image.width / 8, image.height / 8); + ctx.drawImage(image, 0, 0, image.width / 4, image.height / 4); - const imageData = ctx.getImageData(0, 0, image.width / 8, image.height / 8); + const imageData = ctx.getImageData(0, 0, image.width / 4, image.height / 4); const newBlocks: Block[] = []; for (let i = 0; i < imageData.data.length; i += 4) { @@ -76,7 +76,7 @@ function Blocks({ blocks, setBlocks }: { blocks: Block[]; setBlocks: React.Dispa return ( <> {blocks.map((block, index) => ( - + ))} ); diff --git a/src/components/cursor-information.tsx b/src/components/cursor-information.tsx index 06afffd..0389b8f 100644 --- a/src/components/cursor-information.tsx +++ b/src/components/cursor-information.tsx @@ -1,22 +1,22 @@ import { useEffect, useState } from "react"; -function CursorInformation({ mousePosition, blocks }: { mousePosition: Position; blocks: Block[] }) { +function CursorInformation({ localMousePosition, blocks }: { localMousePosition: Position; blocks: Block[] }) { const [position, setPosition] = useState({ x: 0, y: 0 }); const [block, setBlock] = useState(); useEffect(() => { - if (mousePosition) { - const snappedX = Math.floor(mousePosition.x / 16); - const snappedY = Math.floor(mousePosition.y / 16); + if (localMousePosition) { + const x = Math.floor(localMousePosition.x / 16); + const y = Math.floor(localMousePosition.y / 16); setPosition({ - x: snappedX, - y: snappedY, + x, + y, }); - setBlock(blocks.find((b) => b.x === snappedX && b.y === snappedY)); + setBlock(blocks.find((b) => b.x === x && b.y === y)); } - }, [mousePosition]); + }, [localMousePosition]); return (
diff --git a/src/components/cursor.tsx b/src/components/cursor.tsx index 1ada899..c17c88a 100644 --- a/src/components/cursor.tsx +++ b/src/components/cursor.tsx @@ -1,22 +1,29 @@ import { useEffect, useState } from "react"; -import { Rect } from "react-konva"; +import { Graphics } from "@pixi/react"; -function Cursor({ mousePosition }: { mousePosition: Position }) { +function Cursor({ localMousePosition }: { localMousePosition: Position }) { const [position, setPosition] = useState({ x: 0, y: 0 }); useEffect(() => { - if (mousePosition) { - const snappedX = Math.floor(mousePosition.x / 16) * 16; - const snappedY = Math.floor(mousePosition.y / 16) * 16; + if (localMousePosition) { + const x = Math.floor(localMousePosition.x / 16) * 16; + const y = Math.floor(localMousePosition.y / 16) * 16; - setPosition({ - x: snappedX, - y: snappedY, - }); + setPosition({ x, y }); } - }, [mousePosition]); + }, [localMousePosition]); - return ; + return ( + { + g.clear(); + g.lineStyle(1, 0xffffff, 1); + g.drawRect(0, 0, 16, 16); + }} + /> + ); } export default Cursor;