mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 15:09:05 +00:00
formatted sprites, fixed change disc scene
This commit is contained in:
ad044
parent
918ee5da13
commit
2a3f2202aa
68 changed files with 622 additions and 787 deletions
3
.gitignore
vendored
3
.gitignore
vendored
|
|
@ -11,7 +11,7 @@
|
|||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
# progressbar
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
|
|
@ -23,7 +23,6 @@ yarn-debug.log*
|
|||
yarn-error.log*
|
||||
|
||||
src/static/media_images
|
||||
src/static/sprite
|
||||
|
||||
.idea
|
||||
|
||||
|
|
|
|||
243
package-lock.json
generated
243
package-lock.json
generated
|
|
@ -2766,14 +2766,6 @@
|
|||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"@types/react-test-renderer": {
|
||||
"version": "17.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-17.0.1.tgz",
|
||||
"integrity": "sha512-3Fi2O6Zzq/f3QR9dRnlnHso9bMl7weKCviFmfF6B4LS1Uat6Hkm15k0ZAQuDz+UBq6B3+g+NM6IT2nr5QgPzCw==",
|
||||
"requires": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"@types/resolve": {
|
||||
"version": "0.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz",
|
||||
|
|
@ -4392,11 +4384,6 @@
|
|||
"resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
|
||||
"integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw=="
|
||||
},
|
||||
"chardet": {
|
||||
"version": "0.7.0",
|
||||
"resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
|
||||
"integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA=="
|
||||
},
|
||||
"check-types": {
|
||||
"version": "11.1.2",
|
||||
"resolved": "https://registry.npmjs.org/check-types/-/check-types-11.1.2.tgz",
|
||||
|
|
@ -4484,19 +4471,6 @@
|
|||
"resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
|
||||
"integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A=="
|
||||
},
|
||||
"cli-cursor": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
|
||||
"integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
|
||||
"requires": {
|
||||
"restore-cursor": "^3.1.0"
|
||||
}
|
||||
},
|
||||
"cli-width": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/cli-width/-/cli-width-3.0.0.tgz",
|
||||
"integrity": "sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw=="
|
||||
},
|
||||
"cliui": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
|
||||
|
|
@ -6894,16 +6868,6 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"external-editor": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz",
|
||||
"integrity": "sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==",
|
||||
"requires": {
|
||||
"chardet": "^0.7.0",
|
||||
"iconv-lite": "^0.4.24",
|
||||
"tmp": "^0.0.33"
|
||||
}
|
||||
},
|
||||
"extglob": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
|
||||
|
|
@ -7030,14 +6994,6 @@
|
|||
"resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz",
|
||||
"integrity": "sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw=="
|
||||
},
|
||||
"figures": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
|
||||
"integrity": "sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==",
|
||||
"requires": {
|
||||
"escape-string-regexp": "^1.0.5"
|
||||
}
|
||||
},
|
||||
"file-entry-cache": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-5.0.1.tgz",
|
||||
|
|
@ -8095,9 +8051,9 @@
|
|||
"integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw=="
|
||||
},
|
||||
"immer": {
|
||||
"version": "7.0.9",
|
||||
"resolved": "https://registry.npmjs.org/immer/-/immer-7.0.9.tgz",
|
||||
"integrity": "sha512-Vs/gxoM4DqNAYR7pugIxi0Xc8XAun/uy7AQu4fLLqaTBHxjOP9pJ266Q9MWA/ly4z6rAFZbvViOtihxUZ7O28A=="
|
||||
"version": "8.0.1",
|
||||
"resolved": "https://registry.npmjs.org/immer/-/immer-8.0.1.tgz",
|
||||
"integrity": "sha512-aqXhGP7//Gui2+UrEtvxZxSquQVXTpZ7KDxfCcKAF3Vysvw0CViVaW9RZ1j1xlIYqaaaipBoqdqeibkc18PNvA=="
|
||||
},
|
||||
"import-cwd": {
|
||||
"version": "2.1.0",
|
||||
|
|
@ -8189,91 +8145,6 @@
|
|||
"resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
|
||||
"integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
|
||||
},
|
||||
"inquirer": {
|
||||
"version": "7.3.3",
|
||||
"resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.3.3.tgz",
|
||||
"integrity": "sha512-JG3eIAj5V9CwcGvuOmoo6LB9kbAYT8HXffUl6memuszlwDC/qvFAJw49XJ5NROSFNPxp3iQg1GqkFhaY/CR0IA==",
|
||||
"requires": {
|
||||
"ansi-escapes": "^4.2.1",
|
||||
"chalk": "^4.1.0",
|
||||
"cli-cursor": "^3.1.0",
|
||||
"cli-width": "^3.0.0",
|
||||
"external-editor": "^3.0.3",
|
||||
"figures": "^3.0.0",
|
||||
"lodash": "^4.17.19",
|
||||
"mute-stream": "0.0.8",
|
||||
"run-async": "^2.4.0",
|
||||
"rxjs": "^6.6.0",
|
||||
"string-width": "^4.1.0",
|
||||
"strip-ansi": "^6.0.0",
|
||||
"through": "^2.3.6"
|
||||
},
|
||||
"dependencies": {
|
||||
"ansi-styles": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
|
||||
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
|
||||
"requires": {
|
||||
"color-convert": "^2.0.1"
|
||||
}
|
||||
},
|
||||
"chalk": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
|
||||
"integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
|
||||
"requires": {
|
||||
"ansi-styles": "^4.1.0",
|
||||
"supports-color": "^7.1.0"
|
||||
}
|
||||
},
|
||||
"color-convert": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
||||
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
|
||||
"requires": {
|
||||
"color-name": "~1.1.4"
|
||||
}
|
||||
},
|
||||
"color-name": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
|
||||
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
|
||||
},
|
||||
"emoji-regex": {
|
||||
"version": "8.0.0",
|
||||
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
|
||||
"integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
|
||||
},
|
||||
"has-flag": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
|
||||
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
|
||||
},
|
||||
"is-fullwidth-code-point": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
|
||||
"integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
|
||||
},
|
||||
"string-width": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz",
|
||||
"integrity": "sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==",
|
||||
"requires": {
|
||||
"emoji-regex": "^8.0.0",
|
||||
"is-fullwidth-code-point": "^3.0.0",
|
||||
"strip-ansi": "^6.0.0"
|
||||
}
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
|
||||
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
|
||||
"requires": {
|
||||
"has-flag": "^4.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"internal-ip": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/internal-ip/-/internal-ip-4.3.0.tgz",
|
||||
|
|
@ -11917,11 +11788,6 @@
|
|||
"resolved": "https://registry.npmjs.org/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz",
|
||||
"integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE="
|
||||
},
|
||||
"mute-stream": {
|
||||
"version": "0.0.8",
|
||||
"resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
|
||||
"integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA=="
|
||||
},
|
||||
"nanoid": {
|
||||
"version": "3.1.16",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.16.tgz",
|
||||
|
|
@ -12403,9 +12269,9 @@
|
|||
}
|
||||
},
|
||||
"open": {
|
||||
"version": "7.3.0",
|
||||
"resolved": "https://registry.npmjs.org/open/-/open-7.3.0.tgz",
|
||||
"integrity": "sha512-mgLwQIx2F/ye9SmbrUkurZCnkoXyXyu9EbHtJZrICjVAJfyMArdHp3KkixGdZx1ZHFPNIwl0DDM1dFFqXbTLZw==",
|
||||
"version": "7.4.2",
|
||||
"resolved": "https://registry.npmjs.org/open/-/open-7.4.2.tgz",
|
||||
"integrity": "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==",
|
||||
"requires": {
|
||||
"is-docker": "^2.0.0",
|
||||
"is-wsl": "^2.1.1"
|
||||
|
|
@ -12461,11 +12327,6 @@
|
|||
"resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz",
|
||||
"integrity": "sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc="
|
||||
},
|
||||
"os-tmpdir": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
|
||||
"integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ="
|
||||
},
|
||||
"p-each-series": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/p-each-series/-/p-each-series-2.1.0.tgz",
|
||||
|
|
@ -14072,9 +13933,9 @@
|
|||
}
|
||||
},
|
||||
"react-dev-utils": {
|
||||
"version": "11.0.0",
|
||||
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.0.tgz",
|
||||
"integrity": "sha512-uIZTUZXB5tbiM/0auUkLVjWhZGM7DSI304iGunyhA9m985iIDVXd9I4z6MkNa9jeLzeUJbU9A7TUNrcbXAahxw==",
|
||||
"version": "11.0.3",
|
||||
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.3.tgz",
|
||||
"integrity": "sha512-4lEA5gF4OHrcJLMUV1t+4XbNDiJbsAWCH5Z2uqlTqW6dD7Cf5nEASkeXrCI/Mz83sI2o527oBIFKVMXtRf1Vtg==",
|
||||
"requires": {
|
||||
"@babel/code-frame": "7.10.4",
|
||||
"address": "1.1.2",
|
||||
|
|
@ -14089,13 +13950,13 @@
|
|||
"global-modules": "2.0.0",
|
||||
"globby": "11.0.1",
|
||||
"gzip-size": "5.1.1",
|
||||
"immer": "7.0.9",
|
||||
"inquirer": "7.3.3",
|
||||
"immer": "8.0.1",
|
||||
"is-root": "2.1.0",
|
||||
"loader-utils": "2.0.0",
|
||||
"open": "^7.0.2",
|
||||
"pkg-up": "3.1.0",
|
||||
"react-error-overlay": "^6.0.8",
|
||||
"prompts": "2.4.0",
|
||||
"react-error-overlay": "^6.0.9",
|
||||
"recursive-readdir": "2.2.2",
|
||||
"shell-quote": "1.7.2",
|
||||
"strip-ansi": "6.0.0",
|
||||
|
|
@ -14168,9 +14029,9 @@
|
|||
}
|
||||
},
|
||||
"react-error-overlay": {
|
||||
"version": "6.0.8",
|
||||
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.8.tgz",
|
||||
"integrity": "sha512-HvPuUQnLp5H7TouGq3kzBeioJmXms1wHy9EGjz2OURWBp4qZO6AfGEcnxts1D/CbwPLRAgTMPCEgYhA3sEM4vw=="
|
||||
"version": "6.0.9",
|
||||
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",
|
||||
"integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew=="
|
||||
},
|
||||
"react-is": {
|
||||
"version": "16.13.1",
|
||||
|
|
@ -14283,41 +14144,10 @@
|
|||
"workbox-webpack-plugin": "5.1.4"
|
||||
}
|
||||
},
|
||||
"react-shallow-renderer": {
|
||||
"version": "16.14.1",
|
||||
"resolved": "https://registry.npmjs.org/react-shallow-renderer/-/react-shallow-renderer-16.14.1.tgz",
|
||||
"integrity": "sha512-rkIMcQi01/+kxiTE9D3fdS959U1g7gs+/rborw++42m1O9FAQiNI/UNRZExVUoAOprn4umcXf+pFRou8i4zuBg==",
|
||||
"requires": {
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^16.12.0 || ^17.0.0"
|
||||
}
|
||||
},
|
||||
"react-test-renderer": {
|
||||
"version": "17.0.1",
|
||||
"resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-17.0.1.tgz",
|
||||
"integrity": "sha512-/dRae3mj6aObwkjCcxZPlxDFh73XZLgvwhhyON2haZGUEhiaY5EjfAdw+d/rQmlcFwdTpMXCSGVk374QbCTlrA==",
|
||||
"requires": {
|
||||
"object-assign": "^4.1.1",
|
||||
"react-is": "^17.0.1",
|
||||
"react-shallow-renderer": "^16.13.1",
|
||||
"scheduler": "^0.20.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"react-is": {
|
||||
"version": "17.0.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz",
|
||||
"integrity": "sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA=="
|
||||
},
|
||||
"scheduler": {
|
||||
"version": "0.20.1",
|
||||
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.1.tgz",
|
||||
"integrity": "sha512-LKTe+2xNJBNxu/QhHvDR14wUXHRQbVY5ZOYpOGWRzhydZUqrLb2JBvLPY7cAqFmqrWuDED0Mjk7013SZiOz6Bw==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.1.0",
|
||||
"object-assign": "^4.1.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
"react-swipeable": {
|
||||
"version": "6.0.1",
|
||||
"resolved": "https://registry.npmjs.org/react-swipeable/-/react-swipeable-6.0.1.tgz",
|
||||
"integrity": "sha512-69nonicgjT4ofeHxZSpjuz37BoIiWMEbUYkX0mdTCY2mX1U53XDzDUIOVKRg6vVBNGL+pxYjbRzmylXWORh1xQ=="
|
||||
},
|
||||
"react-three-fiber": {
|
||||
"version": "4.2.21",
|
||||
|
|
@ -14829,15 +14659,6 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"restore-cursor": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
|
||||
"integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
|
||||
"requires": {
|
||||
"onetime": "^5.1.0",
|
||||
"signal-exit": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"ret": {
|
||||
"version": "0.1.15",
|
||||
"resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz",
|
||||
|
|
@ -14979,11 +14800,6 @@
|
|||
"resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz",
|
||||
"integrity": "sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA=="
|
||||
},
|
||||
"run-async": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
|
||||
"integrity": "sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ=="
|
||||
},
|
||||
"run-parallel": {
|
||||
"version": "1.1.10",
|
||||
"resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.1.10.tgz",
|
||||
|
|
@ -14997,14 +14813,6 @@
|
|||
"aproba": "^1.1.1"
|
||||
}
|
||||
},
|
||||
"rxjs": {
|
||||
"version": "6.6.3",
|
||||
"resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.3.tgz",
|
||||
"integrity": "sha512-trsQc+xYYXZ3urjOiJOuCOa5N3jAZ3eiSpQB5hIT8zGlL2QfnHLJ2r7GMkBGuIausdJN1OneaI6gQlsqNHHmZQ==",
|
||||
"requires": {
|
||||
"tslib": "^1.9.0"
|
||||
}
|
||||
},
|
||||
"safe-buffer": {
|
||||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
|
||||
|
|
@ -16456,11 +16264,6 @@
|
|||
"resolved": "https://registry.npmjs.org/throat/-/throat-5.0.0.tgz",
|
||||
"integrity": "sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA=="
|
||||
},
|
||||
"through": {
|
||||
"version": "2.3.8",
|
||||
"resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
|
||||
"integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU="
|
||||
},
|
||||
"through2": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
|
||||
|
|
@ -16517,14 +16320,6 @@
|
|||
"resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
|
||||
"integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
|
||||
},
|
||||
"tmp": {
|
||||
"version": "0.0.33",
|
||||
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
|
||||
"integrity": "sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==",
|
||||
"requires": {
|
||||
"os-tmpdir": "~1.0.2"
|
||||
}
|
||||
},
|
||||
"tmpl": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz",
|
||||
|
|
|
|||
|
|
@ -12,11 +12,10 @@
|
|||
"@types/node": "^12.12.54",
|
||||
"@types/react": "^16.9.47",
|
||||
"@types/react-dom": "^16.9.8",
|
||||
"@types/react-test-renderer": "^17.0.1",
|
||||
"react": "^16.13.1",
|
||||
"react-dom": "^16.13.1",
|
||||
"react-scripts": "^4.0.0",
|
||||
"react-test-renderer": "^17.0.1",
|
||||
"react-swipeable": "^6.0.1",
|
||||
"react-three-fiber": "^4.2.20",
|
||||
"three": "^0.119.1",
|
||||
"three-plain-animator": "^1.0.2",
|
||||
|
|
|
|||
|
|
@ -7,11 +7,7 @@ import {
|
|||
exitUserAuthorization,
|
||||
startNewGame,
|
||||
} from "../../core/eventTemplates";
|
||||
import {
|
||||
BootSceneContext,
|
||||
BootSubscene,
|
||||
MainMenuComponent,
|
||||
} from "../../types/types";
|
||||
import { BootSubscene, MainMenuComponent } from "../../types/types";
|
||||
|
||||
it("Checks whether or not the boot scene input handler reacts appropriately for each input", () => {
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,12 +1,8 @@
|
|||
import * as eventTemplates from "../../core/eventTemplates";
|
||||
import { exitMedia } from "../../core/eventTemplates";
|
||||
import { getMediaSceneContext } from "../../store";
|
||||
import handleMediaSceneInput from "../../core/input-handlers/handleMediaSceneInput";
|
||||
import { exitMedia } from "../../core/eventTemplates";
|
||||
import {
|
||||
LeftMediaComponent,
|
||||
MediaSide,
|
||||
RightMediaComponent,
|
||||
} from "../../types/types";
|
||||
import { LeftMediaComponent, MediaSide } from "../../types/types";
|
||||
|
||||
it("Checks whether or not the media scene input handler reacts appropriately for each input", () => {
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React, { useState } from "react";
|
||||
import accelaBootSpriteSheet from "../../static/sprite/login_intro_accela_spritesheet.png";
|
||||
import makeMeSad from "../../static/sprite/make_me_sad.png";
|
||||
import accelaBootSpriteSheet from "../../static/sprites/boot/login_intro_accela_spritesheet.png";
|
||||
import makeMeSad from "../../static/sprites/boot/make_me_sad.png";
|
||||
import { useFrame, useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
import { PlainAnimator } from "three-plain-animator/lib/plain-animator";
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
import React, { useEffect, useMemo, useRef, useState } from "react";
|
||||
import bootLof from "../../static/sprite/boot_lof.png";
|
||||
import bootBottomBarLeft from "../../static/sprite/boot_bottom_bar_left.png";
|
||||
import bootBottomBarRight from "../../static/sprite/boot_bottom_bar_right.png";
|
||||
import bootPurpleSquare from "../../static/sprite/boot_purple_square.png";
|
||||
import bootGraySquare from "../../static/sprite/boot_gray_square.png";
|
||||
import bootDangoText from "../../static/sprite/dango_text.png";
|
||||
import bootMisoShio from "../../static/sprite/miso_shio.png";
|
||||
import bootArrows from "../../static/sprite/boot_arrows.png";
|
||||
import bootStatusTexts from "../../static/sprite/boot_status_texts.png";
|
||||
import bootBackgroundText from "../../static/sprite/boot_background_text.png";
|
||||
import bootBackgroundDistortedTex from "../../static/sprite/distorted_text.png";
|
||||
import bootLof from "../../static/sprites/boot/boot_lof.png";
|
||||
import bootBottomBarLeft from "../../static/sprites/boot/boot_bottom_bar_left.png";
|
||||
import bootBottomBarRight from "../../static/sprites/boot/boot_bottom_bar_right.png";
|
||||
import bootPurpleSquare from "../../static/sprites/boot/boot_purple_square.png";
|
||||
import bootGraySquare from "../../static/sprites/boot/boot_gray_square.png";
|
||||
import bootDangoText from "../../static/sprites/boot/dango_text.png";
|
||||
import bootMisoShio from "../../static/sprites/boot/miso_shio.png";
|
||||
import bootArrows from "../../static/sprites/boot/boot_arrows.png";
|
||||
import bootStatusTexts from "../../static/sprites/boot/boot_status_texts.png";
|
||||
import bootBackgroundText from "../../static/sprites/boot/boot_background_text.png";
|
||||
import bootBackgroundDistortedTex from "../../static/sprites/boot/distorted_text.png";
|
||||
|
||||
import { useFrame, useLoader } from "react-three-fiber";
|
||||
import { a, useSpring } from "@react-spring/three";
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import React, { useEffect, useMemo, useRef } from "react";
|
||||
import authorizeHeaderUnderline from "../../static/sprite/authorize_header_underline.png";
|
||||
import authorizeGlass from "../../static/sprite/authorize_glass.png";
|
||||
import authorizeGlassUnderline from "../../static/sprite/authorize_glass_underline.png";
|
||||
import authorizeOrangeSquare from "../../static/sprite/authorize_orange_square.png";
|
||||
import authorizeStartToFinish from "../../static/sprite/authorize_start_to_finish.png";
|
||||
import authorizeInactiveLetters from "../../static/sprite/authorize_inactive_letters.png";
|
||||
import authorizeActiveLetters from "../../static/sprite/authorize_active_letters.png";
|
||||
import authorizeHeaderUnderline from "../../static/sprites/boot/authorize_header_underline.png";
|
||||
import authorizeGlass from "../../static/sprites/boot/authorize_glass.png";
|
||||
import authorizeGlassUnderline from "../../static/sprites/boot/authorize_glass_underline.png";
|
||||
import authorizeOrangeSquare from "../../static/sprites/boot/authorize_orange_square.png";
|
||||
import authorizeStartToFinish from "../../static/sprites/boot/authorize_start_to_finish.png";
|
||||
import authorizeInactiveLetters from "../../static/sprites/boot/authorize_inactive_letters.png";
|
||||
import authorizeActiveLetters from "../../static/sprites/boot/authorize_active_letters.png";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
import { OrbitControls } from "@react-three/drei";
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React from "react";
|
||||
import loadDataUnderline from "../../static/sprite/load_data_header_underline.png";
|
||||
import loadDataUnderline from "../../static/sprites/boot/load_data_header_underline.png";
|
||||
import * as THREE from "three";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
import Prompt from "../Prompt";
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
import React, { useMemo } from "react";
|
||||
import { a, useSpring } from "@react-spring/three";
|
||||
import authorizeActive from "../../static/sprite/authorize_user_active.png";
|
||||
import authorizeInactive from "../../static/sprite/authorize_user_inactive.png";
|
||||
import loadDataActive from "../../static/sprite/load_data_active.png";
|
||||
import loadDataInactive from "../../static/sprite/load_data_inactive.png";
|
||||
import authorizeActive from "../../static/sprites/boot/authorize_user_active.png";
|
||||
import authorizeInactive from "../../static/sprites/boot/authorize_user_inactive.png";
|
||||
import loadDataActive from "../../static/sprites/boot/load_data_active.png";
|
||||
import loadDataInactive from "../../static/sprites/boot/load_data_inactive.png";
|
||||
import authorizeUserHeader from "../../static/sprites/boot/authorize_user_scene_header.png";
|
||||
import loadDataHeader from "../../static/sprites/boot/load_data_header.png";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
import authorizeUserHeader from "../../static/sprite/authorize_user_scene_header.png";
|
||||
import loadDataHeader from "../../static/sprite/load_data_header.png";
|
||||
import { useStore } from "../../store";
|
||||
|
||||
type BootMainMenuProps = {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React from "react";
|
||||
import * as THREE from "three";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
import mainCylinder from "../../static/sprite/end_cylinder_1.png";
|
||||
import mainCylinder from "../../static/sprites/end/end_cylinder_1.png";
|
||||
|
||||
const EndCylinder = () => {
|
||||
const mainCylinderTex = useLoader(THREE.TextureLoader, mainCylinder);
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import React, { memo, useRef, useState } from "react";
|
||||
import middleSpritesheet from "../../static/sprite/end_middle_spritesheet.png";
|
||||
import middleLain from "../../static/sprite/end_middle_lain.png";
|
||||
import circleSpritesheet from "../../static/sprite/end_circle_spritesheet.png";
|
||||
import endText from "../../static/sprite/end_end_text.png";
|
||||
import continueText from "../../static/sprite/end_continue_text.png";
|
||||
import middleSpritesheet from "../../static/sprites/end/end_middle_spritesheet.png";
|
||||
import middleLain from "../../static/sprites/end/end_middle_lain.png";
|
||||
import circleSpritesheet from "../../static/sprites/end/end_circle_spritesheet.png";
|
||||
import endText from "../../static/sprites/end/end_end_text.png";
|
||||
import continueText from "../../static/sprites/end/end_continue_text.png";
|
||||
import { useFrame, useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
import { PlainAnimator } from "three-plain-animator/lib/plain-animator";
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React, { useRef } from "react";
|
||||
import * as THREE from "three";
|
||||
import { useFrame, useLoader } from "react-three-fiber";
|
||||
import secondCylinder from "../../static/sprite/end_cylinder_2.png";
|
||||
import secondCylinder from "../../static/sprites/end/end_cylinder_2.png";
|
||||
|
||||
type EndSphereProps = {
|
||||
position: number[];
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import React, { useEffect, useMemo, useRef } from "react";
|
||||
import gateText from "../../static/sprite/gate_pass.png";
|
||||
import gateTextUnderline from "../../static/sprite/gate_pass_underline.png";
|
||||
import gateTextAccessPass from "../../static/sprite/you_got_an_access_pass.png";
|
||||
import changeSiteEnable from "../../static/sprite/change_site_enable.png";
|
||||
import gateLeftThing from "../../static/sprite/left_gate_thing.png";
|
||||
import gateRightThing from "../../static/sprite/right_gate_thing.png";
|
||||
import gateText from "../../static/sprites/gate/gate_pass.png";
|
||||
import gateTextUnderline from "../../static/sprites/gate/gate_pass_underline.png";
|
||||
import gateTextAccessPass from "../../static/sprites/gate/you_got_an_access_pass.png";
|
||||
import changeSiteEnable from "../../static/sprites/gate/change_site_enable.png";
|
||||
import gateLeftThing from "../../static/sprites/gate/left_gate_thing.png";
|
||||
import gateRightThing from "../../static/sprites/gate/right_gate_thing.png";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
|
||||
|
|
@ -14,7 +14,7 @@ type GateMiddleProps = {
|
|||
};
|
||||
|
||||
const GateHUD = (props: GateMiddleProps) => {
|
||||
const wordFont = useLoader(THREE.FontLoader, "/3d_fonts/MediaWord.blob");
|
||||
const wordFont = useLoader(THREE.FontLoader, "/3d-fonts/MediaWord.blob");
|
||||
const config = useMemo(
|
||||
() => ({
|
||||
font: wordFont,
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React, { useEffect, useMemo, useRef } from "react";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
import gateBlueBinarySingularOne from "../../../static/sprite/blue_binary_singular_one.png";
|
||||
import gateBlueBinarySingularOne from "../../../static/sprites/gate/blue_binary_singular_one.png";
|
||||
import { a, SpringValue } from "@react-spring/three";
|
||||
|
||||
type BlueOneProps = {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React, { useEffect, useMemo, useRef } from "react";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
import gateBlueBinarySingularZero from "../../../static/sprite/blue_binary_singular_zero.png";
|
||||
import gateBlueBinarySingularZero from "../../../static/sprites/gate/blue_binary_singular_zero.png";
|
||||
import { a, SpringValue } from "@react-spring/three";
|
||||
|
||||
type BlueZeroProps = {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React, { useMemo, useRef } from "react";
|
||||
import { useFrame, useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
import mirrorTexture from "../../../static/sprite/gate_object_texture.png";
|
||||
import mirrorTexture from "../../../static/sprites/gate/gate_object_texture.png";
|
||||
import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
|
||||
|
||||
type GLTFResult = GLTF & {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { useMemo, useRef } from "react";
|
||||
import blueBinary from "../../static/sprite/blue_binary.png";
|
||||
import blueBinary from "../../static/sprites/gate/blue_binary.png";
|
||||
import { useFrame, useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
|
||||
|
|
@ -85,7 +85,7 @@ const GateSide = () => {
|
|||
scale={[3, 1.5, 0]}
|
||||
renderOrder={1}
|
||||
>
|
||||
<planeBufferGeometry attach="geometry"></planeBufferGeometry>
|
||||
<planeBufferGeometry attach="geometry" />
|
||||
<shaderMaterial
|
||||
attach="material"
|
||||
uniforms={uniforms}
|
||||
|
|
@ -101,7 +101,7 @@ const GateSide = () => {
|
|||
scale={[-3, 1.5, 0]}
|
||||
renderOrder={1}
|
||||
>
|
||||
<planeBufferGeometry attach="geometry"></planeBufferGeometry>
|
||||
<planeBufferGeometry attach="geometry" />
|
||||
<shaderMaterial
|
||||
attach="material"
|
||||
uniforms={uniforms}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import { useStore } from "../store";
|
||||
import { a, useSpring } from "@react-spring/three";
|
||||
import dummy from "../static/sprite/dummy.png";
|
||||
import dummy from "../static/sprites/dummy.png";
|
||||
import * as THREE from "three";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
import React, { useMemo, useRef } from "react";
|
||||
import { useFrame, useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
import takIntro from "../static/sprite/tak_intro.png";
|
||||
import takOutro from "../static/sprite/tak_outro.png";
|
||||
import mouth1 from "../static/sprite/mouth_1.png";
|
||||
import mouth2 from "../static/sprite/mouth_2.png";
|
||||
import mouth3 from "../static/sprite/mouth_3.png";
|
||||
import mouth4 from "../static/sprite/mouth_4.png";
|
||||
import takIntro from "../static/sprites/lain/lain_speak_intro.png";
|
||||
import takOutro from "../static/sprites/lain/lain_speak_outro.png";
|
||||
import mouth1 from "../static/sprites/lain/mouth_1.png";
|
||||
import mouth2 from "../static/sprites/lain/mouth_2.png";
|
||||
import mouth3 from "../static/sprites/lain/mouth_3.png";
|
||||
import mouth4 from "../static/sprites/lain/mouth_4.png";
|
||||
import { useStore } from "../store";
|
||||
import { LainConstructor } from "./MainScene/Lain";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React, { memo, useState } from "react";
|
||||
import loadingSpritesheet from "../static/sprite/loading_spritesheet.png";
|
||||
import lifeInstinct from "../static/sprite/life_instinct_function_os.png";
|
||||
import loadingSpritesheet from "../static/sprites/loading/loading_spritesheet.png";
|
||||
import lifeInstinct from "../static/sprites/loading/life_instinct_function_os.png";
|
||||
import { useFrame, useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
import { PlainAnimator } from "three-plain-animator/lib/plain-animator";
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import React, { memo, useEffect, useRef } from "react";
|
||||
import { useFrame, useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
import bigHud from "../../static/sprite/big_hud.png";
|
||||
import longHud from "../../static/sprite/long_hud.png";
|
||||
import boringHud from "../../static/sprite/long_hud_boring.png";
|
||||
import bigHud from "../../static/sprites/main/big_hud.png";
|
||||
import longHud from "../../static/sprites/main/long_hud.png";
|
||||
import boringHud from "../../static/sprites/main/boring_hud.png";
|
||||
import { useStore } from "../../store";
|
||||
import lerp from "../../utils/lerp";
|
||||
import GreenTextRenderer from "../TextRenderer/GreenTextRenderer";
|
||||
|
|
|
|||
|
|
@ -2,35 +2,35 @@ import React, { Suspense, useEffect, useMemo, useRef, useState } from "react";
|
|||
import { useFrame, useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
import { PlainSingularAnimator } from "three-plain-animator/lib/plain-singular-animator";
|
||||
import moveDownSpriteSheet from "../../static/sprite/jump_down.png";
|
||||
import moveUpSpriteSheet from "../../static/sprite/jump_up.png";
|
||||
import moveLeftSpriteSheet from "../../static/sprite/move_left.png";
|
||||
import moveRightSpriteSheet from "../../static/sprite/move_right.png";
|
||||
import standingSpriteSheet from "../../static/sprite/standing.png";
|
||||
import introSpriteSheet from "../../static/sprite/intro.png";
|
||||
import throwNodeSpriteSheet from "../../static/sprite/throw_node.png";
|
||||
import ripMiddleRingSpriteSheet from "../../static/sprite/rip_middle_ring.png";
|
||||
import knockSpriteSheet from "../../static/sprite/knock.png";
|
||||
import knockAndFallSpriteSheet from "../../static/sprite/knock_and_fall.png";
|
||||
import touchAndScareSpriteSheet from "../../static/sprite/touch_node_and_get_scared.png";
|
||||
import ripNodeSpriteSheet from "../../static/sprite/rip_node.png";
|
||||
import touchSleeveSpriteSheet from "../../static/sprite/touch_sleeve.png";
|
||||
import prayerSpriteSheet from "../../static/sprite/prayer.png";
|
||||
import thinkingSpriteSheet from "../../static/sprite/thinking.png";
|
||||
import stretchSpriteSheet from "../../static/sprite/stretch.png";
|
||||
import stretch2SpriteSheet from "../../static/sprite/stretch_2.png";
|
||||
import spinSpriteSheet from "../../static/sprite/spin.png";
|
||||
import scratchHeadSpriteSheet from "../../static/sprite/scratch_head.png";
|
||||
import blushSpriteSheet from "../../static/sprite/blush.png";
|
||||
import handsBehindHeadSpriteSheet from "../../static/sprite/hands_behind_head.png";
|
||||
import handsOnHipsSpriteSheet from "../../static/sprite/hands_on_hips.png";
|
||||
import handsOnHips2SpriteSheet from "../../static/sprite/hands_on_hips_2.png";
|
||||
import handsTogetherSpriteSheet from "../../static/sprite/hands_together.png";
|
||||
import leanForwardSpriteSheet from "../../static/sprite/lean_forward.png";
|
||||
import leanLeftSpriteSheet from "../../static/sprite/lean_left.png";
|
||||
import leanRightSpriteSheet from "../../static/sprite/lean_right.png";
|
||||
import lookAroundSpriteSheet from "../../static/sprite/look_around.png";
|
||||
import playWithHairSpriteSheet from "../../static/sprite/play_with_hair.png";
|
||||
import moveDownSpriteSheet from "../../static/sprites/lain/jump_down.png";
|
||||
import moveUpSpriteSheet from "../../static/sprites/lain/jump_up.png";
|
||||
import moveLeftSpriteSheet from "../../static/sprites/lain/move_left.png";
|
||||
import moveRightSpriteSheet from "../../static/sprites/lain/move_right.png";
|
||||
import standingSpriteSheet from "../../static/sprites/lain/standing.png";
|
||||
import introSpriteSheet from "../../static/sprites/lain/intro.png";
|
||||
import throwNodeSpriteSheet from "../../static/sprites/lain/throw_node.png";
|
||||
import ripMiddleRingSpriteSheet from "../../static/sprites/lain/rip_middle_ring.png";
|
||||
import knockSpriteSheet from "../../static/sprites/lain/knock.png";
|
||||
import knockAndFallSpriteSheet from "../../static/sprites/lain/knock_and_fall.png";
|
||||
import touchAndScareSpriteSheet from "../../static/sprites/lain/touch_node_and_get_scared.png";
|
||||
import ripNodeSpriteSheet from "../../static/sprites/lain/rip_node.png";
|
||||
import touchSleeveSpriteSheet from "../../static/sprites/lain/touch_sleeve.png";
|
||||
import prayerSpriteSheet from "../../static/sprites/lain/prayer.png";
|
||||
import thinkingSpriteSheet from "../../static/sprites/lain/thinking.png";
|
||||
import stretchSpriteSheet from "../../static/sprites/lain/stretch.png";
|
||||
import stretch2SpriteSheet from "../../static/sprites/lain/stretch_2.png";
|
||||
import spinSpriteSheet from "../../static/sprites/lain/spin.png";
|
||||
import scratchHeadSpriteSheet from "../../static/sprites/lain/scratch_head.png";
|
||||
import blushSpriteSheet from "../../static/sprites/lain/blush.png";
|
||||
import handsBehindHeadSpriteSheet from "../../static/sprites/lain/hands_behind_head.png";
|
||||
import handsOnHipsSpriteSheet from "../../static/sprites/lain/hands_on_hips.png";
|
||||
import handsOnHips2SpriteSheet from "../../static/sprites/lain/hands_on_hips_2.png";
|
||||
import handsTogetherSpriteSheet from "../../static/sprites/lain/hands_together.png";
|
||||
import leanForwardSpriteSheet from "../../static/sprites/lain/lean_forward.png";
|
||||
import leanLeftSpriteSheet from "../../static/sprites/lain/lean_left.png";
|
||||
import leanRightSpriteSheet from "../../static/sprites/lain/lean_right.png";
|
||||
import lookAroundSpriteSheet from "../../static/sprites/lain/look_around.png";
|
||||
import playWithHairSpriteSheet from "../../static/sprites/lain/play_with_hair.png";
|
||||
|
||||
import { useStore } from "../../store";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
import React, { useEffect, useMemo, useRef } from "react";
|
||||
import level_selection_font from "../../static/sprite/select_level_font.png";
|
||||
import verticalHud from "../../static/sprite/select_level_hud_vertical.png";
|
||||
import horizontalHud from "../../static/sprite/select_level_hud_horizontal.png";
|
||||
import levelSelectionText from "../../static/sprite/select_level_text.png";
|
||||
import upArrow from "../../static/sprite/select_level_up_arrow.png";
|
||||
import downArrow from "../../static/sprite/select_level_down_arrow.png";
|
||||
import upArrowActive from "../../static/sprite/select_level_up_arrow_active.png";
|
||||
import downArrowActive from "../../static/sprite/select_level_down_arrow_active.png";
|
||||
import React, { useEffect, useRef } from "react";
|
||||
import level_selection_font from "../../static/sprites/main/select_level_font.png";
|
||||
import verticalHud from "../../static/sprites/main/select_level_hud_vertical.png";
|
||||
import horizontalHud from "../../static/sprites/main/select_level_hud_horizontal.png";
|
||||
import levelSelectionText from "../../static/sprites/main/select_level_text.png";
|
||||
import upArrow from "../../static/sprites/main/select_level_up_arrow.png";
|
||||
import downArrow from "../../static/sprites/main/select_level_down_arrow.png";
|
||||
import upArrowActive from "../../static/sprites/main/select_level_up_arrow_active.png";
|
||||
import downArrowActive from "../../static/sprites/main/select_level_down_arrow_active.png";
|
||||
import { useStore } from "../../store";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React, { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { useFrame, useLoader } from "react-three-fiber";
|
||||
import middleRingTexture from "../../../static/sprite/middle_ring_tex.png";
|
||||
import middleRingTexture from "../../../static/sprites/main/middle_ring_tex.png";
|
||||
import * as THREE from "three";
|
||||
import { a, useSpring } from "@react-spring/three";
|
||||
import { useStore } from "../../../store";
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { useEffect, useMemo } from "react";
|
||||
import middleRingTexture from "../../../static/sprite/middle_ring_tex.png";
|
||||
import middleRingTexture from "../../../static/sprites/main/middle_ring_tex.png";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
import { a, useSpring } from "@react-spring/three";
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { memo, useMemo } from "react";
|
||||
import pauseGrayBoxes from "../../../static/sprite/pause_gray_boxes.png";
|
||||
import pauseGrayBoxes from "../../../static/sprites/main/pause_gray_boxes.png";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
import { a, useSpring } from "@react-spring/three";
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { useRef } from "react";
|
||||
import aboutBg from "../../../static/sprite/about_background.png";
|
||||
import aboutBg from "../../../static/sprites/main/about_background.png";
|
||||
import { useFrame, useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
import { useStore } from "../../../store";
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React, { memo } from "react";
|
||||
import notFound from "../../../static/sprite/not_found.png";
|
||||
import notFoundLof from "../../../static/sprite/not_found_lof.png";
|
||||
import notFound from "../../../static/sprites/main/not_found.png";
|
||||
import notFoundLof from "../../../static/sprites/main/not_found_lof.png";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
import { useStore } from "../../../store";
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { memo } from "react";
|
||||
import headerContainer from "../../../static/sprite/prompt_question_container.png";
|
||||
import headerContainer from "../../../static/sprites/prompt/prompt_question_container.png";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
import StaticOrangeLetter from "../../TextRenderer/StaticOrangeLetter";
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import React, { memo, useMemo } from "react";
|
||||
import * as THREE from "three";
|
||||
import lofTexture from "../../../static/sprite/gray_ring_lof.png";
|
||||
import holeTexture from "../../../static/sprite/hole.png";
|
||||
import lifeTexture from "../../../static/sprite/life.png";
|
||||
import lofTexture from "../../../static/sprites/main/gray_ring_lof.png";
|
||||
import holeTexture from "../../../static/sprites/main/hole.png";
|
||||
import lifeTexture from "../../../static/sprites/main/life.png";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
|
||||
type GrayRingProps = {
|
||||
|
|
|
|||
|
|
@ -2,20 +2,20 @@ import React, { memo, useMemo } from "react";
|
|||
import { useLoader } from "react-three-fiber";
|
||||
import { a } from "@react-spring/three";
|
||||
import * as THREE from "three";
|
||||
import Cou from "../../../static/sprite/Cou.png";
|
||||
import CouViewed from "../../../static/sprite/Cou_viewed.png";
|
||||
import Dc from "../../../static/sprite/Dc.png";
|
||||
import DcViewed from "../../../static/sprite/Dc_viewed.png";
|
||||
import Sskn from "../../../static/sprite/SSkn.png";
|
||||
import SsknViewed from "../../../static/sprite/SSkn_viewed.png";
|
||||
import Tda from "../../../static/sprite/Tda.png";
|
||||
import TdaViewed from "../../../static/sprite/Tda_viewed.png";
|
||||
import Dia from "../../../static/sprite/Dia.png";
|
||||
import DiaViewed from "../../../static/sprite/Dia_viewed.png";
|
||||
import Lda from "../../../static/sprite/Lda.png";
|
||||
import LdaViewed from "../../../static/sprite/Lda_viewed.png";
|
||||
import MULTI from "../../../static/sprite/MULTI.png";
|
||||
import MULTIViewed from "../../../static/sprite/MULTI_viewed.png";
|
||||
import Cou from "../../../static/sprites/nodes/Cou.png";
|
||||
import CouViewed from "../../../static/sprites/nodes/Cou_viewed.png";
|
||||
import Dc from "../../../static/sprites/nodes/Dc.png";
|
||||
import DcViewed from "../../../static/sprites/nodes/Dc_viewed.png";
|
||||
import Sskn from "../../../static/sprites/nodes/SSkn.png";
|
||||
import SsknViewed from "../../../static/sprites/nodes/SSkn_viewed.png";
|
||||
import Tda from "../../../static/sprites/nodes/Tda.png";
|
||||
import TdaViewed from "../../../static/sprites/nodes/Tda_viewed.png";
|
||||
import Dia from "../../../static/sprites/nodes/Dia.png";
|
||||
import DiaViewed from "../../../static/sprites/nodes/Dia_viewed.png";
|
||||
import Lda from "../../../static/sprites/nodes/Lda.png";
|
||||
import LdaViewed from "../../../static/sprites/nodes/Lda_viewed.png";
|
||||
import MULTI from "../../../static/sprites/nodes/MULTI.png";
|
||||
import MULTIViewed from "../../../static/sprites/nodes/MULTI_viewed.png";
|
||||
import level_y_values from "../../../resources/level_y_values.json";
|
||||
|
||||
type NodeContructorProps = {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { memo } from "react";
|
||||
import mainSceneBg from "../../../static/sprite/main_scene_background.png";
|
||||
import mainSceneBg from "../../../static/sprites/main/main_scene_background.png";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
|
||||
|
|
|
|||
|
|
@ -2,27 +2,27 @@ import React, { memo, useEffect, useMemo, useRef } from "react";
|
|||
import { useFrame, useLoader } from "react-three-fiber";
|
||||
import { a, useSpring } from "@react-spring/three";
|
||||
import * as THREE from "three";
|
||||
import Cou from "../../../static/sprite/Cou.png";
|
||||
import CouActive from "../../../static/sprite/Cou_active.png";
|
||||
import CouViewed from "../../../static/sprite/Cou_viewed.png";
|
||||
import Dc from "../../../static/sprite/Dc.png";
|
||||
import DcActive from "../../../static/sprite/Dc_active.png";
|
||||
import DcViewed from "../../../static/sprite/Dc_viewed.png";
|
||||
import Sskn from "../../../static/sprite/SSkn.png";
|
||||
import SsknActive from "../../../static/sprite/SSkn_active.png";
|
||||
import SsknViewed from "../../../static/sprite/SSkn_viewed.png";
|
||||
import Tda from "../../../static/sprite/Tda.png";
|
||||
import TdaActive from "../../../static/sprite/Tda_active.png";
|
||||
import TdaViewed from "../../../static/sprite/Tda_viewed.png";
|
||||
import Dia from "../../../static/sprite/Dia.png";
|
||||
import DiaActive from "../../../static/sprite/Dia_active.png";
|
||||
import DiaViewed from "../../../static/sprite/Dia_viewed.png";
|
||||
import Lda from "../../../static/sprite/Lda.png";
|
||||
import LdaActive from "../../../static/sprite/Lda_active.png";
|
||||
import LdaViewed from "../../../static/sprite/Lda_viewed.png";
|
||||
import MULTI from "../../../static/sprite/MULTI.png";
|
||||
import MULTIActive from "../../../static/sprite/MULTI_active.png";
|
||||
import MULTIViewed from "../../../static/sprite/MULTI_viewed.png";
|
||||
import Cou from "../../../static/sprites/nodes/Cou.png";
|
||||
import CouActive from "../../../static/sprites/nodes/Cou_active.png";
|
||||
import CouViewed from "../../../static/sprites/nodes/Cou_viewed.png";
|
||||
import Dc from "../../../static/sprites/nodes/Dc.png";
|
||||
import DcActive from "../../../static/sprites/nodes/Dc_active.png";
|
||||
import DcViewed from "../../../static/sprites/nodes/Dc_viewed.png";
|
||||
import Sskn from "../../../static/sprites/nodes/SSkn.png";
|
||||
import SsknActive from "../../../static/sprites/nodes/SSkn_active.png";
|
||||
import SsknViewed from "../../../static/sprites/nodes/SSkn_viewed.png";
|
||||
import Tda from "../../../static/sprites/nodes/Tda.png";
|
||||
import TdaActive from "../../../static/sprites/nodes/Tda_active.png";
|
||||
import TdaViewed from "../../../static/sprites/nodes/Tda_viewed.png";
|
||||
import Dia from "../../../static/sprites/nodes/Dia.png";
|
||||
import DiaActive from "../../../static/sprites/nodes/Dia_active.png";
|
||||
import DiaViewed from "../../../static/sprites/nodes/Dia_viewed.png";
|
||||
import Lda from "../../../static/sprites/nodes/Lda.png";
|
||||
import LdaActive from "../../../static/sprites/nodes/Lda_active.png";
|
||||
import LdaViewed from "../../../static/sprites/nodes/Lda_viewed.png";
|
||||
import MULTI from "../../../static/sprites/nodes/MULTI.png";
|
||||
import MULTIActive from "../../../static/sprites/nodes/MULTI_active.png";
|
||||
import MULTIViewed from "../../../static/sprites/nodes/MULTI_viewed.png";
|
||||
import level_y_values from "../../../resources/level_y_values.json";
|
||||
import { useStore } from "../../../store";
|
||||
|
||||
|
|
|
|||
|
|
@ -2,20 +2,20 @@ import React, { useEffect, useMemo, useRef } from "react";
|
|||
import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
|
||||
import * as THREE from "three";
|
||||
import { useFrame, useLoader } from "react-three-fiber";
|
||||
import Cou from "../../../../../static/sprite/Cou.png";
|
||||
import CouGold from "../../../../../static/sprite/Cou_gold.png";
|
||||
import Dc from "../../../../../static/sprite/Dc.png";
|
||||
import DcGold from "../../../../../static/sprite/Dc_gold.png";
|
||||
import Sskn from "../../../../../static/sprite/SSkn.png";
|
||||
import SsknGold from "../../../../../static/sprite/SSkn_gold.png";
|
||||
import Tda from "../../../../../static/sprite/Tda.png";
|
||||
import TdaGold from "../../../../../static/sprite/Tda_gold.png";
|
||||
import Dia from "../../../../../static/sprite/Dia.png";
|
||||
import DiaGold from "../../../../../static/sprite/Dia_gold.png";
|
||||
import Lda from "../../../../../static/sprite/Lda.png";
|
||||
import LdaGold from "../../../../../static/sprite/Lda_gold.png";
|
||||
import MULTI from "../../../../../static/sprite/MULTI.png";
|
||||
import MULTIGold from "../../../../../static/sprite/MULTI_gold.png";
|
||||
import Cou from "../../../../../static/sprites/nodes/Cou.png";
|
||||
import CouGold from "../../../../../static/sprites/nodes/Cou_gold.png";
|
||||
import Dc from "../../../../../static/sprites/nodes/Dc.png";
|
||||
import DcGold from "../../../../../static/sprites/nodes/Dc_gold.png";
|
||||
import Sskn from "../../../../../static/sprites/nodes/SSkn.png";
|
||||
import SsknGold from "../../../../../static/sprites/nodes/SSkn_gold.png";
|
||||
import Tda from "../../../../../static/sprites/nodes/Tda.png";
|
||||
import TdaGold from "../../../../../static/sprites/nodes/Tda_gold.png";
|
||||
import Dia from "../../../../../static/sprites/nodes/Dia.png";
|
||||
import DiaGold from "../../../../../static/sprites/nodes/Dia_gold.png";
|
||||
import Lda from "../../../../../static/sprites/nodes/Lda.png";
|
||||
import LdaGold from "../../../../../static/sprites/nodes/Lda_gold.png";
|
||||
import MULTI from "../../../../../static/sprites/nodes/MULTI.png";
|
||||
import MULTIGold from "../../../../../static/sprites/nodes/MULTI_gold.png";
|
||||
import { useStore } from "../../../../../store";
|
||||
|
||||
type GLTFResult = GLTF & {
|
||||
|
|
@ -35,9 +35,7 @@ type GoldNodeProps = {
|
|||
const GoldNode = (props: GoldNodeProps) => {
|
||||
const { nodes } = useLoader<GLTFResult>(GLTFLoader, "models/gold_node.glb");
|
||||
|
||||
const activeNodeName = useStore(
|
||||
(state) => state.activeNode.node_name
|
||||
);
|
||||
const activeNodeName = useStore((state) => state.activeNode.node_name);
|
||||
|
||||
const tex = useMemo(() => {
|
||||
if (activeNodeName.includes("S")) {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { useEffect, useRef } from "react";
|
||||
import MULTI from "../../../../../static/sprite/MULTI.png";
|
||||
import MULTI from "../../../../../static/sprites/nodes/MULTI.png";
|
||||
import { useFrame, useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import React, { memo, useEffect, useMemo, useRef } from "react";
|
||||
import { useFrame, useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
import siteATex from "../../../static/sprite/site_a.png";
|
||||
import siteBTex from "../../../static/sprite/site_b.png";
|
||||
import siteLevelTex from "../../../static/sprite/site_levels.png";
|
||||
import siteATex from "../../../static/sprites/main/site_a.png";
|
||||
import siteBTex from "../../../static/sprites/main/site_b.png";
|
||||
import siteLevelTex from "../../../static/sprites/main/site_levels.png";
|
||||
|
||||
type PurpleRingProps = {
|
||||
purpleRingPosY: number;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React, { memo, useMemo, useRef } from "react";
|
||||
import { useFrame, useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
import orbSprite from "../../static/sprite/orb.png";
|
||||
import orbSprite from "../../static/sprites/main/orb.png";
|
||||
import { useStore } from "../../store";
|
||||
|
||||
type YellowOrbProps = {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React, { MutableRefObject } from "react";
|
||||
import audioVisualizerOrangeOrb from "../../../static/sprite/audio_visual_orb_orange.png";
|
||||
import audioVisualizerYellowOrb from "../../../static/sprite/audio_visual_orb_yellow.png";
|
||||
import audioVisualizerOrangeOrb from "../../../static/sprites/media/audio_visual_orb_orange.png";
|
||||
import audioVisualizerYellowOrb from "../../../static/sprites/media/audio_visual_orb_yellow.png";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React, { memo, useState } from "react";
|
||||
import * as THREE from "three";
|
||||
import { useFrame, useLoader } from "react-three-fiber";
|
||||
import lofSpriteSheet from "../../static/sprite/lof_spritesheet.png";
|
||||
import lofSpriteSheet from "../../static/sprites/media/lof_spritesheet.png";
|
||||
import { PlainAnimator } from "three-plain-animator/lib/plain-animator";
|
||||
|
||||
const Lof = memo(() => {
|
||||
|
|
|
|||
|
|
@ -1,177 +0,0 @@
|
|||
import React, { useMemo, useRef } from "react";
|
||||
import { useStore } from "../../store";
|
||||
import loadingBarContainer from "../../static/sprite/media_loading_bar_container.png";
|
||||
import loadingBar from "../../static/sprite/media_loading_bar.png";
|
||||
import loadingBar10Perc from "../../static/sprite/media_loading_bar_10perc.png";
|
||||
import loadingBar20Perc from "../../static/sprite/media_loading_bar_20perc.png";
|
||||
import loadingBar30Perc from "../../static/sprite/media_loading_bar_30perc.png";
|
||||
import loadingBar40Perc from "../../static/sprite/media_loading_bar_40perc.png";
|
||||
import loadingBar50Perc from "../../static/sprite/media_loading_bar_50perc.png";
|
||||
|
||||
import { useFrame, useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
|
||||
const MediaLoadingBar = () => {
|
||||
const mediaPercentageElapsed = useStore(
|
||||
(state) => state.mediaPercentageElapsed
|
||||
);
|
||||
const loadingBarContainerTex = useLoader(
|
||||
THREE.TextureLoader,
|
||||
loadingBarContainer
|
||||
);
|
||||
const loadingBarTex = useLoader(THREE.TextureLoader, loadingBar);
|
||||
const loadingBar10PercTex = useLoader(THREE.TextureLoader, loadingBar10Perc);
|
||||
const loadingBar20PercTex = useLoader(THREE.TextureLoader, loadingBar20Perc);
|
||||
const loadingBar30PercTex = useLoader(THREE.TextureLoader, loadingBar30Perc);
|
||||
const loadingBar40PercTex = useLoader(THREE.TextureLoader, loadingBar40Perc);
|
||||
const loadingBar50PercTex = useLoader(THREE.TextureLoader, loadingBar50Perc);
|
||||
|
||||
// the additions here are very linear, but just +ing the values wouldn't work
|
||||
// since in case the video were to get rewinded the bar wouldn't react properly
|
||||
// doing it declaratively like this fixes that concern
|
||||
const loadingBarState = useMemo(() => {
|
||||
const mediaPercentageDispatch = {
|
||||
0: {
|
||||
scaleX: 0,
|
||||
texture: loadingBar10PercTex,
|
||||
offsetX: 0,
|
||||
},
|
||||
5: {
|
||||
scaleX: 0.25,
|
||||
texture: loadingBar10PercTex,
|
||||
offsetX: 0,
|
||||
},
|
||||
10: { scaleX: 0.5, texture: loadingBar20PercTex, offsetX: 0.145 },
|
||||
15: { scaleX: 0.75, texture: loadingBar30PercTex, offsetX: 0.25 },
|
||||
20: {
|
||||
scaleX: 1,
|
||||
texture: loadingBar40PercTex,
|
||||
offsetX: 0.4,
|
||||
},
|
||||
25: {
|
||||
scaleX: 1.25,
|
||||
texture: loadingBar50PercTex,
|
||||
offsetX: 0.55,
|
||||
},
|
||||
30: {
|
||||
scaleX: 1.5,
|
||||
texture: loadingBarTex,
|
||||
offsetX: 0.8,
|
||||
},
|
||||
35: {
|
||||
scaleX: 1.5,
|
||||
texture: loadingBarTex,
|
||||
offsetX: 1.05,
|
||||
},
|
||||
40: {
|
||||
scaleX: 1.5,
|
||||
texture: loadingBarTex,
|
||||
offsetX: 1.3,
|
||||
},
|
||||
45: {
|
||||
scaleX: 1.5,
|
||||
texture: loadingBarTex,
|
||||
offsetX: 1.55,
|
||||
},
|
||||
50: {
|
||||
scaleX: 1.5,
|
||||
texture: loadingBarTex,
|
||||
offsetX: 1.8,
|
||||
},
|
||||
55: {
|
||||
scaleX: 1.5,
|
||||
texture: loadingBarTex,
|
||||
offsetX: 2.05,
|
||||
},
|
||||
60: {
|
||||
scaleX: 1.5,
|
||||
texture: loadingBarTex,
|
||||
offsetX: 2.3,
|
||||
},
|
||||
65: {
|
||||
scaleX: 1.5,
|
||||
texture: loadingBarTex,
|
||||
offsetX: 2.55,
|
||||
},
|
||||
70: {
|
||||
scaleX: 1.5,
|
||||
texture: loadingBarTex,
|
||||
offsetX: 2.8,
|
||||
},
|
||||
75: {
|
||||
scaleX: 1.5,
|
||||
texture: loadingBarTex,
|
||||
offsetX: 3.05,
|
||||
},
|
||||
80: {
|
||||
scaleX: 1.5,
|
||||
texture: loadingBarTex,
|
||||
offsetX: 3.3,
|
||||
},
|
||||
85: {
|
||||
scaleX: 1.5,
|
||||
texture: loadingBarTex,
|
||||
offsetX: 3.55,
|
||||
},
|
||||
90: {
|
||||
scaleX: 1.5,
|
||||
texture: loadingBarTex,
|
||||
offsetX: 3.65,
|
||||
},
|
||||
95: {
|
||||
scaleX: 1.5,
|
||||
texture: loadingBarTex,
|
||||
offsetX: 3.85,
|
||||
},
|
||||
100: {
|
||||
scaleX: 1.5,
|
||||
texture: loadingBarTex,
|
||||
offsetX: 3.95,
|
||||
},
|
||||
};
|
||||
return mediaPercentageDispatch[
|
||||
mediaPercentageElapsed as keyof typeof mediaPercentageDispatch
|
||||
];
|
||||
}, [
|
||||
loadingBar10PercTex,
|
||||
loadingBar20PercTex,
|
||||
loadingBar30PercTex,
|
||||
loadingBar40PercTex,
|
||||
loadingBar50PercTex,
|
||||
loadingBarTex,
|
||||
mediaPercentageElapsed,
|
||||
]);
|
||||
|
||||
const loadingBarMatRef = useRef<THREE.Material>();
|
||||
useFrame(() => {
|
||||
if (loadingBarMatRef) {
|
||||
loadingBarMatRef.current!.needsUpdate = true;
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<sprite scale={[5.2, 0.5, 1]} position={[2.15, 3.005, 0]}>
|
||||
<spriteMaterial attach="material" map={loadingBarContainerTex} />
|
||||
</sprite>
|
||||
<mesh
|
||||
scale={[loadingBarState ? loadingBarState.scaleX : 0, 0.195, 1]}
|
||||
position={[
|
||||
loadingBarState ? -0.2 + loadingBarState.offsetX : -0.2,
|
||||
2.945,
|
||||
0,
|
||||
]}
|
||||
>
|
||||
<planeBufferGeometry attach="geometry" />
|
||||
<meshBasicMaterial
|
||||
ref={loadingBarMatRef}
|
||||
attach="material"
|
||||
transparent={true}
|
||||
map={loadingBarState ? loadingBarState.texture : null}
|
||||
/>
|
||||
</mesh>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default MediaLoadingBar;
|
||||
177
src/components/MediaScene/MediaProgressBar.tsx
Normal file
177
src/components/MediaScene/MediaProgressBar.tsx
Normal file
|
|
@ -0,0 +1,177 @@
|
|||
import React, { useMemo, useRef } from "react";
|
||||
import { useStore } from "../../store";
|
||||
import progressBarContainer from "../../static/sprites/media/media_loading_bar_container.png";
|
||||
import progressBar from "../../static/sprites/progressbar/progress_bar0.png";
|
||||
import progressBar1 from "../../static/sprites/progressbar/progress_bar1.png";
|
||||
import progressBar2 from "../../static/sprites/progressbar/progress_bar2.png";
|
||||
import progressBar3 from "../../static/sprites/progressbar/progress_bar3.png";
|
||||
import progressBar4 from "../../static/sprites/progressbar/progress_bar4.png";
|
||||
import progressBar5 from "../../static/sprites/progressbar/progress_bar5.png";
|
||||
|
||||
import { useFrame, useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
|
||||
const MediaProgressBar = () => {
|
||||
const mediaPercentageElapsed = useStore(
|
||||
(state) => state.mediaPercentageElapsed
|
||||
);
|
||||
const progressBarContainerTex = useLoader(
|
||||
THREE.TextureLoader,
|
||||
progressBarContainer
|
||||
);
|
||||
const progressBarTex = useLoader(THREE.TextureLoader, progressBar);
|
||||
const progressBar1Tex = useLoader(THREE.TextureLoader, progressBar1);
|
||||
const progressBar2Tex = useLoader(THREE.TextureLoader, progressBar2);
|
||||
const progressBar3Tex = useLoader(THREE.TextureLoader, progressBar3);
|
||||
const progressBar4Tex = useLoader(THREE.TextureLoader, progressBar4);
|
||||
const progressBar5Tex = useLoader(THREE.TextureLoader, progressBar5);
|
||||
|
||||
// the additions here are very linear, but just +ing the values wouldn't work
|
||||
// since in case the video were to get rewinded the bar wouldn't react properly
|
||||
// doing it declaratively like this fixes that concern
|
||||
const progressBarState = useMemo(() => {
|
||||
const mediaPercentageDispatch = {
|
||||
0: {
|
||||
scaleX: 0,
|
||||
texture: progressBar1Tex,
|
||||
offsetX: 0,
|
||||
},
|
||||
5: {
|
||||
scaleX: 0.25,
|
||||
texture: progressBar1Tex,
|
||||
offsetX: 0,
|
||||
},
|
||||
10: { scaleX: 0.5, texture: progressBar2Tex, offsetX: 0.145 },
|
||||
15: { scaleX: 0.75, texture: progressBar3Tex, offsetX: 0.25 },
|
||||
20: {
|
||||
scaleX: 1,
|
||||
texture: progressBar4Tex,
|
||||
offsetX: 0.4,
|
||||
},
|
||||
25: {
|
||||
scaleX: 1.25,
|
||||
texture: progressBar5Tex,
|
||||
offsetX: 0.55,
|
||||
},
|
||||
30: {
|
||||
scaleX: 1.5,
|
||||
texture: progressBarTex,
|
||||
offsetX: 0.8,
|
||||
},
|
||||
35: {
|
||||
scaleX: 1.5,
|
||||
texture: progressBarTex,
|
||||
offsetX: 1.05,
|
||||
},
|
||||
40: {
|
||||
scaleX: 1.5,
|
||||
texture: progressBarTex,
|
||||
offsetX: 1.3,
|
||||
},
|
||||
45: {
|
||||
scaleX: 1.5,
|
||||
texture: progressBarTex,
|
||||
offsetX: 1.55,
|
||||
},
|
||||
50: {
|
||||
scaleX: 1.5,
|
||||
texture: progressBarTex,
|
||||
offsetX: 1.8,
|
||||
},
|
||||
55: {
|
||||
scaleX: 1.5,
|
||||
texture: progressBarTex,
|
||||
offsetX: 2.05,
|
||||
},
|
||||
60: {
|
||||
scaleX: 1.5,
|
||||
texture: progressBarTex,
|
||||
offsetX: 2.3,
|
||||
},
|
||||
65: {
|
||||
scaleX: 1.5,
|
||||
texture: progressBarTex,
|
||||
offsetX: 2.55,
|
||||
},
|
||||
70: {
|
||||
scaleX: 1.5,
|
||||
texture: progressBarTex,
|
||||
offsetX: 2.8,
|
||||
},
|
||||
75: {
|
||||
scaleX: 1.5,
|
||||
texture: progressBarTex,
|
||||
offsetX: 3.05,
|
||||
},
|
||||
80: {
|
||||
scaleX: 1.5,
|
||||
texture: progressBarTex,
|
||||
offsetX: 3.3,
|
||||
},
|
||||
85: {
|
||||
scaleX: 1.5,
|
||||
texture: progressBarTex,
|
||||
offsetX: 3.55,
|
||||
},
|
||||
90: {
|
||||
scaleX: 1.5,
|
||||
texture: progressBarTex,
|
||||
offsetX: 3.65,
|
||||
},
|
||||
95: {
|
||||
scaleX: 1.5,
|
||||
texture: progressBarTex,
|
||||
offsetX: 3.85,
|
||||
},
|
||||
100: {
|
||||
scaleX: 1.5,
|
||||
texture: progressBarTex,
|
||||
offsetX: 3.95,
|
||||
},
|
||||
};
|
||||
return mediaPercentageDispatch[
|
||||
mediaPercentageElapsed as keyof typeof mediaPercentageDispatch
|
||||
];
|
||||
}, [
|
||||
progressBar1Tex,
|
||||
progressBar2Tex,
|
||||
progressBar3Tex,
|
||||
progressBar4Tex,
|
||||
progressBar5Tex,
|
||||
progressBarTex,
|
||||
mediaPercentageElapsed,
|
||||
]);
|
||||
|
||||
const progressBarMatRef = useRef<THREE.Material>();
|
||||
useFrame(() => {
|
||||
if (progressBarMatRef) {
|
||||
progressBarMatRef.current!.needsUpdate = true;
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<sprite scale={[5.2, 0.5, 1]} position={[2.15, 3.005, 0]}>
|
||||
<spriteMaterial attach="material" map={progressBarContainerTex} />
|
||||
</sprite>
|
||||
<mesh
|
||||
scale={[progressBarState ? progressBarState.scaleX : 0, 0.195, 1]}
|
||||
position={[
|
||||
progressBarState ? -0.2 + progressBarState.offsetX : -0.2,
|
||||
2.945,
|
||||
0,
|
||||
]}
|
||||
>
|
||||
<planeBufferGeometry attach="geometry" />
|
||||
<meshBasicMaterial
|
||||
ref={progressBarMatRef}
|
||||
attach="material"
|
||||
transparent={true}
|
||||
map={progressBarState ? progressBarState.texture : null}
|
||||
/>
|
||||
</mesh>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default MediaProgressBar;
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import React from "react";
|
||||
import * as THREE from "three";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
import mediaNodeNameContainer from "../../static/sprite/media_node_name_container.png";
|
||||
import mediaNodeNameContainer from "../../static/sprites/media/media_node_name_container.png";
|
||||
|
||||
const NodeNameContainer = () => {
|
||||
const mediaNodeNameContainerTex = useLoader(
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { useFrame, useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
import grayTextureFile from "../../../../static/sprite/gray_box.png";
|
||||
import darkGrayTextureFile from "../../../../static/sprite/dark_gray_box.png";
|
||||
import grayTextureFile from "../../../../static/sprites/media/gray_box.png";
|
||||
import darkGrayTextureFile from "../../../../static/sprites/media/dark_gray_box.png";
|
||||
import React, {memo, useRef} from "react";
|
||||
import { ShapeProps } from "../LeftSide";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { useFrame, useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
import grayTextureFile from "../../../../static/sprite/gray_box.png";
|
||||
import darkGrayTextureFile from "../../../../static/sprite/dark_gray_box.png";
|
||||
import grayTextureFile from "../../../../static/sprites/media/gray_box.png";
|
||||
import darkGrayTextureFile from "../../../../static/sprites/media/dark_gray_box.png";
|
||||
import React, { memo, useRef } from "react";
|
||||
import { ShapeProps } from "../LeftSide";
|
||||
import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React, { useMemo } from "react";
|
||||
import * as THREE from "three";
|
||||
import wordInactiveTexture from "../../../../static/sprite/word_background.png";
|
||||
import wordActiveTexture from "../../../../static/sprite/word_background_active.png";
|
||||
import wordInactiveTexture from "../../../../static/sprites/media/word_background.png";
|
||||
import wordActiveTexture from "../../../../static/sprites/media/word_background_active.png";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
import { a, SpringValue } from "@react-spring/three";
|
||||
|
||||
|
|
@ -13,7 +13,7 @@ type WordProps = {
|
|||
};
|
||||
|
||||
const Word = (props: WordProps) => {
|
||||
const wordFont = useLoader(THREE.FontLoader, "/3d_fonts/MediaWord.blob");
|
||||
const wordFont = useLoader(THREE.FontLoader, "/3d-fonts/MediaWord.blob");
|
||||
const config = useMemo(
|
||||
() => ({
|
||||
font: wordFont,
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
import React, { useEffect, useMemo, useRef } from "react";
|
||||
import header from "../../static/sprite/polytan_header.png";
|
||||
import background from "../../static/sprite/polytan_background.png";
|
||||
import leftArmHud from "../../static/sprite/poly_larm_hud.png";
|
||||
import rightArmHud from "../../static/sprite/poly_rarm_hud.png";
|
||||
import rightLegHud from "../../static/sprite/poly_rleg_hud.png";
|
||||
import leftLegHud from "../../static/sprite/poly_lleg_hud.png";
|
||||
import headHud from "../../static/sprite/poly_head_hud.png";
|
||||
import bodyHud from "../../static/sprite/poly_body_hud.png";
|
||||
import header from "../../static/sprites/polytan/polytan_header.png";
|
||||
import background from "../../static/sprites/polytan/polytan_background.png";
|
||||
import leftArmHud from "../../static/sprites/polytan/poly_larm_hud.png";
|
||||
import rightArmHud from "../../static/sprites/polytan/poly_rarm_hud.png";
|
||||
import rightLegHud from "../../static/sprites/polytan/poly_rleg_hud.png";
|
||||
import leftLegHud from "../../static/sprites/polytan/poly_lleg_hud.png";
|
||||
import headHud from "../../static/sprites/polytan/poly_head_hud.png";
|
||||
import bodyHud from "../../static/sprites/polytan/poly_body_hud.png";
|
||||
|
||||
import { useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
|
|
@ -21,7 +21,7 @@ const PolytanBackground = () => {
|
|||
const headHudTex = useLoader(THREE.TextureLoader, headHud);
|
||||
const bodyHudTex = useLoader(THREE.TextureLoader, bodyHud);
|
||||
|
||||
const wordFont = useLoader(THREE.FontLoader, "/3d_fonts/MediaWord.blob");
|
||||
const wordFont = useLoader(THREE.FontLoader, "/3d-fonts/MediaWord.blob");
|
||||
|
||||
const config = useMemo(
|
||||
() => ({
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import React, { memo } from "react";
|
||||
import body from "../../static/sprite/body.png";
|
||||
import head from "../../static/sprite/head.png";
|
||||
import leftLeg from "../../static/sprite/left_leg.png";
|
||||
import leftArm from "../../static/sprite/left_arm.png";
|
||||
import rightArm from "../../static/sprite/right_arm.png";
|
||||
import rightLeg from "../../static/sprite/right_leg.png";
|
||||
import skeleton from "../../static/sprite/polytan_skeleton.png";
|
||||
import body from "../../static/sprites/polytan/body.png";
|
||||
import head from "../../static/sprites/polytan/head.png";
|
||||
import leftLeg from "../../static/sprites/polytan/left_leg.png";
|
||||
import leftArm from "../../static/sprites/polytan/left_arm.png";
|
||||
import rightArm from "../../static/sprites/polytan/right_arm.png";
|
||||
import rightLeg from "../../static/sprites/polytan/right_leg.png";
|
||||
import skeleton from "../../static/sprites/polytan/polytan_skeleton.png";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
import { useStore } from "../../store";
|
||||
|
|
|
|||
|
|
@ -1,35 +1,35 @@
|
|||
import introSpriteSheet from "../static/sprite/intro.png";
|
||||
import moveDownSpriteSheet from "../static/sprite/jump_down.png";
|
||||
import moveUpSpriteSheet from "../static/sprite/jump_up.png";
|
||||
import standingSpriteSheet from "../static/sprite/standing.png";
|
||||
import moveLeftSpriteSheet from "../static/sprite/move_left.png";
|
||||
import moveRightSpriteSheet from "../static/sprite/move_right.png";
|
||||
import bigHudSpriteSheet from "../static/sprite/big_hud.png";
|
||||
import longHudSpriteSheet from "../static/sprite/long_hud.png";
|
||||
import boringHudSpriteSheet from "../static/sprite/long_hud_boring.png";
|
||||
import throwNodeSpriteSheet from "../static/sprite/throw_node.png";
|
||||
import ripMiddleRingSpriteSheet from "../static/sprite/rip_middle_ring.png";
|
||||
import ripNodeSpriteSheet from "../static/sprite/rip_node.png";
|
||||
import prayerSpriteSheet from "../static/sprite/prayer.png";
|
||||
import knockSpriteSheet from "../static/sprite/knock.png";
|
||||
import knockAndFallSpriteSheet from "../static/sprite/knock_and_fall.png";
|
||||
import touchAndScareSpriteSheet from "../static/sprite/touch_node_and_get_scared.png";
|
||||
import touchSleeveSpriteSheet from "../static/sprite/touch_sleeve.png";
|
||||
import thinkingSpriteSheet from "../static/sprite/thinking.png";
|
||||
import stretchSpriteSheet from "../static/sprite/stretch.png";
|
||||
import stretch2SpriteSheet from "../static/sprite/stretch_2.png";
|
||||
import spinSpriteSheet from "../static/sprite/spin.png";
|
||||
import scratchHeadSpriteSheet from "../static/sprite/scratch_head.png";
|
||||
import blushSpriteSheet from "../static/sprite/blush.png";
|
||||
import handsBehindHeadSpriteSheet from "../static/sprite/hands_behind_head.png";
|
||||
import handsOnHipsSpriteSheet from "../static/sprite/hands_on_hips.png";
|
||||
import handsOnHips2SpriteSheet from "../static/sprite/hands_on_hips_2.png";
|
||||
import handsTogetherSpriteSheet from "../static/sprite/hands_together.png";
|
||||
import leanForwardSpriteSheet from "../static/sprite/lean_forward.png";
|
||||
import leanLeftSpriteSheet from "../static/sprite/lean_left.png";
|
||||
import leanRightSpriteSheet from "../static/sprite/lean_right.png";
|
||||
import lookAroundSpriteSheet from "../static/sprite/look_around.png";
|
||||
import playWithHairSpriteSheet from "../static/sprite/play_with_hair.png";
|
||||
import introSpriteSheet from "../static/sprites/lain/intro.png";
|
||||
import moveDownSpriteSheet from "../static/sprites/lain/jump_down.png";
|
||||
import moveUpSpriteSheet from "../static/sprites/lain/jump_up.png";
|
||||
import standingSpriteSheet from "../static/sprites/lain/standing.png";
|
||||
import moveLeftSpriteSheet from "../static/sprites/lain/move_left.png";
|
||||
import moveRightSpriteSheet from "../static/sprites/lain/move_right.png";
|
||||
import bigHudSpriteSheet from "../static/sprites/big_hud.png";
|
||||
import longHudSpriteSheet from "../static/sprites/long_hud.png";
|
||||
import boringHudSpriteSheet from "../static/sprites/long_hud_boring.png";
|
||||
import throwNodeSpriteSheet from "../static/sprites/lain/throw_node.png";
|
||||
import ripMiddleRingSpriteSheet from "../static/sprites/lain/rip_middle_ring.png";
|
||||
import ripNodeSpriteSheet from "../static/sprites/lain/rip_node.png";
|
||||
import prayerSpriteSheet from "../static/sprites/lain/prayer.png";
|
||||
import knockSpriteSheet from "../static/sprites/lain/knock.png";
|
||||
import knockAndFallSpriteSheet from "../static/sprites/lain/knock_and_fall.png";
|
||||
import touchAndScareSpriteSheet from "../static/sprites/lain/touch_node_and_get_scared.png";
|
||||
import touchSleeveSpriteSheet from "../static/sprites/lain/touch_sleeve.png";
|
||||
import thinkingSpriteSheet from "../static/sprites/lain/thinking.png";
|
||||
import stretchSpriteSheet from "../static/sprites/lain/stretch.png";
|
||||
import stretch2SpriteSheet from "../static/sprites/lain/stretch_2.png";
|
||||
import spinSpriteSheet from "../static/sprites/lain/spin.png";
|
||||
import scratchHeadSpriteSheet from "../static/sprites/lain/scratch_head.png";
|
||||
import blushSpriteSheet from "../static/sprites/lain/blush.png";
|
||||
import handsBehindHeadSpriteSheet from "../static/sprites/lain/hands_behind_head.png";
|
||||
import handsOnHipsSpriteSheet from "../static/sprites/lain/hands_on_hips.png";
|
||||
import handsOnHips2SpriteSheet from "../static/sprites/lain/hands_on_hips_2.png";
|
||||
import handsTogetherSpriteSheet from "../static/sprites/lain/hands_together.png";
|
||||
import leanForwardSpriteSheet from "../static/sprites/lain/lean_forward.png";
|
||||
import leanLeftSpriteSheet from "../static/sprites/lain/lean_left.png";
|
||||
import leanRightSpriteSheet from "../static/sprites/lain/lean_right.png";
|
||||
import lookAroundSpriteSheet from "../static/sprites/lain/look_around.png";
|
||||
import playWithHairSpriteSheet from "../static/sprites/lain/play_with_hair.png";
|
||||
|
||||
import * as THREE from "three";
|
||||
import { useLoader, useThree } from "react-three-fiber";
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import React, { memo } from "react";
|
||||
import answerContainer from "../static/sprite/prompt_answer_container.png";
|
||||
import questionContainer from "../static/sprite/prompt_question_container.png";
|
||||
import yes from "../static/sprite/prompt_yes.png";
|
||||
import no from "../static/sprite/prompt_no.png";
|
||||
import question from "../static/sprite/prompt_question.png";
|
||||
import answerContainer from "../static/sprites/prompt/prompt_answer_container.png";
|
||||
import questionContainer from "../static/sprites/prompt/prompt_question_container.png";
|
||||
import yes from "../static/sprites/prompt/prompt_yes.png";
|
||||
import no from "../static/sprites/prompt/prompt_no.png";
|
||||
import question from "../static/sprites/prompt/prompt_question.png";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
import { useStore } from "../store";
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import React, { memo } from "react";
|
||||
import ssknBackground from "../../static/sprite/sskn_background.png";
|
||||
import ssknBackgroundText from "../../static/sprite/sskn_background_text.png";
|
||||
import ssknBackground from "../../static/sprites/sskn/sskn_background.png";
|
||||
import ssknBackgroundText from "../../static/sprites/sskn/sskn_background_text.png";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
import ssknTopLabel from "../../static/sprite/sskn_top_label.png";
|
||||
import ssknDango from "../../static/sprite/sskn_dango.png";
|
||||
import ssknTopLabel from "../../static/sprites/sskn/sskn_top_label.png";
|
||||
import ssknDango from "../../static/sprites/sskn/sskn_dango.png";
|
||||
|
||||
const SsknBackground = memo(() => {
|
||||
const ssknBackgroundTex = useLoader(THREE.TextureLoader, ssknBackground);
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
import React, { memo } from "react";
|
||||
import ssknOk from "../../static/sprite/sskn_ok.png";
|
||||
import ssknOkInactive from "../../static/sprite/sskn_ok_inactive.png";
|
||||
import ssknCancel from "../../static/sprite/sskn_cancel.png";
|
||||
import ssknCancelInactive from "../../static/sprite/sskn_cancel_inactive.png";
|
||||
import ssknUpgrade from "../../static/sprite/sskn_upgrade.png";
|
||||
import ssknArrow from "../../static/sprite/sskn_arrow.png";
|
||||
import ssknTextWrapper from "../../static/sprite/sskn_text_wrapper.png";
|
||||
import ssknTextWrapperInactive from "../../static/sprite/sskn_text_wrapper_inactive.png";
|
||||
import ssknLine from "../../static/sprite/sskn_line.png";
|
||||
import ssknOk from "../../static/sprites/sskn/sskn_ok.png";
|
||||
import ssknOkInactive from "../../static/sprites/sskn/sskn_ok_inactive.png";
|
||||
import ssknCancel from "../../static/sprites/sskn/sskn_cancel.png";
|
||||
import ssknCancelInactive from "../../static/sprites/sskn/sskn_cancel_inactive.png";
|
||||
import ssknUpgrade from "../../static/sprites/sskn/sskn_upgrade.png";
|
||||
import ssknArrow from "../../static/sprites/sskn/sskn_arrow.png";
|
||||
import ssknTextWrapper from "../../static/sprites/sskn/sskn_text_wrapper.png";
|
||||
import ssknTextWrapperInactive from "../../static/sprites/sskn/sskn_text_wrapper_inactive.png";
|
||||
import ssknLine from "../../static/sprites/sskn/sskn_line.png";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
import SsknLoadingBar from "./SsknLoadingBar";
|
||||
import SsknProgressBar from "./SsknProgressBar";
|
||||
import { useStore } from "../../store";
|
||||
|
||||
const SsknHUD = memo(() => {
|
||||
|
|
@ -37,7 +37,7 @@ const SsknHUD = memo(() => {
|
|||
return (
|
||||
<>
|
||||
{loading ? (
|
||||
<SsknLoadingBar />
|
||||
<SsknProgressBar />
|
||||
) : (
|
||||
<group>
|
||||
<sprite position={[2.8, -2, 0]} scale={[1, 0.5, 0]}>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { memo, useRef } from "react";
|
||||
import ssknIcon from "../../static/sprite/SSkn_icon.png";
|
||||
import ssknIcon from "../../static/sprites/sskn/SSkn_icon.png";
|
||||
import { useFrame, useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,95 +0,0 @@
|
|||
import React, { useRef } from "react";
|
||||
import { useFrame, useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
import ssknLoadingBarContainer from "../../static/sprite/SSkn_loading_bar.png";
|
||||
import loadingBar10Perc from "../../static/sprite/media_loading_bar_10perc.png";
|
||||
import loadingBar20Perc from "../../static/sprite/media_loading_bar_20perc.png";
|
||||
import loadingBar30Perc from "../../static/sprite/media_loading_bar_30perc.png";
|
||||
import loadingBar40Perc from "../../static/sprite/media_loading_bar_40perc.png";
|
||||
import loadingBar50Perc from "../../static/sprite/media_loading_bar_50perc.png";
|
||||
import loadingBar from "../../static/sprite/media_loading_bar.png";
|
||||
|
||||
const SsknLoadingBar = () => {
|
||||
const ssknLoadingBarContainerTex = useLoader(
|
||||
THREE.TextureLoader,
|
||||
ssknLoadingBarContainer
|
||||
);
|
||||
|
||||
const loadingBarTex = useLoader(THREE.TextureLoader, loadingBar);
|
||||
const loadingBar10PercTex = useLoader(THREE.TextureLoader, loadingBar10Perc);
|
||||
const loadingBar20PercTex = useLoader(THREE.TextureLoader, loadingBar20Perc);
|
||||
const loadingBar30PercTex = useLoader(THREE.TextureLoader, loadingBar30Perc);
|
||||
const loadingBar40PercTex = useLoader(THREE.TextureLoader, loadingBar40Perc);
|
||||
const loadingBar50PercTex = useLoader(THREE.TextureLoader, loadingBar50Perc);
|
||||
|
||||
const loadingBarRef = useRef<THREE.Object3D>();
|
||||
const loadingBarMatRef = useRef<THREE.SpriteMaterial>();
|
||||
const percentageElapsed = useRef(0);
|
||||
const last = useRef(0);
|
||||
|
||||
useFrame(() => {
|
||||
const now = Date.now();
|
||||
|
||||
if (
|
||||
now > last.current + 200 &&
|
||||
loadingBarRef.current &&
|
||||
loadingBarMatRef.current
|
||||
) {
|
||||
percentageElapsed.current += 5;
|
||||
switch (percentageElapsed.current) {
|
||||
case 5:
|
||||
loadingBarRef.current.scale.x = 0.25;
|
||||
loadingBarMatRef.current.map = loadingBar10PercTex;
|
||||
break;
|
||||
case 10:
|
||||
loadingBarRef.current.scale.x += 0.25;
|
||||
loadingBarRef.current.position.x += 0.1;
|
||||
loadingBarMatRef.current.map = loadingBar20PercTex;
|
||||
break;
|
||||
case 15:
|
||||
loadingBarRef.current.scale.x += 0.25;
|
||||
loadingBarRef.current.position.x += 0.1;
|
||||
loadingBarMatRef.current.map = loadingBar30PercTex;
|
||||
break;
|
||||
case 20:
|
||||
loadingBarRef.current.scale.x += 0.25;
|
||||
loadingBarRef.current.position.x += 0.1;
|
||||
loadingBarMatRef.current.map = loadingBar40PercTex;
|
||||
break;
|
||||
case 25:
|
||||
loadingBarRef.current.scale.x += 0.25;
|
||||
loadingBarRef.current.position.x += 0.1;
|
||||
loadingBarMatRef.current.map = loadingBar50PercTex;
|
||||
break;
|
||||
default:
|
||||
if (loadingBarRef.current.position.x < 4.1) {
|
||||
loadingBarMatRef.current.map = loadingBarTex;
|
||||
loadingBarRef.current.position.x += 0.2;
|
||||
}
|
||||
}
|
||||
last.current = now;
|
||||
}
|
||||
});
|
||||
return (
|
||||
<>
|
||||
<sprite scale={[5.5, 0.3, 0]} position={[2, -2.7, 0]} renderOrder={4}>
|
||||
<spriteMaterial attach="material" map={ssknLoadingBarContainerTex} />
|
||||
</sprite>
|
||||
<sprite
|
||||
scale={[0.2, 0.15, 0]}
|
||||
position={[-0.5, -2.68, 0]}
|
||||
renderOrder={4}
|
||||
ref={loadingBarRef}
|
||||
>
|
||||
<spriteMaterial
|
||||
attach="material"
|
||||
ref={loadingBarMatRef}
|
||||
map={loadingBar10PercTex}
|
||||
opacity={0.8}
|
||||
/>
|
||||
</sprite>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SsknLoadingBar;
|
||||
95
src/components/SsknScene/SsknProgressBar.tsx
Normal file
95
src/components/SsknScene/SsknProgressBar.tsx
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
import React, { useRef } from "react";
|
||||
import { useFrame, useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
import ssknProgressBarContainer from "../../static/sprites/sskn/sskn_progress_bar.png";
|
||||
import progressBar1 from "../../static/sprites/progressbar/progress_bar1.png";
|
||||
import progressBar2 from "../../static/sprites/progressbar/progress_bar2.png";
|
||||
import progressBar3 from "../../static/sprites/progressbar/progress_bar3.png";
|
||||
import progressBar4 from "../../static/sprites/progressbar/progress_bar4.png";
|
||||
import progressBar5 from "../../static/sprites/progressbar/progress_bar5.png";
|
||||
import progressBar from "../../static/sprites/progressbar/progress_bar0.png";
|
||||
|
||||
const SsknProgressBar = () => {
|
||||
const ssknProgressBarContainerTex = useLoader(
|
||||
THREE.TextureLoader,
|
||||
ssknProgressBarContainer
|
||||
);
|
||||
|
||||
const progressBarTex = useLoader(THREE.TextureLoader, progressBar);
|
||||
const progressBar1Tex = useLoader(THREE.TextureLoader, progressBar1);
|
||||
const progressBar2Tex = useLoader(THREE.TextureLoader, progressBar2);
|
||||
const progressBar3Tex = useLoader(THREE.TextureLoader, progressBar3);
|
||||
const progressBar4Tex = useLoader(THREE.TextureLoader, progressBar4);
|
||||
const progressBar5Tex = useLoader(THREE.TextureLoader, progressBar5);
|
||||
|
||||
const progressBarRef = useRef<THREE.Object3D>();
|
||||
const progressBarMatRef = useRef<THREE.SpriteMaterial>();
|
||||
const percentageElapsed = useRef(0);
|
||||
const last = useRef(0);
|
||||
|
||||
useFrame(() => {
|
||||
const now = Date.now();
|
||||
|
||||
if (
|
||||
now > last.current + 200 &&
|
||||
progressBarRef.current &&
|
||||
progressBarMatRef.current
|
||||
) {
|
||||
percentageElapsed.current += 5;
|
||||
switch (percentageElapsed.current) {
|
||||
case 5:
|
||||
progressBarRef.current.scale.x = 0.25;
|
||||
progressBarMatRef.current.map = progressBar1Tex;
|
||||
break;
|
||||
case 10:
|
||||
progressBarRef.current.scale.x += 0.25;
|
||||
progressBarRef.current.position.x += 0.1;
|
||||
progressBarMatRef.current.map = progressBar2Tex;
|
||||
break;
|
||||
case 15:
|
||||
progressBarRef.current.scale.x += 0.25;
|
||||
progressBarRef.current.position.x += 0.1;
|
||||
progressBarMatRef.current.map = progressBar3Tex;
|
||||
break;
|
||||
case 20:
|
||||
progressBarRef.current.scale.x += 0.25;
|
||||
progressBarRef.current.position.x += 0.1;
|
||||
progressBarMatRef.current.map = progressBar4Tex;
|
||||
break;
|
||||
case 25:
|
||||
progressBarRef.current.scale.x += 0.25;
|
||||
progressBarRef.current.position.x += 0.1;
|
||||
progressBarMatRef.current.map = progressBar5Tex;
|
||||
break;
|
||||
default:
|
||||
if (progressBarRef.current.position.x < 4.1) {
|
||||
progressBarMatRef.current.map = progressBarTex;
|
||||
progressBarRef.current.position.x += 0.2;
|
||||
}
|
||||
}
|
||||
last.current = now;
|
||||
}
|
||||
});
|
||||
return (
|
||||
<>
|
||||
<sprite scale={[5.5, 0.3, 0]} position={[2, -2.7, 0]} renderOrder={4}>
|
||||
<spriteMaterial attach="material" map={ssknProgressBarContainerTex} />
|
||||
</sprite>
|
||||
<sprite
|
||||
scale={[0.2, 0.15, 0]}
|
||||
position={[-0.5, -2.68, 0]}
|
||||
renderOrder={4}
|
||||
ref={progressBarRef}
|
||||
>
|
||||
<spriteMaterial
|
||||
attach="material"
|
||||
ref={progressBarMatRef}
|
||||
map={progressBar1Tex}
|
||||
opacity={0.8}
|
||||
/>
|
||||
</sprite>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SsknProgressBar;
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
import React, { memo } from "react";
|
||||
import statusContainer from "../static/sprite/status_container.png";
|
||||
import loadSuccessfulImg from "../static/sprite/load_successful.png";
|
||||
import loadFailImg from "../static/sprite/load_fail.png";
|
||||
import saveSuccessfulImg from "../static/sprite/save_successful.png";
|
||||
import statusContainer from "../static/sprites/status/status_container.png";
|
||||
import loadSuccessfulImg from "../static/sprites/status/load_successful.png";
|
||||
import loadFailImg from "../static/sprites/status/load_fail.png";
|
||||
import saveSuccessfulImg from "../static/sprites/status/save_successful.png";
|
||||
|
||||
import { useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import orangeFont from "../../static/sprite/orange_font_texture.png";
|
||||
import yellowFont from "../../static/sprite/yellow_font_texture.png";
|
||||
import orangeFont from "../../static/sprites/fonts/orange_font_texture.png";
|
||||
import yellowFont from "../../static/sprites/fonts/yellow_font_texture.png";
|
||||
import * as THREE from "three";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
import orange_font_json from "../../resources/font_data/big_font.json";
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
import greenFont from "../../static/sprite/white_and_green_texture.png";
|
||||
import greenFont from "../../static/sprites/fonts/white_and_green_texture.png";
|
||||
import medium_font_json from "../../resources/font_data/medium_font.json";
|
||||
import { a } from "@react-spring/three";
|
||||
import React, { memo, useMemo } from "react";
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import orangeFont from "../../static/sprite/orange_font_texture.png";
|
||||
import yellowFont from "../../static/sprite/yellow_font_texture.png";
|
||||
import whiteFont from "../../static/sprite/white_and_green_texture.png";
|
||||
import orangeFont from "../../static/sprites/fonts/orange_font_texture.png";
|
||||
import yellowFont from "../../static/sprites/fonts/yellow_font_texture.png";
|
||||
import whiteFont from "../../static/sprites/fonts/white_and_green_texture.png";
|
||||
import * as THREE from "three";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
import orange_font_json from "../../resources/font_data/big_font.json";
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import orangeFont from "../../static/sprite/orange_jp_font.png";
|
||||
import orangeFont from "../../static/sprites/fonts/orange_jp_font.png";
|
||||
import * as THREE from "three";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
import jp_font_json from "../../resources/font_data/jp_font.json";
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import orangeFont from "../../static/sprite/orange_font_texture.png";
|
||||
import orangeFont from "../../static/sprites/fonts/orange_font_texture.png";
|
||||
import * as THREE from "three";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
import orange_font_json from "../../resources/font_data/big_font.json";
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import site_a from "../resources/site_a.json";
|
||||
import site_b from "../resources/site_b.json";
|
||||
import { useStore } from "../store";
|
||||
import {SiteData} from "../types/types";
|
||||
import { SiteData } from "../types/types";
|
||||
|
||||
export const getRandomIdleMedia = () => {
|
||||
const siteAIdleNodes = {
|
||||
|
|
|
|||
|
|
@ -1,24 +1,79 @@
|
|||
import React, { useEffect } from "react";
|
||||
import { useStore } from "../store";
|
||||
import changeDiscLof from "../static/sprites/change_disc/disc_lof.png";
|
||||
import changeSite from "../static/sprites/change_disc/disc_change_site.png";
|
||||
import discLine from "../static/sprites/change_disc/disc_line.png";
|
||||
import discSlopeLine from "../static/sprites/change_disc/disc_slope_line.png";
|
||||
import discText from "../static/sprites/change_disc/disc_disc.png";
|
||||
import checkingInProgress from "../static/sprites/change_disc/disc_checking_in_progress.png";
|
||||
import disc1 from "../static/sprites/change_disc/disc_1.png";
|
||||
import disc2 from "../static/sprites/change_disc/disc_2.png";
|
||||
import * as THREE from "three";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
|
||||
const ChangeDiscScene = () => {
|
||||
const setScene = useStore((state) => state.setScene);
|
||||
const activeSite = useStore((state) => state.activeSite);
|
||||
|
||||
useEffect(() => {
|
||||
if (activeSite === "a") {
|
||||
// todo actually rip the assets from the original
|
||||
document.getElementsByTagName("canvas")[0].className =
|
||||
"change-disc-scene-a-background";
|
||||
} else if (activeSite === "b") {
|
||||
document.getElementsByTagName("canvas")[0].className =
|
||||
"change-disc-scene-b-background";
|
||||
}
|
||||
const changeDiscLofTex = useLoader(THREE.TextureLoader, changeDiscLof);
|
||||
const changeSiteTex = useLoader(THREE.TextureLoader, changeSite);
|
||||
const discLineTex = useLoader(THREE.TextureLoader, discLine);
|
||||
const discSlopeLineTex = useLoader(THREE.TextureLoader, discSlopeLine);
|
||||
const checkingInProgressTex = useLoader(
|
||||
THREE.TextureLoader,
|
||||
checkingInProgress
|
||||
);
|
||||
const discTextTex = useLoader(THREE.TextureLoader, discText);
|
||||
const disc1Tex = useLoader(THREE.TextureLoader, disc1);
|
||||
const disc2Tex = useLoader(THREE.TextureLoader, disc2);
|
||||
|
||||
setTimeout(() => setScene("main"), 3500);
|
||||
useEffect(() => {
|
||||
// setTimeout(() => setScene("main"), 3500);
|
||||
}, [activeSite, setScene]);
|
||||
|
||||
return <></>;
|
||||
return (
|
||||
<>
|
||||
<sprite scale={[15, 15, 0]}>
|
||||
<spriteMaterial color={0xffffff} />
|
||||
</sprite>
|
||||
<sprite scale={[2.8, 0.8, 0]} position={[0, 2.5, 0]}>
|
||||
<spriteMaterial attach="material" map={changeDiscLofTex} />
|
||||
</sprite>
|
||||
<sprite scale={[5, 0.8, 0]} position={[0, 1, 0]}>
|
||||
<spriteMaterial attach="material" map={changeSiteTex} />
|
||||
</sprite>
|
||||
|
||||
{[...Array(2).keys()].map((idx) => (
|
||||
<sprite scale={[9, 0.03, 0]} position={[0, 0.5 - idx / 10, 0]}>
|
||||
<spriteMaterial attach="material" map={discLineTex} />
|
||||
</sprite>
|
||||
))}
|
||||
|
||||
<sprite scale={[7, 0.8, 0]} position={[0, -1, 0]}>
|
||||
<spriteMaterial attach="material" map={checkingInProgressTex} />
|
||||
</sprite>
|
||||
|
||||
{[...Array(7).keys()].map((idx) => (
|
||||
<sprite scale={[9, 0.03, 0]} position={[0, -1.5 - idx / 9, 0]}>
|
||||
<spriteMaterial attach="material" map={discLineTex} />
|
||||
</sprite>
|
||||
))}
|
||||
|
||||
{[...Array(2).keys()].map((idx) => (
|
||||
<sprite scale={[8, 0.13, 0]} position={[0, -2.2 - idx / 8, 0]}>
|
||||
<spriteMaterial attach="material" map={discSlopeLineTex} />
|
||||
</sprite>
|
||||
))}
|
||||
|
||||
<sprite scale={[2, 0.7, 0]} position={[-0.3, -1.9, 0]}>
|
||||
<spriteMaterial attach="material" map={discTextTex} />
|
||||
</sprite>
|
||||
|
||||
<sprite scale={[0.4, 0.7, 0]} position={[1.4, -1.9, 0]}>
|
||||
<spriteMaterial attach="material" map={disc1Tex} />
|
||||
</sprite>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChangeDiscScene;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import GateSide from "../components/GateScene/GateSide";
|
||||
import { OrbitControls } from "@react-three/drei";
|
||||
import GateHUD from "../components/GateScene/GateHUD";
|
||||
import GateMiddleObject from "../components/GateScene/GateMiddleObject";
|
||||
import { useStore } from "../store";
|
||||
|
|
@ -27,7 +26,6 @@ const GateScene = () => {
|
|||
return (
|
||||
<perspectiveCamera position-z={3}>
|
||||
<pointLight intensity={5.2} color={0xffffff} position={[-2, 0, 0]} />
|
||||
<OrbitControls />
|
||||
<GateSide />
|
||||
<GateHUD intro={introAnim} gateLvl={gateLvl} />
|
||||
<GateMiddleObject intro={introAnim} gateLvl={gateLvl} />
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { createAudioAnalyser, useStore } from "../store";
|
|||
import LeftSide from "../components/MediaScene/Selectables/LeftSide";
|
||||
import RightSide from "../components/MediaScene/Selectables/RightSide";
|
||||
import AudioVisualizer from "../components/MediaScene/AudioVisualizer/AudioVisualizer";
|
||||
import MediaLoadingBar from "../components/MediaScene/MediaLoadingBar";
|
||||
import MediaProgressBar from "../components/MediaScene/MediaProgressBar";
|
||||
import NodeNameContainer from "../components/MediaScene/NodeNameContainer";
|
||||
import Images from "../components/Images";
|
||||
import GreenTextRenderer from "../components/TextRenderer/GreenTextRenderer";
|
||||
|
|
@ -82,7 +82,7 @@ const MediaScene = () => {
|
|||
<pointLight intensity={1.2} color={0xffffff} position={[-2, 0, 0]} />
|
||||
<LeftSide />
|
||||
<group position={[0, 0.5, -3]}>
|
||||
<MediaLoadingBar />
|
||||
<MediaProgressBar />
|
||||
<NodeNameContainer />
|
||||
</group>
|
||||
<group scale={[0.06, 0.12, 0]} position={[0.8, 1.37, 0]}>
|
||||
|
|
|
|||
|
|
@ -126,7 +126,7 @@ export const useStore = create(
|
|||
combine(
|
||||
{
|
||||
// scene data
|
||||
currentScene: "main",
|
||||
currentScene: "change_disc",
|
||||
|
||||
// game progress
|
||||
gameProgress: game_progress,
|
||||
|
|
|
|||
|
|
@ -20,8 +20,7 @@ export type GameScene =
|
|||
| "boot"
|
||||
| "change_disc"
|
||||
| "end"
|
||||
| "null"
|
||||
| "test";
|
||||
| "null";
|
||||
|
||||
export type MainSubscene = "site" | "pause" | "level_selection";
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue