mirror of
https://github.com/Sendouc/sendou.ink.git
synced 2026-04-18 05:03:31 -05:00
build form modal visually done
This commit is contained in:
Sendou
parent
28c5681e0a
commit
68df199c13
235
frontend-react/package-lock.json
generated
235
frontend-react/package-lock.json
generated
|
|
@ -1455,15 +1455,14 @@
|
|||
"integrity": "sha512-a1USH7L3bEfDdPN4iNZGvMEFuBfkdG+QNybeyDv8RloVFgZYRoM+KGXyy2KOfEnTUM8QWDRSROwaL3+ts5Angg=="
|
||||
},
|
||||
"@reach/router": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@reach/router/-/router-1.2.1.tgz",
|
||||
"integrity": "sha512-kTaX08X4g27tzIFQGRukaHmNbtMYDS3LEWIS8+l6OayGIw6Oyo1HIF/JzeuR2FoF9z6oV+x/wJSVSq4v8tcUGQ==",
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@reach/router/-/router-1.3.0.tgz",
|
||||
"integrity": "sha512-LLuwmgR1vW+nHdvZfJjp/3Dk3xP0H+GkH6XQWWpYrYwLDnEArZ9TR9YTkWPTLN8Ua5ZAkaTSRqACvRqplMNA8w==",
|
||||
"requires": {
|
||||
"create-react-context": "^0.2.1",
|
||||
"create-react-context": "0.3.0",
|
||||
"invariant": "^2.2.3",
|
||||
"prop-types": "^15.6.1",
|
||||
"react-lifecycles-compat": "^3.0.4",
|
||||
"warning": "^3.0.0"
|
||||
"react-lifecycles-compat": "^3.0.4"
|
||||
}
|
||||
},
|
||||
"@reach/visually-hidden": {
|
||||
|
|
@ -1750,20 +1749,136 @@
|
|||
}
|
||||
},
|
||||
"@testing-library/jest-dom": {
|
||||
"version": "5.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.0.2.tgz",
|
||||
"integrity": "sha512-Pl3si4eH88+5wlVz6NjecLfeO7PjTbbgWKwVZXUtBfrGuJLjGdUUo+O92XRu/59wft8HAmwvXHeMWpqWTg2Uwg==",
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.1.1.tgz",
|
||||
"integrity": "sha512-7xnmBFcUmmUVAUhFiZ/u3CxFh1e46THAwra4SiiKNCW4By26RedCRwEk0rtleFPZG0wlTSNOKDvJjWYy93dp0w==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.5.1",
|
||||
"@babel/runtime": "^7.8.3",
|
||||
"@types/testing-library__jest-dom": "^5.0.0",
|
||||
"chalk": "^2.4.1",
|
||||
"css": "^2.2.3",
|
||||
"chalk": "^3.0.0",
|
||||
"css": "^2.2.4",
|
||||
"css.escape": "^1.5.1",
|
||||
"jest-diff": "^24.0.0",
|
||||
"jest-matcher-utils": "^24.0.0",
|
||||
"lodash": "^4.17.11",
|
||||
"pretty-format": "^24.0.0",
|
||||
"jest-diff": "^25.1.0",
|
||||
"jest-matcher-utils": "^25.1.0",
|
||||
"lodash": "^4.17.15",
|
||||
"pretty-format": "^25.1.0",
|
||||
"redent": "^3.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": {
|
||||
"version": "7.8.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.4.tgz",
|
||||
"integrity": "sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==",
|
||||
"requires": {
|
||||
"regenerator-runtime": "^0.13.2"
|
||||
}
|
||||
},
|
||||
"@jest/types": {
|
||||
"version": "25.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@jest/types/-/types-25.1.0.tgz",
|
||||
"integrity": "sha512-VpOtt7tCrgvamWZh1reVsGADujKigBUFTi19mlRjqEGsE8qH4r3s+skY33dNdXOwyZIvuftZ5tqdF1IgsMejMA==",
|
||||
"requires": {
|
||||
"@types/istanbul-lib-coverage": "^2.0.0",
|
||||
"@types/istanbul-reports": "^1.1.1",
|
||||
"@types/yargs": "^15.0.0",
|
||||
"chalk": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"@types/yargs": {
|
||||
"version": "15.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.3.tgz",
|
||||
"integrity": "sha512-XCMQRK6kfpNBixHLyHUsGmXrpEmFFxzMrcnSXFMziHd8CoNJo8l16FkHyQq4x+xbM7E2XL83/O78OD8u+iZTdQ==",
|
||||
"requires": {
|
||||
"@types/yargs-parser": "*"
|
||||
}
|
||||
},
|
||||
"ansi-styles": {
|
||||
"version": "4.2.1",
|
||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
|
||||
"integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
|
||||
"requires": {
|
||||
"@types/color-name": "^1.1.1",
|
||||
"color-convert": "^2.0.1"
|
||||
}
|
||||
},
|
||||
"chalk": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
|
||||
"integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
|
||||
"requires": {
|
||||
"ansi-styles": "^4.1.0",
|
||||
"supports-color": "^7.1.0"
|
||||
}
|
||||
},
|
||||
"color-convert": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
||||
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
|
||||
"requires": {
|
||||
"color-name": "~1.1.4"
|
||||
}
|
||||
},
|
||||
"color-name": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
|
||||
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
|
||||
},
|
||||
"diff-sequences": {
|
||||
"version": "25.1.0",
|
||||
"resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-25.1.0.tgz",
|
||||
"integrity": "sha512-nFIfVk5B/NStCsJ+zaPO4vYuLjlzQ6uFvPxzYyHlejNZ/UGa7G/n7peOXVrVNvRuyfstt+mZQYGpjxg9Z6N8Kw=="
|
||||
},
|
||||
"has-flag": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
|
||||
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
|
||||
},
|
||||
"jest-diff": {
|
||||
"version": "25.1.0",
|
||||
"resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-25.1.0.tgz",
|
||||
"integrity": "sha512-nepXgajT+h017APJTreSieh4zCqnSHEJ1iT8HDlewu630lSJ4Kjjr9KNzm+kzGwwcpsDE6Snx1GJGzzsefaEHw==",
|
||||
"requires": {
|
||||
"chalk": "^3.0.0",
|
||||
"diff-sequences": "^25.1.0",
|
||||
"jest-get-type": "^25.1.0",
|
||||
"pretty-format": "^25.1.0"
|
||||
}
|
||||
},
|
||||
"jest-get-type": {
|
||||
"version": "25.1.0",
|
||||
"resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-25.1.0.tgz",
|
||||
"integrity": "sha512-yWkBnT+5tMr8ANB6V+OjmrIJufHtCAqI5ic2H40v+tRqxDmE0PGnIiTyvRWFOMtmVHYpwRqyazDbTnhpjsGvLw=="
|
||||
},
|
||||
"jest-matcher-utils": {
|
||||
"version": "25.1.0",
|
||||
"resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-25.1.0.tgz",
|
||||
"integrity": "sha512-KGOAFcSFbclXIFE7bS4C53iYobKI20ZWleAdAFun4W1Wz1Kkej8Ng6RRbhL8leaEvIOjGXhGf/a1JjO8bkxIWQ==",
|
||||
"requires": {
|
||||
"chalk": "^3.0.0",
|
||||
"jest-diff": "^25.1.0",
|
||||
"jest-get-type": "^25.1.0",
|
||||
"pretty-format": "^25.1.0"
|
||||
}
|
||||
},
|
||||
"pretty-format": {
|
||||
"version": "25.1.0",
|
||||
"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-25.1.0.tgz",
|
||||
"integrity": "sha512-46zLRSGLd02Rp+Lhad9zzuNZ+swunitn8zIpfD2B4OPCRLXbM87RJT2aBLBWYOznNUML/2l/ReMyWNC80PJBUQ==",
|
||||
"requires": {
|
||||
"@jest/types": "^25.1.0",
|
||||
"ansi-regex": "^5.0.0",
|
||||
"ansi-styles": "^4.0.0",
|
||||
"react-is": "^16.12.0"
|
||||
}
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "7.1.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
|
||||
"integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
|
||||
"requires": {
|
||||
"has-flag": "^4.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@testing-library/react": {
|
||||
|
|
@ -1997,9 +2112,9 @@
|
|||
"integrity": "sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA=="
|
||||
},
|
||||
"@types/node": {
|
||||
"version": "13.5.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-13.5.3.tgz",
|
||||
"integrity": "sha512-ZPnWX9PW992w6DUsz3JIXHaSb5v7qmKCVzC3km6SxcDGxk7zmLfYaCJTbktIa5NeywJkkZDhGldKqDIvC5DRrA=="
|
||||
"version": "13.7.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-13.7.0.tgz",
|
||||
"integrity": "sha512-GnZbirvmqZUzMgkFn70c74OQpTTUcCzlhQliTzYjQMqg+hVKcDnxdL19Ne3UdYzdMA/+W3eb646FWn/ZaT1NfQ=="
|
||||
},
|
||||
"@types/parse-json": {
|
||||
"version": "4.0.0",
|
||||
|
|
@ -2090,9 +2205,9 @@
|
|||
}
|
||||
},
|
||||
"@types/testing-library__jest-dom": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.0.0.tgz",
|
||||
"integrity": "sha512-Pm+2mvqs9sND247oMVJbu3QmPUqMzBuJbY5uHHYQdl9MXq5hwWkTbesw1sPIky52Y0sHksWAZnVvGLbdyFSyrA==",
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.0.1.tgz",
|
||||
"integrity": "sha512-GiPXQBVF9O4DG9cssD2d266vozBJvC5Tnv6aeH5ujgYJgys1DYm9AFCz7YC+STR5ksGxq3zCt+yP8T1wbk2DFg==",
|
||||
"requires": {
|
||||
"@types/jest": "*"
|
||||
}
|
||||
|
|
@ -4183,12 +4298,12 @@
|
|||
}
|
||||
},
|
||||
"create-react-context": {
|
||||
"version": "0.2.3",
|
||||
"resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.3.tgz",
|
||||
"integrity": "sha512-CQBmD0+QGgTaxDL3OX1IDXYqjkp2It4RIbcb99jS6AEg27Ga+a9G3JtK6SIu0HBwPLZlmwt9F7UwWA4Bn92Rag==",
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.3.0.tgz",
|
||||
"integrity": "sha512-dNldIoSuNSvlTJ7slIKC/ZFGKexBMBrrcc+TTe1NdmROnaASuLPvqpwj9v4XS4uXZ8+YPu0sNmShX2rXI5LNsw==",
|
||||
"requires": {
|
||||
"fbjs": "^0.8.0",
|
||||
"gud": "^1.0.0"
|
||||
"gud": "^1.0.0",
|
||||
"warning": "^4.0.3"
|
||||
}
|
||||
},
|
||||
"cross-spawn": {
|
||||
|
|
@ -4966,14 +5081,6 @@
|
|||
"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
|
||||
"integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
|
||||
},
|
||||
"encoding": {
|
||||
"version": "0.1.12",
|
||||
"resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
|
||||
"integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
|
||||
"requires": {
|
||||
"iconv-lite": "~0.4.13"
|
||||
}
|
||||
},
|
||||
"end-of-stream": {
|
||||
"version": "1.4.4",
|
||||
"resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
|
||||
|
|
@ -5957,35 +6064,6 @@
|
|||
"bser": "2.1.1"
|
||||
}
|
||||
},
|
||||
"fbjs": {
|
||||
"version": "0.8.17",
|
||||
"resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz",
|
||||
"integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=",
|
||||
"requires": {
|
||||
"core-js": "^1.0.0",
|
||||
"isomorphic-fetch": "^2.1.1",
|
||||
"loose-envify": "^1.0.0",
|
||||
"object-assign": "^4.1.0",
|
||||
"promise": "^7.1.1",
|
||||
"setimmediate": "^1.0.5",
|
||||
"ua-parser-js": "^0.7.18"
|
||||
},
|
||||
"dependencies": {
|
||||
"core-js": {
|
||||
"version": "1.2.7",
|
||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
|
||||
"integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
|
||||
},
|
||||
"promise": {
|
||||
"version": "7.3.1",
|
||||
"resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
|
||||
"integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
|
||||
"requires": {
|
||||
"asap": "~2.0.3"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"figgy-pudding": {
|
||||
"version": "3.5.1",
|
||||
"resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.1.tgz",
|
||||
|
|
@ -7288,15 +7366,6 @@
|
|||
"resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
|
||||
"integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
|
||||
},
|
||||
"isomorphic-fetch": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
|
||||
"integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
|
||||
"requires": {
|
||||
"node-fetch": "^1.0.1",
|
||||
"whatwg-fetch": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"isstream": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
|
||||
|
|
@ -9233,15 +9302,6 @@
|
|||
"lower-case": "^1.1.1"
|
||||
}
|
||||
},
|
||||
"node-fetch": {
|
||||
"version": "1.7.3",
|
||||
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
|
||||
"integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
|
||||
"requires": {
|
||||
"encoding": "^0.1.11",
|
||||
"is-stream": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"node-forge": {
|
||||
"version": "0.9.0",
|
||||
"resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.9.0.tgz",
|
||||
|
|
@ -13471,11 +13531,6 @@
|
|||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-3.7.5.tgz",
|
||||
"integrity": "sha512-/P5lkRXkWHNAbcJIiHPfRoKqyd7bsyCma1hZNUGfn20qm64T6ZBlrzprymeu918H+mB/0rIg2gGK/BXkhhYgBw=="
|
||||
},
|
||||
"ua-parser-js": {
|
||||
"version": "0.7.21",
|
||||
"resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.21.tgz",
|
||||
"integrity": "sha512-+O8/qh/Qj8CgC6eYBVBykMrNtp5Gebn4dlGD/kKXVkJNDwyrAwSIqwz8CDf+tsAIWVycKcku6gIXJ0qwx/ZXaQ=="
|
||||
},
|
||||
"unicode-canonical-property-names-ecmascript": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
|
||||
|
|
@ -13799,9 +13854,9 @@
|
|||
}
|
||||
},
|
||||
"warning": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
|
||||
"integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
|
||||
"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"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,13 +7,13 @@
|
|||
"@chakra-ui/core": "^0.5.2",
|
||||
"@emotion/core": "^10.0.27",
|
||||
"@emotion/styled": "^10.0.27",
|
||||
"@reach/router": "^1.2.1",
|
||||
"@reach/router": "^1.3.0",
|
||||
"@sendou/react-sketch": "^0.5.2",
|
||||
"@testing-library/jest-dom": "^5.0.2",
|
||||
"@testing-library/jest-dom": "^5.1.1",
|
||||
"@testing-library/react": "^9.4.0",
|
||||
"@testing-library/user-event": "^8.1.0",
|
||||
"@types/jest": "^25.1.1",
|
||||
"@types/node": "^13.5.3",
|
||||
"@types/node": "^13.7.0",
|
||||
"@types/reach__router": "^1.2.6",
|
||||
"@types/react": "^16.9.19",
|
||||
"@types/react-dom": "^16.9.5",
|
||||
|
|
|
|||
|
|
@ -18,14 +18,6 @@ const AbilitySelector: React.FC<AbilitySelectorProps> = ({
|
|||
const [show, setShow] = useState(false)
|
||||
return show ? (
|
||||
<>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setShow(!show)
|
||||
setAbilities([])
|
||||
}}
|
||||
>
|
||||
Hide ability filter
|
||||
</Button>
|
||||
<FieldsetWithLegend
|
||||
title="Click an ability to filter by it"
|
||||
titleFontSize="md"
|
||||
|
|
|
|||
|
|
@ -5,9 +5,10 @@ import Box from "../elements/Box"
|
|||
|
||||
interface ViewSlotsProps {
|
||||
build: Partial<Build>
|
||||
onAbilityClick?: (gear: "HEAD" | "CLOTHING" | "SHOES", index: number) => void
|
||||
}
|
||||
|
||||
const ViewSlots: React.FC<ViewSlotsProps> = ({ build }) => {
|
||||
const ViewSlots: React.FC<ViewSlotsProps> = ({ build, onAbilityClick }) => {
|
||||
return (
|
||||
<>
|
||||
<Box asFlex alignItems="center" justifyContent="center">
|
||||
|
|
@ -15,7 +16,14 @@ const ViewSlots: React.FC<ViewSlotsProps> = ({ build }) => {
|
|||
build.headgear ??
|
||||
(["UNKNOWN", "UNKNOWN", "UNKNOWN", "UNKNOWN"] as Ability[])
|
||||
).map((ability, index) => (
|
||||
<Box mx="3px" key={index}>
|
||||
<Box
|
||||
mx="3px"
|
||||
key={index}
|
||||
onClick={
|
||||
onAbilityClick ? () => onAbilityClick("HEAD", index) : undefined
|
||||
}
|
||||
cursor={onAbilityClick ? "pointer" : undefined}
|
||||
>
|
||||
<AbilityIcon
|
||||
key={index}
|
||||
ability={ability}
|
||||
|
|
@ -29,7 +37,16 @@ const ViewSlots: React.FC<ViewSlotsProps> = ({ build }) => {
|
|||
build.clothing ??
|
||||
(["UNKNOWN", "UNKNOWN", "UNKNOWN", "UNKNOWN"] as Ability[])
|
||||
).map((ability, index) => (
|
||||
<Box mx="3px" key={index}>
|
||||
<Box
|
||||
mx="3px"
|
||||
key={index}
|
||||
onClick={
|
||||
onAbilityClick
|
||||
? () => onAbilityClick("CLOTHING", index)
|
||||
: undefined
|
||||
}
|
||||
cursor={onAbilityClick ? "pointer" : undefined}
|
||||
>
|
||||
<AbilityIcon
|
||||
key={index}
|
||||
ability={ability}
|
||||
|
|
@ -43,7 +60,14 @@ const ViewSlots: React.FC<ViewSlotsProps> = ({ build }) => {
|
|||
build.shoes ??
|
||||
(["UNKNOWN", "UNKNOWN", "UNKNOWN", "UNKNOWN"] as Ability[])
|
||||
).map((ability, index) => (
|
||||
<Box mx="3px" key={index}>
|
||||
<Box
|
||||
mx="3px"
|
||||
key={index}
|
||||
onClick={
|
||||
onAbilityClick ? () => onAbilityClick("SHOES", index) : undefined
|
||||
}
|
||||
cursor={onAbilityClick ? "pointer" : undefined}
|
||||
>
|
||||
<AbilityIcon
|
||||
key={index}
|
||||
ability={ability}
|
||||
|
|
|
|||
22
frontend-react/src/components/elements/IconButton.tsx
Normal file
22
frontend-react/src/components/elements/IconButton.tsx
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import React from "react"
|
||||
import { IconButton as ChakraIconButton } from "@chakra-ui/core"
|
||||
import { IconType } from "react-icons/lib/cjs"
|
||||
|
||||
interface IconButtonProps {
|
||||
icon: IconType
|
||||
onClick: () => void
|
||||
}
|
||||
|
||||
const IconButton: React.FC<IconButtonProps> = ({ icon, onClick }) => {
|
||||
return (
|
||||
<ChakraIconButton
|
||||
aria-label=""
|
||||
icon={icon}
|
||||
variant="ghost"
|
||||
onClick={onClick}
|
||||
size="lg"
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export default IconButton
|
||||
|
|
@ -7,7 +7,6 @@ import Box from "./Box"
|
|||
interface InputProps {
|
||||
value?: string
|
||||
setValue: (value: string) => void
|
||||
placeholder: string
|
||||
label: string
|
||||
limit?: number
|
||||
required?: boolean
|
||||
|
|
|
|||
|
|
@ -2,15 +2,28 @@ import React, { useContext } from "react"
|
|||
import Box from "./Box"
|
||||
import MyThemeContext from "../../themeContext"
|
||||
import useBreakPoints from "../../hooks/useBreakPoints"
|
||||
import Button from "./Button"
|
||||
import IconButton from "./IconButton"
|
||||
import { MdClose } from "react-icons/md"
|
||||
import { useEffect } from "react"
|
||||
|
||||
interface ModalProps {
|
||||
title: string
|
||||
closeModal?: () => void
|
||||
}
|
||||
|
||||
const Modal: React.FC<ModalProps> = ({ children, title }) => {
|
||||
const Modal: React.FC<ModalProps> = ({ children, title, closeModal }) => {
|
||||
const { darkerBgColor } = useContext(MyThemeContext)
|
||||
const isSmall = useBreakPoints(768)
|
||||
|
||||
useEffect(() => {
|
||||
document.body.style.overflow = "hidden"
|
||||
|
||||
return () => {
|
||||
document.body.style.overflow = "visible"
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<Box
|
||||
position="fixed"
|
||||
|
|
@ -24,7 +37,7 @@ const Modal: React.FC<ModalProps> = ({ children, title }) => {
|
|||
>
|
||||
<Box
|
||||
bg={darkerBgColor}
|
||||
margin="5% auto"
|
||||
margin="2% auto"
|
||||
padding="20px"
|
||||
border="1px solid #888"
|
||||
borderRadius="5px"
|
||||
|
|
@ -32,8 +45,17 @@ const Modal: React.FC<ModalProps> = ({ children, title }) => {
|
|||
maxWidth="1100px"
|
||||
>
|
||||
<>
|
||||
<Box fontSize="24px" fontWeight="black" mb="1.5em">
|
||||
<Box
|
||||
asFlex
|
||||
justifyContent="space-between"
|
||||
fontSize="24px"
|
||||
fontWeight="black"
|
||||
mb="1.5em"
|
||||
>
|
||||
{title}
|
||||
{closeModal && (
|
||||
<IconButton icon={MdClose} onClick={() => closeModal()} />
|
||||
)}
|
||||
</Box>
|
||||
{children}
|
||||
</>
|
||||
|
|
|
|||
48
frontend-react/src/components/elements/TextArea.tsx
Normal file
48
frontend-react/src/components/elements/TextArea.tsx
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
import React, { useContext } from "react"
|
||||
import { Textarea } from "@chakra-ui/core"
|
||||
import Label from "./Label"
|
||||
import Box from "./Box"
|
||||
import MyThemeContext from "../../themeContext"
|
||||
|
||||
interface TextAreaProps {
|
||||
value?: string
|
||||
setValue: (value: string) => void
|
||||
label: string
|
||||
limit?: number
|
||||
required?: boolean
|
||||
}
|
||||
|
||||
const TextArea: React.FC<TextAreaProps> = ({
|
||||
value,
|
||||
setValue,
|
||||
label,
|
||||
limit,
|
||||
required,
|
||||
}) => {
|
||||
const { themeColorHex, grayWithShade } = useContext(MyThemeContext)
|
||||
|
||||
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) =>
|
||||
setValue(event.target.value)
|
||||
|
||||
return (
|
||||
<>
|
||||
{label && <Label required={required}>{label}</Label>}
|
||||
<Textarea
|
||||
value={value ?? ""}
|
||||
onChange={handleChange}
|
||||
focusBorderColor={themeColorHex}
|
||||
size="md"
|
||||
/>
|
||||
{limit && (
|
||||
<Box
|
||||
as="span"
|
||||
color={(value ?? "").length > limit ? "red.500" : grayWithShade}
|
||||
>
|
||||
{(value ?? "").length}/{limit}
|
||||
</Box>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default TextArea
|
||||
|
|
@ -26,7 +26,6 @@ const App: React.FC = () => {
|
|||
light: {
|
||||
colorMode: "light",
|
||||
bgColor: "#eff0f3",
|
||||
//darkerBgColor: "#D6D7DA", FFF0F5
|
||||
darkerBgColor: "#FFFAFA",
|
||||
textColor: "#0d0d0d",
|
||||
borderStyle: "1px solid rgba(0, 0, 0, .2)",
|
||||
|
|
@ -69,7 +68,14 @@ const App: React.FC = () => {
|
|||
>
|
||||
<SideNav />
|
||||
<MenuBar />
|
||||
<Box maxWidth="1100px" pt={8} px={8} ml="auto" mr="auto">
|
||||
<Box
|
||||
maxWidth="1100px"
|
||||
pt={8}
|
||||
px={8}
|
||||
ml="auto"
|
||||
mr="auto"
|
||||
overflow="hidden"
|
||||
>
|
||||
<Box minH="calc(100vh - 210px)">
|
||||
<Routes />
|
||||
</Box>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ const AbilityButtons: React.FC<AbilityButtonsProps> = ({ onClick }) => {
|
|||
return (
|
||||
<>
|
||||
<Box my="1em" textAlign="center">
|
||||
<Label>Main abilities (click to select)</Label>
|
||||
<Label>Main only abilities (click to select)</Label>
|
||||
</Box>
|
||||
<Box
|
||||
asFlex
|
||||
|
|
@ -36,7 +36,7 @@ const AbilityButtons: React.FC<AbilityButtonsProps> = ({ onClick }) => {
|
|||
))}
|
||||
</Box>
|
||||
<Box my="1em" textAlign="center">
|
||||
<Label>Sub abilities</Label>
|
||||
<Label>Stackable abilities</Label>
|
||||
</Box>
|
||||
<Box
|
||||
asFlex
|
||||
|
|
|
|||
|
|
@ -29,9 +29,12 @@ import GearImage from "../builds/GearImage"
|
|||
import Input from "../elements/Input"
|
||||
import ViewSlots from "../builds/ViewSlots"
|
||||
import AbilityButtons from "./AbilityButtons"
|
||||
import TextArea from "../elements/TextArea"
|
||||
import Button from "../elements/Button"
|
||||
|
||||
interface BuildFormModalProps {
|
||||
existingGear: ExistingGearObject
|
||||
closeModal: () => void
|
||||
}
|
||||
|
||||
type ExistingGearObject = Record<
|
||||
|
|
@ -39,7 +42,10 @@ type ExistingGearObject = Record<
|
|||
Ability[]
|
||||
>
|
||||
|
||||
const BuildFormModal: React.FC<BuildFormModalProps> = ({ existingGear }) => {
|
||||
const BuildFormModal: React.FC<BuildFormModalProps> = ({
|
||||
existingGear,
|
||||
closeModal,
|
||||
}) => {
|
||||
const [build, setBuild] = useState<Partial<Build>>({
|
||||
headgear: ["UNKNOWN", "UNKNOWN", "UNKNOWN", "UNKNOWN"],
|
||||
clothing: ["UNKNOWN", "UNKNOWN", "UNKNOWN", "UNKNOWN"],
|
||||
|
|
@ -48,7 +54,7 @@ const BuildFormModal: React.FC<BuildFormModalProps> = ({ existingGear }) => {
|
|||
|
||||
const handleChange = (value: Object) => setBuild({ ...build, ...value })
|
||||
|
||||
const handleAbilityClick = (ability: Ability) => {
|
||||
const handleAbilityButtonClick = (ability: Ability) => {
|
||||
if (headOnlyAbilities.indexOf(ability as any) !== -1) {
|
||||
if (build.headgear![0] === "UNKNOWN") {
|
||||
handleChange({
|
||||
|
|
@ -109,8 +115,33 @@ const BuildFormModal: React.FC<BuildFormModalProps> = ({ existingGear }) => {
|
|||
}
|
||||
}
|
||||
|
||||
const handleClickBuildAbility = (
|
||||
slot: "HEAD" | "CLOTHING" | "SHOES",
|
||||
index: number
|
||||
) => {
|
||||
if (slot === "HEAD") {
|
||||
const copy = build.headgear!.slice()
|
||||
copy[index] = "UNKNOWN"
|
||||
handleChange({
|
||||
headgear: copy,
|
||||
})
|
||||
} else if (slot === "CLOTHING") {
|
||||
const copy = build.clothing!.slice()
|
||||
copy[index] = "UNKNOWN"
|
||||
handleChange({
|
||||
clothing: copy,
|
||||
})
|
||||
} else {
|
||||
const copy = build.shoes!.slice()
|
||||
copy[index] = "UNKNOWN"
|
||||
handleChange({
|
||||
shoes: copy,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal title="Adding a new build">
|
||||
<Modal title="Adding a new build" closeModal={() => closeModal()}>
|
||||
<WeaponSelector
|
||||
required
|
||||
label="Weapon"
|
||||
|
|
@ -203,16 +234,33 @@ const BuildFormModal: React.FC<BuildFormModalProps> = ({ existingGear }) => {
|
|||
<Input
|
||||
value={build.title}
|
||||
setValue={(value: string) => handleChange({ title: value })}
|
||||
placeholder="Title"
|
||||
label="Title"
|
||||
limit={100}
|
||||
/>
|
||||
</Box>
|
||||
<Box mt="1em">
|
||||
<ViewSlots build={build} />
|
||||
<ViewSlots build={build} onAbilityClick={handleClickBuildAbility} />
|
||||
</Box>
|
||||
<Box mt="1em">
|
||||
<AbilityButtons onClick={ability => handleAbilityClick(ability)} />
|
||||
<AbilityButtons
|
||||
onClick={ability => handleAbilityButtonClick(ability)}
|
||||
/>
|
||||
</Box>
|
||||
<Box mt="1em">
|
||||
<TextArea
|
||||
value={build.description}
|
||||
setValue={(value: string) => handleChange({ description: value })}
|
||||
label="Description"
|
||||
limit={1000}
|
||||
/>
|
||||
</Box>
|
||||
<Box mt="1em">
|
||||
<Button onClick={() => console.log("submitting")}>Submit</Button>
|
||||
<Box as="span" ml="0.5em">
|
||||
<Button outlined onClick={() => closeModal()}>
|
||||
Cancel
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Modal>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ const buildsReducer = (acc: ExistingGearObject, cur: Build) => {
|
|||
|
||||
const BuildTab: React.FC<BuildTabProps> = ({ builds, canModifyBuilds }) => {
|
||||
const [APView] = useLocalStorage<boolean>("prefersAPView")
|
||||
const [formOpen, setFormOpen] = useState(true)
|
||||
const [formOpen, setFormOpen] = useState(false)
|
||||
|
||||
const existingGear = builds
|
||||
? builds.reduce(buildsReducer, {} as ExistingGearObject)
|
||||
|
|
@ -42,7 +42,12 @@ const BuildTab: React.FC<BuildTabProps> = ({ builds, canModifyBuilds }) => {
|
|||
|
||||
return (
|
||||
<>
|
||||
{formOpen && <BuildFormModal existingGear={existingGear} />}
|
||||
{formOpen && (
|
||||
<BuildFormModal
|
||||
existingGear={existingGear}
|
||||
closeModal={() => setFormOpen(false)}
|
||||
/>
|
||||
)}
|
||||
{canModifyBuilds && builds.length < 100 && (
|
||||
<Button onClick={() => setFormOpen(true)}>Add build</Button>
|
||||
)}
|
||||
|
|
|
|||
6
package-lock.json
generated
6
package-lock.json
generated
|
|
@ -1656,9 +1656,9 @@
|
|||
}
|
||||
},
|
||||
"mongoose": {
|
||||
"version": "5.8.10",
|
||||
"resolved": "https://registry.npmjs.org/mongoose/-/mongoose-5.8.10.tgz",
|
||||
"integrity": "sha512-3sRiZhtMIB4egqxWbry23C+xX87kQ0aTvPtMXxWXCBGfCRkXMJl/CLiftYcle/JPy09Lv5u+ZCBpIJUgwDMtxw==",
|
||||
"version": "5.8.11",
|
||||
"resolved": "https://registry.npmjs.org/mongoose/-/mongoose-5.8.11.tgz",
|
||||
"integrity": "sha512-Yz0leNEJsAtNtMTxTDEadacLWt58gaVeBVL3c1Z3vaBoc159aJqlf+T8jaL9mAdBxKndF5YWhh6Q719xac7cjA==",
|
||||
"requires": {
|
||||
"bson": "~1.1.1",
|
||||
"kareem": "2.3.1",
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
"express-session": "^1.17.0",
|
||||
"graphql": "^14.6.0",
|
||||
"lodash": "^4.17.15",
|
||||
"mongoose": "^5.8.10",
|
||||
"mongoose": "^5.8.11",
|
||||
"mongoose-unique-validator": "^2.0.3",
|
||||
"node-fetch": "^2.6.0",
|
||||
"passport": "^0.4.1",
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user