diff --git a/.gitignore b/.gitignore index cdb4ac0ca..954810d51 100644 --- a/.gitignore +++ b/.gitignore @@ -19,6 +19,7 @@ tourney_maps .env.test.local .env.production.local .vs +.vscode npm-debug.log* yarn-debug.log* diff --git a/react-ui/.gitignore b/react-ui/.gitignore deleted file mode 100644 index 4d29575de..000000000 --- a/react-ui/.gitignore +++ /dev/null @@ -1,23 +0,0 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - -# dependencies -/node_modules -/.pnp -.pnp.js - -# testing -/coverage - -# production -/build - -# misc -.DS_Store -.env.local -.env.development.local -.env.test.local -.env.production.local - -npm-debug.log* -yarn-debug.log* -yarn-error.log* diff --git a/react-ui/package-lock.json b/react-ui/package-lock.json index 03a728d80..269652850 100644 --- a/react-ui/package-lock.json +++ b/react-ui/package-lock.json @@ -1,6 +1,6 @@ { - "name": "sendou-ink-new", - "version": "0.1.0", + "name": "sendou-ink-react-ui", + "version": "2.0.0", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -1213,6 +1213,16 @@ "prop-types": "^15.6.2" } }, + "@sendou/react-sketch": { + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/@sendou/react-sketch/-/react-sketch-0.5.2.tgz", + "integrity": "sha512-Q4VwL40jI15FVdV3RQViIgtf4U2IFo6ff7CEqhF6nrtIgNQhocA2m6IcZVgdojpxwd77AnoxNunCP3oNCu0o/A==", + "requires": { + "prop-types": "^15.6.2", + "react": "^16.6.1", + "react-dom": "^16.6.1" + } + }, "@stardust-ui/react-component-event-listener": { "version": "0.38.0", "resolved": "https://registry.npmjs.org/@stardust-ui/react-component-event-listener/-/react-component-event-listener-0.38.0.tgz", @@ -11005,16 +11015,6 @@ "workbox-webpack-plugin": "4.3.1" } }, - "react-sketch": { - "version": "0.5.1", - "resolved": "https://registry.npmjs.org/react-sketch/-/react-sketch-0.5.1.tgz", - "integrity": "sha512-a0BPc6z/Ec/7KN4KL/HGLfAhDfLyaBN8GDvILfBZVX74PnhWvJocofc/cHSCvtNtEmGSdmJPjrewfAUXKo78pA==", - "requires": { - "prop-types": "^15.6.2", - "react": "^16.6.1", - "react-dom": "^16.6.1" - } - }, "react-smooth": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-1.0.5.tgz", diff --git a/react-ui/package.json b/react-ui/package.json index c9dcbc57c..e66038fb7 100644 --- a/react-ui/package.json +++ b/react-ui/package.json @@ -1,9 +1,10 @@ { "name": "sendou-ink-react-ui", - "version": "2.0.0", + "version": "2.0.1", "private": true, "dependencies": { "@apollo/react-hooks": "^3.1.3", + "@sendou/react-sketch": "^0.5.2", "apollo-boost": "^0.4.4", "graphql": "^14.5.8", "jstz": "^2.1.1", @@ -12,7 +13,6 @@ "react-dom": "^16.11.0", "react-router-dom": "^5.1.2", "react-scripts": "^3.2.0", - "react-sketch": "^0.5.1", "recharts": "^1.8.5", "semantic-ui-css": "^2.4.1", "semantic-ui-react": "^0.88.1", @@ -38,5 +38,6 @@ "last 1 firefox version", "last 1 safari version" ] - } + }, + "devDependencies": {} } diff --git a/react-ui/src/components/plans/MapPlanner.js b/react-ui/src/components/plans/MapPlanner.js index 0912496cf..89b969755 100644 --- a/react-ui/src/components/plans/MapPlanner.js +++ b/react-ui/src/components/plans/MapPlanner.js @@ -1,6 +1,6 @@ -import React, { useState, useEffect, useRef } from "react" -import { SketchField, Tools } from "react-sketch" -import { CirclePicker } from "react-color" +import React, { useState, useEffect, useRef } from "react"; +import { SketchField, Tools } from "@sendou/react-sketch"; +import { CirclePicker } from "react-color"; import { Button, Icon, @@ -9,40 +9,40 @@ import { Label, Message, Dropdown -} from "semantic-ui-react" -import WeaponDropdown from "../common/WeaponDropdown" -import weaponDict from "../../utils/english_internal.json" -import useWindowDimensions from "../../hooks/useWindowDimensions" +} from "semantic-ui-react"; +import WeaponDropdown from "../common/WeaponDropdown"; +import weaponDict from "../../utils/english_internal.json"; +import useWindowDimensions from "../../hooks/useWindowDimensions"; -import academy from "../../assets/plannerMaps/academy-sz.png" -import arena from "../../assets/plannerMaps/arena-sz.png" -import camp from "../../assets/plannerMaps/camp-sz.png" -import canal from "../../assets/plannerMaps/canal-sz.png" -import dome from "../../assets/plannerMaps/dome-sz.png" -import fitness from "../../assets/plannerMaps/fitness-sz.png" -import games from "../../assets/plannerMaps/games-sz.png" -import hotel from "../../assets/plannerMaps/hotel-sz.png" -import institute from "../../assets/plannerMaps/institute-sz.png" -import mainstage from "../../assets/plannerMaps/mainstage-sz.png" -import mall from "../../assets/plannerMaps/mall-sz.png" -import manta from "../../assets/plannerMaps/manta-sz.png" -import mart from "../../assets/plannerMaps/mart-sz.png" -import pavilion from "../../assets/plannerMaps/pavilion-sz.png" -import pit from "../../assets/plannerMaps/pit-sz.png" -import pitrm from "../../assets/plannerMaps/pit-rm.png" -import port from "../../assets/plannerMaps/port-sz.png" -import pumptrack from "../../assets/plannerMaps/pumptrack-sz.png" -import reef from "../../assets/plannerMaps/reef-sz.png" -import shipyard from "../../assets/plannerMaps/shipyard-sz.png" -import skatepark from "../../assets/plannerMaps/skatepark-sz.png" -import towers from "../../assets/plannerMaps/towers-sz.png" -import warehouse from "../../assets/plannerMaps/warehouse-sz.png" -import world from "../../assets/plannerMaps/world-sz.png" -import { wpnMedium } from "../../assets/imageImports" +import academy from "../../assets/plannerMaps/academy-sz.png"; +import arena from "../../assets/plannerMaps/arena-sz.png"; +import camp from "../../assets/plannerMaps/camp-sz.png"; +import canal from "../../assets/plannerMaps/canal-sz.png"; +import dome from "../../assets/plannerMaps/dome-sz.png"; +import fitness from "../../assets/plannerMaps/fitness-sz.png"; +import games from "../../assets/plannerMaps/games-sz.png"; +import hotel from "../../assets/plannerMaps/hotel-sz.png"; +import institute from "../../assets/plannerMaps/institute-sz.png"; +import mainstage from "../../assets/plannerMaps/mainstage-sz.png"; +import mall from "../../assets/plannerMaps/mall-sz.png"; +import manta from "../../assets/plannerMaps/manta-sz.png"; +import mart from "../../assets/plannerMaps/mart-sz.png"; +import pavilion from "../../assets/plannerMaps/pavilion-sz.png"; +import pit from "../../assets/plannerMaps/pit-sz.png"; +import pitrm from "../../assets/plannerMaps/pit-rm.png"; +import port from "../../assets/plannerMaps/port-sz.png"; +import pumptrack from "../../assets/plannerMaps/pumptrack-sz.png"; +import reef from "../../assets/plannerMaps/reef-sz.png"; +import shipyard from "../../assets/plannerMaps/shipyard-sz.png"; +import skatepark from "../../assets/plannerMaps/skatepark-sz.png"; +import towers from "../../assets/plannerMaps/towers-sz.png"; +import warehouse from "../../assets/plannerMaps/warehouse-sz.png"; +import world from "../../assets/plannerMaps/world-sz.png"; +import { wpnMedium } from "../../assets/imageImports"; const MapPlanner = () => { - let sketch = null - const { containerWidth } = useWindowDimensions() + let sketch = null; + const { containerWidth } = useWindowDimensions(); const defaultValue = { shadowWidth: 0, shadowOffset: 0, @@ -67,30 +67,30 @@ const MapPlanner = () => { expandImages: false, expandControlled: false, enableCopyPaste: false - } - const fileInput = useRef(null) - const [tool, setTool] = useState(Tools.Pencil) - const [color, setColor] = useState("#f44336") - const [weapon, setWeapon] = useState("") - const [canUndo, setCanUndo] = useState(false) - const [canRedo, setCanRedo] = useState(false) - const [text, setText] = useState("") - const [bg, setBg] = useState(null) - const [uploadError, setUploadError] = useState(null) - const [controlledValue, setControlledValue] = useState(defaultValue) + }; + const fileInput = useRef(null); + const [tool, setTool] = useState(Tools.Pencil); + const [color, setColor] = useState("#f44336"); + const [weapon, setWeapon] = useState(""); + const [canUndo, setCanUndo] = useState(false); + const [canRedo, setCanRedo] = useState(false); + const [text, setText] = useState(""); + const [bg, setBg] = useState(null); + const [uploadError, setUploadError] = useState(null); + const [controlledValue, setControlledValue] = useState(defaultValue); useEffect(() => { - document.title = "Planner - sendou.ink" - }, []) + document.title = "Planner - sendou.ink"; + }, []); // doesn't work properly when coming back from another page - not sure why useEffect(() => { if (!sketch) { - return + return; } - setBg(reef) - sketch.setBackgroundFromDataUrl(reef) - }, [sketch]) + setBg(reef); + sketch.setBackgroundFromDataUrl(reef); + }, [sketch]); const tools = [ { @@ -123,7 +123,7 @@ const MapPlanner = () => { value: Tools.Select, icon: "object group outline" } - ] + ]; const maps = [ { key: "The Reef", text: "The Reef", value: reef }, @@ -198,12 +198,12 @@ const MapPlanner = () => { text: "Skipper Pavilion", value: pavilion } - ] + ]; const addImageToSketch = () => { - sketch.addImg(wpnMedium[weaponDict[weapon]]) - setTool(Tools.Select) - } + sketch.addImg(wpnMedium[weaponDict[weapon]]); + setTool(Tools.Select); + }; const addTextToSketch = () => { sketch.addText(text, { @@ -212,77 +212,81 @@ const MapPlanner = () => { stroke: "#000000", strokeWidth: 3, paintFirst: "stroke" - }) - setTool(Tools.Select) - } + }); + setTool(Tools.Select); + }; const undo = () => { - sketch.undo() - setCanUndo(sketch.canUndo()) - setCanRedo(sketch.canRedo()) - } + sketch.undo(); + setCanUndo(sketch.canUndo()); + setCanRedo(sketch.canRedo()); + }; const redo = () => { - sketch.redo() - setCanUndo(sketch.canUndo()) - setCanRedo(sketch.canRedo()) - } + sketch.redo(); + setCanUndo(sketch.canUndo()); + setCanRedo(sketch.canRedo()); + }; const removeSelected = () => { - sketch.removeSelected() - } + sketch.removeSelected(); + }; const onSketchChange = () => { - let prev = canUndo - let now = sketch.canUndo() + let prev = canUndo; + let now = sketch.canUndo(); if (prev !== now) { - setCanUndo(now) + setCanUndo(now); } - } + }; const getDateFormatted = () => { - const today = new Date() + const today = new Date(); const date = - today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate() + today.getFullYear() + + "-" + + (today.getMonth() + 1) + + "-" + + today.getDate(); const time = - today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds() - return date + " " + time - } + today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds(); + return date + " " + time; + }; const download = (dataUrl, extension) => { - let a = document.createElement("a") - document.body.appendChild(a) - a.style = "display: none" - a.href = dataUrl + let a = document.createElement("a"); + document.body.appendChild(a); + a.style = "display: none"; + a.href = dataUrl; a.download = `${ bg.replace("/static/media/", "").split("-")[0] - } plans ${getDateFormatted()}.${extension}` - a.click() - window.URL.revokeObjectURL(dataUrl) - } + } plans ${getDateFormatted()}.${extension}`; + a.click(); + window.URL.revokeObjectURL(dataUrl); + }; const handleUpload = () => { if (fileInput.current.files.length === 0) { - setUploadError("Upload file") - setTimeout(() => setUploadError(null), 5000) - return + setUploadError("Upload file"); + setTimeout(() => setUploadError(null), 5000); + return; } - const fileObj = fileInput.current.files[0] - const reader = new FileReader() + const fileObj = fileInput.current.files[0]; + const reader = new FileReader(); reader.onload = function(event) { - const jsonObj = JSON.parse(event.target.result) - setControlledValue(jsonObj) - } + const jsonObj = JSON.parse(event.target.result); + setControlledValue(jsonObj); + }; - reader.readAsText(fileObj) - } + reader.readAsText(fileObj); + }; const onBgChange = value => { - sketch.clear() - setBg(value) - setCanUndo(false) - sketch.setBackgroundFromDataUrl(value) - } + sketch.clear(); + setBg(value); + setCanUndo(false); + sketch.setBackgroundFromDataUrl(value); + }; return (
@@ -402,6 +406,6 @@ const MapPlanner = () => {
- ) -} -export default MapPlanner + ); +}; +export default MapPlanner; diff --git a/react-ui/src/components/root/RollSim.js b/react-ui/src/components/root/RollSim.js deleted file mode 100644 index 507add723..000000000 --- a/react-ui/src/components/root/RollSim.js +++ /dev/null @@ -1,333 +0,0 @@ -import React, { useState } from "react" -import { clothingGear, shoesGear, headGear } from "../../utils/lists" -import { choose } from "../../utils/helperFunctions" - -import { abilityIcons } from "../../assets/imageImports" -import head from "../../utils/head.json" -import clothes from "../../utils/clothes.json" -import shoes from "../../utils/shoes.json" - -const mainAbilityStyle = { - //https://github.com/loadout-ink/splat2-calc - zIndex: "2", - borderRadius: "50%", - width: "40px", - height: "40px", - background: "#000", - border: "2px solid #888", - borderRight: "0px", - borderBottom: "0px", - backgroundSize: "100%", - boxShadow: "0 0 0 1px #000" -} -const subAbilityStyle = { - //https://github.com/loadout-ink/splat2-calc - zIndex: "2", - borderRadius: "50%", - width: "30px", - height: "30px", - background: "#000", - border: "2px solid #888", - borderRight: "0px", - borderBottom: "0px", - backgroundSize: "100%", - boxShadow: "0 0 0 1px #000" -} -const gearStyle = { maxWidth: "50px", height: "auto" } - -const paddingStyle = { paddingLeft: "0.7em" } - -const subAbilities = [ - abilityIcons.ISM, - abilityIcons.ISS, - abilityIcons.REC, - abilityIcons.RSU, - abilityIcons.SSU, - abilityIcons.QSJ, - abilityIcons.RES, - abilityIcons.BDU, - abilityIcons.MPU, - abilityIcons.QR, - abilityIcons.SCU, - abilityIcons.SS, - abilityIcons.SPU, - abilityIcons.BRU, - abilityIcons.ISM, - abilityIcons.ISS, - abilityIcons.REC, - abilityIcons.RSU, - abilityIcons.SSU, - abilityIcons.QSJ, - abilityIcons.RES, - abilityIcons.BDU, - abilityIcons.MPU, - abilityIcons.QR, - abilityIcons.SCU, - abilityIcons.SS, - abilityIcons.SPU, - abilityIcons.BRU -] -const headAbilities = [ - abilityIcons.ISM, - abilityIcons.ISS, - abilityIcons.REC, - abilityIcons.RSU, - abilityIcons.SSU, - abilityIcons.QSJ, - abilityIcons.RES, - abilityIcons.BDU, - abilityIcons.MPU, - abilityIcons.QR, - abilityIcons.SCU, - abilityIcons.SS, - abilityIcons.SPU, - abilityIcons.BRU, - abilityIcons.OG, - abilityIcons.LDE, - abilityIcons.CB, - abilityIcons.T -] -const clothingAbilities = [ - abilityIcons.ISM, - abilityIcons.ISS, - abilityIcons.REC, - abilityIcons.RSU, - abilityIcons.SSU, - abilityIcons.QSJ, - abilityIcons.RES, - abilityIcons.BDU, - abilityIcons.MPU, - abilityIcons.QR, - abilityIcons.SCU, - abilityIcons.SS, - abilityIcons.SPU, - abilityIcons.BRU, - abilityIcons.H, - abilityIcons.NS, - abilityIcons.TI, - abilityIcons.RP -] -const shoeAbilities = [ - abilityIcons.ISM, - abilityIcons.ISS, - abilityIcons.REC, - abilityIcons.RSU, - abilityIcons.SSU, - abilityIcons.QSJ, - abilityIcons.RES, - abilityIcons.BDU, - abilityIcons.MPU, - abilityIcons.QR, - abilityIcons.SCU, - abilityIcons.SS, - abilityIcons.SPU, - abilityIcons.BRU, - abilityIcons.DR, - abilityIcons.SJ, - abilityIcons.OS -] - -const internalToAbility = { - MainInk_Save: abilityIcons.ISM, - SubInk_Save: abilityIcons.ISS, - InkRecovery_Up: abilityIcons.REC, - HumanMove_Up: abilityIcons.RSU, - SquidMove_Up: abilityIcons.SSU, - JumpTime_Save: abilityIcons.QSJ, - RespawnTime_Save: abilityIcons.QR, - OpInkEffect_Reduction: abilityIcons.RES, - BombDamage_Reduction: abilityIcons.BDU, - MarkingTime_Reduction: abilityIcons.MPU, - RespawnSpecialGauge_Save: abilityIcons.SS, - SpecialIncrease_Up: abilityIcons.SCU, - SpecialTime_Up: abilityIcons.SPU, - BombDistance_Up: abilityIcons.BRU -} - -const RollSim = () => { - const [headLink] = useState(choose(headGear)) - const [clothingLink] = useState(choose(clothingGear)) - const [shoesLink] = useState(choose(shoesGear)) - const [headMain] = useState(choose(headAbilities)) - const [headSubs, setHeadSubs] = useState([ - choose(subAbilities), - choose(subAbilities), - choose(subAbilities) - ]) - const [clothingMain] = useState(choose(clothingAbilities)) - const [clothingSubs, setClothingSubs] = useState([ - choose(subAbilities), - choose(subAbilities), - choose(subAbilities) - ]) - const [shoesMain] = useState(choose(shoeAbilities)) - const [shoesSubs, setShoesSubs] = useState([ - choose(subAbilities), - choose(subAbilities), - choose(subAbilities) - ]) - const [rolling, setRolling] = useState(false) - - const setSubs = (json, gear) => { - let gearName = gear.split("_")[1] - if (!json.hasOwnProperty(gearName)) - return [choose(subAbilities), choose(subAbilities), choose(subAbilities)] - const prefArray = json[gearName] - if (prefArray[0] === prefArray[1]) { - //neutral brand - return [choose(subAbilities), choose(subAbilities), choose(subAbilities)] - } - - const adjustedAbilities = [...subAbilities] - const preferredAbility = internalToAbility[prefArray[0]] - const unpreferredAbility = internalToAbility[prefArray[1]] - - for (let index = 0; index < adjustedAbilities.length; index++) { - const element = adjustedAbilities[index] - if (element === unpreferredAbility) { - adjustedAbilities.splice(index, 1) - break - } - } - - for (let index = 0; index < 8; index++) { - adjustedAbilities.push(preferredAbility) - } - - const ability1 = choose(adjustedAbilities) - const ability2 = choose(adjustedAbilities) - const ability3 = choose(adjustedAbilities) - - return [ability1, ability2, ability3] - } - - const sleep = milliseconds => { - return new Promise(resolve => setTimeout(resolve, milliseconds)) - } - - const roll = async mode => { - if (rolling) return - - let setSubsState = null - let json = null - let gear = null - if (mode === "HEAD") { - setSubsState = setHeadSubs - json = head - gear = headLink - } else if (mode === "CLOTHING") { - setSubsState = setClothingSubs - json = clothes - gear = clothingLink - } else { - setSubsState = setShoesSubs - json = shoes - gear = shoesLink - } - - setRolling(true) - let ability1 = null - let ability2 = null - let ability3 = null - for (let index = 0; index < 19; index++) { - ability1 = choose(subAbilities) - ability2 = choose(subAbilities) - ability3 = choose(subAbilities) - setSubsState([ability1, ability2, ability3]) - await sleep(75) - } - setSubsState(setSubs(json, gear)) //only using this method in the last roll that matters for optimization purposes - setRolling(false) - } - - return ( -
-
- - - - - roll("HEAD")} - alt="" - /> - roll("HEAD")} - alt="" - /> - roll("HEAD")} - alt="" - /> -
-
- - - - - roll("CLOTHING")} - /> - roll("CLOTHING")} - /> - roll("CLOTHING")} - /> -
-
- - - - - roll("SHOES")} - /> - roll("SHOES")} - /> - roll("SHOES")} - /> -
-
- ) -} - -export default RollSim