diff --git a/dzeio.next.config.js b/dzeio.next.config.js index d22eac2..67412ef 100644 --- a/dzeio.next.config.js +++ b/dzeio.next.config.js @@ -1,4 +1,4 @@ -// V1.1.1 - Added futures blurry Placeholder and left optimizedLoading enabled +// V1.1.2 - Moved webpack5 to top level // Updated to commit from 2021-05-18 // https://github.com/vercel/next.js/commits/canary/packages/next/next-server/server/config-shared.ts /** @@ -40,10 +40,10 @@ trailingSlash: false, optimizeFonts: true, reactStrictMode: true, + webpack5: true, // Futures future: { - webpack5: true, strictPostcssConfiguration: true, excludeDefaultMomentLocales: true }, diff --git a/package-lock.json b/package-lock.json index 08baa15..66a5be6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,14 +9,15 @@ "version": "1.1.0", "dependencies": { "@dzeio/components": "^0.10.1", + "@dzeio/object-util": "^1.2.0", "critters": "^0.0.10", "easy-sitemap": "^1.0.0", - "next": "^10.0.3", + "next": "^11.0.0", "next-compose-plugins": "^2.2.0", "next-plausible": "^1.6.1", "next-pre-css": "^1.0.0", - "react": "^17.0.1", - "react-dom": "^17.0.1", + "react": "^17.0.2", + "react-dom": "^17.0.2", "react-feather": "^2.0.9", "stylus": "^0.54.7", "stylus-loader": "^6.0.0", @@ -308,6 +309,11 @@ "typescript": "^4.2.3" } }, + "node_modules/@dzeio/object-util": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@dzeio/object-util/-/object-util-1.2.0.tgz", + "integrity": "sha512-ZX1611a5+s8ILG5F2Pdks42rVMxhSUb0c3J7j/qw3yCX8+Itay7jTD8R5yyVi+Z9YtXk5vLx88tY68g2ZhMivA==" + }, "node_modules/@eslint/eslintrc": { "version": "0.4.2", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.2.tgz", @@ -378,9 +384,9 @@ "integrity": "sha512-sqKVVVOe5ivCaXDWivIJYVSaEgdQK9ul7a4Kity5Iw7u9+wBAPbX1RMSnLLmp7O4Vzj0WOWwMAJsTL00xwaNug==" }, "node_modules/@next/env": { - "version": "10.2.3", - "resolved": "https://registry.npmjs.org/@next/env/-/env-10.2.3.tgz", - "integrity": "sha512-uBOjRBjsWC4C8X3DfmWWP6ekwLnf2JCCwQX9KVnJtJkqfDsv1yQPakdOEwvJzXQc3JC/v5KKffYPVmV2wHXCgQ==" + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/@next/env/-/env-11.0.0.tgz", + "integrity": "sha512-VKpmDvTYeCpEQjREg3J4pCmVs/QjEzoLmkM8shGFK6e9AmFd0G9QXOL8HGA8qKhy/XmNb7dHeMqrcMiBua4OgA==" }, "node_modules/@next/eslint-plugin-next": { "version": "10.2.3", @@ -389,14 +395,14 @@ "dev": true }, "node_modules/@next/polyfill-module": { - "version": "10.2.3", - "resolved": "https://registry.npmjs.org/@next/polyfill-module/-/polyfill-module-10.2.3.tgz", - "integrity": "sha512-OkeY4cLhzfYbXxM4fd+6V4s5pTPuyfKSlavItfNRA6PpS7t1/R6YjO7S7rB8tu1pbTGuDHGIdE1ioDv15bAbDQ==" + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/@next/polyfill-module/-/polyfill-module-11.0.0.tgz", + "integrity": "sha512-gydtFzRqsT549U8+sY8382I/f4HFcelD8gdUGnAofQJa/jEU1jkxmjCHC8tmEiyeMLidl7iDZgchfSCpmMzzUg==" }, "node_modules/@next/react-dev-overlay": { - "version": "10.2.3", - "resolved": "https://registry.npmjs.org/@next/react-dev-overlay/-/react-dev-overlay-10.2.3.tgz", - "integrity": "sha512-E6g2jws4YW94l0lMMopBVKIZK2mEHfSBvM0d9dmzKG9L/A/kEq6LZCB4SiwGJbNsAdlk2y3USDa0oNbpA+m5Kw==", + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/@next/react-dev-overlay/-/react-dev-overlay-11.0.0.tgz", + "integrity": "sha512-q+Wp+eStEMThe77zxdeJ/nbuODkHR6P+/dfUqYXZSqbLf6x5c5xwLBauwwVbkCYFZpAlDuL8Jk8QSAH1OsqC2w==", "dependencies": { "@babel/code-frame": "7.12.11", "anser": "1.4.9", @@ -411,8 +417,8 @@ "strip-ansi": "6.0.0" }, "peerDependencies": { - "react": "^16.9.0 || ^17", - "react-dom": "^16.9.0 || ^17" + "react": "^17.0.2", + "react-dom": "^17.0.2" } }, "node_modules/@next/react-dev-overlay/node_modules/@babel/code-frame": { @@ -499,9 +505,9 @@ } }, "node_modules/@next/react-refresh-utils": { - "version": "10.2.3", - "resolved": "https://registry.npmjs.org/@next/react-refresh-utils/-/react-refresh-utils-10.2.3.tgz", - "integrity": "sha512-qtBF56vPC6d6a8p7LYd0iRjW89fhY80kAIzmj+VonvIGjK/nymBjcFUhbKiMFqlhsarCksnhwX+Zmn95Dw9qvA==", + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/@next/react-refresh-utils/-/react-refresh-utils-11.0.0.tgz", + "integrity": "sha512-hi5eY+KBn4QGtUv7VL2OptdM33fI2hxhd7+omOFmAK+S0hDWhg1uqHqqGJk0W1IfqlWEzzL10WvTJDPRAtDugQ==", "peerDependencies": { "react-refresh": "0.8.3", "webpack": "^4 || ^5" @@ -544,25 +550,6 @@ "node": ">= 8" } }, - "node_modules/@opentelemetry/api": { - "version": "0.14.0", - "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-0.14.0.tgz", - "integrity": "sha512-L7RMuZr5LzMmZiQSQDy9O1jo0q+DaLy6XpYJfIGfYSfoJA5qzYwUP3sP1uMIQ549DvxAgM3ng85EaPTM/hUHwQ==", - "dependencies": { - "@opentelemetry/context-base": "^0.14.0" - }, - "engines": { - "node": ">=8.0.0" - } - }, - "node_modules/@opentelemetry/context-base": { - "version": "0.14.0", - "resolved": "https://registry.npmjs.org/@opentelemetry/context-base/-/context-base-0.14.0.tgz", - "integrity": "sha512-sDOAZcYwynHFTbLo6n8kIbLiVF3a3BLkrmehJUyEbT9F+Smbi47kLGS2gG2g0fjBLR/Lr1InPD7kXL7FaTqEkw==", - "engines": { - "node": ">=8.0.0" - } - }, "node_modules/@rollup/pluginutils": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.1.0.tgz", @@ -3804,6 +3791,20 @@ "node": ">= 4" } }, + "node_modules/image-size": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/image-size/-/image-size-1.0.0.tgz", + "integrity": "sha512-JLJ6OwBfO1KcA+TvJT+v8gbE6iWbj24LyDNFgFEN0lzegn6cC6a/p3NIDaepMsJjQjlUWqIC7wJv8lBFxPNjcw==", + "dependencies": { + "queue": "6.0.2" + }, + "bin": { + "image-size": "bin/image-size.js" + }, + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -4582,17 +4583,16 @@ "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==" }, "node_modules/next": { - "version": "10.2.3", - "resolved": "https://registry.npmjs.org/next/-/next-10.2.3.tgz", - "integrity": "sha512-dkM1mIfnORtGyzw/Yme8RdqNxlCMZyi4Lqj56F01/yHbe1ZtOaJ0cyqqRB4RGiPhjGGh0319f8ddjDyO1605Ow==", + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/next/-/next-11.0.0.tgz", + "integrity": "sha512-1OA0ccCTwVtdLats/1v7ReiBVx+Akya0UVhHo9IBr8ZkpDI3/SGNcaruJBp5agy8ROF97VDKkZamoUXxRB9NUA==", "dependencies": { "@babel/runtime": "7.12.5", "@hapi/accept": "5.0.2", - "@next/env": "10.2.3", - "@next/polyfill-module": "10.2.3", - "@next/react-dev-overlay": "10.2.3", - "@next/react-refresh-utils": "10.2.3", - "@opentelemetry/api": "0.14.0", + "@next/env": "11.0.0", + "@next/polyfill-module": "11.0.0", + "@next/react-dev-overlay": "11.0.0", + "@next/react-refresh-utils": "11.0.0", "assert": "2.0.0", "ast-types": "0.13.2", "browserify-zlib": "0.2.0", @@ -4610,6 +4610,7 @@ "find-cache-dir": "3.3.1", "get-orientation": "1.1.2", "https-browserify": "1.0.0", + "image-size": "1.0.0", "jest-worker": "27.0.0-next.5", "native-url": "0.3.4", "node-fetch": "2.6.1", @@ -4624,7 +4625,7 @@ "prop-types": "15.7.2", "querystring-es3": "0.2.1", "raw-body": "2.4.1", - "react-is": "16.13.1", + "react-is": "17.0.2", "react-refresh": "0.8.3", "stream-browserify": "3.0.0", "stream-http": "3.1.1", @@ -4641,13 +4642,13 @@ "next": "dist/bin/next" }, "engines": { - "node": ">=10.13.0" + "node": ">=12.0.0" }, "peerDependencies": { "fibers": ">= 3.1.0", "node-sass": "^4.0.0 || ^5.0.0", - "react": "^16.6.0 || ^17", - "react-dom": "^16.6.0 || ^17", + "react": "^17.0.2", + "react-dom": "^17.0.2", "sass": "^1.3.0" }, "peerDependenciesMeta": { @@ -4685,6 +4686,11 @@ "resolved": "https://registry.npmjs.org/next-pre-css/-/next-pre-css-1.0.0.tgz", "integrity": "sha512-EO2OxP7XqRocqZQyghRjow6HeAePOjCSLUK/6CSZ6g4CWrQK/I/5GyeHrWGkOsXgFjtz/76jkkrp6PoaBzoTlQ==" }, + "node_modules/next/node_modules/react-is": { + "version": "17.0.2", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", + "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" + }, "node_modules/node-fetch": { "version": "2.6.1", "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz", @@ -6947,6 +6953,14 @@ "node": ">=0.4.x" } }, + "node_modules/queue": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz", + "integrity": "sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==", + "dependencies": { + "inherits": "~2.0.3" + } + }, "node_modules/queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", @@ -9018,6 +9032,11 @@ "tslib": "^2.1.0" } }, + "@dzeio/object-util": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@dzeio/object-util/-/object-util-1.2.0.tgz", + "integrity": "sha512-ZX1611a5+s8ILG5F2Pdks42rVMxhSUb0c3J7j/qw3yCX8+Itay7jTD8R5yyVi+Z9YtXk5vLx88tY68g2ZhMivA==" + }, "@eslint/eslintrc": { "version": "0.4.2", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.2.tgz", @@ -9075,9 +9094,9 @@ "integrity": "sha512-sqKVVVOe5ivCaXDWivIJYVSaEgdQK9ul7a4Kity5Iw7u9+wBAPbX1RMSnLLmp7O4Vzj0WOWwMAJsTL00xwaNug==" }, "@next/env": { - "version": "10.2.3", - "resolved": "https://registry.npmjs.org/@next/env/-/env-10.2.3.tgz", - "integrity": "sha512-uBOjRBjsWC4C8X3DfmWWP6ekwLnf2JCCwQX9KVnJtJkqfDsv1yQPakdOEwvJzXQc3JC/v5KKffYPVmV2wHXCgQ==" + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/@next/env/-/env-11.0.0.tgz", + "integrity": "sha512-VKpmDvTYeCpEQjREg3J4pCmVs/QjEzoLmkM8shGFK6e9AmFd0G9QXOL8HGA8qKhy/XmNb7dHeMqrcMiBua4OgA==" }, "@next/eslint-plugin-next": { "version": "10.2.3", @@ -9086,14 +9105,14 @@ "dev": true }, "@next/polyfill-module": { - "version": "10.2.3", - "resolved": "https://registry.npmjs.org/@next/polyfill-module/-/polyfill-module-10.2.3.tgz", - "integrity": "sha512-OkeY4cLhzfYbXxM4fd+6V4s5pTPuyfKSlavItfNRA6PpS7t1/R6YjO7S7rB8tu1pbTGuDHGIdE1ioDv15bAbDQ==" + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/@next/polyfill-module/-/polyfill-module-11.0.0.tgz", + "integrity": "sha512-gydtFzRqsT549U8+sY8382I/f4HFcelD8gdUGnAofQJa/jEU1jkxmjCHC8tmEiyeMLidl7iDZgchfSCpmMzzUg==" }, "@next/react-dev-overlay": { - "version": "10.2.3", - "resolved": "https://registry.npmjs.org/@next/react-dev-overlay/-/react-dev-overlay-10.2.3.tgz", - "integrity": "sha512-E6g2jws4YW94l0lMMopBVKIZK2mEHfSBvM0d9dmzKG9L/A/kEq6LZCB4SiwGJbNsAdlk2y3USDa0oNbpA+m5Kw==", + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/@next/react-dev-overlay/-/react-dev-overlay-11.0.0.tgz", + "integrity": "sha512-q+Wp+eStEMThe77zxdeJ/nbuODkHR6P+/dfUqYXZSqbLf6x5c5xwLBauwwVbkCYFZpAlDuL8Jk8QSAH1OsqC2w==", "requires": { "@babel/code-frame": "7.12.11", "anser": "1.4.9", @@ -9170,10 +9189,9 @@ } }, "@next/react-refresh-utils": { - "version": "10.2.3", - "resolved": "https://registry.npmjs.org/@next/react-refresh-utils/-/react-refresh-utils-10.2.3.tgz", - "integrity": "sha512-qtBF56vPC6d6a8p7LYd0iRjW89fhY80kAIzmj+VonvIGjK/nymBjcFUhbKiMFqlhsarCksnhwX+Zmn95Dw9qvA==", - "requires": {} + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/@next/react-refresh-utils/-/react-refresh-utils-11.0.0.tgz", + "integrity": "sha512-hi5eY+KBn4QGtUv7VL2OptdM33fI2hxhd7+omOFmAK+S0hDWhg1uqHqqGJk0W1IfqlWEzzL10WvTJDPRAtDugQ==" }, "@nodelib/fs.scandir": { "version": "2.1.5", @@ -9198,19 +9216,6 @@ "fastq": "^1.6.0" } }, - "@opentelemetry/api": { - "version": "0.14.0", - "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-0.14.0.tgz", - "integrity": "sha512-L7RMuZr5LzMmZiQSQDy9O1jo0q+DaLy6XpYJfIGfYSfoJA5qzYwUP3sP1uMIQ549DvxAgM3ng85EaPTM/hUHwQ==", - "requires": { - "@opentelemetry/context-base": "^0.14.0" - } - }, - "@opentelemetry/context-base": { - "version": "0.14.0", - "resolved": "https://registry.npmjs.org/@opentelemetry/context-base/-/context-base-0.14.0.tgz", - "integrity": "sha512-sDOAZcYwynHFTbLo6n8kIbLiVF3a3BLkrmehJUyEbT9F+Smbi47kLGS2gG2g0fjBLR/Lr1InPD7kXL7FaTqEkw==" - }, "@rollup/pluginutils": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.1.0.tgz", @@ -9596,8 +9601,7 @@ "version": "5.3.1", "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.1.tgz", "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==", - "dev": true, - "requires": {} + "dev": true }, "ajv": { "version": "6.12.6", @@ -9613,8 +9617,7 @@ "ajv-keywords": { "version": "3.5.2", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", - "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", - "requires": {} + "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==" }, "alphanum-sort": { "version": "1.0.2", @@ -11215,8 +11218,7 @@ "version": "4.2.0", "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz", "integrity": "sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==", - "dev": true, - "requires": {} + "dev": true }, "eslint-scope": { "version": "5.1.1", @@ -11713,8 +11715,7 @@ "icss-utils": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", - "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==", - "requires": {} + "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==" }, "ieee754": { "version": "1.2.1", @@ -11727,6 +11728,14 @@ "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==", "dev": true }, + "image-size": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/image-size/-/image-size-1.0.0.tgz", + "integrity": "sha512-JLJ6OwBfO1KcA+TvJT+v8gbE6iWbj24LyDNFgFEN0lzegn6cC6a/p3NIDaepMsJjQjlUWqIC7wJv8lBFxPNjcw==", + "requires": { + "queue": "6.0.2" + } + }, "import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -12302,17 +12311,16 @@ "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==" }, "next": { - "version": "10.2.3", - "resolved": "https://registry.npmjs.org/next/-/next-10.2.3.tgz", - "integrity": "sha512-dkM1mIfnORtGyzw/Yme8RdqNxlCMZyi4Lqj56F01/yHbe1ZtOaJ0cyqqRB4RGiPhjGGh0319f8ddjDyO1605Ow==", + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/next/-/next-11.0.0.tgz", + "integrity": "sha512-1OA0ccCTwVtdLats/1v7ReiBVx+Akya0UVhHo9IBr8ZkpDI3/SGNcaruJBp5agy8ROF97VDKkZamoUXxRB9NUA==", "requires": { "@babel/runtime": "7.12.5", "@hapi/accept": "5.0.2", - "@next/env": "10.2.3", - "@next/polyfill-module": "10.2.3", - "@next/react-dev-overlay": "10.2.3", - "@next/react-refresh-utils": "10.2.3", - "@opentelemetry/api": "0.14.0", + "@next/env": "11.0.0", + "@next/polyfill-module": "11.0.0", + "@next/react-dev-overlay": "11.0.0", + "@next/react-refresh-utils": "11.0.0", "assert": "2.0.0", "ast-types": "0.13.2", "browserify-zlib": "0.2.0", @@ -12330,6 +12338,7 @@ "find-cache-dir": "3.3.1", "get-orientation": "1.1.2", "https-browserify": "1.0.0", + "image-size": "1.0.0", "jest-worker": "27.0.0-next.5", "native-url": "0.3.4", "node-fetch": "2.6.1", @@ -12344,7 +12353,7 @@ "prop-types": "15.7.2", "querystring-es3": "0.2.1", "raw-body": "2.4.1", - "react-is": "16.13.1", + "react-is": "17.0.2", "react-refresh": "0.8.3", "stream-browserify": "3.0.0", "stream-http": "3.1.1", @@ -12356,6 +12365,13 @@ "util": "0.12.3", "vm-browserify": "1.1.2", "watchpack": "2.1.1" + }, + "dependencies": { + "react-is": { + "version": "17.0.2", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", + "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" + } } }, "next-compose-plugins": { @@ -12366,8 +12382,7 @@ "next-plausible": { "version": "1.6.1", "resolved": "https://registry.npmjs.org/next-plausible/-/next-plausible-1.6.1.tgz", - "integrity": "sha512-eMVqZbzU6bJsBIHlC63lNKl0KLvx8NA+/YlUUqj2gvCviQ7C2X4PY59gEB+mO46JvKSy/IhAD8l85/YGFhCkDg==", - "requires": {} + "integrity": "sha512-eMVqZbzU6bJsBIHlC63lNKl0KLvx8NA+/YlUUqj2gvCviQ7C2X4PY59gEB+mO46JvKSy/IhAD8l85/YGFhCkDg==" }, "next-pre-css": { "version": "1.0.0", @@ -13392,8 +13407,7 @@ "postcss-modules-extract-imports": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz", - "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==", - "requires": {} + "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==" }, "postcss-modules-local-by-default": { "version": "4.0.0", @@ -14070,6 +14084,14 @@ "resolved": "https://registry.npmjs.org/querystring-es3/-/querystring-es3-0.2.1.tgz", "integrity": "sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM=" }, + "queue": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz", + "integrity": "sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==", + "requires": { + "inherits": "~2.0.3" + } + }, "queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", @@ -14843,8 +14865,7 @@ "stylis-rule-sheet": { "version": "0.0.10", "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz", - "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==", - "requires": {} + "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==" }, "stylus": { "version": "0.54.8", diff --git a/package.json b/package.json index b132b1e..093f97f 100644 --- a/package.json +++ b/package.json @@ -11,14 +11,15 @@ }, "dependencies": { "@dzeio/components": "^0.10.1", + "@dzeio/object-util": "^1.2.0", "critters": "^0.0.10", "easy-sitemap": "^1.0.0", - "next": "^10.0.3", + "next": "^11.0.0", "next-compose-plugins": "^2.2.0", "next-plausible": "^1.6.1", "next-pre-css": "^1.0.0", - "react": "^17.0.1", - "react-dom": "^17.0.1", + "react": "^17.0.2", + "react-dom": "^17.0.2", "react-feather": "^2.0.9", "stylus": "^0.54.7", "stylus-loader": "^6.0.0", diff --git a/public/assets/test-iso/README.md b/public/assets/test-iso/README.md new file mode 100644 index 0000000..3237a1a --- /dev/null +++ b/public/assets/test-iso/README.md @@ -0,0 +1,3 @@ +# Assets + +- https://opengameart.org/content/isometric-landscape \ No newline at end of file diff --git a/public/assets/test-iso/landscapeTiles_sheet.png b/public/assets/test-iso/landscapeTiles_sheet.png new file mode 100644 index 0000000..c70652e Binary files /dev/null and b/public/assets/test-iso/landscapeTiles_sheet.png differ diff --git a/public/assets/test-iso/tilesetDeclaration.json b/public/assets/test-iso/tilesetDeclaration.json new file mode 100644 index 0000000..15a7cd6 --- /dev/null +++ b/public/assets/test-iso/tilesetDeclaration.json @@ -0,0 +1,770 @@ +[ + { + "x": 265, + "y": 1057, + "width": 132, + "height": 83 + }, + { + "x": 265, + "y": 1452, + "width": 132, + "height": 99 + }, + { + "x": 265, + "y": 1369, + "width": 132, + "height": 83 + }, + { + "x": 265, + "y": 1682, + "width": 132, + "height": 83 + }, + { + "x": 529, + "y": 1191, + "width": 132, + "height": 99 + }, + { + "x": 265, + "y": 1551, + "width": 132, + "height": 131 + }, + { + "x": 265, + "y": 1947, + "width": 132, + "height": 99 + }, + { + "x": 265, + "y": 1864, + "width": 132, + "height": 83 + }, + { + "x": 266, + "y": 921, + "width": 132, + "height": 131 + }, + { + "x": 0, + "y": 281, + "width": 133, + "height": 99 + }, + { + "x": 397, + "y": 1183, + "width": 132, + "height": 83 + }, + { + "x": 662, + "y": 693, + "width": 132, + "height": 99 + }, + { + "x": 397, + "y": 1052, + "width": 132, + "height": 131 + }, + { + "x": 793, + "y": 1303, + "width": 132, + "height": 99 + }, + { + "x": 133, + "y": 380, + "width": 133, + "height": 83 + }, + { + "x": 793, + "y": 1204, + "width": 132, + "height": 99 + }, + { + "x": 793, + "y": 1121, + "width": 132, + "height": 83 + }, + { + "x": 793, + "y": 990, + "width": 132, + "height": 131 + }, + { + "x": 793, + "y": 891, + "width": 132, + "height": 99 + }, + { + "x": 0, + "y": 0, + "width": 133, + "height": 99 + }, + { + "x": 0, + "y": 99, + "width": 133, + "height": 83 + }, + { + "x": 662, + "y": 594, + "width": 132, + "height": 99 + }, + { + "x": 662, + "y": 495, + "width": 132, + "height": 99 + }, + { + "x": 662, + "y": 396, + "width": 132, + "height": 99 + }, + { + "x": 662, + "y": 297, + "width": 132, + "height": 99 + }, + { + "x": 662, + "y": 198, + "width": 132, + "height": 99 + }, + { + "x": 0, + "y": 380, + "width": 133, + "height": 99 + }, + { + "x": 0, + "y": 1948, + "width": 133, + "height": 99 + }, + { + "x": 661, + "y": 1946, + "width": 132, + "height": 99 + }, + { + "x": 661, + "y": 1847, + "width": 132, + "height": 99 + }, + { + "x": 661, + "y": 1748, + "width": 132, + "height": 99 + }, + { + "x": 661, + "y": 1649, + "width": 132, + "height": 99 + }, + { + "x": 661, + "y": 1550, + "width": 132, + "height": 99 + }, + { + "x": 0, + "y": 1849, + "width": 133, + "height": 99 + }, + { + "x": 0, + "y": 1552, + "width": 133, + "height": 99 + }, + { + "x": 661, + "y": 1269, + "width": 132, + "height": 83 + }, + { + "x": 661, + "y": 1138, + "width": 132, + "height": 131 + }, + { + "x": 661, + "y": 1055, + "width": 132, + "height": 83 + }, + { + "x": 661, + "y": 956, + "width": 132, + "height": 99 + }, + { + "x": 530, + "y": 857, + "width": 132, + "height": 99 + }, + { + "x": 530, + "y": 758, + "width": 132, + "height": 99 + }, + { + "x": 133, + "y": 0, + "width": 133, + "height": 99 + }, + { + "x": 133, + "y": 198, + "width": 133, + "height": 83 + }, + { + "x": 530, + "y": 461, + "width": 132, + "height": 99 + }, + { + "x": 530, + "y": 378, + "width": 132, + "height": 83 + }, + { + "x": 530, + "y": 295, + "width": 132, + "height": 83 + }, + { + "x": 530, + "y": 198, + "width": 132, + "height": 97 + }, + { + "x": 530, + "y": 99, + "width": 132, + "height": 99 + }, + { + "x": 0, + "y": 479, + "width": 133, + "height": 99 + }, + { + "x": 0, + "y": 578, + "width": 133, + "height": 99 + }, + { + "x": 529, + "y": 1834, + "width": 132, + "height": 99 + }, + { + "x": 529, + "y": 1751, + "width": 132, + "height": 83 + }, + { + "x": 529, + "y": 1668, + "width": 132, + "height": 83 + }, + { + "x": 529, + "y": 1585, + "width": 132, + "height": 83 + }, + { + "x": 529, + "y": 1488, + "width": 132, + "height": 97 + }, + { + "x": 529, + "y": 1389, + "width": 132, + "height": 99 + }, + { + "x": 0, + "y": 677, + "width": 133, + "height": 83 + }, + { + "x": 0, + "y": 760, + "width": 133, + "height": 99 + }, + { + "x": 529, + "y": 1108, + "width": 132, + "height": 83 + }, + { + "x": 529, + "y": 1009, + "width": 132, + "height": 99 + }, + { + "x": 398, + "y": 926, + "width": 132, + "height": 83 + }, + { + "x": 398, + "y": 843, + "width": 132, + "height": 83 + }, + { + "x": 398, + "y": 744, + "width": 132, + "height": 99 + }, + { + "x": 0, + "y": 958, + "width": 133, + "height": 99 + }, + { + "x": 0, + "y": 1057, + "width": 133, + "height": 99 + }, + { + "x": 398, + "y": 447, + "width": 132, + "height": 99 + }, + { + "x": 398, + "y": 364, + "width": 132, + "height": 83 + }, + { + "x": 398, + "y": 265, + "width": 132, + "height": 99 + }, + { + "x": 398, + "y": 166, + "width": 132, + "height": 99 + }, + { + "x": 398, + "y": 83, + "width": 132, + "height": 83 + }, + { + "x": 398, + "y": 0, + "width": 132, + "height": 83 + }, + { + "x": 0, + "y": 1156, + "width": 133, + "height": 99 + }, + { + "x": 0, + "y": 1255, + "width": 133, + "height": 99 + }, + { + "x": 397, + "y": 1745, + "width": 132, + "height": 83 + }, + { + "x": 397, + "y": 1646, + "width": 132, + "height": 99 + }, + { + "x": 397, + "y": 1547, + "width": 132, + "height": 99 + }, + { + "x": 397, + "y": 1464, + "width": 132, + "height": 83 + }, + { + "x": 793, + "y": 1402, + "width": 132, + "height": 83 + }, + { + "x": 133, + "y": 760, + "width": 133, + "height": 99 + }, + { + "x": 0, + "y": 182, + "width": 133, + "height": 99 + }, + { + "x": 662, + "y": 792, + "width": 132, + "height": 99 + }, + { + "x": 662, + "y": 0, + "width": 132, + "height": 99 + }, + { + "x": 662, + "y": 99, + "width": 132, + "height": 99 + }, + { + "x": 266, + "y": 723, + "width": 132, + "height": 99 + }, + { + "x": 661, + "y": 1451, + "width": 132, + "height": 99 + }, + { + "x": 661, + "y": 1352, + "width": 132, + "height": 99 + }, + { + "x": 0, + "y": 1651, + "width": 133, + "height": 99 + }, + { + "x": 133, + "y": 281, + "width": 133, + "height": 99 + }, + { + "x": 530, + "y": 659, + "width": 132, + "height": 99 + }, + { + "x": 530, + "y": 560, + "width": 132, + "height": 99 + }, + { + "x": 266, + "y": 0, + "width": 132, + "height": 99 + }, + { + "x": 529, + "y": 1933, + "width": 132, + "height": 99 + }, + { + "x": 530, + "y": 0, + "width": 132, + "height": 99 + }, + { + "x": 133, + "y": 958, + "width": 133, + "height": 99 + }, + { + "x": 0, + "y": 859, + "width": 133, + "height": 99 + }, + { + "x": 529, + "y": 1290, + "width": 132, + "height": 99 + }, + { + "x": 398, + "y": 546, + "width": 132, + "height": 99 + }, + { + "x": 398, + "y": 645, + "width": 132, + "height": 99 + }, + { + "x": 265, + "y": 1238, + "width": 132, + "height": 131 + }, + { + "x": 397, + "y": 1828, + "width": 132, + "height": 99 + }, + { + "x": 397, + "y": 1927, + "width": 132, + "height": 99 + }, + { + "x": 0, + "y": 1453, + "width": 133, + "height": 99 + }, + { + "x": 0, + "y": 1354, + "width": 133, + "height": 99 + }, + { + "x": 266, + "y": 822, + "width": 132, + "height": 99 + }, + { + "x": 266, + "y": 624, + "width": 132, + "height": 99 + }, + { + "x": 266, + "y": 525, + "width": 132, + "height": 99 + }, + { + "x": 133, + "y": 1844, + "width": 132, + "height": 131 + }, + { + "x": 133, + "y": 859, + "width": 133, + "height": 99 + }, + { + "x": 133, + "y": 661, + "width": 133, + "height": 99 + }, + { + "x": 133, + "y": 1057, + "width": 132, + "height": 131 + }, + { + "x": 133, + "y": 1188, + "width": 132, + "height": 99 + }, + { + "x": 133, + "y": 1515, + "width": 132, + "height": 99 + }, + { + "x": 133, + "y": 1287, + "width": 132, + "height": 99 + }, + { + "x": 133, + "y": 562, + "width": 133, + "height": 99 + }, + { + "x": 133, + "y": 463, + "width": 133, + "height": 99 + }, + { + "x": 133, + "y": 1713, + "width": 132, + "height": 131 + }, + { + "x": 266, + "y": 99, + "width": 132, + "height": 99 + }, + { + "x": 133, + "y": 1614, + "width": 132, + "height": 99 + }, + { + "x": 133, + "y": 99, + "width": 133, + "height": 99 + }, + { + "x": 265, + "y": 1765, + "width": 132, + "height": 99 + }, + { + "x": 266, + "y": 297, + "width": 132, + "height": 129 + }, + { + "x": 266, + "y": 426, + "width": 132, + "height": 99 + }, + { + "x": 0, + "y": 1750, + "width": 133, + "height": 99 + }, + { + "x": 266, + "y": 198, + "width": 132, + "height": 99 + }, + { + "x": 133, + "y": 1386, + "width": 132, + "height": 129 + }, + { + "x": 397, + "y": 1266, + "width": 132, + "height": 99 + }, + { + "x": 397, + "y": 1365, + "width": 132, + "height": 99 + }, + { + "x": 265, + "y": 1140, + "width": 132, + "height": 98 + } +] diff --git a/public/assets/tictactoe/O.png b/public/assets/tictactoe/O.png deleted file mode 100644 index d527231..0000000 Binary files a/public/assets/tictactoe/O.png and /dev/null differ diff --git a/public/assets/tictactoe/README.md b/public/assets/tictactoe/README.md new file mode 100644 index 0000000..30f3779 --- /dev/null +++ b/public/assets/tictactoe/README.md @@ -0,0 +1,6 @@ +# Assets + +- Shield from https://opengameart.org/content/shield-icons-from-pixeltime-videos +- Sword from https://opengameart.org/content/swords-maces-staves-dawnbringer32-palette +- explosion image from https://opengameart.org/content/explosion-3 +- original explosion sound from https://opengameart.org/content/wgs-sound-fx-explosion-1 (was edited to be way quicker) diff --git a/public/assets/tictactoe/X.png b/public/assets/tictactoe/X.png deleted file mode 100644 index 4fc3e71..0000000 Binary files a/public/assets/tictactoe/X.png and /dev/null differ diff --git a/public/assets/tictactoe/explosion.ogg b/public/assets/tictactoe/explosion.ogg new file mode 100644 index 0000000..64c1ab6 Binary files /dev/null and b/public/assets/tictactoe/explosion.ogg differ diff --git a/public/assets/tictactoe/explosion.png b/public/assets/tictactoe/explosion.png index b2f8642..1244e21 100644 Binary files a/public/assets/tictactoe/explosion.png and b/public/assets/tictactoe/explosion.png differ diff --git a/public/assets/tictactoe/explosion.wav b/public/assets/tictactoe/explosion.wav new file mode 100644 index 0000000..ce3cdb5 Binary files /dev/null and b/public/assets/tictactoe/explosion.wav differ diff --git a/public/assets/tictactoe/swsh.png b/public/assets/tictactoe/swsh.png new file mode 100644 index 0000000..9bed86f Binary files /dev/null and b/public/assets/tictactoe/swsh.png differ diff --git a/src/GameEngine/2D/Collision/BoxCollider2D.ts b/src/GameEngine/2D/Collision/BoxCollider2D.ts new file mode 100644 index 0000000..d5a9aba --- /dev/null +++ b/src/GameEngine/2D/Collision/BoxCollider2D.ts @@ -0,0 +1,42 @@ +import Component2D from 'GameEngine/Component2D' +import Vector2D from '../Vector2D' + +type BuiltinCollisionTypes = 'click' + +export default class BoxCollider2D { + public constructor( + private component: Component2D, + public type: BuiltinCollisionTypes | string = 'collision', + private center = new Vector2D(0, 0), + private scale = new Vector2D(1, 1) + ) {} + + public pointColliding(point: Vector2D, type: BuiltinCollisionTypes | string = 'collision'): boolean { + if (this.type !== type) { + return false + } + return point.isIn( + ...this.pos() + ) + } + + public pos(): [Vector2D, Vector2D] { + const scale = this.scale.multiply(this.component.scale) + const positionCenter = this.component.origin.sub( + new Vector2D( + this.component.position.x, + this.component.position.y + ) + ) + + const center = this.center.sum(positionCenter) + return [new Vector2D( + center.x - scale.x / 2, + center.y - scale.y / 2 + ), + new Vector2D( + center.x + scale.x / 2, + center.y + scale.y / 2 + )] + } +} diff --git a/src/GameEngine/2D/Debug/ColliderDebugger.ts b/src/GameEngine/2D/Debug/ColliderDebugger.ts new file mode 100644 index 0000000..a69bd6d --- /dev/null +++ b/src/GameEngine/2D/Debug/ColliderDebugger.ts @@ -0,0 +1,25 @@ +import Component2D, { ComponentState } from 'GameEngine/Component2D' +import RectRenderer from 'GameEngine/Renderer/RectRenderer' +import BoxCollider2D from '../Collision/BoxCollider2D' +import Vector2D from '../Vector2D' + +export default class ColliderDebugger extends Component2D { + public constructor(component: Component2D, collider: BoxCollider2D) { + super() + this.collider = collider + const [topLeft, bottomRight] = collider.pos() + const size = topLeft.sub(bottomRight) + this.position = topLeft + this.scale = size + this.origin = new Vector2D(-(this.scale.x / 2), -(this.scale.y / 2)) + this.renderer = new RectRenderer(this, {stroke: 'black'}) + } + + public update(state: ComponentState) { + if (state.isColliding) { + (this.renderer as RectRenderer).material = 'rgba(0, 255, 0, .7)' + } else { + (this.renderer as RectRenderer).material = undefined + } + } +} diff --git a/src/GameEngine/2D/Debug/ComponentDebug.ts b/src/GameEngine/2D/Debug/ComponentDebug.ts new file mode 100644 index 0000000..3f81536 --- /dev/null +++ b/src/GameEngine/2D/Debug/ComponentDebug.ts @@ -0,0 +1,14 @@ +import Component2D from 'GameEngine/Component2D' +import RectRenderer from 'GameEngine/Renderer/RectRenderer' +import Vector2D from '../Vector2D' + +export default class ComponentDebug extends Component2D { + public constructor(component: Component2D) { + super() + this.position = component.position + this.origin = component.origin + this.scale = new Vector2D(.1, .1) + console.log('Position of the origin point', this.position) + this.renderer = new RectRenderer(this, {material: 'red'}) + } +} diff --git a/src/GameEngine/2D/Debug/PointDebugger.ts b/src/GameEngine/2D/Debug/PointDebugger.ts new file mode 100644 index 0000000..a333bf9 --- /dev/null +++ b/src/GameEngine/2D/Debug/PointDebugger.ts @@ -0,0 +1,14 @@ +import Component2D from 'GameEngine/Component2D' +import RectRenderer from 'GameEngine/Renderer/RectRenderer' +import Vector2D from '../Vector2D' + +export default class PointDebugger extends Component2D { + public constructor(point: Vector2D) { + super() + this.scale = new Vector2D(.1, .1) + this.position = point + console.log('Debugging point at location', point) + // this.origin = component.origin + this.renderer = new RectRenderer(this, {material: 'red'}) + } +} diff --git a/src/GameEngine/2D/Debug/TillingDebugger.ts b/src/GameEngine/2D/Debug/TillingDebugger.ts new file mode 100644 index 0000000..9fcc1bb --- /dev/null +++ b/src/GameEngine/2D/Debug/TillingDebugger.ts @@ -0,0 +1,30 @@ +/* eslint-disable max-classes-per-file */ +import Component2D, { ComponentState } from 'GameEngine/Component2D' +import RectRenderer from 'GameEngine/Renderer/RectRenderer' +import Vector2D from '../Vector2D' + +export default class TilingDebugger extends Component2D { + public constructor() { + super() + for (let i0 = 0; i0 < 10; i0++) { + for (let i1 = 0; i1 < 10; i1++) { + this.childs.push( + new CaseDebugger(new Vector2D(i0, i1)), + // new CaseDebugger(new Vector2D(i0 + .5, i1 + .5)), + // new CaseDebugger(new Vector2D(i0 + .75, i1 + .75)), + // new CaseDebugger(new Vector2D(i0 + .25, i1 + .75)), + // new CaseDebugger(new Vector2D(i0 + .75, i1 + .25)), + // new CaseDebugger(new Vector2D(i0 + .25, i1 + .25)) + ) + } + } + } +} + +class CaseDebugger extends Component2D { + public renderer: RectRenderer = new RectRenderer(this, {stroke: 'black'}) + public constructor(pos: Vector2D) { + super() + this.position = pos + } +} diff --git a/src/GameEngine/2D/Scale2D.ts b/src/GameEngine/2D/Scale2D.ts new file mode 100644 index 0000000..faee7b3 --- /dev/null +++ b/src/GameEngine/2D/Scale2D.ts @@ -0,0 +1,30 @@ +/* eslint-disable no-underscore-dangle */ +export default class Size2D { + private _width: number + private _height?: number + + public constructor( + width: number, + height?: number + ) { + this._width = width + this._height = height + } + + public get width() { + return this._width + } + + public set width(v: number) { + this._width = v + } + + + public get height() { + return this._height ?? this._width + } + + public set height(v: number) { + this._height = v + } +} diff --git a/src/GameEngine/2D/Vector2D.ts b/src/GameEngine/2D/Vector2D.ts new file mode 100644 index 0000000..4dc26e8 --- /dev/null +++ b/src/GameEngine/2D/Vector2D.ts @@ -0,0 +1,35 @@ +export default class Vector2D { + public constructor( + public x: number, + public y: number + ) {} + + + public multiply(v: Vector2D): Vector2D { + return new Vector2D( + v.x * this.x, + v.y * this.y + ) + } + + public sum(v: Vector2D): Vector2D { + return new Vector2D( + v.x + this.x, + v.y + this.y + ) + } + + public sub(v: Vector2D): Vector2D { + return new Vector2D( + v.x - this.x, + v.y - this.y + ) + } + + public isIn(topLeft: Vector2D, bottomRight: Vector2D): boolean { + return this.x >= topLeft.x && + this.y >= topLeft.y && + this.x <= bottomRight.x && + this.y <= bottomRight.y + } +} diff --git a/src/GameEngine/Camera.ts b/src/GameEngine/Camera.ts new file mode 100644 index 0000000..a6d02b9 --- /dev/null +++ b/src/GameEngine/Camera.ts @@ -0,0 +1,5 @@ +import Vector2D from './2D/Vector2D' + +export default class Camera { + public topLeft = new Vector2D(0.5, 0.5) +} diff --git a/src/GameEngine/Component2D.ts b/src/GameEngine/Component2D.ts index d903fbf..baa1da6 100644 --- a/src/GameEngine/Component2D.ts +++ b/src/GameEngine/Component2D.ts @@ -1,34 +1,35 @@ +import BoxCollider2D from './2D/Collision/BoxCollider2D' +import Vector2D from './2D/Vector2D' import Renderer from './Renderer' export interface ComponentState { mouseHovering: boolean - mouseClicking: boolean - mouseClicked: boolean + /** + * is it is collinding return the type of collision + */ + isColliding?: string } export default abstract class Component2D { - public id?: number + public renderer?: Renderer - public pos?: {x: number, y: number, z?: number, rotation?: number} + public position: Vector2D = new Vector2D(0, 0) - protected size?: number | {width: number, height: number} + public scale: Vector2D = new Vector2D(1, 1) + + public collider?: BoxCollider2D + + /** + * Change the origin point (default to middle) + */ + public origin: Vector2D = new Vector2D(0 , 0) + + public childs: Array = [] + + public debug?: boolean public init?(): Promise | void public update?(state: ComponentState): Promise | void - - public width() { - if (!this.size) { - return undefined - } - return typeof this.size === 'number' ? this.size : this.size?.width - } - - public height() { - if (!this.size) { - return undefined - } - return typeof this.size === 'number' ? this.size : this.size?.height - } } diff --git a/src/GameEngine/Renderer/ColorRenderer.ts b/src/GameEngine/Renderer/ColorRenderer.ts deleted file mode 100644 index 6f41f55..0000000 --- a/src/GameEngine/Renderer/ColorRenderer.ts +++ /dev/null @@ -1,24 +0,0 @@ -import GameEngine from 'GameEngine' -import Component2D from 'GameEngine/Component2D' -import Renderer from '.' - -export default class ColorRenderer implements Renderer { - - public constructor( - private component: Component2D, - private color: string - ) {} - - public async render(ge: GameEngine, ctx: CanvasRenderingContext2D) { - if (!this.component.pos) { - return - } - ctx.fillStyle = this.color - ctx.fillRect( - this.component.pos.x * (ge.caseSize[0]), - this.component.pos.y * (ge.caseSize[1]), - (this.component.width() ?? ge.caseSize[0]) * ge.caseSize[0], - (this.component.height() ?? ge.caseSize[1]) * ge.caseSize[1] - ) - } -} diff --git a/src/GameEngine/Renderer/ImageRenderer.ts b/src/GameEngine/Renderer/ImageRenderer.ts deleted file mode 100644 index d40c2af..0000000 --- a/src/GameEngine/Renderer/ImageRenderer.ts +++ /dev/null @@ -1,25 +0,0 @@ -import GameEngine from 'GameEngine' -import Asset from 'GameEngine/Asset' -import Component2D from 'GameEngine/Component2D' -import Renderer from '.' - -export default class ImageRenderer implements Renderer { - - public constructor( - private component: Component2D, - private image: Asset - ) {} - - public async render(ge: GameEngine, ctx: CanvasRenderingContext2D) { - if (!this.component.pos) { - return - } - ctx.drawImage( - await this.image.get(), - this.component.pos.x * (ge.caseSize[0]), - this.component.pos.y * (ge.caseSize[1]), - (this.component.width() ?? ge.caseSize[0]) * ge.caseSize[0], - (this.component.height() ?? ge.caseSize[1]) * ge.caseSize[1] - ) - } -} diff --git a/src/GameEngine/Renderer/RectRenderer.ts b/src/GameEngine/Renderer/RectRenderer.ts new file mode 100644 index 0000000..14d8b63 --- /dev/null +++ b/src/GameEngine/Renderer/RectRenderer.ts @@ -0,0 +1,52 @@ +import { objectLoop } from '@dzeio/object-util' +import GameEngine from 'GameEngine' +import Asset from 'GameEngine/Asset' +import Component2D from 'GameEngine/Component2D' +import Renderer from '.' + +interface Params { + material?: string | Asset + stroke?: string +} + +export default class RectRenderer extends Renderer implements Partial { + + public material?: string | Asset + public stroke?: string + + public constructor(component: Component2D, params?: Params) { + super(component) + objectLoop(params ?? {}, (v, k) => {this[k as 'material'] = v}) + } + + public async render(ge: GameEngine, ctx: CanvasRenderingContext2D) { + const position = this.getPosition() + const item: [number, number, number, number] = [ + // source x + // 0 - 1.5 - -1.5 + position.x * (ge.caseSize.x), + // source y + position.y * (ge.caseSize.y), + // source end X + this.component.scale.x * (ge.caseSize.x), + // source end Y + this.component.scale.y * (ge.caseSize.y) + ] + + if (this.material instanceof Asset) { + ctx.drawImage( + await this.material.get(), + ...item + ) + return + } + if (this.material) { + ctx.fillStyle = this.material + ctx.fillRect(...item) + } + if (this.stroke) { + ctx.strokeStyle = this.stroke + ctx.strokeRect(...item) + } + } +} diff --git a/src/GameEngine/Renderer/TileRenderer.ts b/src/GameEngine/Renderer/TileRenderer.ts index ef84898..47a8f81 100644 --- a/src/GameEngine/Renderer/TileRenderer.ts +++ b/src/GameEngine/Renderer/TileRenderer.ts @@ -1,31 +1,44 @@ +import { objectLoop } from '@dzeio/object-util' import GameEngine from 'GameEngine' +import Vector2D from 'GameEngine/2D/Vector2D' import Component2D from 'GameEngine/Component2D' import Tileset from 'GameEngine/Tileset' import Renderer from '.' -export default class TileRenderer implements Renderer { +interface Params { + tileset?: Tileset + id?: number +} - public constructor( - private component: Component2D, - private tileset: Tileset, - private id: number - ) {} +/** + * TODO: Add origin support + */ +export default class TileRenderer extends Renderer implements Params { + + public tileset?: Tileset + public id?: number + + public constructor(component: Component2D, params?: Params) { + super(component) + objectLoop(params ?? {}, (v, k) => {this[k as 'id'] = v}) + } public async render(ge: GameEngine, ctx: CanvasRenderingContext2D) { - if (!this.component.pos) { + if (!this.tileset || typeof this.id !== 'number') { return } const {sx, sy} = this.tileset.getSourceData(this.id) + const position = this.getPosition() ctx.drawImage( await this.tileset.asset.get(), sx, sy, - this.tileset.width(), - this.tileset.height(), - this.component.pos.x * (ge.caseSize[0]), - this.component.pos.y * (ge.caseSize[1]), - (this.component.width() ?? ge.caseSize[0]) * ge.caseSize[0], - (this.component.height() ?? ge.caseSize[1]) * ge.caseSize[1] + this.tileset.width(this.id), + this.tileset.height(this.id), + position.x * (ge.caseSize.x), + position.y * (ge.caseSize.y), + (this.component.scale.x ?? ge.caseSize.x) * ge.caseSize.x, + (this.component.scale.y ?? ge.caseSize.y) * ge.caseSize.y ) } } diff --git a/src/GameEngine/Renderer/index.ts b/src/GameEngine/Renderer/index.ts index a77e0a1..c0892c5 100644 --- a/src/GameEngine/Renderer/index.ts +++ b/src/GameEngine/Renderer/index.ts @@ -1,5 +1,21 @@ import GameEngine from 'GameEngine' +import Vector2D from 'GameEngine/2D/Vector2D' +import Component2D from 'GameEngine/Component2D' -export default interface Renderer { - render(ge: GameEngine, ctx: CanvasRenderingContext2D): Promise +// eslint-disable-next-line @typescript-eslint/ban-types +export default abstract class Renderer { + public constructor( + protected component: Component2D + ) {} + + protected getPosition(): Vector2D { + const ge = GameEngine.getGameEngine() + const realPosition = ge.currentScene.camera.topLeft.sum(this.component.position) + return new Vector2D( + realPosition.x - this.component.scale.x / 2 - this.component.origin.x, + realPosition.y - this.component.scale.y / 2 - this.component.origin.y + ) + } + + public abstract render(ge: GameEngine, ctx: CanvasRenderingContext2D): Promise } diff --git a/src/GameEngine/Scene.ts b/src/GameEngine/Scene.ts index 3017234..49c0301 100644 --- a/src/GameEngine/Scene.ts +++ b/src/GameEngine/Scene.ts @@ -1,18 +1,23 @@ import GameEngine from 'GameEngine' -import { ComponentState } from 'react' import AssetsManager from './Asset' -import Component2D from './Component2D' +import Camera from './Camera' +import Component2D, { ComponentState } from './Component2D' export default class Scene { public static scenes: Record = {} public background?: string + public id: string + + public camera: Camera = new Camera() private components: Array = [] private ge!: GameEngine + public constructor(sceneId: string) { Scene.scenes[sceneId] = this + this.id = sceneId } public addComponent(...cp: Array) { @@ -32,25 +37,53 @@ export default class Scene { } public async update() { - this.components.forEach(async (v) => { - const state: Partial = {} - const width = (v.size?.width ?? 1) * this.ge.caseSize[0] - const height = (v.size?.height ?? 1) * this.ge.caseSize[1] - if (v.pos) { - const ax = v.pos.x * this.ge.caseSize[0] - const ay = v.pos.y * this.ge.caseSize[1] - state.mouseHovering = - this.ge.cursor.x >= ax && this.ge.cursor.x < (ax + width) && - this.ge.cursor.y >= ay && this.ge.cursor.y < (ay + height) - state.mouseClicking = state.mouseHovering && this.ge.cursor.isDown - state.mouseClicked = state.mouseClicking && !this.ge.cursor.wasDown + for (const component of this.components) { + await this.updateComponent(component) + } + } + + private async updateComponent(v: Component2D) { + const debug = v.debug + if (debug) { + console.log('Processing Component', v) + } + const state: Partial = {} + // const width = (v.width() ?? 1) * this.ge.caseSize[0] + // const height = (v.height() ?? 1) * this.ge.caseSize[1] + if (v.collider && v.collider.type === 'click' && this.ge.cursor.isDown && !this.ge.cursor.wasDown) { + if (v.collider.pointColliding(this.ge.cursor.position, 'click')) { + state.isColliding = 'click' } - if (v.renderer) { - await v.renderer.render(this.ge, this.ge.ctx) + } + // if (v.pos) { + // const ax = v.pos.x * this.ge.caseSize[0] + // const ay = v.pos.y * this.ge.caseSize[1] + // state.mouseHovering = + // this.ge.cursor.x >= ax && this.ge.cursor.x < (ax + width) && + // this.ge.cursor.y >= ay && this.ge.cursor.y < (ay + height) + // state.mouseClicking = state.mouseHovering && this.ge.cursor.isDown + // state.mouseClicked = state.mouseClicking && !this.ge.cursor.wasDown + // } + if (v.renderer) { + if (debug) { + console.log('Rendering Component', v) } - if (v.update) { - v.update(state as ComponentState) + // console.log('is rendering new element') + await v.renderer.render(this.ge, this.ge.ctx) + } + if (v.update) { + if (debug) { + console.log('Updating Component', v) } - }) + v.update(state as ComponentState) + } + if (v.childs) { + if (debug) { + console.log('Processing childs', v) + } + for (const child of v.childs) { + await this.updateComponent(child) + } + } } } diff --git a/src/GameEngine/Tileset.ts b/src/GameEngine/Tileset.ts index 560576f..ba39b7a 100644 --- a/src/GameEngine/Tileset.ts +++ b/src/GameEngine/Tileset.ts @@ -1,12 +1,17 @@ import Asset from './Asset' -export interface TilesetDeclaration { +export type TilesetDeclaration = { // id: string // padding?: number fileSize: {width: number, height: number} tileSize: number | {width: number, height: number} spacing?: number -} +} | Array<{ + x: number + y: number + width: number + height: number +}> export default class Tileset { @@ -15,26 +20,37 @@ export default class Tileset { private declaration: TilesetDeclaration ) {} - public getPosFromId(id: number): {x: number, y: number} { - const cols = Math.trunc(this.declaration.fileSize.width / this.width()) - const x = id % cols - const y = Math.trunc(id / cols) - return {x, y} - } + // public getPosFromId(id: number): {x: number, y: number} { + + // return {x, y} + // } public getSourceData(id: number): {sx: number ,sy: number} { - const {x, y} = this.getPosFromId(id) - const sx = x * this.width() + x * (this.declaration.spacing ?? 0) - const sy = y * this.height() + y * (this.declaration.spacing ?? 0) + if (Array.isArray(this.declaration)) { + const item = this.declaration[id] + return {sx: item.x, sy: item.y} + } + // const {x, y} = this.getPosFromId(id) + const cols = Math.trunc(this.declaration.fileSize.width / this.width(id)) + const x = id % cols + const y = Math.trunc(id / cols) + const sx = x * this.width(id) + x * (this.declaration.spacing ?? 0) + const sy = y * this.height(id) + y * (this.declaration.spacing ?? 0) return {sx, sy} } - public width() { + public width(id: number) { + if (Array.isArray(this.declaration)) { + return this.declaration[id].width + } const item = this.declaration.tileSize return typeof item === 'number' ? item : item.width } - public height() { + public height(id: number) { + if (Array.isArray(this.declaration)) { + return this.declaration[id].height + } const item = this.declaration.tileSize return typeof item === 'number' ? item : item.height } diff --git a/src/GameEngine/index.ts b/src/GameEngine/index.ts index f0c4b62..6d91247 100644 --- a/src/GameEngine/index.ts +++ b/src/GameEngine/index.ts @@ -1,3 +1,4 @@ +import Vector2D from './2D/Vector2D' import Scene from './Scene' /** @@ -7,42 +8,43 @@ import Scene from './Scene' * Collision */ export default class GameEngine { + private static ge: GameEngine public ctx: CanvasRenderingContext2D public canvas: HTMLCanvasElement - public caseSize: [number, number] = [1, 1] + public caseSize: Vector2D = new Vector2D(1, 1) public cursor: { - x: number - y: number + position: Vector2D isDown: boolean wasDown: boolean } = { - x: 0, - y: 0, + position: new Vector2D(0, 0), isDown: false, wasDown: false } - private currentScene?: Scene + public currentScene!: Scene private isRunning = false public constructor( private id: string, - private options?: { + public options?: { caseCount?: number | [number, number] background?: string + debugColliders?: boolean } ) { + GameEngine.ge = this const canvas = document.querySelector(id) if (!canvas) { throw new Error('Error, canvas not found!') } this.canvas = canvas if (this.options?.caseCount) { - this.caseSize = [ + this.caseSize = new Vector2D( // @ts-expect-error idc this.canvas.width / ((typeof this.options.caseCount) !== 'number' ? this.options.caseCount[0] : this.options.caseCount ), // @ts-expect-error idc2 lol this.canvas.height / ((typeof this.options.caseCount) !== 'number' ? this.options.caseCount[1] : this.options.caseCount) - ] + ) } const ctx = canvas.getContext('2d') @@ -53,6 +55,10 @@ export default class GameEngine { this.ctx = ctx } + public static getGameEngine(): GameEngine { + return this.ge + } + public start() { if (this.isRunning) { console.warn('Game is already running') @@ -63,8 +69,10 @@ export default class GameEngine { this.update() }) document.addEventListener('mousemove', (ev) => { - this.cursor.x = ev.clientX - this.cursor.y = ev.clientY + this.cursor.position = new Vector2D( + ev.clientX / this.caseSize.x - this.currentScene.camera.topLeft.x, + ev.clientY / this.caseSize.y - this.currentScene.camera.topLeft.y + ) if (this.cursor.isDown) { this.cursor.wasDown = true } @@ -83,11 +91,11 @@ export default class GameEngine { } public setScene(scene: Scene | string) { + console.log('Setting scene', typeof scene === 'string' ? scene : scene.id) this.currentScene = typeof scene === 'string' ? Scene.scenes[scene] : scene this.currentScene.setGameEngine(this) } - private update() { if (!this.isRunning) { return @@ -103,3 +111,8 @@ export default class GameEngine { }, 0) } } + +export interface GameState { + gameEngine: GameEngine + userState: UserState +} diff --git a/src/games/tictactoe/Explosion.ts b/src/games/tictactoe/Explosion.ts index 5bc56c5..a214408 100644 --- a/src/games/tictactoe/Explosion.ts +++ b/src/games/tictactoe/Explosion.ts @@ -1,3 +1,4 @@ +import Vector2D from 'GameEngine/2D/Vector2D' import Asset from 'GameEngine/Asset' import Component2D from 'GameEngine/Component2D' import TileRenderer from 'GameEngine/Renderer/TileRenderer' @@ -11,29 +12,33 @@ export class Explosion extends Component2D { height: .9 } + // public origin = new Vector2D(-.5, -.5) + private explosionTileset = new Tileset(Asset.init('/assets/tictactoe/explosion.png'), { - fileSize: {width: 480, height: 362}, - tileSize: 91, - spacing: 1, + fileSize: {width: 192, height: 32}, + tileSize: 32 }) private animationNumber = -1 private n = 0 public update() { - if (this.animationNumber !== -1 && this.n++ >= 10) { - this.renderer = new TileRenderer(this, this.explosionTileset, this.animationNumber++) + if (this.animationNumber !== -1 && this.n++ >= 12) { + this.renderer = new TileRenderer(this, { + id: this.animationNumber++, + tileset: this.explosionTileset + }) this.n = 0 - if (this.animationNumber >= 10) { + if (this.animationNumber > 5) { this.animationNumber = -1 this.renderer = undefined } } } - public run(pos: Component2D['pos']) { - new SoundManager('/assets/tictactoe/victory.wav').play() - this.pos = pos + public run(pos: Vector2D) { + new SoundManager('/assets/tictactoe/explosion.wav').play() + this.position = pos this.animationNumber = 0 } } diff --git a/src/games/tictactoe/Item.ts b/src/games/tictactoe/Item.ts index 49dd007..8b78ac4 100644 --- a/src/games/tictactoe/Item.ts +++ b/src/games/tictactoe/Item.ts @@ -1,5 +1,11 @@ +import GameEngine from 'GameEngine' +import BoxCollider2D from 'GameEngine/2D/Collision/BoxCollider2D' +import ColliderDebugger from 'GameEngine/2D/Debug/ColliderDebugger' +import PointDebugger from 'GameEngine/2D/Debug/PointDebugger' +import Vector2D from 'GameEngine/2D/Vector2D' import Asset from 'GameEngine/Asset' import Component2D, { ComponentState } from 'GameEngine/Component2D' +import RectRenderer from 'GameEngine/Renderer/RectRenderer' import TileRenderer from 'GameEngine/Renderer/TileRenderer' import SoundManager from 'GameEngine/SoundManager' import Tileset from 'GameEngine/Tileset' @@ -10,28 +16,38 @@ export default class Item extends Component2D { public static explosion = new Explosion() - public size = { - width: .9, - height: .9 - } + public collider: BoxCollider2D = new BoxCollider2D(this, 'click') private x: number private y: number - private tileset = new Tileset(Asset.init('/assets/pokemon-shuffle/icons.png'), { - fileSize: {width: 3750, height: 3266}, - tileSize: 121 + private tileset = new Tileset(Asset.init('/assets/tictactoe/swsh.png'), { + fileSize: {width: 64, height: 32}, + tileSize: 32 }) + public constructor(index: number) { super() this.x = Math.trunc(index % 3) this.y = Math.trunc(index / 3) - this.pos = { - x: this.x + this.x * .05, - y: this.y + this.y * .05 - } - console.log(this.pos, index) + this.position = new Vector2D( + this.x, + this.y + ) + this.scale = new Vector2D( + .9, .9 + ) + // this.renderer = new RectRenderer(this, {material: 'green'}) + this.renderer = new TileRenderer(this, {tileset: this.tileset, id: -1}) + // console.log(this.tileset.getSourceData(0), this.tileset.width(0), this.tileset.height(0)) + // console.log(this.tileset.getSourceData(1)) + this.childs = [ + new ColliderDebugger(this, this.collider), + new PointDebugger(this.collider.pos()[0]), + new PointDebugger(this.collider.pos()[1]) + ] + // console.log(index) } public init() { @@ -39,18 +55,23 @@ export default class Item extends Component2D { } public update(state: ComponentState) { + if (!globalState.isPlaying) { + return + } // console.log(state) const value: '' | 'X' | 'O' = globalState.gameState[this.x][this.y] as '' | 'X' | 'O' - if (state.mouseClicked && value === '') { + if (state.isColliding === 'click' && value === '') { // console.log('hovering') this.onClick() } if (value === 'X') { - this.renderer = new TileRenderer(this, this.tileset, 20) + (this.renderer as TileRenderer).id = 1 // this.renderer = new ImageRenderer(this, Asset.init('/assets/tictactoe/X.png')) } else if(value === 'O') { - this.renderer = new TileRenderer(this, this.tileset, 54) + (this.renderer as TileRenderer).id = 0 + } else { + (this.renderer as TileRenderer).id = -1 } } @@ -60,13 +81,15 @@ export default class Item extends Component2D { globalState.gameState[this.x][this.y] = globalState.playerTurn console.log(this.checkVictory()) if (this.checkVictory()) { - Item.explosion.run(this.pos) + Item.explosion.run(this.position) globalState.gameState = [ ['', '', ''], ['', '', ''], ['', '', ''] ] console.log(globalState) + GameEngine.getGameEngine().setScene('Menu') + return } globalState.playerTurn = globalState.playerTurn === 'X' ? 'O' : 'X' } diff --git a/src/games/tictactoe/Line.ts b/src/games/tictactoe/Line.ts index ca69d0a..ee0be0c 100644 --- a/src/games/tictactoe/Line.ts +++ b/src/games/tictactoe/Line.ts @@ -1,20 +1,31 @@ +import Vector2D from 'GameEngine/2D/Vector2D' import Component2D from 'GameEngine/Component2D' -import ColorRenderer from 'GameEngine/Renderer/ColorRenderer' +import RectRenderer from 'GameEngine/Renderer/RectRenderer' export default class Line extends Component2D { + // public debug = true + public constructor(direction: number, index: number) { super() - this.renderer = new ColorRenderer(this, 'orange') + this.renderer = new RectRenderer(this, {material: 'orange'}) - this.pos = { - x: direction ? index ? 1.95 : .9 : 0, - y: direction ? 0 : index ? .9 : 1.95 - } - this.size = { - width: direction ? .15 : 3, - height: direction ? 3 : .15 - } + this.position = new Vector2D( + direction ? index ? 1.5 : 0.5 : 1, + direction ? 1 : index ? 0.5 : 1.5 + ) + + this.scale = new Vector2D( + direction ? .1 : 3, + direction ? 3 : .1 + ) + + // this.origin = new Vector2D( + // -this.scale.x / 2, + // 0 + // ) + + // this.childs = [new ComponentDebug(this)] } } diff --git a/src/games/tictactoe/Menu/Start.ts b/src/games/tictactoe/Menu/Start.ts new file mode 100644 index 0000000..ca9ed80 --- /dev/null +++ b/src/games/tictactoe/Menu/Start.ts @@ -0,0 +1,23 @@ +import GameEngine from 'GameEngine' +import BoxCollider2D from 'GameEngine/2D/Collision/BoxCollider2D' +import ColliderDebugger from 'GameEngine/2D/Debug/ColliderDebugger' +import Vector2D from 'GameEngine/2D/Vector2D' +import Component2D, { ComponentState } from 'GameEngine/Component2D' +import RectRenderer from 'GameEngine/Renderer/RectRenderer' +import { globalState } from '..' + +export default class Start extends Component2D { + public renderer: RectRenderer = new RectRenderer(this, {material: 'yellow'}) + public position: Vector2D = new Vector2D(1, 1) + public scale: Vector2D = new Vector2D(2, 1) + public collider: BoxCollider2D = new BoxCollider2D(this, 'click') + public childs: Array = [new ColliderDebugger(this, this.collider)] + + public update(state: ComponentState) { + if (state.isColliding === 'click') { + console.log('Start Game !') + GameEngine.getGameEngine().setScene('TicTacToe') + globalState.isPlaying = true + } + } +} diff --git a/src/games/tictactoe/index.ts b/src/games/tictactoe/index.ts index e0aa726..4fd476b 100644 --- a/src/games/tictactoe/index.ts +++ b/src/games/tictactoe/index.ts @@ -5,11 +5,13 @@ export const globalState: { [string, string, string], [string, string, string], ] + isPlaying: boolean } = { playerTurn: 'X', gameState: [ ['', '', ''], ['', '', ''], ['', '', ''] - ] + ], + isPlaying: false } diff --git a/src/pages/sitemap.xml.ts b/src/pages/sitemap.xml.ts index 291e37a..3bd0275 100644 --- a/src/pages/sitemap.xml.ts +++ b/src/pages/sitemap.xml.ts @@ -7,6 +7,7 @@ export const getServerSideProps: GetServerSideProps = async ({res}) => { const sitemap = new Sitemap('https://games.avior.me', {response: res}) sitemap.addEntry('/') sitemap.addEntry('/pokemon-shuffle') + sitemap.addEntry('/tictactoe') sitemap.build() return { notFound: true diff --git a/src/pages/tictactoe/index.tsx b/src/pages/tictactoe/index.tsx index a3d0d99..cb60f0c 100644 --- a/src/pages/tictactoe/index.tsx +++ b/src/pages/tictactoe/index.tsx @@ -5,31 +5,44 @@ import GameEngine from 'GameEngine' import Scene from 'GameEngine/Scene' import Item from 'games/tictactoe/Item' import Line from 'games/tictactoe/Line' +import Start from 'games/tictactoe/Menu/Start' export default class Snake extends React.PureComponent { public async componentDidMount() { const ge = new GameEngine('#test', { caseCount: 3, - background: 'blue' + background: 'blue', + debugColliders: true }) + const menuScene = new Scene('Menu') + menuScene.addComponent( + new Start() + ) const scene = new Scene('TicTacToe') scene.addComponent( ...Array.from(new Array(2)).map((_, index) => new Line(0, index)), ...Array.from(new Array(2)).map((_, index) => new Line(1, index)), ...Array.from(new Array(9)).map((_, index) => new Item(index)), Item.explosion + // new TilingDebugger() ) ge.start() - ge.setScene(scene) + ge.setScene(menuScene) } public render = () => ( <> + + + Explositon animation from https://opengameart.org/content/explosion-animations - Bienvenue sur le TicTacToe le plus Overengineered du monde xd
Avec un moteur de jeux complètement fait maison et bien plus encore en préparation ! (vieille version en 75 lignes, nouvelle en plus de 200 lol) + + Bienvenue sur le TicTacToe le plus Overengineered du monde xd
+ Avec un moteur de jeux complètement fait maison et bien plus encore en préparation ! (vieille version en 75 lignes, nouvelle en plus de 200 lol) + Version faites il y a 4 ans encore disponible sur Github lol https://github.com/Aviortheking/TicTacToe ) diff --git a/yarn.lock b/yarn.lock index 794fc52..c6855b1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -21,7 +21,7 @@ "resolved" "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.14.4.tgz" "version" "7.14.4" -"@babel/core@^7.0.0", "@babel/core@^7.8.7": +"@babel/core@^7.8.7": "integrity" "sha512-jB5AmTKOCSJIZ72sd78ECEhuPiDMKlQdDI/4QRI6lzYATx5SSogS1oQA2AoPecRCknm30gHi2l+QVvNUu3wZAg==" "resolved" "https://registry.npmjs.org/@babel/core/-/core-7.14.3.tgz" "version" "7.14.3" @@ -226,6 +226,11 @@ "rollup-plugin-typescript2" "^0.30.0" "tslib" "^2.1.0" +"@dzeio/object-util@^1.2.0": + "integrity" "sha512-ZX1611a5+s8ILG5F2Pdks42rVMxhSUb0c3J7j/qw3yCX8+Itay7jTD8R5yyVi+Z9YtXk5vLx88tY68g2ZhMivA==" + "resolved" "https://registry.npmjs.org/@dzeio/object-util/-/object-util-1.2.0.tgz" + "version" "1.2.0" + "@eslint/eslintrc@^0.4.2": "integrity" "sha512-8nmGq/4ycLpIwzvhI4tNDmQztZ8sp+hI7cyG8i1nQDhkAbRzHpXPidRAHlNvCZQpJTKw5ItIpMw9RSToGF00mg==" "resolved" "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.2.tgz" @@ -261,25 +266,25 @@ "resolved" "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.2.0.tgz" "version" "9.2.0" -"@next/env@10.2.3": - "integrity" "sha512-uBOjRBjsWC4C8X3DfmWWP6ekwLnf2JCCwQX9KVnJtJkqfDsv1yQPakdOEwvJzXQc3JC/v5KKffYPVmV2wHXCgQ==" - "resolved" "https://registry.npmjs.org/@next/env/-/env-10.2.3.tgz" - "version" "10.2.3" +"@next/env@11.0.0": + "integrity" "sha512-VKpmDvTYeCpEQjREg3J4pCmVs/QjEzoLmkM8shGFK6e9AmFd0G9QXOL8HGA8qKhy/XmNb7dHeMqrcMiBua4OgA==" + "resolved" "https://registry.npmjs.org/@next/env/-/env-11.0.0.tgz" + "version" "11.0.0" "@next/eslint-plugin-next@10.2.3": "integrity" "sha512-XkYm3cMxY2RZgbGyZLDN3vR9StFyiQVdwdS/EL6NxOerzt0To03/coY22p4jcFLtLYlQxAivJRicMTDNhRzPog==" "resolved" "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-10.2.3.tgz" "version" "10.2.3" -"@next/polyfill-module@10.2.3": - "integrity" "sha512-OkeY4cLhzfYbXxM4fd+6V4s5pTPuyfKSlavItfNRA6PpS7t1/R6YjO7S7rB8tu1pbTGuDHGIdE1ioDv15bAbDQ==" - "resolved" "https://registry.npmjs.org/@next/polyfill-module/-/polyfill-module-10.2.3.tgz" - "version" "10.2.3" +"@next/polyfill-module@11.0.0": + "integrity" "sha512-gydtFzRqsT549U8+sY8382I/f4HFcelD8gdUGnAofQJa/jEU1jkxmjCHC8tmEiyeMLidl7iDZgchfSCpmMzzUg==" + "resolved" "https://registry.npmjs.org/@next/polyfill-module/-/polyfill-module-11.0.0.tgz" + "version" "11.0.0" -"@next/react-dev-overlay@10.2.3": - "integrity" "sha512-E6g2jws4YW94l0lMMopBVKIZK2mEHfSBvM0d9dmzKG9L/A/kEq6LZCB4SiwGJbNsAdlk2y3USDa0oNbpA+m5Kw==" - "resolved" "https://registry.npmjs.org/@next/react-dev-overlay/-/react-dev-overlay-10.2.3.tgz" - "version" "10.2.3" +"@next/react-dev-overlay@11.0.0": + "integrity" "sha512-q+Wp+eStEMThe77zxdeJ/nbuODkHR6P+/dfUqYXZSqbLf6x5c5xwLBauwwVbkCYFZpAlDuL8Jk8QSAH1OsqC2w==" + "resolved" "https://registry.npmjs.org/@next/react-dev-overlay/-/react-dev-overlay-11.0.0.tgz" + "version" "11.0.0" dependencies: "@babel/code-frame" "7.12.11" "anser" "1.4.9" @@ -293,10 +298,10 @@ "stacktrace-parser" "0.1.10" "strip-ansi" "6.0.0" -"@next/react-refresh-utils@10.2.3": - "integrity" "sha512-qtBF56vPC6d6a8p7LYd0iRjW89fhY80kAIzmj+VonvIGjK/nymBjcFUhbKiMFqlhsarCksnhwX+Zmn95Dw9qvA==" - "resolved" "https://registry.npmjs.org/@next/react-refresh-utils/-/react-refresh-utils-10.2.3.tgz" - "version" "10.2.3" +"@next/react-refresh-utils@11.0.0": + "integrity" "sha512-hi5eY+KBn4QGtUv7VL2OptdM33fI2hxhd7+omOFmAK+S0hDWhg1uqHqqGJk0W1IfqlWEzzL10WvTJDPRAtDugQ==" + "resolved" "https://registry.npmjs.org/@next/react-refresh-utils/-/react-refresh-utils-11.0.0.tgz" + "version" "11.0.0" "@nodelib/fs.scandir@2.1.5": "integrity" "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==" @@ -319,18 +324,6 @@ "@nodelib/fs.scandir" "2.1.5" "fastq" "^1.6.0" -"@opentelemetry/api@0.14.0": - "integrity" "sha512-L7RMuZr5LzMmZiQSQDy9O1jo0q+DaLy6XpYJfIGfYSfoJA5qzYwUP3sP1uMIQ549DvxAgM3ng85EaPTM/hUHwQ==" - "resolved" "https://registry.npmjs.org/@opentelemetry/api/-/api-0.14.0.tgz" - "version" "0.14.0" - dependencies: - "@opentelemetry/context-base" "^0.14.0" - -"@opentelemetry/context-base@^0.14.0": - "integrity" "sha512-sDOAZcYwynHFTbLo6n8kIbLiVF3a3BLkrmehJUyEbT9F+Smbi47kLGS2gG2g0fjBLR/Lr1InPD7kXL7FaTqEkw==" - "resolved" "https://registry.npmjs.org/@opentelemetry/context-base/-/context-base-0.14.0.tgz" - "version" "0.14.0" - "@rollup/pluginutils@^4.1.0": "integrity" "sha512-TrBhfJkFxA+ER+ew2U2/fHbebhLT/l/2pRk0hfj9KusXUuRXd2v0R58AfaZK9VXDQ4TogOSEmICVrQAA3zFnHQ==" "resolved" "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.1.0.tgz" @@ -449,7 +442,7 @@ "eslint-scope" "^5.1.1" "eslint-utils" "^3.0.0" -"@typescript-eslint/parser@^4.0.0", "@typescript-eslint/parser@^4.14.1", "@typescript-eslint/parser@^4.20.0": +"@typescript-eslint/parser@^4.14.1", "@typescript-eslint/parser@^4.20.0": "integrity" "sha512-q7F3zSo/nU6YJpPJvQveVlIIzx9/wu75lr6oDbDzoeIRWxpoc/HQ43G4rmMoCc5my/3uSj2VEpg/D83LYZF5HQ==" "resolved" "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.26.1.tgz" "version" "4.26.1" @@ -629,7 +622,7 @@ "resolved" "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.1.tgz" "version" "5.3.1" -"acorn@^6.0.0 || ^7.0.0 || ^8.0.0", "acorn@^7.4.0": +"acorn@^7.4.0": "integrity" "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==" "resolved" "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz" "version" "7.4.1" @@ -644,7 +637,7 @@ "resolved" "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz" "version" "3.5.2" -"ajv@^6.10.0", "ajv@^6.12.4", "ajv@^6.12.5", "ajv@^6.9.1": +"ajv@^6.10.0", "ajv@^6.12.4", "ajv@^6.12.5": "integrity" "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==" "resolved" "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz" "version" "6.12.6" @@ -1850,7 +1843,7 @@ "resolved" "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz" "version" "2.1.0" -"eslint@*", "eslint@^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0", "eslint@^3 || ^4 || ^5 || ^6 || ^7", "eslint@^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0", "eslint@^5.0.0 || ^6.0.0 || ^7.0.0", "eslint@^7.1.0", "eslint@^7.23.0", "eslint@>=5": +"eslint@^7.1.0": "integrity" "sha512-UMfH0VSjP0G4p3EWirscJEQ/cHqnT/iuH6oNZOB94nBjWbMnhGEPxsZm1eyIW0C/9jLI0Fow4W5DXLjEI7mn1g==" "resolved" "https://registry.npmjs.org/eslint/-/eslint-7.28.0.tgz" "version" "7.28.0" @@ -2309,6 +2302,13 @@ "resolved" "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz" "version" "5.1.8" +"image-size@1.0.0": + "integrity" "sha512-JLJ6OwBfO1KcA+TvJT+v8gbE6iWbj24LyDNFgFEN0lzegn6cC6a/p3NIDaepMsJjQjlUWqIC7wJv8lBFxPNjcw==" + "resolved" "https://registry.npmjs.org/image-size/-/image-size-1.0.0.tgz" + "version" "1.0.0" + dependencies: + "queue" "6.0.2" + "import-fresh@^2.0.0": "integrity" "sha1-2BNVwVYS04bGH53dOSLUMEgipUY=" "resolved" "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz" @@ -2343,12 +2343,12 @@ "once" "^1.3.0" "wrappy" "1" -"inherits@^2.0.1", "inherits@^2.0.3", "inherits@^2.0.4", "inherits@~2.0.4", "inherits@2", "inherits@2.0.4": +"inherits@^2.0.1", "inherits@^2.0.3", "inherits@^2.0.4", "inherits@~2.0.3", "inherits@~2.0.4", "inherits@2", "inherits@2.0.4": "integrity" "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" "resolved" "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz" "version" "2.0.4" -"inherits@~2.0.1", "inherits@~2.0.3", "inherits@2.0.3": +"inherits@~2.0.1", "inherits@2.0.3": "integrity" "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" "resolved" "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz" "version" "2.0.3" @@ -2893,18 +2893,17 @@ "resolved" "https://registry.npmjs.org/next-pre-css/-/next-pre-css-1.0.0.tgz" "version" "1.0.0" -"next@^10.0.3", "next@^10.0.5", "next@^9.4.0 || ^10.0.0", "next@>=10.2.0": - "integrity" "sha512-dkM1mIfnORtGyzw/Yme8RdqNxlCMZyi4Lqj56F01/yHbe1ZtOaJ0cyqqRB4RGiPhjGGh0319f8ddjDyO1605Ow==" - "resolved" "https://registry.npmjs.org/next/-/next-10.2.3.tgz" - "version" "10.2.3" +"next@^11.0.0": + "integrity" "sha512-1OA0ccCTwVtdLats/1v7ReiBVx+Akya0UVhHo9IBr8ZkpDI3/SGNcaruJBp5agy8ROF97VDKkZamoUXxRB9NUA==" + "resolved" "https://registry.npmjs.org/next/-/next-11.0.0.tgz" + "version" "11.0.0" dependencies: "@babel/runtime" "7.12.5" "@hapi/accept" "5.0.2" - "@next/env" "10.2.3" - "@next/polyfill-module" "10.2.3" - "@next/react-dev-overlay" "10.2.3" - "@next/react-refresh-utils" "10.2.3" - "@opentelemetry/api" "0.14.0" + "@next/env" "11.0.0" + "@next/polyfill-module" "11.0.0" + "@next/react-dev-overlay" "11.0.0" + "@next/react-refresh-utils" "11.0.0" "assert" "2.0.0" "ast-types" "0.13.2" "browserify-zlib" "0.2.0" @@ -2922,6 +2921,7 @@ "find-cache-dir" "3.3.1" "get-orientation" "1.1.2" "https-browserify" "1.0.0" + "image-size" "1.0.0" "jest-worker" "27.0.0-next.5" "native-url" "0.3.4" "node-fetch" "2.6.1" @@ -2936,7 +2936,7 @@ "prop-types" "15.7.2" "querystring-es3" "0.2.1" "raw-body" "2.4.1" - "react-is" "16.13.1" + "react-is" "17.0.2" "react-refresh" "0.8.3" "stream-browserify" "3.0.0" "stream-http" "3.1.1" @@ -3663,7 +3663,7 @@ "source-map" "^0.6.1" "supports-color" "^6.1.0" -"postcss@^8.1.0", "postcss@^8.2.1", "postcss@^8.2.2", "postcss@^8.2.4", "postcss@8.2.13": +"postcss@^8.2.4", "postcss@8.2.13": "integrity" "sha512-FCE5xLH+hjbzRdpbRb1IMCvPv9yZx2QnDarBEYSN0N0HYk+TcXsEhwdFcFb+SRWOKzKGErhIEbBK2ogyLdTtfQ==" "resolved" "https://registry.npmjs.org/postcss/-/postcss-8.2.13.tgz" "version" "8.2.13" @@ -3777,6 +3777,13 @@ "resolved" "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz" "version" "1.2.3" +"queue@6.0.2": + "integrity" "sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==" + "resolved" "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz" + "version" "6.0.2" + dependencies: + "inherits" "~2.0.3" + "randombytes@^2.0.0", "randombytes@^2.0.1", "randombytes@^2.0.5", "randombytes@^2.1.0": "integrity" "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==" "resolved" "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz" @@ -3802,7 +3809,7 @@ "iconv-lite" "0.4.24" "unpipe" "1.0.0" -"react-dom@^16.6.0 || ^17", "react-dom@^16.8.0 || ^17.0.0", "react-dom@^16.9.0 || ^17", "react-dom@^17.0.1": +"react-dom@^17.0.2": "integrity" "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==" "resolved" "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz" "version" "17.0.2" @@ -3818,17 +3825,22 @@ dependencies: "prop-types" "^15.7.2" -"react-is@^16.8.1", "react-is@16.13.1": +"react-is@^16.8.1": "integrity" "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" "resolved" "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz" "version" "16.13.1" +"react-is@17.0.2": + "integrity" "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" + "resolved" "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz" + "version" "17.0.2" + "react-refresh@0.8.3": "integrity" "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==" "resolved" "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz" "version" "0.8.3" -"react@^16.6.0 || ^17", "react@^16.8.0 || ^17.0.0", "react@^16.8.6 || ^17", "react@^16.9.0 || ^17", "react@^17.0.1", "react@15.x.x || 16.x.x || 17.x.x", "react@17.0.2": +"react@^17.0.2": "integrity" "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==" "resolved" "https://registry.npmjs.org/react/-/react-17.0.2.tgz" "version" "17.0.2" @@ -4001,7 +4013,7 @@ "resolve" "1.20.0" "tslib" "2.1.0" -"rollup@^1.20.0||^2.0.0", "rollup@^2.2.0", "rollup@^2.44.0", "rollup@>=1.26.3": +"rollup@^2.44.0": "integrity" "sha512-ITLt9sScNCBVspSHauw/W49lEZ0vjN8LyCzSNsNaqT67vTss2lYEfOyxltX8hjrhr1l/rQwmZ2wazzEqhZ/fUg==" "resolved" "https://registry.npmjs.org/rollup/-/rollup-2.51.0.tgz" "version" "2.51.0" @@ -4432,7 +4444,7 @@ "resolved" "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz" "version" "0.0.10" -"stylis@^3.5.0", "stylis@3.5.4": +"stylis@3.5.4": "integrity" "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==" "resolved" "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz" "version" "3.5.4" @@ -4446,7 +4458,7 @@ "klona" "^2.0.4" "normalize-path" "^3.0.0" -"stylus@^0.54.7", "stylus@^0.54.8", "stylus@>=0.52.4": +"stylus@^0.54.7": "integrity" "sha512-vr54Or4BZ7pJafo2mpf0ZcwA74rpuYCZbxrHBsH8kbcXOwSfvBFwsRfpGO5OD5fhG5HDCFW737PKaawI7OqEAg==" "resolved" "https://registry.npmjs.org/stylus/-/stylus-0.54.8.tgz" "version" "0.54.8" @@ -4667,7 +4679,7 @@ "resolved" "https://registry.npmjs.org/type-fest/-/type-fest-0.7.1.tgz" "version" "0.7.1" -"typescript@^4.1.3", "typescript@^4.2.3", "typescript@>=2.4.0", "typescript@>=2.7", "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta", "typescript@>=3.3.1": +"typescript@^4.1.3": "integrity" "sha512-zZ4hShnmnoVnAHpVHWpTcxdv7dWP60S2FsydQLV8V5PbS3FifjWFFRiHSWpDJahly88PRyV5teTSLoq4eG7mKw==" "resolved" "https://registry.npmjs.org/typescript/-/typescript-4.3.2.tgz" "version" "4.3.2" @@ -4832,7 +4844,7 @@ "source-list-map" "^2.0.1" "source-map" "^0.6.1" -"webpack@^4 || ^5", "webpack@^5.0.0", "webpack@^5.1.0", "webpack@^5.37.1": +"webpack@^5.37.1": "integrity" "sha512-OqRmYD1OJbHZph6RUMD93GcCZy4Z4wC0ele4FXyYF0J6AxO1vOSuIlU1hkS/lDlR9CDYBz64MZRmdbdnFFoT2g==" "resolved" "https://registry.npmjs.org/webpack/-/webpack-5.38.1.tgz" "version" "5.38.1"