From 3a525ab85488b91fec806b7d72211bdb0daec21c Mon Sep 17 00:00:00 2001 From: Sendou Date: Wed, 27 Nov 2019 23:57:43 +0200 Subject: [PATCH] visual updates --- .../src/components/builds/BuildsBrowser.js | 2 +- react-ui/src/components/calendar/Calendar.js | 5 +- react-ui/src/components/plans/MapPlanner.js | 257 +++++++++--------- react-ui/src/components/root/App.js | 22 +- react-ui/src/components/user/BuildTab.js | 24 +- .../src/components/xsearch/Top500Browser.js | 10 +- 6 files changed, 159 insertions(+), 161 deletions(-) diff --git a/react-ui/src/components/builds/BuildsBrowser.js b/react-ui/src/components/builds/BuildsBrowser.js index 838a058ae..93232ab31 100644 --- a/react-ui/src/components/builds/BuildsBrowser.js +++ b/react-ui/src/components/builds/BuildsBrowser.js @@ -48,7 +48,7 @@ const BuildsBrowser = () => { prevItem={{ content: , icon: true }} nextItem={{ content: , icon: true }} /> - + {data.searchForBuildsByWeapon.builds.map(build => { return ( diff --git a/react-ui/src/components/calendar/Calendar.js b/react-ui/src/components/calendar/Calendar.js index b3bda83f7..f14195564 100644 --- a/react-ui/src/components/calendar/Calendar.js +++ b/react-ui/src/components/calendar/Calendar.js @@ -11,7 +11,8 @@ const PageCalendar = () => { const iFrameHTML = `` + .name()}" style=border-width: 0 width=${containerWidth * + 0.95} height="1000" frameBorder="0" scrolling="no">` //This is a weird solution but I couldn't get it working just setting the iframe src from a variable useEffect(() => { @@ -59,7 +60,7 @@ const PageCalendar = () => { )} -
+
If an event is missing you can contact{" "} Kbot about it.
diff --git a/react-ui/src/components/plans/MapPlanner.js b/react-ui/src/components/plans/MapPlanner.js index 89b969755..5f5e04ac6 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 "@sendou/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, @@ -8,41 +8,41 @@ import { Grid, Label, Message, - Dropdown -} from "semantic-ui-react"; -import WeaponDropdown from "../common/WeaponDropdown"; -import weaponDict from "../../utils/english_internal.json"; -import useWindowDimensions from "../../hooks/useWindowDimensions"; + Dropdown, +} 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, @@ -66,91 +66,91 @@ const MapPlanner = () => { expandBack: false, 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); + 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) 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 = [ { key: 1, text: "Pencil", value: Tools.Pencil, - icon: "pencil" + icon: "pencil", }, { key: 2, text: "Line", value: Tools.Line, - icon: "window minimize outline" + icon: "window minimize outline", }, { key: 3, text: "Rectangle", value: Tools.Rectangle, - icon: "square outline" + icon: "square outline", }, { key: 4, text: "Circle", value: Tools.Circle, - icon: "circle outline" + icon: "circle outline", }, { key: 5, text: "Select", value: Tools.Select, - icon: "object group outline" - } - ]; + icon: "object group outline", + }, + ] const maps = [ { key: "The Reef", text: "The Reef", value: reef }, { key: "Musselforge Fitness", text: "Musselforge Fitness", - value: fitness + value: fitness, }, { key: "Starfish Mainstage", text: "Starfish Mainstage", - value: mainstage + value: mainstage, }, { key: "Humpback Pump Track", text: "Humpback Pump Track", - value: pumptrack + value: pumptrack, }, { key: "Inkblot Art Academy", text: "Inkblot Art Academy", - value: academy + value: academy, }, { key: "Sturgeon Shipyard", text: "Sturgeon Shipyard", - value: shipyard + value: shipyard, }, { key: "Moray Towers", text: "Moray Towers", value: towers }, { key: "Port Mackerel", text: "Port Mackerel", value: port }, @@ -160,18 +160,18 @@ const MapPlanner = () => { { key: "Blackbelly Skatepark", text: "Blackbelly Skatepark", - value: skatepark + value: skatepark, }, { key: "MakoMart", text: "MakoMart", value: mart }, { key: "Walleye Warehouse", text: "Walleye Warehouse", - value: warehouse + value: warehouse, }, { key: "Shellendorf Institute", text: "Shellendorf Institute", - value: institute + value: institute, }, { key: "Arowana Mall", text: "Arowana Mall", value: mall }, { key: "Goby Arena", text: "Goby Arena", value: arena }, @@ -179,31 +179,31 @@ const MapPlanner = () => { { key: "Piranha Pit (RM)", text: "Piranha Pit (RM)", - value: pitrm + value: pitrm, }, { key: "Camp Triggerfish", text: "Camp Triggerfish", - value: camp + value: camp, }, { key: "Wahoo World", text: "Wahoo World", value: world }, { key: "New Albacore Hotel", text: "New Albacore Hotel", - value: hotel + value: hotel, }, { key: "Ancho-V Games", text: "Ancho-V Games", value: games }, { key: "Skipper Pavilion", text: "Skipper Pavilion", - value: 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, { @@ -211,82 +211,78 @@ const MapPlanner = () => { fontFamily: "lato", stroke: "#000000", strokeWidth: 3, - paintFirst: "stroke" - }); - setTool(Tools.Select); - }; + paintFirst: "stroke", + }) + 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 (
@@ -307,6 +303,7 @@ const MapPlanner = () => { value={controlledValue} onChange={onSketchChange} tool={tool} + style={{ position: "relative", left: "-20px" }} />
- ); -}; -export default MapPlanner; + ) +} +export default MapPlanner diff --git a/react-ui/src/components/root/App.js b/react-ui/src/components/root/App.js index a26c01040..f061486d9 100644 --- a/react-ui/src/components/root/App.js +++ b/react-ui/src/components/root/App.js @@ -8,18 +8,18 @@ const App = () => { return (
-
- + +
- -
+
+
) diff --git a/react-ui/src/components/user/BuildTab.js b/react-ui/src/components/user/BuildTab.js index 883c853b4..30fb1c264 100644 --- a/react-ui/src/components/user/BuildTab.js +++ b/react-ui/src/components/user/BuildTab.js @@ -13,7 +13,7 @@ import Error from "../common/Error" const BuildTab = ({ user, userViewed }) => { const { data, error, loading } = useQuery(searchForBuilds, { - variables: { discord_id: userViewed.discord_id } + variables: { discord_id: userViewed.discord_id }, }) const [errorMsg, setErrorMsg] = useState(null) const [successMsg, setSuccessMsg] = useState(null) @@ -32,9 +32,9 @@ const BuildTab = ({ user, userViewed }) => { refetchQueries: [ { query: searchForBuilds, - variables: { discord_id: userViewed.discord_id } - } - ] + variables: { discord_id: userViewed.discord_id }, + }, + ], }) const [deleteBuildMutation] = useMutation(deleteBuild, { @@ -42,9 +42,9 @@ const BuildTab = ({ user, userViewed }) => { refetchQueries: [ { query: searchForBuilds, - variables: { discord_id: userViewed.discord_id } - } - ] + variables: { discord_id: userViewed.discord_id }, + }, + ], }) const [editBuildMutation] = useMutation(updateBuild, { @@ -52,14 +52,14 @@ const BuildTab = ({ user, userViewed }) => { refetchQueries: [ { query: searchForBuilds, - variables: { discord_id: userViewed.discord_id } - } - ] + variables: { discord_id: userViewed.discord_id }, + }, + ], }) const deleteBuildById = async ({ id, title, weapon }) => { await deleteBuildMutation({ - variables: { id } + variables: { id }, }) const buildTitle = title ? title : `${weapon} build` @@ -73,7 +73,7 @@ const BuildTab = ({ user, userViewed }) => { const editBuildById = async build => { await editBuildMutation({ - variables: { ...build } + variables: { ...build }, }) setSuccessMsg("Build successfully edited") diff --git a/react-ui/src/components/xsearch/Top500Browser.js b/react-ui/src/components/xsearch/Top500Browser.js index ebc890e07..8007645be 100644 --- a/react-ui/src/components/xsearch/Top500Browser.js +++ b/react-ui/src/components/xsearch/Top500Browser.js @@ -13,7 +13,7 @@ import { Image, Header, Pagination, - Icon + Icon, } from "semantic-ui-react" import WpnImage from "../common/WpnImage" import { modeIcons } from "../../assets/imageImports" @@ -28,7 +28,7 @@ const Top500Browser = ({ setMenuSelection }) => { mode: NumberParam, unique_id: StringParam, month: NumberParam, - year: NumberParam + year: NumberParam, }) const [forms, setForms] = useState({ page: 1, @@ -37,11 +37,11 @@ const Top500Browser = ({ setMenuSelection }) => { mode: 0, unique_id: "", month: "", - year: "" + year: "", }) const { data, error, loading } = useQuery(searchForPlacements, { - variables: query + variables: query, }) const handleClear = () => { @@ -52,7 +52,7 @@ const Top500Browser = ({ setMenuSelection }) => { mode: 0, unique_id: "", month: "", - year: "" + year: "", }) }