Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-06-02 22:26:57 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

build form modal visually done

Browse Source
This commit is contained in:
Sendou 2020-02-04 00:58:06 +02:00
parent 28c5681e0a
commit 68df199c13
14 changed files with 346 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

235
frontend-react/package-lock.json generated
View File

@ -1455,15 +1455,14 @@
"integrity": "sha512-a1USH7L3bEfDdPN4iNZGvMEFuBfkdG+QNybeyDv8RloVFgZYRoM+KGXyy2KOfEnTUM8QWDRSROwaL3+ts5Angg==" "integrity": "sha512-a1USH7L3bEfDdPN4iNZGvMEFuBfkdG+QNybeyDv8RloVFgZYRoM+KGXyy2KOfEnTUM8QWDRSROwaL3+ts5Angg=="
}, },
"@reach/router": { "@reach/router": {
"version": "1.2.1", "version": "1.3.0",
"resolved": "https://registry.npmjs.org/@reach/router/-/router-1.2.1.tgz", "resolved": "https://registry.npmjs.org/@reach/router/-/router-1.3.0.tgz",
"integrity": "sha512-kTaX08X4g27tzIFQGRukaHmNbtMYDS3LEWIS8+l6OayGIw6Oyo1HIF/JzeuR2FoF9z6oV+x/wJSVSq4v8tcUGQ==", "integrity": "sha512-LLuwmgR1vW+nHdvZfJjp/3Dk3xP0H+GkH6XQWWpYrYwLDnEArZ9TR9YTkWPTLN8Ua5ZAkaTSRqACvRqplMNA8w==",
"requires": { "requires": {
"create-react-context": "^0.2.1", "create-react-context": "0.3.0",
"invariant": "^2.2.3", "invariant": "^2.2.3",
"prop-types": "^15.6.1", "prop-types": "^15.6.1",
"react-lifecycles-compat": "^3.0.4", "react-lifecycles-compat": "^3.0.4"
"warning": "^3.0.0"
} }
}, },
"@reach/visually-hidden": { "@reach/visually-hidden": {
@ -1750,20 +1749,136 @@
} }
}, },
"@testing-library/jest-dom": { "@testing-library/jest-dom": {
"version": "5.0.2", "version": "5.1.1",
"resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.0.2.tgz", "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.1.1.tgz",
"integrity": "sha512-Pl3si4eH88+5wlVz6NjecLfeO7PjTbbgWKwVZXUtBfrGuJLjGdUUo+O92XRu/59wft8HAmwvXHeMWpqWTg2Uwg==", "integrity": "sha512-7xnmBFcUmmUVAUhFiZ/u3CxFh1e46THAwra4SiiKNCW4By26RedCRwEk0rtleFPZG0wlTSNOKDvJjWYy93dp0w==",
"requires": { "requires": {
"@babel/runtime": "^7.5.1", "@babel/runtime": "^7.8.3",
"@types/testing-library__jest-dom": "^5.0.0", "@types/testing-library__jest-dom": "^5.0.0",
"chalk": "^2.4.1", "chalk": "^3.0.0",
"css": "^2.2.3", "css": "^2.2.4",
"css.escape": "^1.5.1", "css.escape": "^1.5.1",
"jest-diff": "^24.0.0", "jest-diff": "^25.1.0",
"jest-matcher-utils": "^24.0.0", "jest-matcher-utils": "^25.1.0",
"lodash": "^4.17.11", "lodash": "^4.17.15",
"pretty-format": "^24.0.0", "pretty-format": "^25.1.0",
"redent": "^3.0.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": { "@testing-library/react": {
@ -1997,9 +2112,9 @@
"integrity": "sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==" "integrity": "sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA=="
}, },
"@types/node": { "@types/node": {
"version": "13.5.3", "version": "13.7.0",
"resolved": "https://registry.npmjs.org/@types/node/-/node-13.5.3.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-13.7.0.tgz",
"integrity": "sha512-ZPnWX9PW992w6DUsz3JIXHaSb5v7qmKCVzC3km6SxcDGxk7zmLfYaCJTbktIa5NeywJkkZDhGldKqDIvC5DRrA==" "integrity": "sha512-GnZbirvmqZUzMgkFn70c74OQpTTUcCzlhQliTzYjQMqg+hVKcDnxdL19Ne3UdYzdMA/+W3eb646FWn/ZaT1NfQ=="
}, },
"@types/parse-json": { "@types/parse-json": {
"version": "4.0.0", "version": "4.0.0",
@ -2090,9 +2205,9 @@
} }
}, },
"@types/testing-library__jest-dom": { "@types/testing-library__jest-dom": {
"version": "5.0.0", "version": "5.0.1",
"resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.0.0.tgz", "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.0.1.tgz",
"integrity": "sha512-Pm+2mvqs9sND247oMVJbu3QmPUqMzBuJbY5uHHYQdl9MXq5hwWkTbesw1sPIky52Y0sHksWAZnVvGLbdyFSyrA==", "integrity": "sha512-GiPXQBVF9O4DG9cssD2d266vozBJvC5Tnv6aeH5ujgYJgys1DYm9AFCz7YC+STR5ksGxq3zCt+yP8T1wbk2DFg==",
"requires": { "requires": {
"@types/jest": "*" "@types/jest": "*"
} }
@ -4183,12 +4298,12 @@
} }
}, },
"create-react-context": { "create-react-context": {
"version": "0.2.3", "version": "0.3.0",
"resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.3.tgz", "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.3.0.tgz",
"integrity": "sha512-CQBmD0+QGgTaxDL3OX1IDXYqjkp2It4RIbcb99jS6AEg27Ga+a9G3JtK6SIu0HBwPLZlmwt9F7UwWA4Bn92Rag==", "integrity": "sha512-dNldIoSuNSvlTJ7slIKC/ZFGKexBMBrrcc+TTe1NdmROnaASuLPvqpwj9v4XS4uXZ8+YPu0sNmShX2rXI5LNsw==",
"requires": { "requires": {
"fbjs": "^0.8.0", "gud": "^1.0.0",
"gud": "^1.0.0" "warning": "^4.0.3"
} }
}, },
"cross-spawn": { "cross-spawn": {
@ -4966,14 +5081,6 @@
"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
"integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=" "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": { "end-of-stream": {
"version": "1.4.4", "version": "1.4.4",
"resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz", "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
@ -5957,35 +6064,6 @@
"bser": "2.1.1" "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": { "figgy-pudding": {
"version": "3.5.1", "version": "3.5.1",
"resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.1.tgz", "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", "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
"integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=" "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": { "isstream": {
"version": "0.1.2", "version": "0.1.2",
"resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz", "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
@ -9233,15 +9302,6 @@
"lower-case": "^1.1.1" "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": { "node-forge": {
"version": "0.9.0", "version": "0.9.0",
"resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.9.0.tgz", "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", "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.7.5.tgz",
"integrity": "sha512-/P5lkRXkWHNAbcJIiHPfRoKqyd7bsyCma1hZNUGfn20qm64T6ZBlrzprymeu918H+mB/0rIg2gGK/BXkhhYgBw==" "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": { "unicode-canonical-property-names-ecmascript": {
"version": "1.0.4", "version": "1.0.4",
"resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz", "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
@ -13799,9 +13854,9 @@
} }
}, },
"warning": { "warning": {
"version": "3.0.0", "version": "4.0.3",
"resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz", "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
"integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=", "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
"requires": { "requires": {
"loose-envify": "^1.0.0" "loose-envify": "^1.0.0"
} }

6
frontend-react/package.json
View File

@ -7,13 +7,13 @@
"@chakra-ui/core": "^0.5.2", "@chakra-ui/core": "^0.5.2",
"@emotion/core": "^10.0.27", "@emotion/core": "^10.0.27",
"@emotion/styled": "^10.0.27", "@emotion/styled": "^10.0.27",
"@reach/router": "^1.2.1", "@reach/router": "^1.3.0",
"@sendou/react-sketch": "^0.5.2", "@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/react": "^9.4.0",
"@testing-library/user-event": "^8.1.0", "@testing-library/user-event": "^8.1.0",
"@types/jest": "^25.1.1", "@types/jest": "^25.1.1",
"@types/node": "^13.5.3", "@types/node": "^13.7.0",
"@types/reach__router": "^1.2.6", "@types/reach__router": "^1.2.6",
"@types/react": "^16.9.19", "@types/react": "^16.9.19",
"@types/react-dom": "^16.9.5", "@types/react-dom": "^16.9.5",

8
frontend-react/src/components/builds/AbilitySelector.tsx
View File

@ -18,14 +18,6 @@ const AbilitySelector: React.FC<AbilitySelectorProps> = ({
const [show, setShow] = useState(false) const [show, setShow] = useState(false)
return show ? ( return show ? (
<> <>
<Button
onClick={() => {
setShow(!show)
setAbilities([])
}}
>
Hide ability filter
</Button>
<FieldsetWithLegend <FieldsetWithLegend
title="Click an ability to filter by it" title="Click an ability to filter by it"
titleFontSize="md" titleFontSize="md"

32
frontend-react/src/components/builds/ViewSlots.tsx
View File

@ -5,9 +5,10 @@ import Box from "../elements/Box"
interface ViewSlotsProps { interface ViewSlotsProps {
build: Partial<Build> 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 ( return (
<> <>
<Box asFlex alignItems="center" justifyContent="center"> <Box asFlex alignItems="center" justifyContent="center">
@ -15,7 +16,14 @@ const ViewSlots: React.FC<ViewSlotsProps> = ({ build }) => {
build.headgear ?? build.headgear ??
(["UNKNOWN", "UNKNOWN", "UNKNOWN", "UNKNOWN"] as Ability[]) (["UNKNOWN", "UNKNOWN", "UNKNOWN", "UNKNOWN"] as Ability[])
).map((ability, index) => ( ).map((ability, index) => (
<Box mx="3px" key={index}> <Box
mx="3px"
key={index}
onClick={
onAbilityClick ? () => onAbilityClick("HEAD", index) : undefined
}
cursor={onAbilityClick ? "pointer" : undefined}
>
<AbilityIcon <AbilityIcon
key={index} key={index}
ability={ability} ability={ability}
@ -29,7 +37,16 @@ const ViewSlots: React.FC<ViewSlotsProps> = ({ build }) => {
build.clothing ?? build.clothing ??
(["UNKNOWN", "UNKNOWN", "UNKNOWN", "UNKNOWN"] as Ability[]) (["UNKNOWN", "UNKNOWN", "UNKNOWN", "UNKNOWN"] as Ability[])
).map((ability, index) => ( ).map((ability, index) => (
<Box mx="3px" key={index}> <Box
mx="3px"
key={index}
onClick={
onAbilityClick
? () => onAbilityClick("CLOTHING", index)
: undefined
}
cursor={onAbilityClick ? "pointer" : undefined}
>
<AbilityIcon <AbilityIcon
key={index} key={index}
ability={ability} ability={ability}
@ -43,7 +60,14 @@ const ViewSlots: React.FC<ViewSlotsProps> = ({ build }) => {
build.shoes ?? build.shoes ??
(["UNKNOWN", "UNKNOWN", "UNKNOWN", "UNKNOWN"] as Ability[]) (["UNKNOWN", "UNKNOWN", "UNKNOWN", "UNKNOWN"] as Ability[])
).map((ability, index) => ( ).map((ability, index) => (
<Box mx="3px" key={index}> <Box
mx="3px"
key={index}
onClick={
onAbilityClick ? () => onAbilityClick("SHOES", index) : undefined
}
cursor={onAbilityClick ? "pointer" : undefined}
>
<AbilityIcon <AbilityIcon
key={index} key={index}
ability={ability} ability={ability}

22
frontend-react/src/components/elements/IconButton.tsx Normal file
View 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

1
frontend-react/src/components/elements/Input.tsx
View File

@ -7,7 +7,6 @@ import Box from "./Box"
interface InputProps { interface InputProps {
value?: string value?: string
setValue: (value: string) => void setValue: (value: string) => void
placeholder: string
label: string label: string
limit?: number limit?: number
required?: boolean required?: boolean

28
frontend-react/src/components/elements/Modal.tsx
View File

@ -2,15 +2,28 @@ import React, { useContext } from "react"
import Box from "./Box" import Box from "./Box"
import MyThemeContext from "../../themeContext" import MyThemeContext from "../../themeContext"
import useBreakPoints from "../../hooks/useBreakPoints" 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 { interface ModalProps {
title: string title: string
closeModal?: () => void
} }
const Modal: React.FC<ModalProps> = ({ children, title }) => { const Modal: React.FC<ModalProps> = ({ children, title, closeModal }) => {
const { darkerBgColor } = useContext(MyThemeContext) const { darkerBgColor } = useContext(MyThemeContext)
const isSmall = useBreakPoints(768) const isSmall = useBreakPoints(768)
useEffect(() => {
document.body.style.overflow = "hidden"
return () => {
document.body.style.overflow = "visible"
}
}, [])
return ( return (
<Box <Box
position="fixed" position="fixed"
@ -24,7 +37,7 @@ const Modal: React.FC<ModalProps> = ({ children, title }) => {
> >
<Box <Box
bg={darkerBgColor} bg={darkerBgColor}
margin="5% auto" margin="2% auto"
padding="20px" padding="20px"
border="1px solid #888" border="1px solid #888"
borderRadius="5px" borderRadius="5px"
@ -32,8 +45,17 @@ const Modal: React.FC<ModalProps> = ({ children, title }) => {
maxWidth="1100px" maxWidth="1100px"
> >
<> <>
<Box fontSize="24px" fontWeight="black" mb="1.5em"> <Box
asFlex
justifyContent="space-between"
fontSize="24px"
fontWeight="black"
mb="1.5em"
>
{title} {title}
{closeModal && (
<IconButton icon={MdClose} onClick={() => closeModal()} />
)}
</Box> </Box>
{children} {children}
</> </>

48
frontend-react/src/components/elements/TextArea.tsx Normal file
View 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

10
frontend-react/src/components/root/App.tsx
View File

@ -26,7 +26,6 @@ const App: React.FC = () => {
light: { light: {
colorMode: "light", colorMode: "light",
bgColor: "#eff0f3", bgColor: "#eff0f3",
//darkerBgColor: "#D6D7DA", FFF0F5
darkerBgColor: "#FFFAFA", darkerBgColor: "#FFFAFA",
textColor: "#0d0d0d", textColor: "#0d0d0d",
borderStyle: "1px solid rgba(0, 0, 0, .2)", borderStyle: "1px solid rgba(0, 0, 0, .2)",
@ -69,7 +68,14 @@ const App: React.FC = () => {
> >
<SideNav /> <SideNav />
<MenuBar /> <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)"> <Box minH="calc(100vh - 210px)">
<Routes /> <Routes />
</Box> </Box>

4
frontend-react/src/components/user/AbilityButtons.tsx
View File

@ -13,7 +13,7 @@ const AbilityButtons: React.FC<AbilityButtonsProps> = ({ onClick }) => {
return ( return (
<> <>
<Box my="1em" textAlign="center"> <Box my="1em" textAlign="center">
<Label>Main abilities (click to select)</Label> <Label>Main only abilities (click to select)</Label>
</Box> </Box>
<Box <Box
asFlex asFlex
@ -36,7 +36,7 @@ const AbilityButtons: React.FC<AbilityButtonsProps> = ({ onClick }) => {
))} ))}
</Box> </Box>
<Box my="1em" textAlign="center"> <Box my="1em" textAlign="center">
<Label>Sub abilities</Label> <Label>Stackable abilities</Label>
</Box> </Box>
<Box <Box
asFlex asFlex

60
frontend-react/src/components/user/BuildFormModal.tsx
View File

@ -29,9 +29,12 @@ import GearImage from "../builds/GearImage"
import Input from "../elements/Input" import Input from "../elements/Input"
import ViewSlots from "../builds/ViewSlots" import ViewSlots from "../builds/ViewSlots"
import AbilityButtons from "./AbilityButtons" import AbilityButtons from "./AbilityButtons"
import TextArea from "../elements/TextArea"
import Button from "../elements/Button"
interface BuildFormModalProps { interface BuildFormModalProps {
existingGear: ExistingGearObject existingGear: ExistingGearObject
closeModal: () => void
} }
type ExistingGearObject = Record< type ExistingGearObject = Record<
@ -39,7 +42,10 @@ type ExistingGearObject = Record<
Ability[] Ability[]
> >
const BuildFormModal: React.FC<BuildFormModalProps> = ({ existingGear }) => { const BuildFormModal: React.FC<BuildFormModalProps> = ({
existingGear,
closeModal,
}) => {
const [build, setBuild] = useState<Partial<Build>>({ const [build, setBuild] = useState<Partial<Build>>({
headgear: ["UNKNOWN", "UNKNOWN", "UNKNOWN", "UNKNOWN"], headgear: ["UNKNOWN", "UNKNOWN", "UNKNOWN", "UNKNOWN"],
clothing: ["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 handleChange = (value: Object) => setBuild({ ...build, ...value })
const handleAbilityClick = (ability: Ability) => { const handleAbilityButtonClick = (ability: Ability) => {
if (headOnlyAbilities.indexOf(ability as any) !== -1) { if (headOnlyAbilities.indexOf(ability as any) !== -1) {
if (build.headgear![0] === "UNKNOWN") { if (build.headgear![0] === "UNKNOWN") {
handleChange({ 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 ( return (
<Modal title="Adding a new build"> <Modal title="Adding a new build" closeModal={() => closeModal()}>
<WeaponSelector <WeaponSelector
required required
label="Weapon" label="Weapon"
@ -203,16 +234,33 @@ const BuildFormModal: React.FC<BuildFormModalProps> = ({ existingGear }) => {
<Input <Input
value={build.title} value={build.title}
setValue={(value: string) => handleChange({ title: value })} setValue={(value: string) => handleChange({ title: value })}
placeholder="Title"
label="Title" label="Title"
limit={100} limit={100}
/> />
</Box> </Box>
<Box mt="1em"> <Box mt="1em">
<ViewSlots build={build} /> <ViewSlots build={build} onAbilityClick={handleClickBuildAbility} />
</Box> </Box>
<Box mt="1em"> <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> </Box>
</Modal> </Modal>
) )

9
frontend-react/src/components/user/BuildTab.tsx
View File

@ -34,7 +34,7 @@ const buildsReducer = (acc: ExistingGearObject, cur: Build) => {
const BuildTab: React.FC<BuildTabProps> = ({ builds, canModifyBuilds }) => { const BuildTab: React.FC<BuildTabProps> = ({ builds, canModifyBuilds }) => {
const [APView] = useLocalStorage<boolean>("prefersAPView") const [APView] = useLocalStorage<boolean>("prefersAPView")
const [formOpen, setFormOpen] = useState(true) const [formOpen, setFormOpen] = useState(false)
const existingGear = builds const existingGear = builds
? builds.reduce(buildsReducer, {} as ExistingGearObject) ? builds.reduce(buildsReducer, {} as ExistingGearObject)
@ -42,7 +42,12 @@ const BuildTab: React.FC<BuildTabProps> = ({ builds, canModifyBuilds }) => {
return ( return (
<> <>
{formOpen && <BuildFormModal existingGear={existingGear} />} {formOpen && (
<BuildFormModal
existingGear={existingGear}
closeModal={() => setFormOpen(false)}
/>
)}
{canModifyBuilds && builds.length < 100 && ( {canModifyBuilds && builds.length < 100 && (
<Button onClick={() => setFormOpen(true)}>Add build</Button> <Button onClick={() => setFormOpen(true)}>Add build</Button>
)} )}

6
package-lock.json generated
View File

@ -1656,9 +1656,9 @@
} }
}, },
"mongoose": { "mongoose": {
"version": "5.8.10", "version": "5.8.11",
"resolved": "https://registry.npmjs.org/mongoose/-/mongoose-5.8.10.tgz", "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-5.8.11.tgz",
"integrity": "sha512-3sRiZhtMIB4egqxWbry23C+xX87kQ0aTvPtMXxWXCBGfCRkXMJl/CLiftYcle/JPy09Lv5u+ZCBpIJUgwDMtxw==", "integrity": "sha512-Yz0leNEJsAtNtMTxTDEadacLWt58gaVeBVL3c1Z3vaBoc159aJqlf+T8jaL9mAdBxKndF5YWhh6Q719xac7cjA==",
"requires": { "requires": {
"bson": "~1.1.1", "bson": "~1.1.1",
"kareem": "2.3.1", "kareem": "2.3.1",

2
package.json
View File

@ -26,7 +26,7 @@
"express-session": "^1.17.0", "express-session": "^1.17.0",
"graphql": "^14.6.0", "graphql": "^14.6.0",
"lodash": "^4.17.15", "lodash": "^4.17.15",
"mongoose": "^5.8.10", "mongoose": "^5.8.11",
"mongoose-unique-validator": "^2.0.3", "mongoose-unique-validator": "^2.0.3",
"node-fetch": "^2.6.0", "node-fetch": "^2.6.0",
"passport": "^0.4.1", "passport": "^0.4.1",