mirror of
https://github.com/Sendouc/sendou.ink.git
synced 2026-09-07 19:55:46 -05:00
react-sketch update to remove warnings
This commit is contained in:
Sendou
1
.gitignore
vendored
1
.gitignore
vendored
@@ -19,6 +19,7 @@ tourney_maps
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
.vs
|
||||
.vscode
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
|
||||
23
react-ui/.gitignore
vendored
23
react-ui/.gitignore
vendored
@@ -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*
|
||||
24
react-ui/package-lock.json
generated
24
react-ui/package-lock.json
generated
@@ -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",
|
||||
|
||||
@@ -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": {}
|
||||
}
|
||||
|
||||
212
react-ui/src/components/plans/MapPlanner.js
vendored
212
react-ui/src/components/plans/MapPlanner.js
vendored
@@ -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 (
|
||||
<div>
|
||||
@@ -402,6 +406,6 @@ const MapPlanner = () => {
|
||||
</Grid>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default MapPlanner
|
||||
);
|
||||
};
|
||||
export default MapPlanner;
|
||||
|
||||
333
react-ui/src/components/root/RollSim.js
vendored
333
react-ui/src/components/root/RollSim.js
vendored
@@ -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 (
|
||||
<div>
|
||||
<div style={{ float: "none", whiteSpace: "nowrap" }}>
|
||||
<img
|
||||
src={`https://raw.githubusercontent.com/Leanny/leanny.github.io/master/splat2/gear/${headLink}.png`}
|
||||
style={gearStyle}
|
||||
alt=""
|
||||
/>
|
||||
<span style={paddingStyle}>
|
||||
<img src={headMain} style={mainAbilityStyle} alt="" />
|
||||
</span>
|
||||
<img
|
||||
src={headSubs[0]}
|
||||
style={subAbilityStyle}
|
||||
onClick={() => roll("HEAD")}
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
src={headSubs[1]}
|
||||
style={subAbilityStyle}
|
||||
onClick={() => roll("HEAD")}
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
src={headSubs[2]}
|
||||
style={subAbilityStyle}
|
||||
onClick={() => roll("HEAD")}
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div style={{ float: "none", whiteSpace: "nowrap" }}>
|
||||
<img
|
||||
src={`https://raw.githubusercontent.com/Leanny/leanny.github.io/master/splat2/gear/${clothingLink}.png`}
|
||||
style={gearStyle}
|
||||
alt=""
|
||||
/>
|
||||
<span style={paddingStyle}>
|
||||
<img src={clothingMain} style={mainAbilityStyle} alt="" />
|
||||
</span>
|
||||
<img
|
||||
src={clothingSubs[0]}
|
||||
style={subAbilityStyle}
|
||||
alt=""
|
||||
onClick={() => roll("CLOTHING")}
|
||||
/>
|
||||
<img
|
||||
src={clothingSubs[1]}
|
||||
style={subAbilityStyle}
|
||||
alt=""
|
||||
onClick={() => roll("CLOTHING")}
|
||||
/>
|
||||
<img
|
||||
src={clothingSubs[2]}
|
||||
style={subAbilityStyle}
|
||||
alt=""
|
||||
onClick={() => roll("CLOTHING")}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ float: "none", whiteSpace: "nowrap" }}>
|
||||
<img
|
||||
src={`https://raw.githubusercontent.com/Leanny/leanny.github.io/master/splat2/gear/${shoesLink}.png`}
|
||||
style={gearStyle}
|
||||
alt=""
|
||||
/>
|
||||
<span style={paddingStyle}>
|
||||
<img src={shoesMain} style={mainAbilityStyle} alt="" />
|
||||
</span>
|
||||
<img
|
||||
src={shoesSubs[0]}
|
||||
style={subAbilityStyle}
|
||||
alt=""
|
||||
onClick={() => roll("SHOES")}
|
||||
/>
|
||||
<img
|
||||
src={shoesSubs[1]}
|
||||
style={subAbilityStyle}
|
||||
alt=""
|
||||
onClick={() => roll("SHOES")}
|
||||
/>
|
||||
<img
|
||||
src={shoesSubs[2]}
|
||||
style={subAbilityStyle}
|
||||
alt=""
|
||||
onClick={() => roll("SHOES")}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default RollSim
|
||||
Reference in New Issue
Block a user