From 1a1c3d69a63b37ccc5428a6a45be9e8931dec5ab Mon Sep 17 00:00:00 2001 From: gbrllim Date: Fri, 8 Sep 2023 17:07:28 +0800 Subject: [PATCH 1/4] base version --- package-lock.json | 443 +++++++++++++++++++++++++++++++++- package.json | 1 + src/App.css | 73 +++++- src/App.js | 136 +++++++++-- src/components/GameLogic.js | 109 +++++++++ src/components/PlayingCard.js | 26 ++ src/{ => components}/utils.js | 0 7 files changed, 761 insertions(+), 27 deletions(-) create mode 100644 src/components/GameLogic.js create mode 100644 src/components/PlayingCard.js rename src/{ => components}/utils.js (100%) diff --git a/package-lock.json b/package-lock.json index f8b2902..aef72e2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "gh-pages": "^3.2.3", "react": "^18.1.0", + "react-bootstrap": "^2.8.0", "react-dom": "^18.1.0", "react-scripts": "5.0.1" } @@ -1765,11 +1766,11 @@ } }, "node_modules/@babel/runtime": { - "version": "7.17.9", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz", - "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==", + "version": "7.22.15", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.15.tgz", + "integrity": "sha512-T0O+aa+4w0u06iNmapipJXMV4HoUir03hpx3/YqXXhu9xim3w+dVphjFWl1OH8NbZHw5Lbm9k45drDkgq2VNNA==", "dependencies": { - "regenerator-runtime": "^0.13.4" + "regenerator-runtime": "^0.14.0" }, "engines": { "node": ">=6.9.0" @@ -1787,6 +1788,11 @@ "node": ">=6.9.0" } }, + "node_modules/@babel/runtime/node_modules/regenerator-runtime": { + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz", + "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==" + }, "node_modules/@babel/template": { "version": "7.16.7", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.7.tgz", @@ -2867,6 +2873,68 @@ } } }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, + "node_modules/@react-aria/ssr": { + "version": "3.8.0", + "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.8.0.tgz", + "integrity": "sha512-Y54xs483rglN5DxbwfCPHxnkvZ+gZ0LbSYmR72LyWPGft8hN/lrl1VRS1EW2SMjnkEWlj+Km2mwvA3kEHDUA0A==", + "dependencies": { + "@swc/helpers": "^0.5.0" + }, + "engines": { + "node": ">= 12" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" + } + }, + "node_modules/@restart/hooks": { + "version": "0.4.11", + "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.11.tgz", + "integrity": "sha512-Ft/ncTULZN6ldGHiF/k5qt72O8JyRMOeg0tApvCni8LkoiEahO+z3TNxfXIVGy890YtWVDvJAl662dVJSJXvMw==", + "dependencies": { + "dequal": "^2.0.3" + }, + "peerDependencies": { + "react": ">=16.8.0" + } + }, + "node_modules/@restart/ui": { + "version": "1.6.6", + "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.6.6.tgz", + "integrity": "sha512-eC3puKuWE1SRYbojWHXnvCNHGgf3uzHCb6JOhnF4OXPibOIPEkR1sqDSkL643ydigxwh+ruCa1CmYHlzk7ikKA==", + "dependencies": { + "@babel/runtime": "^7.21.0", + "@popperjs/core": "^2.11.6", + "@react-aria/ssr": "^3.5.0", + "@restart/hooks": "^0.4.9", + "@types/warning": "^3.0.0", + "dequal": "^2.0.3", + "dom-helpers": "^5.2.0", + "uncontrollable": "^8.0.1", + "warning": "^4.0.3" + }, + "peerDependencies": { + "react": ">=16.14.0", + "react-dom": ">=16.14.0" + } + }, + "node_modules/@restart/ui/node_modules/uncontrollable": { + "version": "8.0.4", + "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-8.0.4.tgz", + "integrity": "sha512-ulRWYWHvscPFc0QQXvyJjY6LIXU56f0h8pQFvhxiKk5V1fcI8gp9Ht9leVAhrVjzqMw0BgjspBINx9r6oyJUvQ==", + "peerDependencies": { + "react": ">=16.14.0" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -3185,6 +3253,14 @@ "url": "https://github.com/sponsors/gregberge" } }, + "node_modules/@swc/helpers": { + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.2.tgz", + "integrity": "sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==", + "dependencies": { + "tslib": "^2.4.0" + } + }, "node_modules/@tootallnate/once": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz", @@ -3388,6 +3464,11 @@ "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.6.0.tgz", "integrity": "sha512-G/AdOadiZhnJp0jXCaBQU449W2h716OW/EoXeYkCytxKL06X1WCXB4DZpp8TpZ8eyIJVS1cw4lrlkkSYU21cDw==" }, + "node_modules/@types/prop-types": { + "version": "15.7.5", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" + }, "node_modules/@types/q": { "version": "1.5.5", "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz", @@ -3403,6 +3484,24 @@ "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz", "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==" }, + "node_modules/@types/react": { + "version": "18.2.21", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.21.tgz", + "integrity": "sha512-neFKG/sBAwGxHgXiIxnbm3/AAVQ/cMRS93hvBpg8xYRbeQSPVABp9U2bRnPf0iI4+Ucdv3plSxKK+3CW2ENJxA==", + "dependencies": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, + "node_modules/@types/react-transition-group": { + "version": "4.4.6", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz", + "integrity": "sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==", + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/resolve": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", @@ -3416,6 +3515,11 @@ "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz", "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==" }, + "node_modules/@types/scheduler": { + "version": "0.16.3", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz", + "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==" + }, "node_modules/@types/serve-index": { "version": "1.9.1", "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz", @@ -3451,6 +3555,11 @@ "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz", "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==" }, + "node_modules/@types/warning": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz", + "integrity": "sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA==" + }, "node_modules/@types/ws": { "version": "8.5.3", "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz", @@ -4900,6 +5009,11 @@ "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz", "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==" }, + "node_modules/classnames": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", + "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" + }, "node_modules/clean-css": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.0.tgz", @@ -5595,6 +5709,11 @@ "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz", "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==" }, + "node_modules/csstype": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", + "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" + }, "node_modules/damerau-levenshtein": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz", @@ -5707,6 +5826,14 @@ "node": ">= 0.8" } }, + "node_modules/dequal": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", + "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==", + "engines": { + "node": ">=6" + } + }, "node_modules/destroy": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz", @@ -5838,6 +5965,15 @@ "utila": "~0.4" } }, + "node_modules/dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "dependencies": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "node_modules/dom-serializer": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz", @@ -8176,6 +8312,14 @@ "node": ">= 0.4" } }, + "node_modules/invariant": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", + "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/ipaddr.js": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz", @@ -12936,6 +13080,23 @@ "react-is": "^16.13.1" } }, + "node_modules/prop-types-extra": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz", + "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==", + "dependencies": { + "react-is": "^16.3.2", + "warning": "^4.0.0" + }, + "peerDependencies": { + "react": ">=0.14.0" + } + }, + "node_modules/prop-types-extra/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, "node_modules/prop-types/node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -13111,6 +13272,35 @@ "node": ">=14" } }, + "node_modules/react-bootstrap": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.8.0.tgz", + "integrity": "sha512-e/aNtxl0Z2ozrIaR82jr6Zz7ss9GSoaXpQaxmvtDUsTZIq/XalkduR/ZXP6vbQHz2T4syvjA+4FbtwELxxmpww==", + "dependencies": { + "@babel/runtime": "^7.21.0", + "@restart/hooks": "^0.4.9", + "@restart/ui": "^1.6.3", + "@types/react-transition-group": "^4.4.5", + "classnames": "^2.3.2", + "dom-helpers": "^5.2.1", + "invariant": "^2.2.4", + "prop-types": "^15.8.1", + "prop-types-extra": "^1.1.0", + "react-transition-group": "^4.4.5", + "uncontrollable": "^7.2.1", + "warning": "^4.0.3" + }, + "peerDependencies": { + "@types/react": ">=16.14.8", + "react": ">=16.14.0", + "react-dom": ">=16.14.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", @@ -13250,6 +13440,11 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "node_modules/react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, "node_modules/react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -13330,6 +13525,21 @@ } } }, + "node_modules/react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", + "dependencies": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "react": ">=16.6.0", + "react-dom": ">=16.6.0" + } + }, "node_modules/readable-stream": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz", @@ -14984,6 +15194,20 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/uncontrollable": { + "version": "7.2.1", + "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz", + "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==", + "dependencies": { + "@babel/runtime": "^7.6.3", + "@types/react": ">=16.9.11", + "invariant": "^2.2.4", + "react-lifecycles-compat": "^3.0.4" + }, + "peerDependencies": { + "react": ">=15.0.0" + } + }, "node_modules/unicode-canonical-property-names-ecmascript": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz", @@ -15162,6 +15386,14 @@ "makeerror": "1.0.12" } }, + "node_modules/warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/watchpack": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.3.1.tgz", @@ -17212,11 +17444,18 @@ } }, "@babel/runtime": { - "version": "7.17.9", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz", - "integrity": "sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==", + "version": "7.22.15", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.15.tgz", + "integrity": "sha512-T0O+aa+4w0u06iNmapipJXMV4HoUir03hpx3/YqXXhu9xim3w+dVphjFWl1OH8NbZHw5Lbm9k45drDkgq2VNNA==", "requires": { - "regenerator-runtime": "^0.13.4" + "regenerator-runtime": "^0.14.0" + }, + "dependencies": { + "regenerator-runtime": { + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz", + "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==" + } } }, "@babel/runtime-corejs3": { @@ -17978,6 +18217,51 @@ "source-map": "^0.7.3" } }, + "@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==" + }, + "@react-aria/ssr": { + "version": "3.8.0", + "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.8.0.tgz", + "integrity": "sha512-Y54xs483rglN5DxbwfCPHxnkvZ+gZ0LbSYmR72LyWPGft8hN/lrl1VRS1EW2SMjnkEWlj+Km2mwvA3kEHDUA0A==", + "requires": { + "@swc/helpers": "^0.5.0" + } + }, + "@restart/hooks": { + "version": "0.4.11", + "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.11.tgz", + "integrity": "sha512-Ft/ncTULZN6ldGHiF/k5qt72O8JyRMOeg0tApvCni8LkoiEahO+z3TNxfXIVGy890YtWVDvJAl662dVJSJXvMw==", + "requires": { + "dequal": "^2.0.3" + } + }, + "@restart/ui": { + "version": "1.6.6", + "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.6.6.tgz", + "integrity": "sha512-eC3puKuWE1SRYbojWHXnvCNHGgf3uzHCb6JOhnF4OXPibOIPEkR1sqDSkL643ydigxwh+ruCa1CmYHlzk7ikKA==", + "requires": { + "@babel/runtime": "^7.21.0", + "@popperjs/core": "^2.11.6", + "@react-aria/ssr": "^3.5.0", + "@restart/hooks": "^0.4.9", + "@types/warning": "^3.0.0", + "dequal": "^2.0.3", + "dom-helpers": "^5.2.0", + "uncontrollable": "^8.0.1", + "warning": "^4.0.3" + }, + "dependencies": { + "uncontrollable": { + "version": "8.0.4", + "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-8.0.4.tgz", + "integrity": "sha512-ulRWYWHvscPFc0QQXvyJjY6LIXU56f0h8pQFvhxiKk5V1fcI8gp9Ht9leVAhrVjzqMw0BgjspBINx9r6oyJUvQ==", + "requires": {} + } + } + }, "@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -18172,6 +18456,14 @@ "loader-utils": "^2.0.0" } }, + "@swc/helpers": { + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.2.tgz", + "integrity": "sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==", + "requires": { + "tslib": "^2.4.0" + } + }, "@tootallnate/once": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz", @@ -18369,6 +18661,11 @@ "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.6.0.tgz", "integrity": "sha512-G/AdOadiZhnJp0jXCaBQU449W2h716OW/EoXeYkCytxKL06X1WCXB4DZpp8TpZ8eyIJVS1cw4lrlkkSYU21cDw==" }, + "@types/prop-types": { + "version": "15.7.5", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" + }, "@types/q": { "version": "1.5.5", "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz", @@ -18384,6 +18681,24 @@ "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz", "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==" }, + "@types/react": { + "version": "18.2.21", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.21.tgz", + "integrity": "sha512-neFKG/sBAwGxHgXiIxnbm3/AAVQ/cMRS93hvBpg8xYRbeQSPVABp9U2bRnPf0iI4+Ucdv3plSxKK+3CW2ENJxA==", + "requires": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, + "@types/react-transition-group": { + "version": "4.4.6", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz", + "integrity": "sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==", + "requires": { + "@types/react": "*" + } + }, "@types/resolve": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", @@ -18397,6 +18712,11 @@ "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz", "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==" }, + "@types/scheduler": { + "version": "0.16.3", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz", + "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==" + }, "@types/serve-index": { "version": "1.9.1", "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz", @@ -18432,6 +18752,11 @@ "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz", "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==" }, + "@types/warning": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz", + "integrity": "sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA==" + }, "@types/ws": { "version": "8.5.3", "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz", @@ -19491,6 +19816,11 @@ "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz", "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==" }, + "classnames": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", + "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" + }, "clean-css": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.0.tgz", @@ -19982,6 +20312,11 @@ } } }, + "csstype": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", + "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" + }, "damerau-levenshtein": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz", @@ -20062,6 +20397,11 @@ "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz", "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==" }, + "dequal": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", + "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==" + }, "destroy": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz", @@ -20163,6 +20503,15 @@ "utila": "~0.4" } }, + "dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "requires": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "dom-serializer": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz", @@ -21857,6 +22206,14 @@ "side-channel": "^1.0.4" } }, + "invariant": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", + "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", + "requires": { + "loose-envify": "^1.0.0" + } + }, "ipaddr.js": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz", @@ -25167,6 +25524,22 @@ } } }, + "prop-types-extra": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz", + "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==", + "requires": { + "react-is": "^16.3.2", + "warning": "^4.0.0" + }, + "dependencies": { + "react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + } + } + }, "proxy-addr": { "version": "2.0.7", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", @@ -25284,6 +25657,25 @@ "whatwg-fetch": "^3.6.2" } }, + "react-bootstrap": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.8.0.tgz", + "integrity": "sha512-e/aNtxl0Z2ozrIaR82jr6Zz7ss9GSoaXpQaxmvtDUsTZIq/XalkduR/ZXP6vbQHz2T4syvjA+4FbtwELxxmpww==", + "requires": { + "@babel/runtime": "^7.21.0", + "@restart/hooks": "^0.4.9", + "@restart/ui": "^1.6.3", + "@types/react-transition-group": "^4.4.5", + "classnames": "^2.3.2", + "dom-helpers": "^5.2.1", + "invariant": "^2.2.4", + "prop-types": "^15.8.1", + "prop-types-extra": "^1.1.0", + "react-transition-group": "^4.4.5", + "uncontrollable": "^7.2.1", + "warning": "^4.0.3" + } + }, "react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", @@ -25389,6 +25781,11 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, "react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -25449,6 +25846,17 @@ "workbox-webpack-plugin": "^6.4.1" } }, + "react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", + "requires": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + } + }, "readable-stream": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz", @@ -26680,6 +27088,17 @@ "which-boxed-primitive": "^1.0.2" } }, + "uncontrollable": { + "version": "7.2.1", + "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz", + "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==", + "requires": { + "@babel/runtime": "^7.6.3", + "@types/react": ">=16.9.11", + "invariant": "^2.2.4", + "react-lifecycles-compat": "^3.0.4" + } + }, "unicode-canonical-property-names-ecmascript": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz", @@ -26815,6 +27234,14 @@ "makeerror": "1.0.12" } }, + "warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "requires": { + "loose-envify": "^1.0.0" + } + }, "watchpack": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.3.1.tgz", diff --git a/package.json b/package.json index 9e1db91..09d7754 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "dependencies": { "gh-pages": "^3.2.3", "react": "^18.1.0", + "react-bootstrap": "^2.8.0", "react-dom": "^18.1.0", "react-scripts": "5.0.1" }, diff --git a/src/App.css b/src/App.css index 97b7c57..95db5e1 100644 --- a/src/App.css +++ b/src/App.css @@ -1,3 +1,32 @@ +:root { + --primary-blue: #5fa9b4; + --primary-teal: #b4d6c5; + --primary-red: #a8515d; + --primary-white: #fcecca; +} + +h3 { + width: 75vw; + border: 3px dotted var(--primary-red); + border-radius: 20px; + margin-top: 10px; + margin-bottom: 10px; + padding: 20px 20px; +} + +input { + width: 15em; + border-radius: 10px; + text-align: center; + margin: 10px 10px; +} + +button { + border-radius: 10px; + width: 40vw; + height: 10vw; +} + .App { text-align: center; } @@ -8,12 +37,52 @@ } .App-header { - background-color: #282c34; + background-color: var(--primary-white); min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: calc(10px + 2vmin); - color: white; + color: var(--primary-red); + font-weight: 600; + margin: 0; +} + +.table-row { + font-family: sans-serif; + text-align: center; + display: flex; + align-items: center; + justify-content: center; + width: 75vw; + max-width: 20em; +} + +.table-elements { + background-color: var(--primary-teal); + border: 2px solid black; + width: 10em; + height: 50px; + box-sizing: border-box; + text-align: center; + font-size: 0.7em; + font-weight: 600; + display: flex; + align-items: center; + justify-content: center; +} + +.header-elements { + background-color: var(--primary-blue); + border: 2px solid black; + width: 10em; /* Adjust the width to your desired fixed width */ + height: 50px; + box-sizing: border-box; + text-align: center; + font-size: 0.7em; + display: flex; + align-items: center; + justify-content: center; + color: var(--primary-white); } diff --git a/src/App.js b/src/App.js index 899cefc..b384714 100644 --- a/src/App.js +++ b/src/App.js @@ -1,45 +1,147 @@ import React from "react"; import "./App.css"; -import { makeShuffledDeck } from "./utils.js"; +import { makeShuffledDeck } from "./components/utils.js"; +import Container from "react-bootstrap/Container"; +import Row from "react-bootstrap/Row"; +import Col from "react-bootstrap/Col"; +import PlayingCard from "./components/PlayingCard"; class App extends React.Component { constructor(props) { // Always call super with props in constructor to initialise parent class super(props); this.state = { - // Set default value of card deck to new shuffled deck cardDeck: makeShuffledDeck(), - // currCards holds the cards from the current round - currCards: [], + p1Card: [], + p2Card: [], + p1Score: 0, + p2Score: 0, + p1Result: 0, + p2Result: 0, + gameState: `Press deal to begin ⬇️`, }; } dealCards = () => { - // this.state.cardDeck.pop() modifies this.state.cardDeck array - const newCurrCards = [this.state.cardDeck.pop(), this.state.cardDeck.pop()]; + if (this.state.cardDeck.length === 0) { + this.setState(this.checkGameEnd); + return; + } + + const p1Cards = [this.state.cardDeck.pop()]; + const p2Cards = [this.state.cardDeck.pop()]; + this.setState( + { + p1Card: p1Cards, + p2Card: p2Cards, + }, + this.cardCompare //run card compare after cards are dealt + ); + }; + + test = () => this.setState({ p1Score: this.state.p1Score + 1 }); + + cardCompare = () => { + const [card1] = this.state.p1Card; + const [card2] = this.state.p2Card; + const suitWeights = { + Spades: 4, + Hearts: 3, + Clubs: 2, + Diamonds: 1, + }; + + if (card1.rank > card2.rank) { + this.setState({ + p1Score: this.state.p1Score + 1, + gameState: "Player 1 Scores!", + }); + } else if (suitWeights[card1.suit] > suitWeights[card2.suit]) { + this.setState({ + p1Score: this.state.p1Score + 1, + gameState: "Player 1 Scores!", + }); + } else + this.setState({ + p2Score: this.state.p2Score + 1, + gameState: "Player 2 Scores!", + }); + }; + + checkGameEnd = () => { + if (this.state.p1Score > this.state.p2Score) { + this.setState({ + p1Result: this.state.p1Result + 1, + p1Score: 0, + p2Score: 0, + gameState: "Player 1 Wins!", + }); + } else { + this.setState({ + p1Score: this.state.p1Score + 1, + p1Score: 0, + p2Score: 0, + gameState: "Player 2 Wins!", + }); + } + this.setState({ cardDeck: makeShuffledDeck() }); + }; + + restartGame = () => { this.setState({ - currCards: newCurrCards, + cardDeck: makeShuffledDeck(), + currCards: [], + p1Score: 0, + p2Score: 0, + p1Result: 0, + p2Result: 0, + gameState: "Game Reset", }); }; render() { - // You can write JavaScript here, just don't try and set your state! + // const p1CardElems = this.state.p1Card.map(({ name, suit }) => ( + //
+ // {name} of {suit} + //
+ // )); + // const p2CardElems = this.state.p2Card.map(({ name, suit }) => ( + //
+ // {name} of {suit} + //
+ // )); - // You can access your current components state here, as indicated below - const currCardElems = this.state.currCards.map(({ name, suit }) => ( - // Give each list element a unique key -
- {name} of {suit} -
- )); + const [card1] = this.state.p1Card; + const [card2] = this.state.p2Card; + console.log(card1); + console.log(card2); return (
-

High Card 🚀

- {currCardElems} +

High Card Showdown 🥷🏻 vs 🤖

+

{this.state.gameState}

+ + + 🥷🏻 Games Won: + 🥷🏻 Game Score: + 🤖 Game Score: + 🤖 Games Won: + + + {this.state.p1Result} + {this.state.p1Score} + {this.state.p2Score} + {this.state.p2Result} + + + {/* + */}
+ + +

Remaining Cards:{this.state.cardDeck.length}

); diff --git a/src/components/GameLogic.js b/src/components/GameLogic.js new file mode 100644 index 0000000..75b83bb --- /dev/null +++ b/src/components/GameLogic.js @@ -0,0 +1,109 @@ +import { makeShuffledDeck } from "./utils.js"; + +class GameLogic { + constructor() { + this.state = { + cardDeck: makeShuffledDeck(), + p1Card: [], + p2Card: [], + p1Score: 0, + p2Score: 0, + p1Result: 0, + p2Result: 0, + }; + } + + cardCompare = () => { + const { currCards } = this.state; + const [card1, card2] = currCards; + + if (card1.rank > card2.rank) { + this.updatePlayerScore(1); + } else if (card1.rank < card2.rank) { + this.updatePlayerScore(2); + } else { + this.setState({ lastWinner: "Tie" }, this.checkGameEnd); + } + }; + + checkGameEnd = () => { + const { cardDeck } = this.state; + + if (cardDeck.length === 0) { + this.determineGameWinner(); + } + }; + + updatePlayerScore = (winner) => { + this.setState( + (prevState) => ({ + [winner === 1 ? "player1Score" : "player2Score"]: + prevState[winner === 1 ? "player1Score" : "player2Score"] + 1, + lastWinner: winner, + }), + this.checkGameEnd + ); // Check if the game has ended after updating the score + }; + + determineGameWinner = () => { + const { player1Score, player2Score, gameScores } = this.state; + let gameWinner = ""; + + if (player1Score > player2Score) { + gameWinner = "Player 1 Wins the Game!"; + this.setState({ gameScores: [...gameScores, 1] }); + } else if (player1Score < player2Score) { + gameWinner = "Player 2 Wins the Game!"; + this.setState({ gameScores: [...gameScores, 2] }); + } else { + gameWinner = "The Game is a Tie!"; + this.setState({ gameScores: [...gameScores, "Tie"] }); + } + console.log("gamewinner"); + this.setState({ gameWinner }); + }; + + restartGame = () => { + this.setState({ + cardDeck: makeShuffledDeck(), + currCards: [], + player1Score: 0, + player2Score: 0, + lastWinner: null, + gameWinner: null, + }); + }; + + getWinnerMessage = () => { + const { currCards, lastWinner } = this.state; + if (!currCards.length || currCards.length !== 2) { + return null; // No cards dealt or not a full round + } + + const [card1, card2] = currCards; + + switch (lastWinner) { + case 1: + return `${card1.name} of ${card1.suit} Wins! Player 1 Wins this round!`; + case 2: + return `${card2.name} of ${card2.suit} Wins! Player 2 Wins this round!`; + case "Tie": + return `Both ${card1.name} of ${card1.suit} and ${card2.name} of ${card2.suit} have the same rank! It's a Tie!`; + default: + return null; + } + }; + + getOverallScores = () => { + const { gameScores } = this.state; + const player1Wins = gameScores.filter((score) => score === 1).length; + const player2Wins = gameScores.filter((score) => score === 2).length; + const ties = gameScores.filter((score) => score === "Tie").length; + + return { + player1Wins, + player2Wins, + ties, + }; + }; +} diff --git a/src/components/PlayingCard.js b/src/components/PlayingCard.js new file mode 100644 index 0000000..7ec1eef --- /dev/null +++ b/src/components/PlayingCard.js @@ -0,0 +1,26 @@ +import React from "react"; + +export default class PlayingCard extends React.Component { + render() { + const suitEmojis = { + Spades: "♠️", + Hearts: "♥️", + Clubs: "♣️", + Diamonds: "♦️", + }; + + return ( +
+ {this.props.rank} + {suitEmojis[this.props.suit]} +
+ ); + } +} + +{ + /* {this.state.card({ + suit: this.props.suit, + rank: this.props.rank, + })} */ +} diff --git a/src/utils.js b/src/components/utils.js similarity index 100% rename from src/utils.js rename to src/components/utils.js From 94a8dd42a84666b87d1394272472443b96d117a3 Mon Sep 17 00:00:00 2001 From: gbrllim Date: Mon, 11 Sep 2023 22:03:14 +0800 Subject: [PATCH 2/4] Added card renders --- README.md | 17 +++++ src/App.css | 26 ++++++++ src/App.js | 47 +++++++------- src/components/GameLogic.js | 109 --------------------------------- src/components/PlayingCard.css | 29 +++++++++ src/components/PlayingCard.js | 19 +++--- 6 files changed, 105 insertions(+), 142 deletions(-) delete mode 100644 src/components/GameLogic.js create mode 100644 src/components/PlayingCard.css diff --git a/README.md b/README.md index 46f27e4..13b308f 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,20 @@ +## Built Features + +- Compare cards by both rank and suit +- Determine who has won each round & display message +- Keep Score during the game +- Keep Score of the number of games won +- Display message after winner is declared +- Reset game after winner is declared +- Ability to reset the game +- Display number of remaining cards in the deck +- Playing Card class component to render image of cards + +## Outstanding Features + +- Display last card played in a smaller render +- Highlight winning card when played + # Rocket Academy Coding Bootcamp: High Card https://bc.rocketacademy.co/1-frontend/1.e-exercises/1.e.3-high-card diff --git a/src/App.css b/src/App.css index 95db5e1..91a50d8 100644 --- a/src/App.css +++ b/src/App.css @@ -1,3 +1,7 @@ +* { + margin: 0; +} + :root { --primary-blue: #5fa9b4; --primary-teal: #b4d6c5; @@ -25,6 +29,10 @@ button { border-radius: 10px; width: 40vw; height: 10vw; + margin: 6px; + background-color: var(--primary-red); + color: var(--primary-white); + font-weight: 800; } .App { @@ -86,3 +94,21 @@ button { justify-content: center; color: var(--primary-white); } + +.card-row { + display: flex; + align-items: center; + justify-content: center; + margin: 15px; +} + +.card-element { + margin-left: 5%; + margin-right: 5%; +} + +p.char { + border-radius: 20px; + margin: 10px; + background-color: var(--primary-teal); +} diff --git a/src/App.js b/src/App.js index b384714..86cb42e 100644 --- a/src/App.js +++ b/src/App.js @@ -12,8 +12,8 @@ class App extends React.Component { super(props); this.state = { cardDeck: makeShuffledDeck(), - p1Card: [], - p2Card: [], + p1Card: [{ name: "", suit: "", rank: 0 }], + p2Card: [{ name: "", suit: "", rank: 0 }], p1Score: 0, p2Score: 0, p1Result: 0, @@ -54,17 +54,17 @@ class App extends React.Component { if (card1.rank > card2.rank) { this.setState({ p1Score: this.state.p1Score + 1, - gameState: "Player 1 Scores!", + gameState: "🥷🏻 Scores!", }); } else if (suitWeights[card1.suit] > suitWeights[card2.suit]) { this.setState({ p1Score: this.state.p1Score + 1, - gameState: "Player 1 Scores!", + gameState: "🥷🏻 Scores!", }); } else this.setState({ p2Score: this.state.p2Score + 1, - gameState: "Player 2 Scores!", + gameState: "🤖 Scores!", }); }; @@ -74,14 +74,14 @@ class App extends React.Component { p1Result: this.state.p1Result + 1, p1Score: 0, p2Score: 0, - gameState: "Player 1 Wins!", + gameState: "No more cards - 🥷🏻 Wins!", }); } else { this.setState({ p1Score: this.state.p1Score + 1, p1Score: 0, p2Score: 0, - gameState: "Player 2 Wins!", + gameState: "No more cards - 🤖 Wins!", }); } this.setState({ cardDeck: makeShuffledDeck() }); @@ -100,21 +100,11 @@ class App extends React.Component { }; render() { - // const p1CardElems = this.state.p1Card.map(({ name, suit }) => ( - //
- // {name} of {suit} - //
- // )); - // const p2CardElems = this.state.p2Card.map(({ name, suit }) => ( - //
- // {name} of {suit} - //
- // )); - const [card1] = this.state.p1Card; const [card2] = this.state.p2Card; - console.log(card1); - console.log(card2); + console.log(this.state.p1Card); //[{ name: "4", suit: "Clubs", rank: 4 }]; + console.log(card1); //{name: '4', suit: 'Clubs', rank: 4} + console.log(card1.rank); //4 return (
@@ -135,11 +125,20 @@ class App extends React.Component { {this.state.p2Result} - {/* - */} + + + + +

🥷🏻

+ + + +

🤖

+ + +
- - +

Remaining Cards:{this.state.cardDeck.length}

diff --git a/src/components/GameLogic.js b/src/components/GameLogic.js deleted file mode 100644 index 75b83bb..0000000 --- a/src/components/GameLogic.js +++ /dev/null @@ -1,109 +0,0 @@ -import { makeShuffledDeck } from "./utils.js"; - -class GameLogic { - constructor() { - this.state = { - cardDeck: makeShuffledDeck(), - p1Card: [], - p2Card: [], - p1Score: 0, - p2Score: 0, - p1Result: 0, - p2Result: 0, - }; - } - - cardCompare = () => { - const { currCards } = this.state; - const [card1, card2] = currCards; - - if (card1.rank > card2.rank) { - this.updatePlayerScore(1); - } else if (card1.rank < card2.rank) { - this.updatePlayerScore(2); - } else { - this.setState({ lastWinner: "Tie" }, this.checkGameEnd); - } - }; - - checkGameEnd = () => { - const { cardDeck } = this.state; - - if (cardDeck.length === 0) { - this.determineGameWinner(); - } - }; - - updatePlayerScore = (winner) => { - this.setState( - (prevState) => ({ - [winner === 1 ? "player1Score" : "player2Score"]: - prevState[winner === 1 ? "player1Score" : "player2Score"] + 1, - lastWinner: winner, - }), - this.checkGameEnd - ); // Check if the game has ended after updating the score - }; - - determineGameWinner = () => { - const { player1Score, player2Score, gameScores } = this.state; - let gameWinner = ""; - - if (player1Score > player2Score) { - gameWinner = "Player 1 Wins the Game!"; - this.setState({ gameScores: [...gameScores, 1] }); - } else if (player1Score < player2Score) { - gameWinner = "Player 2 Wins the Game!"; - this.setState({ gameScores: [...gameScores, 2] }); - } else { - gameWinner = "The Game is a Tie!"; - this.setState({ gameScores: [...gameScores, "Tie"] }); - } - console.log("gamewinner"); - this.setState({ gameWinner }); - }; - - restartGame = () => { - this.setState({ - cardDeck: makeShuffledDeck(), - currCards: [], - player1Score: 0, - player2Score: 0, - lastWinner: null, - gameWinner: null, - }); - }; - - getWinnerMessage = () => { - const { currCards, lastWinner } = this.state; - if (!currCards.length || currCards.length !== 2) { - return null; // No cards dealt or not a full round - } - - const [card1, card2] = currCards; - - switch (lastWinner) { - case 1: - return `${card1.name} of ${card1.suit} Wins! Player 1 Wins this round!`; - case 2: - return `${card2.name} of ${card2.suit} Wins! Player 2 Wins this round!`; - case "Tie": - return `Both ${card1.name} of ${card1.suit} and ${card2.name} of ${card2.suit} have the same rank! It's a Tie!`; - default: - return null; - } - }; - - getOverallScores = () => { - const { gameScores } = this.state; - const player1Wins = gameScores.filter((score) => score === 1).length; - const player2Wins = gameScores.filter((score) => score === 2).length; - const ties = gameScores.filter((score) => score === "Tie").length; - - return { - player1Wins, - player2Wins, - ties, - }; - }; -} diff --git a/src/components/PlayingCard.css b/src/components/PlayingCard.css new file mode 100644 index 0000000..0c24529 --- /dev/null +++ b/src/components/PlayingCard.css @@ -0,0 +1,29 @@ +:root { + --primary-blue: #5fa9b4; + --primary-teal: #b4d6c5; + --primary-red: #a8515d; + --primary-white: #fcecca; +} + +.playing-card { + background-color: white; + border-radius: 10%; + width: 30vw; + height: 40vw; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + margin: 0; + box-shadow: 0 0 7px 6px var(--primary-teal); +} + +.card-rank { + font-size: 28px; + margin: 0; +} + +.card-suit { + font-size: 28px; + margin: 10px; +} diff --git a/src/components/PlayingCard.js b/src/components/PlayingCard.js index 7ec1eef..b96b5b2 100644 --- a/src/components/PlayingCard.js +++ b/src/components/PlayingCard.js @@ -1,4 +1,5 @@ import React from "react"; +import "./PlayingCard.css"; export default class PlayingCard extends React.Component { render() { @@ -11,16 +12,16 @@ export default class PlayingCard extends React.Component { return (
- {this.props.rank} - {suitEmojis[this.props.suit]} +
+

{suitEmojis[this.props.suit]}

+
+
+

{this.props.name}

+
+
+

{suitEmojis[this.props.suit]}

+
); } } - -{ - /* {this.state.card({ - suit: this.props.suit, - rank: this.props.rank, - })} */ -} From 18e51e25a6b5b579a2df300c366c834a549fd425 Mon Sep 17 00:00:00 2001 From: gbrllim Date: Mon, 11 Sep 2023 22:56:08 +0800 Subject: [PATCH 3/4] github pages --- package-lock.json | 158 +++++++++++++++++++++++++--------------------- package.json | 6 +- 2 files changed, 91 insertions(+), 73 deletions(-) diff --git a/package-lock.json b/package-lock.json index aef72e2..e899186 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,11 +8,13 @@ "name": "high-card-bootcamp", "version": "0.1.0", "dependencies": { - "gh-pages": "^3.2.3", "react": "^18.1.0", "react-bootstrap": "^2.8.0", "react-dom": "^18.1.0", "react-scripts": "5.0.1" + }, + "devDependencies": { + "gh-pages": "^6.0.0" } }, "node_modules/@ampproject/remapping": { @@ -4235,6 +4237,7 @@ "version": "1.0.3", "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz", "integrity": "sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=", + "dev": true, "engines": { "node": ">=0.10.0" } @@ -6096,9 +6099,10 @@ "integrity": "sha512-oi3YPmaP87hiHn0c4ePB67tXaF+ldGhxvZnT19tW9zX6/Ej+pLN0Afja5rQ6S+TND7I9EuwQTT8JYn1k7R7rrw==" }, "node_modules/email-addresses": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/email-addresses/-/email-addresses-3.1.0.tgz", - "integrity": "sha512-k0/r7GrWVL32kZlGwfPNgB2Y/mMXVTq/decgLczm/j34whdaspNrZO8CnXPf1laaHxI6ptUlsnAxN+UAPw+fzg==" + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/email-addresses/-/email-addresses-5.0.0.tgz", + "integrity": "sha512-4OIPYlA6JXqtVn8zpHpGiI7vE6EQOAg16aGnDMIAlZVinnoZ8208tW1hAbjWydgN/4PLTT9q+O1K6AH/vALJGw==", + "dev": true }, "node_modules/emittery": { "version": "0.8.1", @@ -7227,6 +7231,7 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-2.0.0.tgz", "integrity": "sha1-q/c9+rc10EVECr/qLZHzieu/oik=", + "dev": true, "engines": { "node": ">=4" } @@ -7235,6 +7240,7 @@ "version": "4.3.0", "resolved": "https://registry.npmjs.org/filenamify/-/filenamify-4.3.0.tgz", "integrity": "sha512-hcFKyUG57yWGAzu1CMt/dPzYZuv+jAJUT85bL8mrXvNe6hWj6yEHEc4EdcgiA6Z3oi1/9wXJdZPXF2dZNgwgOg==", + "dev": true, "dependencies": { "filename-reserved-regex": "^2.0.0", "strip-outer": "^1.0.1", @@ -7683,16 +7689,17 @@ } }, "node_modules/gh-pages": { - "version": "3.2.3", - "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-3.2.3.tgz", - "integrity": "sha512-jA1PbapQ1jqzacECfjUaO9gV8uBgU6XNMV0oXLtfCX3haGLe5Atq8BxlrADhbD6/UdG9j6tZLWAkAybndOXTJg==", + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-6.0.0.tgz", + "integrity": "sha512-FXZWJRsvP/fK2HJGY+Di6FRNHvqFF6gOIELaopDjXXgjeOYSNURcuYwEO/6bwuq6koP5Lnkvnr5GViXzuOB89g==", + "dev": true, "dependencies": { - "async": "^2.6.1", - "commander": "^2.18.0", - "email-addresses": "^3.0.1", + "async": "^3.2.4", + "commander": "^11.0.0", + "email-addresses": "^5.0.0", "filenamify": "^4.3.0", "find-cache-dir": "^3.3.1", - "fs-extra": "^8.1.0", + "fs-extra": "^11.1.1", "globby": "^6.1.0" }, "bin": { @@ -7707,6 +7714,7 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz", "integrity": "sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=", + "dev": true, "dependencies": { "array-uniq": "^1.0.1" }, @@ -7714,28 +7722,40 @@ "node": ">=0.10.0" } }, + "node_modules/gh-pages/node_modules/async": { + "version": "3.2.4", + "resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz", + "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==", + "dev": true + }, "node_modules/gh-pages/node_modules/commander": { - "version": "2.20.3", - "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", - "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==" + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-11.0.0.tgz", + "integrity": "sha512-9HMlXtt/BNoYr8ooyjjNRdIilOTkVJXB+GhxMTtOKwk0R4j4lS4NpjuqmRxroBfnfTSHQIHQB7wryHhXarNjmQ==", + "dev": true, + "engines": { + "node": ">=16" + } }, "node_modules/gh-pages/node_modules/fs-extra": { - "version": "8.1.0", - "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz", - "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==", + "version": "11.1.1", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.1.tgz", + "integrity": "sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==", + "dev": true, "dependencies": { "graceful-fs": "^4.2.0", - "jsonfile": "^4.0.0", - "universalify": "^0.1.0" + "jsonfile": "^6.0.1", + "universalify": "^2.0.0" }, "engines": { - "node": ">=6 <7 || >=8" + "node": ">=14.14" } }, "node_modules/gh-pages/node_modules/globby": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz", "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=", + "dev": true, "dependencies": { "array-union": "^1.0.1", "glob": "^7.0.3", @@ -7747,22 +7767,6 @@ "node": ">=0.10.0" } }, - "node_modules/gh-pages/node_modules/jsonfile": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", - "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=", - "optionalDependencies": { - "graceful-fs": "^4.1.6" - } - }, - "node_modules/gh-pages/node_modules/universalify": { - "version": "0.1.2", - "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", - "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==", - "engines": { - "node": ">= 4.0.0" - } - }, "node_modules/glob": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.0.tgz", @@ -11737,6 +11741,7 @@ "version": "2.3.0", "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", + "dev": true, "engines": { "node": ">=0.10.0" } @@ -11745,6 +11750,7 @@ "version": "2.0.4", "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz", "integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA=", + "dev": true, "engines": { "node": ">=0.10.0" } @@ -11753,6 +11759,7 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz", "integrity": "sha1-ITXW36ejWMBprJsXh3YogihFD/o=", + "dev": true, "dependencies": { "pinkie": "^2.0.0" }, @@ -14576,6 +14583,7 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz", "integrity": "sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==", + "dev": true, "dependencies": { "escape-string-regexp": "^1.0.2" }, @@ -15051,6 +15059,7 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz", "integrity": "sha1-42RqLqTokTEr9+rObPsFOAvAHCE=", + "dev": true, "dependencies": { "escape-string-regexp": "^1.0.2" }, @@ -19246,7 +19255,8 @@ "array-uniq": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz", - "integrity": "sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=" + "integrity": "sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=", + "dev": true }, "array.prototype.flat": { "version": "1.3.0", @@ -20603,9 +20613,10 @@ "integrity": "sha512-oi3YPmaP87hiHn0c4ePB67tXaF+ldGhxvZnT19tW9zX6/Ej+pLN0Afja5rQ6S+TND7I9EuwQTT8JYn1k7R7rrw==" }, "email-addresses": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/email-addresses/-/email-addresses-3.1.0.tgz", - "integrity": "sha512-k0/r7GrWVL32kZlGwfPNgB2Y/mMXVTq/decgLczm/j34whdaspNrZO8CnXPf1laaHxI6ptUlsnAxN+UAPw+fzg==" + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/email-addresses/-/email-addresses-5.0.0.tgz", + "integrity": "sha512-4OIPYlA6JXqtVn8zpHpGiI7vE6EQOAg16aGnDMIAlZVinnoZ8208tW1hAbjWydgN/4PLTT9q+O1K6AH/vALJGw==", + "dev": true }, "emittery": { "version": "0.8.1", @@ -21439,12 +21450,14 @@ "filename-reserved-regex": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-2.0.0.tgz", - "integrity": "sha1-q/c9+rc10EVECr/qLZHzieu/oik=" + "integrity": "sha1-q/c9+rc10EVECr/qLZHzieu/oik=", + "dev": true }, "filenamify": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/filenamify/-/filenamify-4.3.0.tgz", "integrity": "sha512-hcFKyUG57yWGAzu1CMt/dPzYZuv+jAJUT85bL8mrXvNe6hWj6yEHEc4EdcgiA6Z3oi1/9wXJdZPXF2dZNgwgOg==", + "dev": true, "requires": { "filename-reserved-regex": "^2.0.0", "strip-outer": "^1.0.1", @@ -21745,16 +21758,17 @@ } }, "gh-pages": { - "version": "3.2.3", - "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-3.2.3.tgz", - "integrity": "sha512-jA1PbapQ1jqzacECfjUaO9gV8uBgU6XNMV0oXLtfCX3haGLe5Atq8BxlrADhbD6/UdG9j6tZLWAkAybndOXTJg==", + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-6.0.0.tgz", + "integrity": "sha512-FXZWJRsvP/fK2HJGY+Di6FRNHvqFF6gOIELaopDjXXgjeOYSNURcuYwEO/6bwuq6koP5Lnkvnr5GViXzuOB89g==", + "dev": true, "requires": { - "async": "^2.6.1", - "commander": "^2.18.0", - "email-addresses": "^3.0.1", + "async": "^3.2.4", + "commander": "^11.0.0", + "email-addresses": "^5.0.0", "filenamify": "^4.3.0", "find-cache-dir": "^3.3.1", - "fs-extra": "^8.1.0", + "fs-extra": "^11.1.1", "globby": "^6.1.0" }, "dependencies": { @@ -21762,29 +21776,39 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz", "integrity": "sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=", + "dev": true, "requires": { "array-uniq": "^1.0.1" } }, + "async": { + "version": "3.2.4", + "resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz", + "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==", + "dev": true + }, "commander": { - "version": "2.20.3", - "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", - "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==" + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-11.0.0.tgz", + "integrity": "sha512-9HMlXtt/BNoYr8ooyjjNRdIilOTkVJXB+GhxMTtOKwk0R4j4lS4NpjuqmRxroBfnfTSHQIHQB7wryHhXarNjmQ==", + "dev": true }, "fs-extra": { - "version": "8.1.0", - "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz", - "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==", + "version": "11.1.1", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.1.tgz", + "integrity": "sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==", + "dev": true, "requires": { "graceful-fs": "^4.2.0", - "jsonfile": "^4.0.0", - "universalify": "^0.1.0" + "jsonfile": "^6.0.1", + "universalify": "^2.0.0" } }, "globby": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz", "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=", + "dev": true, "requires": { "array-union": "^1.0.1", "glob": "^7.0.3", @@ -21792,19 +21816,6 @@ "pify": "^2.0.0", "pinkie-promise": "^2.0.0" } - }, - "jsonfile": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", - "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=", - "requires": { - "graceful-fs": "^4.1.6" - } - }, - "universalify": { - "version": "0.1.2", - "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", - "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==" } } }, @@ -24685,17 +24696,20 @@ "pify": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", - "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=" + "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", + "dev": true }, "pinkie": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz", - "integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA=" + "integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA=", + "dev": true }, "pinkie-promise": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz", "integrity": "sha1-ITXW36ejWMBprJsXh3YogihFD/o=", + "dev": true, "requires": { "pinkie": "^2.0.0" } @@ -26627,6 +26641,7 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz", "integrity": "sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==", + "dev": true, "requires": { "escape-string-regexp": "^1.0.2" } @@ -26981,6 +26996,7 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz", "integrity": "sha1-42RqLqTokTEr9+rObPsFOAvAHCE=", + "dev": true, "requires": { "escape-string-regexp": "^1.0.2" } diff --git a/package.json b/package.json index 09d7754..6cf528b 100644 --- a/package.json +++ b/package.json @@ -2,9 +2,8 @@ "name": "high-card-bootcamp", "version": "0.1.0", "private": true, - "homepage": "https://rocketacademy.github.io/high-card-bootcamp", + "homepage": "https://gbrllim.github.io/high-card-bootcamp/", "dependencies": { - "gh-pages": "^3.2.3", "react": "^18.1.0", "react-bootstrap": "^2.8.0", "react-dom": "^18.1.0", @@ -32,5 +31,8 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "gh-pages": "^6.0.0" } } From f3caf8aa3c194380b4447a1453f87cb84710fe9e Mon Sep 17 00:00:00 2001 From: gbrllim Date: Mon, 11 Sep 2023 23:21:42 +0800 Subject: [PATCH 4/4] updated css to fit window and phone sizes --- src/App.css | 9 +++++++-- src/App.js | 6 +----- src/components/PlayingCard.css | 2 ++ 3 files changed, 10 insertions(+), 7 deletions(-) diff --git a/src/App.css b/src/App.css index 91a50d8..ef2587f 100644 --- a/src/App.css +++ b/src/App.css @@ -16,6 +16,8 @@ h3 { margin-top: 10px; margin-bottom: 10px; padding: 20px 20px; + max-width: 18em; + padding: 0; } input { @@ -27,8 +29,8 @@ input { button { border-radius: 10px; - width: 40vw; - height: 10vw; + width: 12em; + height: 4em; margin: 6px; background-color: var(--primary-red); color: var(--primary-white); @@ -112,3 +114,6 @@ p.char { margin: 10px; background-color: var(--primary-teal); } +footer { + margin: 0.8em; +} diff --git a/src/App.js b/src/App.js index 86cb42e..772f6ba 100644 --- a/src/App.js +++ b/src/App.js @@ -102,9 +102,6 @@ class App extends React.Component { render() { const [card1] = this.state.p1Card; const [card2] = this.state.p2Card; - console.log(this.state.p1Card); //[{ name: "4", suit: "Clubs", rank: 4 }]; - console.log(card1); //{name: '4', suit: 'Clubs', rank: 4} - console.log(card1.rank); //4 return (
@@ -137,10 +134,9 @@ class App extends React.Component { -
-

Remaining Cards:{this.state.cardDeck.length}

+
); diff --git a/src/components/PlayingCard.css b/src/components/PlayingCard.css index 0c24529..dd38a84 100644 --- a/src/components/PlayingCard.css +++ b/src/components/PlayingCard.css @@ -9,7 +9,9 @@ background-color: white; border-radius: 10%; width: 30vw; + max-width: 8em; height: 40vw; + max-height: 11em; display: flex; align-items: center; justify-content: center;