diff --git a/package-lock.json b/package-lock.json
index f8b2902..509ecab 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,8 +8,10 @@
"name": "high-card-bootcamp",
"version": "0.1.0",
"dependencies": {
+ "bootstrap": "^5.3.2",
"gh-pages": "^3.2.3",
"react": "^18.1.0",
+ "react-bootstrap": "^2.9.0",
"react-dom": "^18.1.0",
"react-scripts": "5.0.1"
}
@@ -1765,11 +1767,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.23.2",
+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.2.tgz",
+ "integrity": "sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==",
"dependencies": {
- "regenerator-runtime": "^0.13.4"
+ "regenerator-runtime": "^0.14.0"
},
"engines": {
"node": ">=6.9.0"
@@ -1787,6 +1789,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 +2874,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 +3254,14 @@
"url": "https://github.com/sponsors/gregberge"
}
},
+ "node_modules/@swc/helpers": {
+ "version": "0.5.3",
+ "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.3.tgz",
+ "integrity": "sha512-FaruWX6KdudYloq1AHD/4nU+UsMTdNE8CKyrseXWEcgjDAbvkwJg2QGPAnfIJLIWsjZOSPLOAykK6fuYp4vp4A==",
+ "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 +3465,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.8",
+ "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.8.tgz",
+ "integrity": "sha512-kMpQpfZKSCBqltAJwskgePRaYRFukDkm1oItcAbC3gNELR20XIBcN9VRgg4+m8DKsTfkWeA4m4Imp4DDuWy7FQ=="
+ },
"node_modules/@types/q": {
"version": "1.5.5",
"resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz",
@@ -3403,6 +3485,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.28",
+ "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.28.tgz",
+ "integrity": "sha512-ad4aa/RaaJS3hyGz0BGegdnSRXQBkd1CCYDCdNjBPg90UUpLgo+WlJqb9fMYUxtehmzF3PJaTWqRZjko6BRzBg==",
+ "dependencies": {
+ "@types/prop-types": "*",
+ "@types/scheduler": "*",
+ "csstype": "^3.0.2"
+ }
+ },
+ "node_modules/@types/react-transition-group": {
+ "version": "4.4.7",
+ "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.7.tgz",
+ "integrity": "sha512-ICCyBl5mvyqYp8Qeq9B5G/fyBSRC0zx3XM3sCC6KkcMsNeAHqXBKkmat4GqdJET5jtYUpZXrxI5flve5qhi2Eg==",
+ "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 +3516,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.4",
+ "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.4.tgz",
+ "integrity": "sha512-2L9ifAGl7wmXwP4v3pN4p2FLhD0O1qsJpvKmNin5VA8+UvNVb447UDaAEV6UdrkA+m/Xs58U1RFps44x6TFsVQ=="
+ },
"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 +3556,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.1",
+ "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.1.tgz",
+ "integrity": "sha512-ywJmriP+nvjBKNBEMaNZgj2irZHoxcKeYcyMLbqhYKbDVn8yCIULy2Ol/tvIb37O3IBeZj3RU4tXqQTtGwoAMg=="
+ },
"node_modules/@types/ws": {
"version": "8.5.3",
"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",
@@ -4644,6 +4754,24 @@
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
},
+ "node_modules/bootstrap": {
+ "version": "5.3.2",
+ "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.2.tgz",
+ "integrity": "sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g==",
+ "funding": [
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/twbs"
+ },
+ {
+ "type": "opencollective",
+ "url": "https://opencollective.com/bootstrap"
+ }
+ ],
+ "peerDependencies": {
+ "@popperjs/core": "^2.11.8"
+ }
+ },
"node_modules/brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -4900,6 +5028,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 +5728,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 +5845,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 +5984,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 +8331,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 +13099,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 +13291,35 @@
"node": ">=14"
}
},
+ "node_modules/react-bootstrap": {
+ "version": "2.9.0",
+ "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.9.0.tgz",
+ "integrity": "sha512-dGh6fGjqR9MBzPOp2KbXJznt1Zy6SWepXYUdxMT18Zu/wJ73HCU8JNZe9dfzjmVssZYsJH9N3HHE4wAtQvNz7g==",
+ "dependencies": {
+ "@babel/runtime": "^7.22.5",
+ "@restart/hooks": "^0.4.9",
+ "@restart/ui": "^1.6.6",
+ "@types/react-transition-group": "^4.4.6",
+ "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 +13459,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 +13544,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 +15213,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 +15405,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 +17463,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.23.2",
+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.2.tgz",
+ "integrity": "sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==",
"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 +18236,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 +18475,14 @@
"loader-utils": "^2.0.0"
}
},
+ "@swc/helpers": {
+ "version": "0.5.3",
+ "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.3.tgz",
+ "integrity": "sha512-FaruWX6KdudYloq1AHD/4nU+UsMTdNE8CKyrseXWEcgjDAbvkwJg2QGPAnfIJLIWsjZOSPLOAykK6fuYp4vp4A==",
+ "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 +18680,11 @@
"resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.6.0.tgz",
"integrity": "sha512-G/AdOadiZhnJp0jXCaBQU449W2h716OW/EoXeYkCytxKL06X1WCXB4DZpp8TpZ8eyIJVS1cw4lrlkkSYU21cDw=="
},
+ "@types/prop-types": {
+ "version": "15.7.8",
+ "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.8.tgz",
+ "integrity": "sha512-kMpQpfZKSCBqltAJwskgePRaYRFukDkm1oItcAbC3gNELR20XIBcN9VRgg4+m8DKsTfkWeA4m4Imp4DDuWy7FQ=="
+ },
"@types/q": {
"version": "1.5.5",
"resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz",
@@ -18384,6 +18700,24 @@
"resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz",
"integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
},
+ "@types/react": {
+ "version": "18.2.28",
+ "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.28.tgz",
+ "integrity": "sha512-ad4aa/RaaJS3hyGz0BGegdnSRXQBkd1CCYDCdNjBPg90UUpLgo+WlJqb9fMYUxtehmzF3PJaTWqRZjko6BRzBg==",
+ "requires": {
+ "@types/prop-types": "*",
+ "@types/scheduler": "*",
+ "csstype": "^3.0.2"
+ }
+ },
+ "@types/react-transition-group": {
+ "version": "4.4.7",
+ "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.7.tgz",
+ "integrity": "sha512-ICCyBl5mvyqYp8Qeq9B5G/fyBSRC0zx3XM3sCC6KkcMsNeAHqXBKkmat4GqdJET5jtYUpZXrxI5flve5qhi2Eg==",
+ "requires": {
+ "@types/react": "*"
+ }
+ },
"@types/resolve": {
"version": "1.17.1",
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -18397,6 +18731,11 @@
"resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
"integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA=="
},
+ "@types/scheduler": {
+ "version": "0.16.4",
+ "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.4.tgz",
+ "integrity": "sha512-2L9ifAGl7wmXwP4v3pN4p2FLhD0O1qsJpvKmNin5VA8+UvNVb447UDaAEV6UdrkA+m/Xs58U1RFps44x6TFsVQ=="
+ },
"@types/serve-index": {
"version": "1.9.1",
"resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz",
@@ -18432,6 +18771,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.1",
+ "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.1.tgz",
+ "integrity": "sha512-ywJmriP+nvjBKNBEMaNZgj2irZHoxcKeYcyMLbqhYKbDVn8yCIULy2Ol/tvIb37O3IBeZj3RU4tXqQTtGwoAMg=="
+ },
"@types/ws": {
"version": "8.5.3",
"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",
@@ -19315,6 +19659,12 @@
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
},
+ "bootstrap": {
+ "version": "5.3.2",
+ "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.2.tgz",
+ "integrity": "sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g==",
+ "requires": {}
+ },
"brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -19491,6 +19841,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 +20337,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 +20422,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 +20528,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 +22231,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 +25549,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 +25682,25 @@
"whatwg-fetch": "^3.6.2"
}
},
+ "react-bootstrap": {
+ "version": "2.9.0",
+ "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.9.0.tgz",
+ "integrity": "sha512-dGh6fGjqR9MBzPOp2KbXJznt1Zy6SWepXYUdxMT18Zu/wJ73HCU8JNZe9dfzjmVssZYsJH9N3HHE4wAtQvNz7g==",
+ "requires": {
+ "@babel/runtime": "^7.22.5",
+ "@restart/hooks": "^0.4.9",
+ "@restart/ui": "^1.6.6",
+ "@types/react-transition-group": "^4.4.6",
+ "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 +25806,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 +25871,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 +27113,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 +27259,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..7d85436 100644
--- a/package.json
+++ b/package.json
@@ -4,8 +4,10 @@
"private": true,
"homepage": "https://rocketacademy.github.io/high-card-bootcamp",
"dependencies": {
+ "bootstrap": "^5.3.2",
"gh-pages": "^3.2.3",
"react": "^18.1.0",
+ "react-bootstrap": "^2.9.0",
"react-dom": "^18.1.0",
"react-scripts": "5.0.1"
},
diff --git a/src/App.css b/src/App.css
index 97b7c57..d6ec6c9 100644
--- a/src/App.css
+++ b/src/App.css
@@ -17,3 +17,15 @@
font-size: calc(10px + 2vmin);
color: white;
}
+
+.button-spacing {
+ margin: 30px;
+}
+
+h1 {
+ margin: 30px;
+}
+
+.spacing-please {
+ margin: 30px;
+}
diff --git a/src/App.js b/src/App.js
index 899cefc..fe4981d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,6 +2,12 @@ import React from "react";
import "./App.css";
import { makeShuffledDeck } from "./utils.js";
+import { Container, Row, Col } from "react-bootstrap";
+
+//
+
+// REFER TO IMPORT PNG IN REACT IN CHATGPT TO SOLVE IMAGES ISSUE
+
class App extends React.Component {
constructor(props) {
// Always call super with props in constructor to initialise parent class
@@ -11,15 +17,91 @@ class App extends React.Component {
cardDeck: makeShuffledDeck(),
// currCards holds the cards from the current round
currCards: [],
+ winner: null, // Add a winner state variable
+ player1Score: 0,
+ player2Score: 0,
+ draw: "",
};
+
+ // Define newCurrCards as a class property so it can be accessed outside dealCards()
+ this.newCurrCards = [];
+ this.player1 = {};
+ this.player2 = {};
}
+ resetGame = () => {
+ this.setState({
+ cardDeck: makeShuffledDeck(),
+ currCards: [],
+ winner: null,
+ player1Score: 0,
+ player2Score: 0,
+ draw: "",
+ });
+ };
+
dealCards = () => {
+ if (this.state.cardDeck.length < 2) {
+ // Check if there are enough cards in the deck
+ return;
+ }
+
// this.state.cardDeck.pop() modifies this.state.cardDeck array
- const newCurrCards = [this.state.cardDeck.pop(), this.state.cardDeck.pop()];
+ this.newCurrCards = [this.state.cardDeck.pop(), this.state.cardDeck.pop()];
this.setState({
- currCards: newCurrCards,
+ currCards: this.newCurrCards,
+ winner: null, // Resets the winner when dealing new cards
});
+
+ console.log(this.newCurrCards);
+ };
+
+ /////////////////////////////
+ // IMPORTANT! DETERMINES WINNER BASED ON PLAYERSCORE
+ whoWon = () => {
+ if (this.state.cardDeck.length < 2) {
+ return; // guard clause
+ }
+
+ /////////////
+ // Extract cards and determine winner
+ // extracts the two cards and saves the 2 objects into the class properties, player1 and player2
+ [this.player1, this.player2] = this.newCurrCards;
+
+ ////////////
+ // Comparing card ranks
+ let winner = null;
+ if (this.player1.rank > this.player2.rank) {
+ winner = this.player1; // player1 is declared as the winner
+
+ // Incrementing overall player1Score
+ this.setState((prevState) => ({
+ player1Score: prevState.player1Score + 1,
+ /** Breakdown of incrementing player1Score
+ 1. this.setState is a method provided by React to update state of a component.
+ When setState is called, React re-renders the component with the updated state and reflects it in rendered UI
+ 2. (prevState) => {...}: setState() usually takes a function as an argument, which will be called with the previous state (which is represented by prevState) as an argument.
+
+ This ensures we are working with the most up-to-date state
+
+ 3. player1Score: prevState.player1Score + 1 -> we then increment the player1Score property by 1 based on the previous state's value. This ensures only that part of the state is updated while the rest of the state is unchanged
+ */
+ }));
+ } else if (this.player1.rank < this.player2.rank) {
+ winner = this.player2;
+ // Incrementing overall player2Score
+ this.setState((prevState) => ({
+ player2Score: prevState.player2Score + 1,
+ }));
+ } else {
+ this.setState({
+ draw: "It's a draw!",
+ });
+ }
+
+ /////////////
+ // Update the winner state variable
+ this.setState({ winner }); // updates the component's state to indicate the winner of the current round.
};
render() {
@@ -33,15 +115,83 @@ class App extends React.Component {
));
+ console.log(this.state.winner);
+
return (
-
-
- High Card 🚀
- {currCardElems}
- Deal
-
-
+
+
+
);
}
}
diff --git a/src/AppOriginal.js b/src/AppOriginal.js
new file mode 100644
index 0000000..90db540
--- /dev/null
+++ b/src/AppOriginal.js
@@ -0,0 +1,171 @@
+import React from "react";
+import "./App.css";
+import { makeShuffledDeck } from "./utils.js";
+
+import { Container, Row, Col } from "react-bootstrap";
+//
+
+// REFER TO IMPORT PNG IN REACT IN CHATGPT TO SOLVE IMAGES ISSUE
+
+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: [],
+ winner: null, // Add a winner state variable
+ player1Score: 0,
+ player2Score: 0,
+ };
+
+ // Define newCurrCards as a class property so it can be accessed outside dealCards()
+ this.newCurrCards = [];
+ this.player1 = {};
+ this.player2 = {};
+ }
+
+ dealCards = () => {
+ if (this.state.cardDeck.length < 2) {
+ // Check if there are enough cards in the deck
+ return;
+ }
+
+ // this.state.cardDeck.pop() modifies this.state.cardDeck array
+ this.newCurrCards = [this.state.cardDeck.pop(), this.state.cardDeck.pop()];
+ this.setState({
+ currCards: this.newCurrCards,
+ winner: null, // Resets the winner when dealing new cards
+ });
+
+ console.log(this.newCurrCards);
+ };
+
+ /////////////////////////////
+ // IMPORTANT! DETERMINES WINNER BASED ON PLAYERSCORE
+ whoWon = () => {
+ if (this.state.cardDeck.length < 2) {
+ return; // guard clause
+ }
+
+ /////////////
+ // Extract cards and determine winner
+ // extracts the two cards and saves the 2 objects into the class properties, player1 and player2
+ [this.player1, this.player2] = this.newCurrCards;
+ console.log(
+ this.player1.suit.toLowerCase(),
+ this.player2.suit.toLowerCase()
+ );
+
+ ////////////
+ // Comparing card ranks
+ let winner = null;
+ if (this.player1.rank > this.player2.rank) {
+ winner = this.player1; // player1 is declared as the winner
+
+ // Incrementing overall player1Score
+ this.setState((prevState) => ({
+ player1Score: prevState.player1Score + 1,
+ /** Breakdown of incrementing player1Score
+ 1. this.setState is a method provided by React to update state of a component.
+ When setState is called, React re-renders the component with the updated state and reflects it in rendered UI
+ 2. (prevState) => {...}: setState takes a function as an argument, which is the previous state, prevState.
+ This ensures we are working with the most up-to-date state
+ 3. player1Score: prevState.player1Score + 1 -> we then increment the player1Score property by 1 based on the previous state's value. This ensures only that part of the state is updated while the rest of the state is unchanged
+ */
+ }));
+ } else if (this.player1.rank < this.player2.rank) {
+ winner = this.player2;
+ // Incrementing overall player2Score
+ this.setState((prevState) => ({
+ player2Score: prevState.player2Score + 1,
+ }));
+ }
+
+ /////////////
+ // Update the winner state variable
+ this.setState({ winner }); // updates the component's state to indicate the winner of the current round.
+ };
+
+ render() {
+ // You can write JavaScript here, just don't try and set your state!
+
+ // 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}
+
+ ));
+
+ //////////////////
+ // FIX THE IMAGES!
+ // if (this.player1.name && this.player1.suit) {
+ // var player1ImageSrc = `./PNG-cards-1.3/${
+ // this.player1.name
+ // }_of_${this.player1.suit.toLowerCase()}.png`;
+ // }
+
+ return (
+
+
+
+ );
+ }
+}
+
+export default App;
diff --git a/src/PNG-cards-1.3 copy/10_of_clubs.png b/src/PNG-cards-1.3 copy/10_of_clubs.png
new file mode 100644
index 0000000..18af741
Binary files /dev/null and b/src/PNG-cards-1.3 copy/10_of_clubs.png differ
diff --git a/src/PNG-cards-1.3 copy/10_of_diamonds.png b/src/PNG-cards-1.3 copy/10_of_diamonds.png
new file mode 100644
index 0000000..3bbc4e0
Binary files /dev/null and b/src/PNG-cards-1.3 copy/10_of_diamonds.png differ
diff --git a/src/PNG-cards-1.3 copy/10_of_hearts.png b/src/PNG-cards-1.3 copy/10_of_hearts.png
new file mode 100644
index 0000000..3eb83d7
Binary files /dev/null and b/src/PNG-cards-1.3 copy/10_of_hearts.png differ
diff --git a/src/PNG-cards-1.3 copy/10_of_spades.png b/src/PNG-cards-1.3 copy/10_of_spades.png
new file mode 100644
index 0000000..0b3d294
Binary files /dev/null and b/src/PNG-cards-1.3 copy/10_of_spades.png differ
diff --git a/src/PNG-cards-1.3 copy/2_of_clubs.png b/src/PNG-cards-1.3 copy/2_of_clubs.png
new file mode 100644
index 0000000..291ed97
Binary files /dev/null and b/src/PNG-cards-1.3 copy/2_of_clubs.png differ
diff --git a/src/PNG-cards-1.3 copy/2_of_diamonds.png b/src/PNG-cards-1.3 copy/2_of_diamonds.png
new file mode 100644
index 0000000..4deee7c
Binary files /dev/null and b/src/PNG-cards-1.3 copy/2_of_diamonds.png differ
diff --git a/src/PNG-cards-1.3 copy/2_of_hearts.png b/src/PNG-cards-1.3 copy/2_of_hearts.png
new file mode 100644
index 0000000..75a014f
Binary files /dev/null and b/src/PNG-cards-1.3 copy/2_of_hearts.png differ
diff --git a/src/PNG-cards-1.3 copy/2_of_spades.png b/src/PNG-cards-1.3 copy/2_of_spades.png
new file mode 100644
index 0000000..1ce0ffe
Binary files /dev/null and b/src/PNG-cards-1.3 copy/2_of_spades.png differ
diff --git a/src/PNG-cards-1.3 copy/3_of_clubs.png b/src/PNG-cards-1.3 copy/3_of_clubs.png
new file mode 100644
index 0000000..076ab31
Binary files /dev/null and b/src/PNG-cards-1.3 copy/3_of_clubs.png differ
diff --git a/src/PNG-cards-1.3 copy/3_of_diamonds.png b/src/PNG-cards-1.3 copy/3_of_diamonds.png
new file mode 100644
index 0000000..8ee0b4b
Binary files /dev/null and b/src/PNG-cards-1.3 copy/3_of_diamonds.png differ
diff --git a/src/PNG-cards-1.3 copy/3_of_hearts.png b/src/PNG-cards-1.3 copy/3_of_hearts.png
new file mode 100644
index 0000000..8e74673
Binary files /dev/null and b/src/PNG-cards-1.3 copy/3_of_hearts.png differ
diff --git a/src/PNG-cards-1.3 copy/3_of_spades.png b/src/PNG-cards-1.3 copy/3_of_spades.png
new file mode 100644
index 0000000..f9e06b4
Binary files /dev/null and b/src/PNG-cards-1.3 copy/3_of_spades.png differ
diff --git a/src/PNG-cards-1.3 copy/4_of_clubs.png b/src/PNG-cards-1.3 copy/4_of_clubs.png
new file mode 100644
index 0000000..8be9e08
Binary files /dev/null and b/src/PNG-cards-1.3 copy/4_of_clubs.png differ
diff --git a/src/PNG-cards-1.3 copy/4_of_diamonds.png b/src/PNG-cards-1.3 copy/4_of_diamonds.png
new file mode 100644
index 0000000..70e82e8
Binary files /dev/null and b/src/PNG-cards-1.3 copy/4_of_diamonds.png differ
diff --git a/src/PNG-cards-1.3 copy/4_of_hearts.png b/src/PNG-cards-1.3 copy/4_of_hearts.png
new file mode 100644
index 0000000..ceecbfe
Binary files /dev/null and b/src/PNG-cards-1.3 copy/4_of_hearts.png differ
diff --git a/src/PNG-cards-1.3 copy/4_of_spades.png b/src/PNG-cards-1.3 copy/4_of_spades.png
new file mode 100644
index 0000000..95abe3e
Binary files /dev/null and b/src/PNG-cards-1.3 copy/4_of_spades.png differ
diff --git a/src/PNG-cards-1.3 copy/5_of_clubs.png b/src/PNG-cards-1.3 copy/5_of_clubs.png
new file mode 100644
index 0000000..bde9777
Binary files /dev/null and b/src/PNG-cards-1.3 copy/5_of_clubs.png differ
diff --git a/src/PNG-cards-1.3 copy/5_of_diamonds.png b/src/PNG-cards-1.3 copy/5_of_diamonds.png
new file mode 100644
index 0000000..bb92525
Binary files /dev/null and b/src/PNG-cards-1.3 copy/5_of_diamonds.png differ
diff --git a/src/PNG-cards-1.3 copy/5_of_hearts.png b/src/PNG-cards-1.3 copy/5_of_hearts.png
new file mode 100644
index 0000000..d923456
Binary files /dev/null and b/src/PNG-cards-1.3 copy/5_of_hearts.png differ
diff --git a/src/PNG-cards-1.3 copy/5_of_spades.png b/src/PNG-cards-1.3 copy/5_of_spades.png
new file mode 100644
index 0000000..53a1aad
Binary files /dev/null and b/src/PNG-cards-1.3 copy/5_of_spades.png differ
diff --git a/src/PNG-cards-1.3 copy/6_of_clubs.png b/src/PNG-cards-1.3 copy/6_of_clubs.png
new file mode 100644
index 0000000..a9660a0
Binary files /dev/null and b/src/PNG-cards-1.3 copy/6_of_clubs.png differ
diff --git a/src/PNG-cards-1.3 copy/6_of_diamonds.png b/src/PNG-cards-1.3 copy/6_of_diamonds.png
new file mode 100644
index 0000000..78a80ad
Binary files /dev/null and b/src/PNG-cards-1.3 copy/6_of_diamonds.png differ
diff --git a/src/PNG-cards-1.3 copy/6_of_hearts.png b/src/PNG-cards-1.3 copy/6_of_hearts.png
new file mode 100644
index 0000000..361643e
Binary files /dev/null and b/src/PNG-cards-1.3 copy/6_of_hearts.png differ
diff --git a/src/PNG-cards-1.3 copy/6_of_spades.png b/src/PNG-cards-1.3 copy/6_of_spades.png
new file mode 100644
index 0000000..40242a7
Binary files /dev/null and b/src/PNG-cards-1.3 copy/6_of_spades.png differ
diff --git a/src/PNG-cards-1.3 copy/7_of_clubs.png b/src/PNG-cards-1.3 copy/7_of_clubs.png
new file mode 100644
index 0000000..9d6b545
Binary files /dev/null and b/src/PNG-cards-1.3 copy/7_of_clubs.png differ
diff --git a/src/PNG-cards-1.3 copy/7_of_diamonds.png b/src/PNG-cards-1.3 copy/7_of_diamonds.png
new file mode 100644
index 0000000..6ad5f15
Binary files /dev/null and b/src/PNG-cards-1.3 copy/7_of_diamonds.png differ
diff --git a/src/PNG-cards-1.3 copy/7_of_hearts.png b/src/PNG-cards-1.3 copy/7_of_hearts.png
new file mode 100644
index 0000000..19b89a2
Binary files /dev/null and b/src/PNG-cards-1.3 copy/7_of_hearts.png differ
diff --git a/src/PNG-cards-1.3 copy/7_of_spades.png b/src/PNG-cards-1.3 copy/7_of_spades.png
new file mode 100644
index 0000000..b9f1b93
Binary files /dev/null and b/src/PNG-cards-1.3 copy/7_of_spades.png differ
diff --git a/src/PNG-cards-1.3 copy/8_of_clubs.png b/src/PNG-cards-1.3 copy/8_of_clubs.png
new file mode 100644
index 0000000..cec743c
Binary files /dev/null and b/src/PNG-cards-1.3 copy/8_of_clubs.png differ
diff --git a/src/PNG-cards-1.3 copy/8_of_diamonds.png b/src/PNG-cards-1.3 copy/8_of_diamonds.png
new file mode 100644
index 0000000..ed12951
Binary files /dev/null and b/src/PNG-cards-1.3 copy/8_of_diamonds.png differ
diff --git a/src/PNG-cards-1.3 copy/8_of_hearts.png b/src/PNG-cards-1.3 copy/8_of_hearts.png
new file mode 100644
index 0000000..fb39723
Binary files /dev/null and b/src/PNG-cards-1.3 copy/8_of_hearts.png differ
diff --git a/src/PNG-cards-1.3 copy/8_of_spades.png b/src/PNG-cards-1.3 copy/8_of_spades.png
new file mode 100644
index 0000000..b6b3b38
Binary files /dev/null and b/src/PNG-cards-1.3 copy/8_of_spades.png differ
diff --git a/src/PNG-cards-1.3 copy/9_of_clubs.png b/src/PNG-cards-1.3 copy/9_of_clubs.png
new file mode 100644
index 0000000..2174db5
Binary files /dev/null and b/src/PNG-cards-1.3 copy/9_of_clubs.png differ
diff --git a/src/PNG-cards-1.3 copy/9_of_diamonds.png b/src/PNG-cards-1.3 copy/9_of_diamonds.png
new file mode 100644
index 0000000..0b933fb
Binary files /dev/null and b/src/PNG-cards-1.3 copy/9_of_diamonds.png differ
diff --git a/src/PNG-cards-1.3 copy/9_of_hearts.png b/src/PNG-cards-1.3 copy/9_of_hearts.png
new file mode 100644
index 0000000..7b196d6
Binary files /dev/null and b/src/PNG-cards-1.3 copy/9_of_hearts.png differ
diff --git a/src/PNG-cards-1.3 copy/9_of_spades.png b/src/PNG-cards-1.3 copy/9_of_spades.png
new file mode 100644
index 0000000..3c3b5ff
Binary files /dev/null and b/src/PNG-cards-1.3 copy/9_of_spades.png differ
diff --git a/src/PNG-cards-1.3 copy/ace_of_clubs.png b/src/PNG-cards-1.3 copy/ace_of_clubs.png
new file mode 100644
index 0000000..42bf5ec
Binary files /dev/null and b/src/PNG-cards-1.3 copy/ace_of_clubs.png differ
diff --git a/src/PNG-cards-1.3 copy/ace_of_diamonds.png b/src/PNG-cards-1.3 copy/ace_of_diamonds.png
new file mode 100644
index 0000000..79cd3b8
Binary files /dev/null and b/src/PNG-cards-1.3 copy/ace_of_diamonds.png differ
diff --git a/src/PNG-cards-1.3 copy/ace_of_hearts.png b/src/PNG-cards-1.3 copy/ace_of_hearts.png
new file mode 100644
index 0000000..b422124
Binary files /dev/null and b/src/PNG-cards-1.3 copy/ace_of_hearts.png differ
diff --git a/src/PNG-cards-1.3 copy/ace_of_spades.png b/src/PNG-cards-1.3 copy/ace_of_spades.png
new file mode 100644
index 0000000..103f56d
Binary files /dev/null and b/src/PNG-cards-1.3 copy/ace_of_spades.png differ
diff --git a/src/PNG-cards-1.3 copy/ace_of_spades2.png b/src/PNG-cards-1.3 copy/ace_of_spades2.png
new file mode 100644
index 0000000..fbc3a2d
Binary files /dev/null and b/src/PNG-cards-1.3 copy/ace_of_spades2.png differ
diff --git a/src/PNG-cards-1.3 copy/black_joker.png b/src/PNG-cards-1.3 copy/black_joker.png
new file mode 100644
index 0000000..000b640
Binary files /dev/null and b/src/PNG-cards-1.3 copy/black_joker.png differ
diff --git a/src/PNG-cards-1.3 copy/index1.js b/src/PNG-cards-1.3 copy/index1.js
new file mode 100644
index 0000000..07a489b
--- /dev/null
+++ b/src/PNG-cards-1.3 copy/index1.js
@@ -0,0 +1,3 @@
+import card_2_of_clubs from "./2_of_clubs.png";
+
+export { card_2_of_clubs };
diff --git a/src/PNG-cards-1.3 copy/jack_of_clubs.png b/src/PNG-cards-1.3 copy/jack_of_clubs.png
new file mode 100644
index 0000000..8bad610
Binary files /dev/null and b/src/PNG-cards-1.3 copy/jack_of_clubs.png differ
diff --git a/src/PNG-cards-1.3 copy/jack_of_clubs2.png b/src/PNG-cards-1.3 copy/jack_of_clubs2.png
new file mode 100644
index 0000000..5e003be
Binary files /dev/null and b/src/PNG-cards-1.3 copy/jack_of_clubs2.png differ
diff --git a/src/PNG-cards-1.3 copy/jack_of_diamonds.png b/src/PNG-cards-1.3 copy/jack_of_diamonds.png
new file mode 100644
index 0000000..0494785
Binary files /dev/null and b/src/PNG-cards-1.3 copy/jack_of_diamonds.png differ
diff --git a/src/PNG-cards-1.3 copy/jack_of_diamonds2.png b/src/PNG-cards-1.3 copy/jack_of_diamonds2.png
new file mode 100644
index 0000000..131a977
Binary files /dev/null and b/src/PNG-cards-1.3 copy/jack_of_diamonds2.png differ
diff --git a/src/PNG-cards-1.3 copy/jack_of_hearts.png b/src/PNG-cards-1.3 copy/jack_of_hearts.png
new file mode 100644
index 0000000..03cdfd4
Binary files /dev/null and b/src/PNG-cards-1.3 copy/jack_of_hearts.png differ
diff --git a/src/PNG-cards-1.3 copy/jack_of_hearts2.png b/src/PNG-cards-1.3 copy/jack_of_hearts2.png
new file mode 100644
index 0000000..bf342bc
Binary files /dev/null and b/src/PNG-cards-1.3 copy/jack_of_hearts2.png differ
diff --git a/src/PNG-cards-1.3 copy/jack_of_spades.png b/src/PNG-cards-1.3 copy/jack_of_spades.png
new file mode 100644
index 0000000..734e4b1
Binary files /dev/null and b/src/PNG-cards-1.3 copy/jack_of_spades.png differ
diff --git a/src/PNG-cards-1.3 copy/jack_of_spades2.png b/src/PNG-cards-1.3 copy/jack_of_spades2.png
new file mode 100644
index 0000000..f539c19
Binary files /dev/null and b/src/PNG-cards-1.3 copy/jack_of_spades2.png differ
diff --git a/src/PNG-cards-1.3 copy/king_of_clubs.png b/src/PNG-cards-1.3 copy/king_of_clubs.png
new file mode 100644
index 0000000..ebde974
Binary files /dev/null and b/src/PNG-cards-1.3 copy/king_of_clubs.png differ
diff --git a/src/PNG-cards-1.3 copy/king_of_clubs2.png b/src/PNG-cards-1.3 copy/king_of_clubs2.png
new file mode 100644
index 0000000..68e5774
Binary files /dev/null and b/src/PNG-cards-1.3 copy/king_of_clubs2.png differ
diff --git a/src/PNG-cards-1.3 copy/king_of_diamonds.png b/src/PNG-cards-1.3 copy/king_of_diamonds.png
new file mode 100644
index 0000000..4c9aaf2
Binary files /dev/null and b/src/PNG-cards-1.3 copy/king_of_diamonds.png differ
diff --git a/src/PNG-cards-1.3 copy/king_of_diamonds2.png b/src/PNG-cards-1.3 copy/king_of_diamonds2.png
new file mode 100644
index 0000000..e21d6a0
Binary files /dev/null and b/src/PNG-cards-1.3 copy/king_of_diamonds2.png differ
diff --git a/src/PNG-cards-1.3 copy/king_of_hearts.png b/src/PNG-cards-1.3 copy/king_of_hearts.png
new file mode 100644
index 0000000..27d235a
Binary files /dev/null and b/src/PNG-cards-1.3 copy/king_of_hearts.png differ
diff --git a/src/PNG-cards-1.3 copy/king_of_hearts2.png b/src/PNG-cards-1.3 copy/king_of_hearts2.png
new file mode 100644
index 0000000..1d3c468
Binary files /dev/null and b/src/PNG-cards-1.3 copy/king_of_hearts2.png differ
diff --git a/src/PNG-cards-1.3 copy/king_of_spades.png b/src/PNG-cards-1.3 copy/king_of_spades.png
new file mode 100644
index 0000000..b7abc52
Binary files /dev/null and b/src/PNG-cards-1.3 copy/king_of_spades.png differ
diff --git a/src/PNG-cards-1.3 copy/king_of_spades2.png b/src/PNG-cards-1.3 copy/king_of_spades2.png
new file mode 100644
index 0000000..2edbbc1
Binary files /dev/null and b/src/PNG-cards-1.3 copy/king_of_spades2.png differ
diff --git a/src/PNG-cards-1.3 copy/queen_of_clubs.png b/src/PNG-cards-1.3 copy/queen_of_clubs.png
new file mode 100644
index 0000000..949839c
Binary files /dev/null and b/src/PNG-cards-1.3 copy/queen_of_clubs.png differ
diff --git a/src/PNG-cards-1.3 copy/queen_of_clubs2.png b/src/PNG-cards-1.3 copy/queen_of_clubs2.png
new file mode 100644
index 0000000..7be5f9a
Binary files /dev/null and b/src/PNG-cards-1.3 copy/queen_of_clubs2.png differ
diff --git a/src/PNG-cards-1.3 copy/queen_of_diamonds.png b/src/PNG-cards-1.3 copy/queen_of_diamonds.png
new file mode 100644
index 0000000..791b273
Binary files /dev/null and b/src/PNG-cards-1.3 copy/queen_of_diamonds.png differ
diff --git a/src/PNG-cards-1.3 copy/queen_of_diamonds2.png b/src/PNG-cards-1.3 copy/queen_of_diamonds2.png
new file mode 100644
index 0000000..928f650
Binary files /dev/null and b/src/PNG-cards-1.3 copy/queen_of_diamonds2.png differ
diff --git a/src/PNG-cards-1.3 copy/queen_of_hearts.png b/src/PNG-cards-1.3 copy/queen_of_hearts.png
new file mode 100644
index 0000000..c95e2df
Binary files /dev/null and b/src/PNG-cards-1.3 copy/queen_of_hearts.png differ
diff --git a/src/PNG-cards-1.3 copy/queen_of_hearts2.png b/src/PNG-cards-1.3 copy/queen_of_hearts2.png
new file mode 100644
index 0000000..21839e6
Binary files /dev/null and b/src/PNG-cards-1.3 copy/queen_of_hearts2.png differ
diff --git a/src/PNG-cards-1.3 copy/queen_of_spades.png b/src/PNG-cards-1.3 copy/queen_of_spades.png
new file mode 100644
index 0000000..c6c69ca
Binary files /dev/null and b/src/PNG-cards-1.3 copy/queen_of_spades.png differ
diff --git a/src/PNG-cards-1.3 copy/queen_of_spades2.png b/src/PNG-cards-1.3 copy/queen_of_spades2.png
new file mode 100644
index 0000000..7983d03
Binary files /dev/null and b/src/PNG-cards-1.3 copy/queen_of_spades2.png differ
diff --git a/src/PNG-cards-1.3 copy/red_joker.png b/src/PNG-cards-1.3 copy/red_joker.png
new file mode 100644
index 0000000..55b3ef9
Binary files /dev/null and b/src/PNG-cards-1.3 copy/red_joker.png differ
diff --git a/src/index.css b/src/index.css
index 4a1df4d..f833e70 100644
--- a/src/index.css
+++ b/src/index.css
@@ -11,3 +11,17 @@ code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
+
+.border1 {
+ border: 1px solid whitesmoke;
+}
+
+.button-spacing {
+ margin-top: 10px;
+ margin-bottom: 10px;
+ background-color: aqua;
+ color: maroon;
+ font-weight: bold;
+ border-radius: 20px;
+ padding: 20px;
+}
diff --git a/src/index.js b/src/index.js
index 31508db..cec2044 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,6 +2,7 @@ import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
+import "bootstrap/dist/css/bootstrap.min.css";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
diff --git a/src/logoA.png b/src/logoA.png
new file mode 100644
index 0000000..b9f1b93
Binary files /dev/null and b/src/logoA.png differ
+ 
*/}
+