+ ) => void
+ active?: boolean;
+ disabled?: boolean;
+ classes?: string[];
+ icon?: string;
+ type?: ButtonType;
+ children?: React.ReactNode;
+ onClick?: (event: React.MouseEvent) => void;
}
const Button = (props: Props) => {
- // States
- const [active, setActive] = useState(false)
- const [disabled, setDisabled] = useState(false)
- const [pressed, setPressed] = useState(false)
- const [buttonType, setButtonType] = useState(ButtonType.Base)
+ // States
+ const [active, setActive] = useState(false);
+ const [disabled, setDisabled] = useState(false);
+ const [pressed, setPressed] = useState(false);
+ const [buttonType, setButtonType] = useState(ButtonType.Base);
- const classes = classNames({
- Button: true,
- 'Active': active,
- 'btn-pressed': pressed,
- 'btn-disabled': disabled,
- 'save': props.icon === 'save',
- 'destructive': props.type == ButtonType.Destructive
- }, props.classes)
+ const classes = classNames(
+ {
+ Button: true,
+ Active: active,
+ "btn-pressed": pressed,
+ "btn-disabled": disabled,
+ save: props.icon === "save",
+ destructive: props.type == ButtonType.Destructive,
+ },
+ props.classes
+ );
- useEffect(() => {
- if (props.active) setActive(props.active)
- if (props.disabled) setDisabled(props.disabled)
- if (props.type) setButtonType(props.type)
- }, [props.active, props.disabled, props.type])
+ useEffect(() => {
+ if (props.active) setActive(props.active);
+ if (props.disabled) setDisabled(props.disabled);
+ if (props.type) setButtonType(props.type);
+ }, [props.active, props.disabled, props.type]);
- const addIcon = (
-
- ) => void
- onChange?: (event: React.ChangeEvent) => void
+ fieldName: string;
+ placeholder: string;
+ value?: string;
+ limit: number;
+ error: string;
+ onBlur?: (event: React.ChangeEvent) => void;
+ onChange?: (event: React.ChangeEvent) => void;
}
-const CharLimitedFieldset = React.forwardRef(function useFieldSet(props, ref) {
- const fieldType = (['password', 'confirm_password'].includes(props.fieldName)) ? 'password' : 'text'
+const CharLimitedFieldset = React.forwardRef(
+ function useFieldSet(props, ref) {
+ const fieldType = ["password", "confirm_password"].includes(props.fieldName)
+ ? "password"
+ : "text";
- const [currentCount, setCurrentCount] = useState(0)
+ const [currentCount, setCurrentCount] = useState(0);
useEffect(() => {
- setCurrentCount((props.value) ? props.limit - props.value.length : props.limit)
- }, [props.limit, props.value])
+ setCurrentCount(
+ props.value ? props.limit - props.value.length : props.limit
+ );
+ }, [props.limit, props.value]);
function onChange(event: React.ChangeEvent) {
- setCurrentCount(props.limit - event.currentTarget.value.length)
- if (props.onChange) props.onChange(event)
+ setCurrentCount(props.limit - event.currentTarget.value.length);
+ if (props.onChange) props.onChange(event);
}
return (
-
- )
-})
+
+ );
+ }
+);
-export default CharLimitedFieldset
\ No newline at end of file
+export default CharLimitedFieldset;
diff --git a/components/CharacterConflictModal/index.tsx b/components/CharacterConflictModal/index.tsx
index 1f1ff6c0..fe797a79 100644
--- a/components/CharacterConflictModal/index.tsx
+++ b/components/CharacterConflictModal/index.tsx
@@ -1,70 +1,70 @@
-import React, { useEffect, useState } from "react"
-import { setCookie } from "cookies-next"
-import Router, { useRouter } from "next/router"
-import { useTranslation } from "react-i18next"
-import { AxiosResponse } from "axios"
+import React, { useEffect, useState } from "react";
+import { setCookie } from "cookies-next";
+import Router, { useRouter } from "next/router";
+import { useTranslation } from "react-i18next";
+import { AxiosResponse } from "axios";
-import * as Dialog from "@radix-ui/react-dialog"
+import * as Dialog from "@radix-ui/react-dialog";
-import api from "~utils/api"
-import { appState } from "~utils/appState"
-import { accountState } from "~utils/accountState"
+import api from "~utils/api";
+import { appState } from "~utils/appState";
+import { accountState } from "~utils/accountState";
-import Button from "~components/Button"
+import Button from "~components/Button";
-import "./index.scss"
+import "./index.scss";
interface Props {
- open: boolean
- incomingCharacter?: Character
- conflictingCharacters?: GridCharacter[]
- desiredPosition: number
- resolveConflict: () => void
- resetConflict: () => void
+ open: boolean;
+ incomingCharacter?: Character;
+ conflictingCharacters?: GridCharacter[];
+ desiredPosition: number;
+ resolveConflict: () => void;
+ resetConflict: () => void;
}
const CharacterConflictModal = (props: Props) => {
- const { t } = useTranslation("common")
+ const { t } = useTranslation("common");
// States
- const [open, setOpen] = useState(false)
+ const [open, setOpen] = useState(false);
useEffect(() => {
- setOpen(props.open)
- }, [setOpen, props.open])
+ setOpen(props.open);
+ }, [setOpen, props.open]);
function imageUrl(character?: Character, uncap: number = 0) {
// Change the image based on the uncap level
- let suffix = "01"
- if (uncap == 6) suffix = "04"
- else if (uncap == 5) suffix = "03"
- else if (uncap > 2) suffix = "02"
+ let suffix = "01";
+ if (uncap == 6) suffix = "04";
+ else if (uncap == 5) suffix = "03";
+ else if (uncap > 2) suffix = "02";
// Special casing for Lyria (and Young Cat eventually)
if (character?.granblue_id === "3030182000") {
- let element = 1
+ let element = 1;
if (
appState.grid.weapons.mainWeapon &&
appState.grid.weapons.mainWeapon.element
) {
- element = appState.grid.weapons.mainWeapon.element
+ element = appState.grid.weapons.mainWeapon.element;
} else if (appState.party.element != 0) {
- element = appState.party.element
+ element = appState.party.element;
}
- suffix = `${suffix}_0${element}`
+ suffix = `${suffix}_0${element}`;
}
- return `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/chara-square/${character?.granblue_id}_${suffix}.jpg`
+ return `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/chara-square/${character?.granblue_id}_${suffix}.jpg`;
}
function openChange(open: boolean) {
- setOpen(open)
+ setOpen(open);
}
function close() {
- setOpen(false)
- props.resetConflict()
+ setOpen(false);
+ props.resetConflict();
}
return (
@@ -107,7 +107,7 @@ const CharacterConflictModal = (props: Props) => {
>
- pushHistory?: (path: string) => void
+ new: boolean;
+ characters?: GridCharacter[];
+ createParty: () => Promise>;
+ pushHistory?: (path: string) => void;
}
const CharacterGrid = (props: Props) => {
// Constants
- const numCharacters: number = 5
+ const numCharacters: number = 5;
// Cookies
- const cookie = getCookie("account")
+ const cookie = getCookie("account");
const accountData: AccountCookie = cookie
? JSON.parse(cookie as string)
- : null
+ : null;
const headers = accountData
? { headers: { Authorization: `Bearer ${accountData.token}` } }
- : {}
+ : {};
// Set up state for view management
- const { party, grid } = useSnapshot(appState)
- const [slug, setSlug] = useState()
- const [modalOpen, setModalOpen] = useState(false)
+ const { party, grid } = useSnapshot(appState);
+ const [slug, setSlug] = useState();
+ const [modalOpen, setModalOpen] = useState(false);
// Set up state for conflict management
- const [incoming, setIncoming] = useState()
- const [conflicts, setConflicts] = useState([])
- const [position, setPosition] = useState(0)
+ const [incoming, setIncoming] = useState();
+ const [conflicts, setConflicts] = useState([]);
+ const [position, setPosition] = useState(0);
// Set up state for data
- const [job, setJob] = useState()
+ const [job, setJob] = useState();
const [jobSkills, setJobSkills] = useState({
0: undefined,
1: undefined,
2: undefined,
3: undefined,
- })
- const [errorMessage, setErrorMessage] = useState("")
+ });
+ const [errorMessage, setErrorMessage] = useState("");
// Create a temporary state to store previous character uncap values
const [previousUncapValues, setPreviousUncapValues] = useState<{
- [key: number]: number | undefined
- }>({})
+ [key: number]: number | undefined;
+ }>({});
// Set the editable flag only on first load
useEffect(() => {
@@ -71,58 +71,58 @@ const CharacterGrid = (props: Props) => {
(accountData && party.user && accountData.userId === party.user.id) ||
props.new
)
- appState.party.editable = true
- else appState.party.editable = false
- }, [props.new, accountData, party])
+ appState.party.editable = true;
+ else appState.party.editable = false;
+ }, [props.new, accountData, party]);
useEffect(() => {
- setJob(appState.party.job)
- setJobSkills(appState.party.jobSkills)
- }, [appState])
+ setJob(appState.party.job);
+ setJobSkills(appState.party.jobSkills);
+ }, [appState]);
// Initialize an array of current uncap values for each characters
useEffect(() => {
- let initialPreviousUncapValues: { [key: number]: number } = {}
+ let initialPreviousUncapValues: { [key: number]: number } = {};
Object.values(appState.grid.characters).map((o) => {
- o ? (initialPreviousUncapValues[o.position] = o.uncap_level) : 0
- })
- setPreviousUncapValues(initialPreviousUncapValues)
- }, [appState.grid.characters])
+ o ? (initialPreviousUncapValues[o.position] = o.uncap_level) : 0;
+ });
+ setPreviousUncapValues(initialPreviousUncapValues);
+ }, [appState.grid.characters]);
// Methods: Adding an object from search
function receiveCharacterFromSearch(
object: SearchableObject,
position: number
) {
- const character = object as Character
+ const character = object as Character;
if (!party.id) {
props.createParty().then((response) => {
- const party = response.data.party
- appState.party.id = party.id
- setSlug(party.shortcode)
+ const party = response.data.party;
+ appState.party.id = party.id;
+ setSlug(party.shortcode);
- if (props.pushHistory) props.pushHistory(`/p/${party.shortcode}`)
+ if (props.pushHistory) props.pushHistory(`/p/${party.shortcode}`);
saveCharacter(party.id, character, position)
.then((response) => storeGridCharacter(response.data.grid_character))
- .catch((error) => console.error(error))
- })
+ .catch((error) => console.error(error));
+ });
} else {
if (party.editable)
saveCharacter(party.id, character, position)
.then((response) => handleCharacterResponse(response.data))
- .catch((error) => console.error(error))
+ .catch((error) => console.error(error));
}
}
async function handleCharacterResponse(data: any) {
if (data.hasOwnProperty("conflicts")) {
- setIncoming(data.incoming)
- setConflicts(data.conflicts)
- setPosition(data.position)
- setModalOpen(true)
+ setIncoming(data.incoming);
+ setConflicts(data.conflicts);
+ setPosition(data.position);
+ setModalOpen(true);
} else {
- storeGridCharacter(data.grid_character)
+ storeGridCharacter(data.grid_character);
}
}
@@ -141,11 +141,11 @@ const CharacterGrid = (props: Props) => {
},
},
headers
- )
+ );
}
function storeGridCharacter(gridCharacter: GridCharacter) {
- appState.grid.characters[gridCharacter.position] = gridCharacter
+ appState.grid.characters[gridCharacter.position] = gridCharacter;
}
async function resolveConflict() {
@@ -159,26 +159,26 @@ const CharacterGrid = (props: Props) => {
})
.then((response) => {
// Store new character in state
- storeGridCharacter(response.data.grid_character)
+ storeGridCharacter(response.data.grid_character);
// Remove conflicting characters from state
conflicts.forEach(
(c) => (appState.grid.characters[c.position] = undefined)
- )
+ );
// Reset conflict
- resetConflict()
+ resetConflict();
// Close modal
- setModalOpen(false)
- })
+ setModalOpen(false);
+ });
}
}
function resetConflict() {
- setPosition(-1)
- setConflicts([])
- setIncoming(undefined)
+ setPosition(-1);
+ setConflicts([]);
+ setIncoming(undefined);
}
// Methods: Saving job and job skills
@@ -188,99 +188,99 @@ const CharacterGrid = (props: Props) => {
job_id: job ? job.id : "",
},
...headers,
- }
+ };
if (party.id && appState.party.editable) {
api.updateJob({ partyId: party.id, params: payload }).then((response) => {
- const newParty = response.data.party
+ const newParty = response.data.party;
- setJob(newParty.job)
- appState.party.job = newParty.job
+ setJob(newParty.job);
+ appState.party.job = newParty.job;
- setJobSkills(newParty.job_skills)
- appState.party.jobSkills = newParty.job_skills
- })
+ setJobSkills(newParty.job_skills);
+ appState.party.jobSkills = newParty.job_skills;
+ });
}
- }
+ };
const saveJobSkill = function (skill: JobSkill, position: number) {
if (party.id && appState.party.editable) {
- const positionedKey = `skill${position}_id`
+ const positionedKey = `skill${position}_id`;
let skillObject: {
- [key: string]: string | undefined
- skill0_id?: string
- skill1_id?: string
- skill2_id?: string
- skill3_id?: string
- } = {}
+ [key: string]: string | undefined;
+ skill0_id?: string;
+ skill1_id?: string;
+ skill2_id?: string;
+ skill3_id?: string;
+ } = {};
const payload = {
party: skillObject,
...headers,
- }
+ };
- skillObject[positionedKey] = skill.id
+ skillObject[positionedKey] = skill.id;
api
.updateJobSkills({ partyId: party.id, params: payload })
.then((response) => {
// Update the current skills
- const newSkills = response.data.party.job_skills
- setJobSkills(newSkills)
- appState.party.jobSkills = newSkills
+ const newSkills = response.data.party.job_skills;
+ setJobSkills(newSkills);
+ appState.party.jobSkills = newSkills;
})
.catch((error) => {
- const data = error.response.data
+ const data = error.response.data;
if (data.code == "too_many_skills_of_type") {
const message = `You can only add up to 2 ${
data.skill_type === "emp"
? data.skill_type.toUpperCase()
: data.skill_type
- } skills to your party at once.`
- setErrorMessage(message)
+ } skills to your party at once.`;
+ setErrorMessage(message);
}
- console.log(error.response.data)
- })
+ console.log(error.response.data);
+ });
}
- }
+ };
// Methods: Helpers
function characterUncapLevel(character: Character) {
- let uncapLevel
+ let uncapLevel;
if (character.special) {
- uncapLevel = 3
- if (character.uncap.ulb) uncapLevel = 5
- else if (character.uncap.flb) uncapLevel = 4
+ uncapLevel = 3;
+ if (character.uncap.ulb) uncapLevel = 5;
+ else if (character.uncap.flb) uncapLevel = 4;
} else {
- uncapLevel = 4
- if (character.uncap.ulb) uncapLevel = 6
- else if (character.uncap.flb) uncapLevel = 5
+ uncapLevel = 4;
+ if (character.uncap.ulb) uncapLevel = 6;
+ else if (character.uncap.flb) uncapLevel = 5;
}
- return uncapLevel
+ return uncapLevel;
}
// Methods: Updating uncap level
// Note: Saves, but debouncing is not working properly
async function saveUncap(id: string, position: number, uncapLevel: number) {
- storePreviousUncapValue(position)
+ storePreviousUncapValue(position);
try {
if (uncapLevel != previousUncapValues[position])
await api.updateUncap("character", id, uncapLevel).then((response) => {
- storeGridCharacter(response.data.grid_character)
- })
+ storeGridCharacter(response.data.grid_character);
+ });
} catch (error) {
- console.error(error)
+ console.error(error);
// Revert optimistic UI
- updateUncapLevel(position, previousUncapValues[position])
+ updateUncapLevel(position, previousUncapValues[position]);
// Remove optimistic key
- let newPreviousValues = { ...previousUncapValues }
- delete newPreviousValues[position]
- setPreviousUncapValues(newPreviousValues)
+ let newPreviousValues = { ...previousUncapValues };
+ delete newPreviousValues[position];
+ setPreviousUncapValues(newPreviousValues);
}
}
@@ -289,50 +289,50 @@ const CharacterGrid = (props: Props) => {
position: number,
uncapLevel: number
) {
- memoizeAction(id, position, uncapLevel)
+ memoizeAction(id, position, uncapLevel);
// Optimistically update UI
- updateUncapLevel(position, uncapLevel)
+ updateUncapLevel(position, uncapLevel);
}
const memoizeAction = useCallback(
(id: string, position: number, uncapLevel: number) => {
- debouncedAction(id, position, uncapLevel)
+ debouncedAction(id, position, uncapLevel);
},
[props, previousUncapValues]
- )
+ );
const debouncedAction = useMemo(
() =>
debounce((id, position, number) => {
- saveUncap(id, position, number)
+ saveUncap(id, position, number);
}, 500),
[props, saveUncap]
- )
+ );
const updateUncapLevel = (
position: number,
uncapLevel: number | undefined
) => {
- const character = appState.grid.characters[position]
+ const character = appState.grid.characters[position];
if (character && uncapLevel) {
- character.uncap_level = uncapLevel
- appState.grid.characters[position] = character
+ character.uncap_level = uncapLevel;
+ appState.grid.characters[position] = character;
}
- }
+ };
function storePreviousUncapValue(position: number) {
// Save the current value in case of an unexpected result
- let newPreviousValues = { ...previousUncapValues }
+ let newPreviousValues = { ...previousUncapValues };
if (grid.characters[position]) {
- newPreviousValues[position] = grid.characters[position]?.uncap_level
- setPreviousUncapValues(newPreviousValues)
+ newPreviousValues[position] = grid.characters[position]?.uncap_level;
+ setPreviousUncapValues(newPreviousValues);
}
}
function cancelAlert() {
- setErrorMessage("")
+ setErrorMessage("");
}
// Render: JSX components
@@ -372,12 +372,12 @@ const CharacterGrid = (props: Props) => {
updateUncap={initiateUncapUpdate}
/>
- )
+ );
})}
- )
-}
+ );
+};
-export default CharacterGrid
+export default CharacterGrid;
diff --git a/components/CharacterHovercard/index.tsx b/components/CharacterHovercard/index.tsx
index 9ae4c78d..5007e2ae 100644
--- a/components/CharacterHovercard/index.tsx
+++ b/components/CharacterHovercard/index.tsx
@@ -1,92 +1,125 @@
-import React from 'react'
-import { useRouter } from 'next/router'
-import { useTranslation } from 'next-i18next'
+import React from "react";
+import { useRouter } from "next/router";
+import { useTranslation } from "next-i18next";
-import * as HoverCard from '@radix-ui/react-hover-card'
+import * as HoverCard from "@radix-ui/react-hover-card";
-import WeaponLabelIcon from '~components/WeaponLabelIcon'
-import UncapIndicator from '~components/UncapIndicator'
+import WeaponLabelIcon from "~components/WeaponLabelIcon";
+import UncapIndicator from "~components/UncapIndicator";
-import './index.scss'
+import "./index.scss";
interface Props {
- gridCharacter: GridCharacter
- children: React.ReactNode
+ gridCharacter: GridCharacter;
+ children: React.ReactNode;
}
interface KeyNames {
- [key: string]: {
- en: string,
- jp: string
- }
+ [key: string]: {
+ en: string;
+ jp: string;
+ };
}
const CharacterHovercard = (props: Props) => {
- const router = useRouter()
- const { t } = useTranslation('common')
- const locale = (router.locale && ['en', 'ja'].includes(router.locale)) ? router.locale : 'en'
+ const router = useRouter();
+ const { t } = useTranslation("common");
+ const locale =
+ router.locale && ["en", "ja"].includes(router.locale)
+ ? router.locale
+ : "en";
- const Element = ['null', 'wind', 'fire', 'water', 'earth', 'dark', 'light']
- const Proficiency = ['none', 'sword', 'dagger', 'axe', 'spear', 'bow', 'staff', 'fist', 'harp', 'gun', 'katana']
+ const Element = ["null", "wind", "fire", "water", "earth", "dark", "light"];
+ const Proficiency = [
+ "none",
+ "sword",
+ "dagger",
+ "axe",
+ "spear",
+ "bow",
+ "staff",
+ "fist",
+ "harp",
+ "gun",
+ "katana",
+ ];
- const tintElement = Element[props.gridCharacter.object.element]
- const wikiUrl = `https://gbf.wiki/${props.gridCharacter.object.name.en.replaceAll(' ', '_')}`
+ const tintElement = Element[props.gridCharacter.object.element];
+ const wikiUrl = `https://gbf.wiki/${props.gridCharacter.object.name.en.replaceAll(
+ " ",
+ "_"
+ )}`;
- function characterImage() {
- let imgSrc = ""
-
- if (props.gridCharacter) {
- const character = props.gridCharacter.object
+ function characterImage() {
+ let imgSrc = "";
- // Change the image based on the uncap level
- let suffix = '01'
- if (props.gridCharacter.uncap_level == 6)
- suffix = '04'
- else if (props.gridCharacter.uncap_level == 5)
- suffix = '03'
- else if (props.gridCharacter.uncap_level > 2)
- suffix = '02'
+ if (props.gridCharacter) {
+ const character = props.gridCharacter.object;
- imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/chara-grid/${character.granblue_id}_${suffix}.jpg`
- }
+ // Change the image based on the uncap level
+ let suffix = "01";
+ if (props.gridCharacter.uncap_level == 6) suffix = "04";
+ else if (props.gridCharacter.uncap_level == 5) suffix = "03";
+ else if (props.gridCharacter.uncap_level > 2) suffix = "02";
- return imgSrc
+ imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/chara-grid/${character.granblue_id}_${suffix}.jpg`;
}
- return (
-
+
+ );
+};
+
+export default AXSelect;
diff --git a/components/Button/index.scss b/components/Button/index.scss
index f9053487..78769aee 100644
--- a/components/Button/index.scss
+++ b/components/Button/index.scss
@@ -1,214 +1,213 @@
.Button {
- align-items: center;
- background: transparent;
- border: none;
- border-radius: 6px;
- color: $grey-50;
- display: inline-flex;
- font-size: $font-button;
- font-weight: $normal;
- gap: 6px;
- padding: 8px 12px;
+ align-items: center;
+ background: transparent;
+ border: none;
+ border-radius: 6px;
+ color: $grey-50;
+ display: inline-flex;
+ font-size: $font-button;
+ font-weight: $normal;
+ gap: 6px;
+ padding: 8px 12px;
+
+ &:hover {
+ background: white;
+ cursor: pointer;
+ color: $grey-00;
+
+ .icon svg {
+ fill: $grey-00;
+ }
+
+ .icon.stroke svg {
+ fill: none;
+ stroke: $grey-00;
+ }
+ }
+
+ &.destructive:hover {
+ background: $error;
+ color: white;
+
+ .icon svg {
+ fill: white;
+ }
+ }
+
+ &.save:hover {
+ color: #ff4d4d;
+
+ .icon svg {
+ fill: #ff4d4d;
+ stroke: #ff4d4d;
+ }
+ }
+
+ &.save.Active {
+ color: #ff4d4d;
+
+ .icon svg {
+ fill: #ff4d4d;
+ stroke: #ff4d4d;
+ }
&:hover {
- background: white;
- cursor: pointer;
- color: $grey-00;
+ color: darken(#ff4d4d, 30);
- .icon svg {
- fill: $grey-00;
- }
+ .icon svg {
+ fill: darken(#ff4d4d, 30);
+ stroke: darken(#ff4d4d, 30);
+ }
+ }
+ }
- .icon.stroke svg {
- fill: none;
- stroke: $grey-00;
- }
+ &.modal:hover {
+ background: $grey-90;
+ }
+
+ &.modal.destructive {
+ color: $error;
+
+ &:hover {
+ color: darken($error, 10);
+ }
+ }
+
+ .icon {
+ margin-top: 2px;
+
+ svg {
+ fill: $grey-50;
+ height: 12px;
+ width: 12px;
}
- &.destructive:hover {
- background: $error;
- color: white;
-
- .icon svg {
- fill: white;
- }
+ &.check svg {
+ margin-top: 1px;
+ height: 14px;
+ width: auto;
}
- &.save:hover {
- color: #FF4D4D;
-
- .icon svg {
- fill: #FF4D4D;
- stroke: #FF4D4D;
- }
+ &.stroke svg {
+ fill: none;
+ stroke: $grey-50;
}
- &.save.Active {
- color: #FF4D4D;
-
- .icon svg {
- fill: #FF4D4D;
- stroke: #FF4D4D;
- }
-
- &:hover {
- color: darken(#FF4D4D, 30);
-
- .icon svg {
- fill: darken(#FF4D4D, 30);
- stroke: darken(#FF4D4D, 30);
- }
- }
+ &.settings svg {
+ height: 13px;
+ width: 13px;
}
+ }
- &.modal:hover {
- background: $grey-90;
+ &.Active {
+ background: white;
+ }
+
+ &.btn-blue {
+ background: $blue;
+ color: #8b8b8b;
+
+ &:hover {
+ background: #4b9be5;
+ color: #233e56;
}
+ }
- &.modal.destructive {
- color: $error;
-
- &:hover {
- color: darken($error, 10)
- }
+ &.btn-red {
+ background: #fa4242;
+ color: #860f0f;
+
+ &:hover {
+ background: #e91a1a;
+ color: #4e1717;
+
+ .icon {
+ color: #4e1717;
+ }
}
.icon {
- margin-top: 2px;
-
- svg {
- fill: $grey-50;
- height: 12px;
- width: 12px;
- }
-
- &.check svg {
- margin-top: 1px;
- height: 14px;
- width: auto;
- }
-
- &.stroke svg {
- fill: none;
- stroke: $grey-50;
- }
-
- &.settings svg {
- height: 13px;
- width: 13px;
- }
+ color: #860f0f;
}
+ }
- &.Active {
- background: white;
+ &.btn-disabled {
+ background: #e0e0e0;
+ color: #bababa;
+
+ &:hover {
+ background: #e0e0e0;
+ color: #bababa;
}
+ }
- &.btn-blue {
- background: $blue;
- color: #8b8b8b;
+ &.null {
+ background: $grey-90;
+ color: $grey-50;
- &:hover {
- background: #4B9BE5;
- color: #233E56;
- }
+ &:hover {
+ background: $grey-70;
+ color: $grey-00;
}
+ }
- &.btn-red {
- background: #fa4242;
- color: #860f0f;
+ &.wind {
+ background: $wind-bg-light;
+ color: $wind-text-dark;
- &:hover {
- background: #e91a1a;
- color: #4e1717;
-
- .icon {
- color: #4e1717;
- }
- }
-
- .icon {
- color: #860f0f;
- }
+ &:hover {
+ background: darken($wind-bg-light, 10);
}
+ }
- &.btn-disabled {
- background: #e0e0e0;
- color: #bababa;
+ &.fire {
+ background: $fire-bg-light;
+ color: $fire-text-dark;
- &:hover {
- background: #e0e0e0;
- color: #bababa;
- }
+ &:hover {
+ background: darken($fire-bg-light, 10);
}
+ }
- &.null {
- background: $grey-90;
- color: $grey-50;
+ &.water {
+ background: $water-bg-light;
+ color: $water-text-dark;
- &:hover {
- background: $grey-70;
- color: $grey-00;
- }
+ &:hover {
+ background: darken($water-bg-light, 10);
}
+ }
- &.wind {
- background: $wind-bg-light;
- color: $wind-text-dark;
+ &.earth {
+ background: $earth-bg-light;
+ color: $earth-text-dark;
- &:hover {
- background: darken($wind-bg-light, 10);
- }
+ &:hover {
+ background: darken($earth-bg-light, 10);
}
+ }
- &.fire {
- background: $fire-bg-light;
- color: $fire-text-dark;
+ &.dark {
+ background: $dark-bg-light;
+ color: $dark-text-dark;
- &:hover {
- background: darken($fire-bg-light, 10);
- }
+ &:hover {
+ background: darken($dark-bg-light, 10);
}
+ }
- &.water {
- background: $water-bg-light;
- color: $water-text-dark;
+ &.light {
+ background: $light-bg-light;
+ color: $light-text-dark;
- &:hover {
- background: darken($water-bg-light, 10);
- }
+ &:hover {
+ background: darken($light-bg-light, 10);
}
+ }
- &.earth {
- background: $earth-bg-light;
- color: $earth-text-dark;
-
- &:hover {
- background: darken($earth-bg-light, 10);
- }
- }
-
- &.dark {
- background: $dark-bg-light;
- color: $dark-text-dark;
-
- &:hover {
- background: darken($dark-bg-light, 10);
- }
- }
-
-
- &.light {
- background: $light-bg-light;
- color: $light-text-dark;
-
- &:hover {
- background: darken($light-bg-light, 10);
- }
- }
-
- .text {
- color: inherit;
- display: block;
- width: 100%;
- }
+ .text {
+ color: inherit;
+ display: block;
+ width: 100%;
+ }
}
diff --git a/components/Button/index.tsx b/components/Button/index.tsx
index f83f5e76..b66129b6 100644
--- a/components/Button/index.tsx
+++ b/components/Button/index.tsx
@@ -1,141 +1,161 @@
-import React, { useEffect, useState } from 'react'
-import classNames from 'classnames'
+import React, { useEffect, useState } from "react";
+import classNames from "classnames";
-import Link from 'next/link'
+import Link from "next/link";
-import AddIcon from '~public/icons/Add.svg'
-import CheckIcon from '~public/icons/LargeCheck.svg'
-import CrossIcon from '~public/icons/Cross.svg'
-import EditIcon from '~public/icons/Edit.svg'
-import LinkIcon from '~public/icons/Link.svg'
-import MenuIcon from '~public/icons/Menu.svg'
-import SaveIcon from '~public/icons/Save.svg'
-import SettingsIcon from '~public/icons/Settings.svg'
+import AddIcon from "~public/icons/Add.svg";
+import CheckIcon from "~public/icons/LargeCheck.svg";
+import CrossIcon from "~public/icons/Cross.svg";
+import EditIcon from "~public/icons/Edit.svg";
+import LinkIcon from "~public/icons/Link.svg";
+import MenuIcon from "~public/icons/Menu.svg";
+import SaveIcon from "~public/icons/Save.svg";
+import SettingsIcon from "~public/icons/Settings.svg";
-import './index.scss'
+import "./index.scss";
-import { ButtonType } from '~utils/enums'
+import { ButtonType } from "~utils/enums";
interface Props {
- active?: boolean
- disabled?: boolean
- classes?: string[],
- icon?: string
- type?: ButtonType
- children?: React.ReactNode
- onClick?: (event: React.MouseEvent
+
+ skill.id == value) : undefined
-
- if (secondaryAxValueInput.current)
- setupInput(currentAxSkill, secondaryAxValueInput.current)
- }
- }
-
- function handleInputChange(event: React.ChangeEvent) {
- const value = parseFloat(event.target.value)
- let newErrors = {...errors}
-
- if (primaryAxValueInput.current == event.target) {
- if (handlePrimaryErrors(value))
- setPrimaryAxValue(value)
- } else {
- if (handleSecondaryErrors(value))
- setSecondaryAxValue(value)
- }
- }
-
- function handlePrimaryErrors(value: number) {
- const primaryAxSkill = axData[props.axType - 1][primaryAxModifier]
- let newErrors = {...errors}
-
- if (value < primaryAxSkill.minValue) {
- newErrors.axValue1 = t('ax.errors.value_too_low', {
- name: primaryAxSkill.name[locale],
- minValue: primaryAxSkill.minValue,
- suffix: (primaryAxSkill.suffix) ? primaryAxSkill.suffix : ''
- })
- } else if (value > primaryAxSkill.maxValue) {
- newErrors.axValue1 = t('ax.errors.value_too_high', {
- name: primaryAxSkill.name[locale],
- maxValue: primaryAxSkill.minValue,
- suffix: (primaryAxSkill.suffix) ? primaryAxSkill.suffix : ''
- })
- } else if (!value || value <= 0) {
- newErrors.axValue1 = t('ax.errors.value_empty', { name: primaryAxSkill.name[locale] })
- } else {
- newErrors.axValue1 = ''
- }
-
- setErrors(newErrors)
-
- return newErrors.axValue1.length === 0
- }
-
- function handleSecondaryErrors(value: number) {
- const primaryAxSkill = axData[props.axType - 1][primaryAxModifier]
- let newErrors = {...errors}
-
- if (primaryAxSkill.secondary) {
- const secondaryAxSkill = primaryAxSkill.secondary.find(skill => skill.id == secondaryAxModifier)
-
- if (secondaryAxSkill) {
- if (value < secondaryAxSkill.minValue) {
- newErrors.axValue2 = t('ax.errors.value_too_low', {
- name: secondaryAxSkill.name[locale],
- minValue: secondaryAxSkill.minValue,
- suffix: (secondaryAxSkill.suffix) ? secondaryAxSkill.suffix : ''
- })
- } else if (value > secondaryAxSkill.maxValue) {
- newErrors.axValue2 = t('ax.errors.value_too_high', {
- name: secondaryAxSkill.name[locale],
- maxValue: secondaryAxSkill.minValue,
- suffix: (secondaryAxSkill.suffix) ? secondaryAxSkill.suffix : ''
- })
- } else if (!secondaryAxSkill.suffix && value % 1 !== 0) {
- newErrors.axValue2 = t('ax.errors.value_not_whole', { name: secondaryAxSkill.name[locale] })
- } else if (primaryAxValue <= 0) {
- newErrors.axValue1 = t('ax.errors.value_empty', { name: primaryAxSkill.name[locale] })
- } else {
- newErrors.axValue2 = ''
- }
- }
- }
-
- setErrors(newErrors)
-
- return newErrors.axValue2.length === 0
- }
-
- function setupInput(ax: AxSkill | undefined, element: HTMLInputElement) {
- if (ax) {
- const rangeString = `${ax.minValue}~${ax.maxValue}${ax.suffix || ''}`
-
- element.disabled = false
- element.placeholder = rangeString
- element.min = `${ax.minValue}`
- element.max = `${ax.maxValue}`
- element.step = (ax.suffix) ? "0.5" : "1"
- } else {
- if (primaryAxValueInput.current && secondaryAxValueInput.current) {
- if (primaryAxValueInput.current == element) {
- primaryAxValueInput.current.disabled = true
- primaryAxValueInput.current.placeholder = ''
- }
-
- secondaryAxValueInput.current.disabled = true
- secondaryAxValueInput.current.placeholder = ''
- }
- }
- }
-
- return (
-
-export default AXSelect
\ No newline at end of file
+
-
- )
-}
+
-
-
-
-
-
-
- {errors.axValue1}
-
-
+ className="Input"
+ type="number"
+ onChange={handleInputChange}
+ ref={primaryAxValueInput}
+ disabled={primaryAxValue != 0}
+ />
-
-
-
- {errors.axValue2}
-{errors.axValue1}
+
+
+
+
+
+
+ {errors.axValue2}
+
-
+ return imgSrc;
+ }
- {t('buttons.wiki')}
-
- ![{props.gridCharacter.object.name[locale]}]({characterImage()})
-
- { props.gridCharacter.object.name[locale] }
-
-
-
-
-
+
-export default CharacterHovercard
+
+ {t("buttons.wiki")}
+
+
+
+
+ {props.gridCharacter.object.name[locale]}
+
+
+
+
+
-
- {character.name[locale]}
-
-
-
+
+ {character.name[locale]}
+
+
+
- x.checked).filter(Boolean).length} open={rarityMenu} onOpenChange={rarityMenuOpened}>
- {t('filters.labels.rarity')}
- { Array.from(Array(rarities.length)).map((x, i) => {
- return (
-
- {t(`rarities.${rarities[i]}`)}
-
- )}
- ) }
-
+
+ {`${t(
+ "filters.labels.proficiency"
+ )} ${proficiency}`}
+
+
+ {Array.from(Array(proficiencies.length / 2)).map((x, i) => {
+ const checked =
+ proficiency == 1
+ ? proficiency1State[proficiencies[i]].checked
+ : proficiency2State[proficiencies[i]].checked;
- x.checked).filter(Boolean).length} open={elementMenu} onOpenChange={elementMenuOpened}>
- {t('filters.labels.element')}
- { Array.from(Array(elements.length)).map((x, i) => {
- return (
-
- {t(`elements.${elements[i]}`)}
-
- )}
- ) }
-
+ return (
+
+ {t(`proficiencies.${proficiencies[i]}`)}
+
+ );
+ })}
+
+
+ {Array.from(Array(proficiencies.length / 2)).map((x, i) => {
+ const checked =
+ proficiency == 1
+ ? proficiency1State[
+ proficiencies[i + proficiencies.length / 2]
+ ].checked
+ : proficiency2State[
+ proficiencies[i + proficiencies.length / 2]
+ ].checked;
- { renderProficiencyFilter(1) }
- { renderProficiencyFilter(2) }
-
- )
-}
+ return (
+
+ x.checked)
+ .filter(Boolean).length
+ }
+ open={rarityMenu}
+ onOpenChange={rarityMenuOpened}
+ >
+
+ {t("filters.labels.rarity")}
+
+ {Array.from(Array(rarities.length)).map((x, i) => {
+ return (
+
+ {t(`rarities.${rarities[i]}`)}
+
+ );
+ })}
+
+
+ x.checked)
+ .filter(Boolean).length
+ }
+ open={elementMenu}
+ onOpenChange={elementMenuOpened}
+ >
+
+ {t("filters.labels.element")}
+
+ {Array.from(Array(elements.length)).map((x, i) => {
+ return (
+
+ {t(`elements.${elements[i]}`)}
+
+ );
+ })}
+
+
+ {renderProficiencyFilter(1)}
+ {renderProficiencyFilter(2)}
+
+ );
+};
+
+export default CharacterSearchFilterBar;
diff --git a/components/CharacterUnit/index.scss b/components/CharacterUnit/index.scss
index b51bd057..265f0555 100644
--- a/components/CharacterUnit/index.scss
+++ b/components/CharacterUnit/index.scss
@@ -1,79 +1,78 @@
.CharacterUnit {
+ display: flex;
+ flex-direction: column;
+ gap: calc($unit / 2);
+ min-height: 320px;
+ max-width: 200px;
+ margin-bottom: $unit * 4;
+
+ &.editable .CharacterImage:hover {
+ border: $hover-stroke;
+ box-shadow: $hover-shadow;
+ cursor: pointer;
+ transform: $scale-tall;
+ }
+
+ &.filled h3 {
+ display: block;
+ }
+
+ &.filled ul {
display: flex;
- flex-direction: column;
- gap: calc($unit / 2);
- min-height: 320px;
- max-width: 200px;
- margin-bottom: $unit * 4;
+ }
- &.editable .CharacterImage:hover {
- border: $hover-stroke;
- box-shadow: $hover-shadow;
- cursor: pointer;
- transform: $scale-tall;
+ h3,
+ ul {
+ display: none;
+ }
+
+ h3 {
+ color: #333;
+ font-size: $font-regular;
+ font-weight: $normal;
+ line-height: 1.1;
+ margin: 0;
+ max-width: 131px;
+ text-align: center;
+ word-wrap: normal;
+ }
+
+ img {
+ position: relative;
+ width: 100%;
+ z-index: 2;
+ }
+
+ .CharacterImage {
+ aspect-ratio: 131 / 273;
+ background: white;
+ border: 1px solid rgba(0, 0, 0, 0);
+ border-radius: $unit;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+ transition: all 0.18s ease-in-out;
+ height: auto;
+ width: 131px;
+
+ @media (max-width: $medium-screen) {
+ width: 17vw;
}
- &.filled h3 {
- display: block;
+ &:hover .icon svg {
+ color: $grey-40;
}
- &.filled ul {
- display: flex;
- }
-
- h3,
- ul {
- display: none;
- }
-
- h3 {
- color: #333;
- font-size: $font-regular;
- font-weight: $normal;
- line-height: 1.1;
- margin: 0;
- max-width: 131px;
- text-align: center;
- word-wrap: normal;
- }
-
- img {
- position: relative;
- width: 100%;
- z-index: 2;
- }
-
-
- .CharacterImage {
- aspect-ratio: 131 / 273;
- background: white;
- border: 1px solid rgba(0, 0, 0, 0);
- border-radius: $unit;
- display: flex;
- align-items: center;
- justify-content: center;
- overflow: hidden;
- transition: all 0.18s ease-in-out;
- height: auto;
- width: 131px;
-
- @media (max-width: $medium-screen) {
- width: 17vw;
- }
-
- &:hover .icon svg {
- color: $grey-40;
- }
-
- .icon {
- position: absolute;
- height: $unit * 3;
- width: $unit * 3;
- z-index: 1;
-
- svg {
- fill: $grey-70;
- }
- }
+ .icon {
+ position: absolute;
+ height: $unit * 3;
+ width: $unit * 3;
+ z-index: 1;
+
+ svg {
+ fill: $grey-70;
+ }
}
+ }
}
diff --git a/components/CharacterUnit/index.tsx b/components/CharacterUnit/index.tsx
index 13e46635..de02955a 100644
--- a/components/CharacterUnit/index.tsx
+++ b/components/CharacterUnit/index.tsx
@@ -1,85 +1,87 @@
-import React, { useEffect, useState } from "react"
-import { useRouter } from "next/router"
-import { useSnapshot } from "valtio"
-import { useTranslation } from "next-i18next"
-import classnames from "classnames"
+import React, { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import { useSnapshot } from "valtio";
+import { useTranslation } from "next-i18next";
+import classnames from "classnames";
-import { appState } from "~utils/appState"
+import { appState } from "~utils/appState";
-import CharacterHovercard from "~components/CharacterHovercard"
-import SearchModal from "~components/SearchModal"
-import UncapIndicator from "~components/UncapIndicator"
-import PlusIcon from "~public/icons/Add.svg"
+import CharacterHovercard from "~components/CharacterHovercard";
+import SearchModal from "~components/SearchModal";
+import UncapIndicator from "~components/UncapIndicator";
+import PlusIcon from "~public/icons/Add.svg";
-import type { SearchableObject } from "~types"
+import type { SearchableObject } from "~types";
-import "./index.scss"
+import "./index.scss";
interface Props {
- gridCharacter?: GridCharacter
- position: number
- editable: boolean
- updateObject: (object: SearchableObject, position: number) => void
- updateUncap: (id: string, position: number, uncap: number) => void
+ gridCharacter?: GridCharacter;
+ position: number;
+ editable: boolean;
+ updateObject: (object: SearchableObject, position: number) => void;
+ updateUncap: (id: string, position: number, uncap: number) => void;
}
const CharacterUnit = (props: Props) => {
- const { t } = useTranslation("common")
+ const { t } = useTranslation("common");
- const { party, grid } = useSnapshot(appState)
+ const { party, grid } = useSnapshot(appState);
- const router = useRouter()
+ const router = useRouter();
const locale =
- router.locale && ["en", "ja"].includes(router.locale) ? router.locale : "en"
+ router.locale && ["en", "ja"].includes(router.locale)
+ ? router.locale
+ : "en";
- const [imageUrl, setImageUrl] = useState("")
+ const [imageUrl, setImageUrl] = useState("");
const classes = classnames({
CharacterUnit: true,
editable: props.editable,
filled: props.gridCharacter !== undefined,
- })
+ });
- const gridCharacter = props.gridCharacter
- const character = gridCharacter?.object
+ const gridCharacter = props.gridCharacter;
+ const character = gridCharacter?.object;
useEffect(() => {
- generateImageUrl()
- })
+ generateImageUrl();
+ });
function generateImageUrl() {
- let imgSrc = ""
+ let imgSrc = "";
if (props.gridCharacter) {
- const character = props.gridCharacter.object!
+ const character = props.gridCharacter.object!;
// Change the image based on the uncap level
- let suffix = "01"
- if (props.gridCharacter.uncap_level == 6) suffix = "04"
- else if (props.gridCharacter.uncap_level == 5) suffix = "03"
- else if (props.gridCharacter.uncap_level > 2) suffix = "02"
+ let suffix = "01";
+ if (props.gridCharacter.uncap_level == 6) suffix = "04";
+ else if (props.gridCharacter.uncap_level == 5) suffix = "03";
+ else if (props.gridCharacter.uncap_level > 2) suffix = "02";
// Special casing for Lyria (and Young Cat eventually)
if (props.gridCharacter.object.granblue_id === "3030182000") {
- let element = 1
+ let element = 1;
if (grid.weapons.mainWeapon && grid.weapons.mainWeapon.element) {
- element = grid.weapons.mainWeapon.element
+ element = grid.weapons.mainWeapon.element;
} else if (party.element != 0) {
- element = party.element
+ element = party.element;
}
- suffix = `${suffix}_0${element}`
+ suffix = `${suffix}_0${element}`;
}
- imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/chara-main/${character.granblue_id}_${suffix}.jpg`
+ imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/chara-main/${character.granblue_id}_${suffix}.jpg`;
}
- setImageUrl(imgSrc)
+ setImageUrl(imgSrc);
}
function passUncapData(uncap: number) {
if (props.gridCharacter)
- props.updateUncap(props.gridCharacter.id, props.position, uncap)
+ props.updateUncap(props.gridCharacter.id, props.position, uncap);
}
const image = (
@@ -93,7 +95,7 @@ const CharacterUnit = (props: Props) => {
""
)}
- )
+ );
const editableImage = (
@@ -123,15 +125,15 @@ const CharacterUnit = (props: Props) => {
)}
- )
+ );
const withHovercard = (
{character?.name[locale]}
@@ -36,11 +36,11 @@ const ExtraSummons = (props: Props) => {
updateUncap={props.updateUncap}
/>
- )
+ );
})}
- )
-}
+ );
+};
-export default ExtraSummons
+export default ExtraSummons;
diff --git a/components/ExtraWeapons/index.scss b/components/ExtraWeapons/index.scss
index eac815e9..524c2a48 100644
--- a/components/ExtraWeapons/index.scss
+++ b/components/ExtraWeapons/index.scss
@@ -1,47 +1,47 @@
#ExtraGrid {
- background: #ECEBFF;
- border-radius: 8px;
- box-sizing: border-box;
+ background: #ecebff;
+ border-radius: 8px;
+ box-sizing: border-box;
+ display: flex;
+ justify-content: center;
+ margin: 20px auto;
+ max-width: 766px;
+ padding: 16px 16px 16px 0;
+ position: relative;
+ left: 8px;
+
+ @media (max-width: $medium-screen) {
+ left: auto;
+ max-width: auto;
+ width: 100%;
+ }
+
+ & > span {
+ color: #4f3c79;
display: flex;
+ align-items: center;
+ flex-grow: 1;
justify-content: center;
- margin: 20px auto;
- max-width: 766px;
- padding: 16px 16px 16px 0;
- position: relative;
- left: 8px;
+ line-height: 1.2;
+ font-weight: 500;
+ margin-right: 16px;
+ text-align: center;
+ }
- @media (max-width: $medium-screen) {
- left: auto;
- max-width: auto;
- width: 100%;
- }
+ .grid_weapons {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ margin: 0;
+ padding: 0;
+ max-width: 528px;
+ }
- & > span {
- color: #4F3C79;
- display: flex;
- align-items: center;
- flex-grow: 1;
- justify-content: center;
- line-height: 1.2;
- font-weight: 500;
- margin-right: 16px;
- text-align: center;
- }
+ .WeaponUnit .WeaponImage {
+ background: #d5d3f6;
+ }
- .grid_weapons {
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- margin: 0;
- padding: 0;
- max-width: 528px;
- }
-
- .WeaponUnit .WeaponImage {
- background: #D5D3F6;
- }
-
- .WeaponUnit .WeaponImage .icon svg {
- fill: #8F8AC6;
- }
-}
\ No newline at end of file
+ .WeaponUnit .WeaponImage .icon svg {
+ fill: #8f8ac6;
+ }
+}
diff --git a/components/ExtraWeapons/index.tsx b/components/ExtraWeapons/index.tsx
index f9ed14a0..9ddbb9bd 100644
--- a/components/ExtraWeapons/index.tsx
+++ b/components/ExtraWeapons/index.tsx
@@ -1,24 +1,24 @@
-import React from "react"
-import { useTranslation } from "next-i18next"
-import WeaponUnit from "~components/WeaponUnit"
+import React from "react";
+import { useTranslation } from "next-i18next";
+import WeaponUnit from "~components/WeaponUnit";
-import type { SearchableObject } from "~types"
+import type { SearchableObject } from "~types";
-import "./index.scss"
+import "./index.scss";
// Props
interface Props {
- grid: GridArray
@@ -36,11 +36,11 @@ const ExtraWeapons = (props: Props) => {
updateUncap={props.updateUncap}
/>
- )
+ );
})}
- )
-}
+ );
+};
-export default ExtraWeapons
+export default ExtraWeapons;
diff --git a/components/Fieldset/index.scss b/components/Fieldset/index.scss
index 99587b40..97cee7ff 100644
--- a/components/Fieldset/index.scss
+++ b/components/Fieldset/index.scss
@@ -1,33 +1,34 @@
.Fieldset {
+ border: none;
+ display: inline-flex;
+ flex-direction: column;
+ padding: 0;
+ margin: 0 0 $unit 0;
+
+ .Input {
+ -webkit-font-smoothing: antialiased;
border: none;
- display: inline-flex;
- flex-direction: column;
- padding: 0;
- margin: 0 0 $unit 0;
- .Input {
- -webkit-font-smoothing: antialiased;
- border: none;
-
- background-color: white;
- border-radius: 6px;
- box-sizing: border-box;
- color: $grey-00;
- display: block;
- font-size: $font-regular;
- padding: 12px 16px;
- width: 100%;
- }
+ background-color: white;
+ border-radius: 6px;
+ box-sizing: border-box;
+ color: $grey-00;
+ display: block;
+ font-size: $font-regular;
+ padding: 12px 16px;
+ width: 100%;
+ }
- .InputError {
- color: $error;
- font-size: $font-tiny;
- margin: $unit 0;
- padding: calc($unit / 2) ($unit * 2);
- }
+ .InputError {
+ color: $error;
+ font-size: $font-tiny;
+ margin: $unit 0;
+ padding: calc($unit / 2) ($unit * 2);
+ }
}
-::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
- color: #a9a9a9 !important;
- opacity: 1; /* Firefox */
-}
\ No newline at end of file
+::placeholder {
+ /* Chrome, Firefox, Opera, Safari 10.1+ */
+ color: #a9a9a9 !important;
+ opacity: 1; /* Firefox */
+}
diff --git a/components/Fieldset/index.tsx b/components/Fieldset/index.tsx
index 1eb78e55..25ffeadc 100644
--- a/components/Fieldset/index.tsx
+++ b/components/Fieldset/index.tsx
@@ -1,38 +1,40 @@
-import React from 'react'
-import './index.scss'
+import React from "react";
+import "./index.scss";
interface Props {
- fieldName: string
- placeholder: string
- value?: string
- error: string
- onBlur?: (event: React.ChangeEvent
- {props.children}
-
-
- )
-}
+ return (
+
+ {props.children}
+
+
+ );
+};
-export default FilterBar
+export default FilterBar;
diff --git a/components/GridRep/index.scss b/components/GridRep/index.scss
index 37b5a10d..88851d77 100644
--- a/components/GridRep/index.scss
+++ b/components/GridRep/index.scss
@@ -1,148 +1,152 @@
.GridRep {
- border-radius: 6px;
+ border-radius: 6px;
+ display: flex;
+ flex-direction: column;
+ gap: $unit;
+ padding: $unit * 2;
+
+ &:hover {
+ background: white;
+
+ h2,
+ .Grid {
+ cursor: pointer;
+ }
+
+ .Grid .weapon {
+ box-shadow: inset 0 0 0 1px $grey-80;
+ }
+ }
+
+ .Grid {
+ display: flex;
+ flex-direction: row;
+ flex-shrink: 0;
+
+ .weapon {
+ background: white;
+ border-radius: 4px;
+ }
+
+ .grid_mainhand {
+ margin-right: $unit;
+ height: 139px;
+ width: 66px;
+ }
+
+ .grid_weapons {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ grid-template-rows: 1fr 1fr 1fr;
+ gap: $unit;
+ margin: 0;
+ padding: 0;
+ width: fit-content;
+ }
+
+ .grid_weapon {
+ float: left;
+ height: 40px;
+ width: 70px;
+ }
+
+ .grid_mainhand img[src*="jpg"],
+ .grid_weapon img[src*="jpg"] {
+ border-radius: 4px;
+ width: 100%;
+ height: 100%;
+ }
+ }
+
+ .Details {
display: flex;
flex-direction: column;
- gap: $unit;
- padding: $unit * 2;
+ gap: calc($unit / 2);
- &:hover {
- background: white;
+ h2 {
+ color: $grey-00;
+ font-size: $font-regular;
+ overflow: hidden;
+ padding-bottom: 1px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ max-width: 258px; // Can we not do this?
- h2, .Grid {
- cursor: pointer;
- }
-
- .Grid .weapon {
- box-shadow: inset 0 0 0 1px $grey-80;
- }
+ &.empty {
+ color: $grey-50;
+ }
}
- .Grid {
- display: flex;
- flex-direction: row;
- flex-shrink: 0;
+ .top {
+ display: flex;
+ flex-direction: row;
+ gap: calc($unit / 2);
+ align-items: center;
- .weapon {
- background: white;
- border-radius: 4px;
- }
-
- .grid_mainhand {
- margin-right: $unit;
- height: 139px;
- width: 66px;
- }
-
- .grid_weapons {
- display: grid;
- grid-template-columns: 1fr 1fr 1fr;
- grid-template-rows: 1fr 1fr 1fr;
- gap: $unit;
- margin: 0;
- padding: 0;
- width: fit-content;
- }
-
- .grid_weapon {
- float: left;
- height: 40px;
- width: 70px;
- }
-
- .grid_mainhand img[src*="jpg"],
- .grid_weapon img[src*="jpg"] {
- border-radius: 4px;
- width: 100%;
- height: 100%;
- }
- }
-
- .Details {
+ .info {
display: flex;
flex-direction: column;
+ flex-grow: 1;
gap: calc($unit / 2);
+ }
- h2 {
- color: $grey-00;
- font-size: $font-regular;
- overflow: hidden;
- padding-bottom: 1px;
- text-overflow: ellipsis;
- white-space: nowrap;
- max-width: 258px; // Can we not do this?
+ button svg {
+ width: 14px;
+ height: 14px;
+ }
- &.empty {
- color: $grey-50;
- }
- }
-
- .top {
- display: flex;
- flex-direction: row;
- gap: calc($unit / 2);
- align-items: center;
-
- .info {
- display: flex;
- flex-direction: column;
- flex-grow: 1;
- gap: calc($unit / 2);
- }
-
- button svg {
- width: 14px;
- height: 14px;
- }
-
- button:hover,
- button.Active {
- background: $grey-90;
- }
- }
-
- .bottom {
- display: flex;
- flex-direction: row;
- }
-
- .raid, .user, time {
- color: $grey-50;
- font-size: $font-small;
- }
-
- .raid, .user {
- flex-grow: 1;
- }
-
- .raid {
- margin-bottom: calc($unit / 2);
- }
-
- .user {
- display: flex;
- gap: calc($unit / 2);
- align-items: center;
-
-
- img, .no-user {
- $diameter: 18px;
-
- border-radius: calc($diameter / 2);
- height: $diameter;
- width: $diameter;
- }
-
- img.gran {
- background-color: #CEE7FE;
- }
-
- img.djeeta {
- background-color: #FFE1FE;
- }
-
- .no-user {
- background: $grey-80;
- }
- }
+ button:hover,
+ button.Active {
+ background: $grey-90;
+ }
}
+
+ .bottom {
+ display: flex;
+ flex-direction: row;
+ }
+
+ .raid,
+ .user,
+ time {
+ color: $grey-50;
+ font-size: $font-small;
+ }
+
+ .raid,
+ .user {
+ flex-grow: 1;
+ }
+
+ .raid {
+ margin-bottom: calc($unit / 2);
+ }
+
+ .user {
+ display: flex;
+ gap: calc($unit / 2);
+ align-items: center;
+
+ img,
+ .no-user {
+ $diameter: 18px;
+
+ border-radius: calc($diameter / 2);
+ height: $diameter;
+ width: $diameter;
+ }
+
+ img.gran {
+ background-color: #cee7fe;
+ }
+
+ img.djeeta {
+ background-color: #ffe1fe;
+ }
+
+ .no-user {
+ background: $grey-80;
+ }
+ }
+ }
}
diff --git a/components/GridRep/index.tsx b/components/GridRep/index.tsx
index ff9fe507..2febb9ea 100644
--- a/components/GridRep/index.tsx
+++ b/components/GridRep/index.tsx
@@ -1,87 +1,89 @@
-import React, { useEffect, useState } from "react"
-import { useRouter } from "next/router"
-import { useSnapshot } from "valtio"
-import { useTranslation } from "next-i18next"
-import classNames from "classnames"
+import React, { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import { useSnapshot } from "valtio";
+import { useTranslation } from "next-i18next";
+import classNames from "classnames";
-import { accountState } from "~utils/accountState"
-import { formatTimeAgo } from "~utils/timeAgo"
+import { accountState } from "~utils/accountState";
+import { formatTimeAgo } from "~utils/timeAgo";
-import Button from "~components/Button"
-import { ButtonType } from "~utils/enums"
+import Button from "~components/Button";
+import { ButtonType } from "~utils/enums";
-import "./index.scss"
+import "./index.scss";
interface Props {
- shortcode: string
- id: string
- name: string
- raid: Raid
- grid: GridWeapon[]
- user?: User
- favorited: boolean
- createdAt: Date
- displayUser?: boolean | false
- onClick: (shortcode: string) => void
- onSave?: (partyId: string, favorited: boolean) => void
+ shortcode: string;
+ id: string;
+ name: string;
+ raid: Raid;
+ grid: GridWeapon[];
+ user?: User;
+ favorited: boolean;
+ createdAt: Date;
+ displayUser?: boolean | false;
+ onClick: (shortcode: string) => void;
+ onSave?: (partyId: string, favorited: boolean) => void;
}
const GridRep = (props: Props) => {
- const numWeapons: number = 9
+ const numWeapons: number = 9;
- const { account } = useSnapshot(accountState)
+ const { account } = useSnapshot(accountState);
- const router = useRouter()
- const { t } = useTranslation("common")
+ const router = useRouter();
+ const { t } = useTranslation("common");
const locale =
- router.locale && ["en", "ja"].includes(router.locale) ? router.locale : "en"
+ router.locale && ["en", "ja"].includes(router.locale)
+ ? router.locale
+ : "en";
- const [mainhand, setMainhand] = useState
@@ -145,7 +147,7 @@ const GridRep = (props: Props) => {
- )
+ );
const detailsWithUsername = (
@@ -181,7 +183,7 @@ const GridRep = (props: Props) => {
- )
+ );
return (
@@ -198,12 +200,12 @@ const GridRep = (props: Props) => {
>
{generateGridImage(i)}
- )
+ );
})}
- )
-}
+ );
+};
-export default GridRep
+export default GridRep;
diff --git a/components/GridRepCollection/index.tsx b/components/GridRepCollection/index.tsx
index 77592ffd..93332c6a 100644
--- a/components/GridRepCollection/index.tsx
+++ b/components/GridRepCollection/index.tsx
@@ -1,18 +1,18 @@
-import classNames from "classnames"
-import React from "react"
+import classNames from "classnames";
+import React from "react";
-import "./index.scss"
+import "./index.scss";
interface Props {
- children: React.ReactNode
+ children: React.ReactNode;
}
const GridRepCollection = (props: Props) => {
const classes = classNames({
GridRepCollection: true,
- })
+ });
- return {props.children}
-}
+ return {props.children}
;
+};
-export default GridRepCollection
+export default GridRepCollection;
diff --git a/components/Header/index.scss b/components/Header/index.scss
index f4b2ff11..d3c1eeff 100644
--- a/components/Header/index.scss
+++ b/components/Header/index.scss
@@ -1,37 +1,37 @@
.Header {
+ display: flex;
+ height: 34px;
+ width: 100%;
+
+ &.bottom {
+ position: sticky;
+ bottom: $unit * 2;
+ }
+
+ #right > div {
display: flex;
- height: 34px;
- width: 100%;
+ gap: 8px;
+ }
- &.bottom {
- position: sticky;
- bottom: $unit * 2;
+ .dropdown {
+ display: inline-block;
+ position: relative;
+
+ &:hover {
+ padding-right: 50px;
+ padding-bottom: 16px;
+
+ .Button {
+ background: white;
+ }
+
+ .Menu {
+ display: block;
+ }
}
+ }
- #right > div {
- display: flex;
- gap: 8px;
- }
-
- .dropdown {
- display: inline-block;
- position: relative;
-
- &:hover {
- padding-right: 50px;
- padding-bottom: 16px;
-
- .Button {
- background: white;
- }
-
- .Menu {
- display: block;
- }
- }
- }
-
- .push {
- margin-left: auto;
- }
+ .push {
+ margin-left: auto;
+ }
}
diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index d82d83e3..29663b38 100644
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@@ -1,21 +1,21 @@
-import React from 'react'
+import React from "react";
-import './index.scss'
+import "./index.scss";
interface Props {
- position: 'top' | 'bottom'
- left: JSX.Element,
- right: JSX.Element
+ position: "top" | "bottom";
+ left: JSX.Element;
+ right: JSX.Element;
}
-const Header = (props: Props) => {
- return (
-
- )
-}
+const Header = (props: Props) => {
+ return (
+
+ );
+};
-export default Header
\ No newline at end of file
+export default Header;
diff --git a/components/HeaderMenu/index.scss b/components/HeaderMenu/index.scss
index 1d3d501d..8047153e 100644
--- a/components/HeaderMenu/index.scss
+++ b/components/HeaderMenu/index.scss
@@ -1,147 +1,149 @@
.Menu {
- background: white;
- border-radius: 6px;
- display: none;
- min-width: 220px;
- position: absolute;
- top: $unit * 5; // This shouldn't be hardcoded. How to calculate it?
- z-index: 10;
+ background: white;
+ border-radius: 6px;
+ display: none;
+ min-width: 220px;
+ position: absolute;
+ top: $unit * 5; // This shouldn't be hardcoded. How to calculate it?
+ z-index: 10;
}
.MenuItem {
- color: $grey-40;
- font-weight: $normal;
+ color: $grey-40;
+ font-weight: $normal;
- &:hover:not(.disabled) {
- background: $grey-100;
- color: $grey-00;
- cursor: pointer;
-
- a {
- color: $grey-00;
- }
- }
-
- &.profile > div {
- padding: 6px 12px;
- }
-
- &.language {
- align-items: center;
- display: flex;
- flex-direction: row;
- gap: $unit;
- padding-right: $unit;
-
- span {
- flex-grow: 1;
- }
-
- .Switch {
- $height: 24px;
-
- background: $grey-60;
- border-radius: calc($height / 2);
- border: none;
- position: relative;
- width: 44px;
- height: $height;
-
- &:hover {
- cursor: pointer;
- }
-
- .Thumb {
- $diameter: 18px;
-
- background: white;
- border-radius: calc($diameter / 2);
- display: block;
- height: $diameter;
- width: $diameter;
- transition: transform 100ms;
- transform: translateX(-2px);
- z-index: 3;
-
- &:hover {
- cursor: pointer;
- }
-
- &[data-state="checked"] {
- background: white;
- transform: translateX(17px);
- }
- }
-
- .left, .right {
- color: white;
- font-size: 10px;
- font-weight: $bold;
- position: absolute;
- z-index: 2;
- }
-
- .left {
- top: 6px;
- left: 6px;
- }
-
- .right {
- top: 6px;
- right: 5px;
- }
- }
- }
+ &:hover:not(.disabled) {
+ background: $grey-100;
+ color: $grey-00;
+ cursor: pointer;
a {
- color: $grey-40;
+ color: $grey-00;
+ }
+ }
+
+ &.profile > div {
+ padding: 6px 12px;
+ }
+
+ &.language {
+ align-items: center;
+ display: flex;
+ flex-direction: row;
+ gap: $unit;
+ padding-right: $unit;
+
+ span {
+ flex-grow: 1;
}
- & > a, & > span {
+ .Switch {
+ $height: 24px;
+
+ background: $grey-60;
+ border-radius: calc($height / 2);
+ border: none;
+ position: relative;
+ width: 44px;
+ height: $height;
+
+ &:hover {
+ cursor: pointer;
+ }
+
+ .Thumb {
+ $diameter: 18px;
+
+ background: white;
+ border-radius: calc($diameter / 2);
display: block;
- padding: 12px 12px;
- }
-
- & > div {
- align-items: center;
- display: flex;
- flex-direction: row;
- padding: 10px 12px;
+ height: $diameter;
+ width: $diameter;
+ transition: transform 100ms;
+ transform: translateX(-2px);
+ z-index: 3;
&:hover {
- i.tag {
- background: $grey-60;
- color: white;
- }
+ cursor: pointer;
}
- span {
- flex-grow: 1;
+ &[data-state="checked"] {
+ background: white;
+ transform: translateX(17px);
}
+ }
- img {
- $diameter: 32px;
- border-radius: calc($diameter / 2);
- height: $diameter;
- width: $diameter;
- }
+ .left,
+ .right {
+ color: white;
+ font-size: 10px;
+ font-weight: $bold;
+ position: absolute;
+ z-index: 2;
+ }
+
+ .left {
+ top: 6px;
+ left: 6px;
+ }
+
+ .right {
+ top: 6px;
+ right: 5px;
+ }
}
+ }
+
+ a {
+ color: $grey-40;
+ }
+
+ & > a,
+ & > span {
+ display: block;
+ padding: 12px 12px;
+ }
+
+ & > div {
+ align-items: center;
+ display: flex;
+ flex-direction: row;
+ padding: 10px 12px;
+
+ &:hover {
+ i.tag {
+ background: $grey-60;
+ color: white;
+ }
+ }
+
+ span {
+ flex-grow: 1;
+ }
+
+ img {
+ $diameter: 32px;
+ border-radius: calc($diameter / 2);
+ height: $diameter;
+ width: $diameter;
+ }
+ }
}
.MenuGroup {
- border-bottom: 1px solid #f5f5f5;
+ border-bottom: 1px solid #f5f5f5;
- &:first-child .MenuItem:first-child:hover {
- border-top-left-radius: 6px;
- border-top-right-radius: 6px;
- }
+ &:first-child .MenuItem:first-child:hover {
+ border-top-left-radius: 6px;
+ border-top-right-radius: 6px;
+ }
- &:last-child .MenuItem:last-child:hover {
- border-bottom-left-radius: 6px;
- border-bottom-right-radius: 6px;
- }
+ &:last-child .MenuItem:last-child:hover {
+ border-bottom-left-radius: 6px;
+ border-bottom-right-radius: 6px;
+ }
- &:last-child {
- border-bottom: none;
- }
-}
\ No newline at end of file
+ &:last-child {
+ border-bottom: none;
+ }
+}
diff --git a/components/HeaderMenu/index.tsx b/components/HeaderMenu/index.tsx
index 622c8c2a..1bf30e2d 100644
--- a/components/HeaderMenu/index.tsx
+++ b/components/HeaderMenu/index.tsx
@@ -1,51 +1,51 @@
-import React, { useEffect, useState } from "react"
-import { getCookie, setCookie } from "cookies-next"
-import { useRouter } from "next/router"
-import { useTranslation } from "next-i18next"
+import React, { useEffect, useState } from "react";
+import { getCookie, setCookie } from "cookies-next";
+import { useRouter } from "next/router";
+import { useTranslation } from "next-i18next";
-import Link from "next/link"
-import * as Switch from "@radix-ui/react-switch"
+import Link from "next/link";
+import * as Switch from "@radix-ui/react-switch";
-import AboutModal from "~components/AboutModal"
-import AccountModal from "~components/AccountModal"
-import LoginModal from "~components/LoginModal"
-import SignupModal from "~components/SignupModal"
+import AboutModal from "~components/AboutModal";
+import AccountModal from "~components/AccountModal";
+import LoginModal from "~components/LoginModal";
+import SignupModal from "~components/SignupModal";
-import "./index.scss"
+import "./index.scss";
interface Props {
- authenticated: boolean
- username?: string
- logout?: () => void
+ authenticated: boolean;
+ username?: string;
+ logout?: () => void;
}
const HeaderMenu = (props: Props) => {
- const router = useRouter()
- const { t } = useTranslation("common")
+ const router = useRouter();
+ const { t } = useTranslation("common");
- const accountCookie = getCookie("account")
+ const accountCookie = getCookie("account");
const accountData: AccountCookie = accountCookie
? JSON.parse(accountCookie as string)
- : null
+ : null;
- const userCookie = getCookie("user")
+ const userCookie = getCookie("user");
const userData: UserCookie = userCookie
? JSON.parse(userCookie as string)
- : null
+ : null;
- const localeCookie = getCookie("NEXT_LOCALE")
+ const localeCookie = getCookie("NEXT_LOCALE");
- const [checked, setChecked] = useState(false)
+ const [checked, setChecked] = useState(false);
useEffect(() => {
- const locale = localeCookie
- setChecked(locale === "ja" ? true : false)
- }, [localeCookie])
+ const locale = localeCookie;
+ setChecked(locale === "ja" ? true : false);
+ }, [localeCookie]);
function handleCheckedChange(value: boolean) {
- const language = value ? "ja" : "en"
- setCookie("NEXT_LOCALE", language, { path: "/" })
- router.push(router.asPath, undefined, { locale: language })
+ const language = value ? "ja" : "en";
+ setCookie("NEXT_LOCALE", language, { path: "/" });
+ router.push(router.asPath, undefined, { locale: language });
}
function authItems() {
@@ -92,7 +92,7 @@ const HeaderMenu = (props: Props) => {
- )
+ );
}
function unauthItems() {
@@ -132,10 +132,10 @@ const HeaderMenu = (props: Props) => {
{props.editable && props.hasJob ?
- )
+ );
}
- return jsx
- }
+ return jsx;
+ };
const label = () => {
- let jsx: React.ReactNode
+ let jsx: React.ReactNode;
if (props.skill) {
- jsx = {props.skill.name[locale]}
+ jsx ={props.skill.name[locale]}
; } else if (props.editable && props.hasJob) { - jsx ={t("job_skills.state.selectable")}
+ jsx ={t("job_skills.state.selectable")}
; } else { - jsx ={t("job_skills.state.no_skill")}
+ jsx ={t("job_skills.state.no_skill")}
; } - return jsx - } + return jsx; + }; return (
{skillImage()}
{label()}
- )
+ );
}
-)
+);
-export default JobSkillItem
+export default JobSkillItem;
diff --git a/components/JobSkillResult/index.tsx b/components/JobSkillResult/index.tsx
index 09c08028..d04653fd 100644
--- a/components/JobSkillResult/index.tsx
+++ b/components/JobSkillResult/index.tsx
@@ -1,29 +1,31 @@
-import React, { useEffect, useState } from "react"
-import { useRouter } from "next/router"
-import { SkillGroup, skillClassification } from "~utils/skillGroups"
+import React, { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import { SkillGroup, skillClassification } from "~utils/skillGroups";
-import "./index.scss"
+import "./index.scss";
interface Props {
- data: JobSkill
- onClick: () => void
+ data: JobSkill;
+ onClick: () => void;
}
const JobSkillResult = (props: Props) => {
- const router = useRouter()
+ const router = useRouter();
const locale =
- router.locale && ["en", "ja"].includes(router.locale) ? router.locale : "en"
+ router.locale && ["en", "ja"].includes(router.locale)
+ ? router.locale
+ : "en";
- const skill = props.data
+ const skill = props.data;
- const [group, setGroup] = useState
@@ -65,7 +65,7 @@ const JobSkillSearchFilterBar = (props: Props) => {
- )
-}
+ );
+};
-export default JobSkillSearchFilterBar
+export default JobSkillSearchFilterBar;
diff --git a/components/Layout/index.tsx b/components/Layout/index.tsx
index 5d03fb7c..a8de5056 100644
--- a/components/Layout/index.tsx
+++ b/components/Layout/index.tsx
@@ -1,17 +1,17 @@
-import type { ReactElement } from 'react'
-import TopHeader from '~components/TopHeader'
+import type { ReactElement } from "react";
+import TopHeader from "~components/TopHeader";
interface Props {
- children: ReactElement
+ children: ReactElement;
}
-const Layout = ({children}: Props) => {
+const Layout = ({ children }: Props) => {
return (
<>
@@ -264,7 +264,7 @@ const Party = (props: Props) => {
/>
}
- )
-}
+ );
+};
-export default Party
+export default Party;
diff --git a/components/PartyDetails/index.scss b/components/PartyDetails/index.scss
index 50f88ffb..be6c260d 100644
--- a/components/PartyDetails/index.scss
+++ b/components/PartyDetails/index.scss
@@ -1,153 +1,150 @@
.PartyDetails {
- display: none; // This breaks transition, find a workaround
- opacity: 0;
- margin: 0 auto;
- margin-bottom: 100px;
- max-width: $unit * 95;
- position: relative;
+ display: none; // This breaks transition, find a workaround
+ opacity: 0;
+ margin: 0 auto;
+ margin-bottom: 100px;
+ max-width: $unit * 95;
+ position: relative;
- &.Editable {
- top: $unit;
- height: 0;
- z-index: 2;
- transition: opacity 0.2s ease-in-out,
- top 0.2s ease-in-out;
+ &.Editable {
+ top: $unit;
+ height: 0;
+ z-index: 2;
+ transition: opacity 0.2s ease-in-out, top 0.2s ease-in-out;
-
- &.Visible {
- display: block;
- height: auto;
- margin-bottom: 40vh;
- opacity: 1;
- top: 0;
- }
-
- fieldset {
- display: block;
- width: 100%;
-
- textarea {
- min-height: $unit * 20;
- width: 100%;
- }
- }
-
- .bottom {
- display: flex;
- flex-direction: row;
- gap: $unit;
-
- .left {
- flex-grow: 1;
- }
-
- .right {
- display: flex;
- flex-direction: row;
- gap: $unit;
- }
- }
+ &.Visible {
+ display: block;
+ height: auto;
+ margin-bottom: 40vh;
+ opacity: 1;
+ top: 0;
}
- &.ReadOnly {
- top: $unit * -1;
- transition: opacity 0.2s ease-in-out,
- top 0.2s ease-in-out;
+ fieldset {
+ display: block;
+ width: 100%;
- &.Visible {
- display: block;
- height: auto;
- opacity: 1;
- top: 0;
- }
-
- a:hover {
- text-decoration: underline;
- }
-
- p {
- font-size: $font-regular;
- line-height: $font-regular * 1.2;
- white-space: pre-line;
- }
-
-
- h1 {
- font-size: $font-xlarge;
- font-weight: $normal;
- text-align: left;
- margin-bottom: $unit;
- }
-
- .info {
- align-items: center;
- display: flex;
- flex-direction: row;
- gap: $unit;
- margin-bottom: $unit * 2;
-
- .left {
- flex-grow: 1;
- }
- }
-
- .attribution {
- align-items: center;
- display: flex;
- flex-direction: row;
-
- & > div {
- align-items: center;
- display: inline-flex;
- font-size: $font-small;
- height: 26px;
- }
-
- time {
- font-size: $font-small;
- }
-
- & > *:not(:last-child):after {
- content: " · ";
- margin: 0 calc($unit / 2);
- }
- }
-
- .user {
- align-items: center;
- display: inline-flex;
- gap: calc($unit / 2);
- margin-top: 1px;
-
- img, .no-user {
- $diameter: 24px;
-
- border-radius: calc($diameter / 2);
- height: $diameter;
- width: $diameter;
- }
-
- img.gran {
- background-color: #CEE7FE;
- }
-
- img.djeeta {
- background-color: #FFE1FE;
- }
-
- .no-user {
- background: $grey-80;
- }
- }
+ textarea {
+ min-height: $unit * 20;
+ width: 100%;
+ }
}
+
+ .bottom {
+ display: flex;
+ flex-direction: row;
+ gap: $unit;
+
+ .left {
+ flex-grow: 1;
+ }
+
+ .right {
+ display: flex;
+ flex-direction: row;
+ gap: $unit;
+ }
+ }
+ }
+
+ &.ReadOnly {
+ top: $unit * -1;
+ transition: opacity 0.2s ease-in-out, top 0.2s ease-in-out;
+
+ &.Visible {
+ display: block;
+ height: auto;
+ opacity: 1;
+ top: 0;
+ }
+
+ a:hover {
+ text-decoration: underline;
+ }
+
+ p {
+ font-size: $font-regular;
+ line-height: $font-regular * 1.2;
+ white-space: pre-line;
+ }
+
+ h1 {
+ font-size: $font-xlarge;
+ font-weight: $normal;
+ text-align: left;
+ margin-bottom: $unit;
+ }
+
+ .info {
+ align-items: center;
+ display: flex;
+ flex-direction: row;
+ gap: $unit;
+ margin-bottom: $unit * 2;
+
+ .left {
+ flex-grow: 1;
+ }
+ }
+
+ .attribution {
+ align-items: center;
+ display: flex;
+ flex-direction: row;
+
+ & > div {
+ align-items: center;
+ display: inline-flex;
+ font-size: $font-small;
+ height: 26px;
+ }
+
+ time {
+ font-size: $font-small;
+ }
+
+ & > *:not(:last-child):after {
+ content: " · ";
+ margin: 0 calc($unit / 2);
+ }
+ }
+
+ .user {
+ align-items: center;
+ display: inline-flex;
+ gap: calc($unit / 2);
+ margin-top: 1px;
+
+ img,
+ .no-user {
+ $diameter: 24px;
+
+ border-radius: calc($diameter / 2);
+ height: $diameter;
+ width: $diameter;
+ }
+
+ img.gran {
+ background-color: #cee7fe;
+ }
+
+ img.djeeta {
+ background-color: #ffe1fe;
+ }
+
+ .no-user {
+ background: $grey-80;
+ }
+ }
+ }
}
.EmptyDetails {
- display: none;
- justify-content: center;
- margin-bottom: $unit * 10;
+ display: none;
+ justify-content: center;
+ margin-bottom: $unit * 10;
- &.Visible {
- display: flex;
- }
-}
\ No newline at end of file
+ &.Visible {
+ display: flex;
+ }
+}
diff --git a/components/PartyDetails/index.tsx b/components/PartyDetails/index.tsx
index b432f127..3f94a598 100644
--- a/components/PartyDetails/index.tsx
+++ b/components/PartyDetails/index.tsx
@@ -1,26 +1,26 @@
-import React, { useState } from "react"
-import Head from "next/head"
-import { useRouter } from "next/router"
-import { useSnapshot } from "valtio"
-import { useTranslation } from "next-i18next"
+import React, { useState } from "react";
+import Head from "next/head";
+import { useRouter } from "next/router";
+import { useSnapshot } from "valtio";
+import { useTranslation } from "next-i18next";
-import Linkify from "react-linkify"
-import classNames from "classnames"
+import Linkify from "react-linkify";
+import classNames from "classnames";
-import * as AlertDialog from "@radix-ui/react-alert-dialog"
-import CrossIcon from "~public/icons/Cross.svg"
+import * as AlertDialog from "@radix-ui/react-alert-dialog";
+import CrossIcon from "~public/icons/Cross.svg";
-import Button from "~components/Button"
-import CharLimitedFieldset from "~components/CharLimitedFieldset"
-import RaidDropdown from "~components/RaidDropdown"
-import TextFieldset from "~components/TextFieldset"
+import Button from "~components/Button";
+import CharLimitedFieldset from "~components/CharLimitedFieldset";
+import RaidDropdown from "~components/RaidDropdown";
+import TextFieldset from "~components/TextFieldset";
-import { accountState } from "~utils/accountState"
-import { appState } from "~utils/appState"
+import { accountState } from "~utils/accountState";
+import { appState } from "~utils/appState";
-import "./index.scss"
-import Link from "next/link"
-import { formatTimeAgo } from "~utils/timeAgo"
+import "./index.scss";
+import Link from "next/link";
+import { formatTimeAgo } from "~utils/timeAgo";
const emptyRaid: Raid = {
id: "",
@@ -32,50 +32,50 @@ const emptyRaid: Raid = {
level: 0,
group: 0,
element: 0,
-}
+};
// Props
interface Props {
- editable: boolean
- updateCallback: (name?: string, description?: string, raid?: Raid) => void
+ editable: boolean;
+ updateCallback: (name?: string, description?: string, raid?: Raid) => void;
deleteCallback: (
event: React.MouseEvent
@@ -298,25 +298,28 @@ const PartyDetails = (props: Props) => {
)}
- )
+ );
const generateTitle = () => {
- let title = party.raid ? `[${party.raid?.name[locale]}] ` : ""
+ let title = party.raid ? `[${party.raid?.name[locale]}] ` : "";
const username =
- party.user != null ? `@${party.user?.username}` : t("header.anonymous")
+ party.user != null ? `@${party.user?.username}` : t("header.anonymous");
if (party.name != null)
- title += t("header.byline", { partyName: party.name, username: username })
+ title += t("header.byline", {
+ partyName: party.name,
+ username: username,
+ });
else if (party.name == null && party.editable && router.route === "/new")
- title = t("header.new_team")
+ title = t("header.new_team");
else
title += t("header.untitled_team", {
username: username,
- })
+ });
- return title
- }
+ return title;
+ };
return (
@@ -344,7 +347,7 @@ const PartyDetails = (props: Props) => {
: emptyDetails}
{editable}
- )
-}
+ );
+};
-export default PartyDetails
+export default PartyDetails;
diff --git a/components/PartySegmentedControl/index.scss b/components/PartySegmentedControl/index.scss
index a161a3ca..c4991d17 100644
--- a/components/PartySegmentedControl/index.scss
+++ b/components/PartySegmentedControl/index.scss
@@ -1,20 +1,20 @@
.PartyNavigation {
- display: flex;
- gap: 58px;
- justify-content: center;
- margin: 0 auto;
- margin-bottom: $unit * 3;
- max-width: 760px;
- position: relative;
+ display: flex;
+ gap: 58px;
+ justify-content: center;
+ margin: 0 auto;
+ margin-bottom: $unit * 3;
+ max-width: 760px;
+ position: relative;
}
.ExtraSwitch {
- color: #888;
- display: flex;
- font-weight: $normal;
- gap: 8px;
- line-height: 34px;
- height: 100%;
- position: absolute;
- right: 0px;
-}
\ No newline at end of file
+ color: #888;
+ display: flex;
+ font-weight: $normal;
+ gap: 8px;
+ line-height: 34px;
+ height: 100%;
+ position: absolute;
+ right: 0px;
+}
diff --git a/components/PartySegmentedControl/index.tsx b/components/PartySegmentedControl/index.tsx
index 5a67e268..85657fd4 100644
--- a/components/PartySegmentedControl/index.tsx
+++ b/components/PartySegmentedControl/index.tsx
@@ -1,98 +1,113 @@
-import React from 'react'
-import { useSnapshot } from 'valtio'
-import { useTranslation } from 'next-i18next'
+import React from "react";
+import { useSnapshot } from "valtio";
+import { useTranslation } from "next-i18next";
-import { appState } from '~utils/appState'
+import { appState } from "~utils/appState";
-import SegmentedControl from '~components/SegmentedControl'
-import Segment from '~components/Segment'
-import ToggleSwitch from '~components/ToggleSwitch'
+import SegmentedControl from "~components/SegmentedControl";
+import Segment from "~components/Segment";
+import ToggleSwitch from "~components/ToggleSwitch";
-import { GridType } from '~utils/enums'
+import { GridType } from "~utils/enums";
-
-import './index.scss'
+import "./index.scss";
interface Props {
- selectedTab: GridType
- onClick: (event: React.ChangeEvent
- Extra
-
+ const extraToggle = (
+
+ Extra
+
+ );
- return (
-
-
- {/*
+
+ {/* Class */}
- {t('party.segmented_control.characters')}
+
+ {t("party.segmented_control.characters")}
+
- {t('party.segmented_control.weapons')}
+
+ {t("party.segmented_control.weapons")}
+
- {t('party.segmented_control.summons')}
-
+
+ {t("party.segmented_control.summons")}
+
+
- {
- (() => {
- if (party.editable && props.selectedTab == GridType.Weapon) {
- return extraToggle
- }
- })()
- }
-
- )
-}
+ {(() => {
+ if (party.editable && props.selectedTab == GridType.Weapon) {
+ return extraToggle;
+ }
+ })()}
+
+ );
+};
-export default PartySegmentedControl
+export default PartySegmentedControl;
diff --git a/components/RaidDropdown/index.tsx b/components/RaidDropdown/index.tsx
index a8202e81..1e430d7c 100644
--- a/components/RaidDropdown/index.tsx
+++ b/components/RaidDropdown/index.tsx
@@ -1,112 +1,133 @@
-import React, { useCallback, useEffect, useState } from 'react'
-import { useRouter } from 'next/router'
+import React, { useCallback, useEffect, useState } from "react";
+import { useRouter } from "next/router";
-import api from '~utils/api'
-import { appState } from '~utils/appState'
-import { raidGroups } from '~utils/raidGroups'
+import api from "~utils/api";
+import { appState } from "~utils/appState";
+import { raidGroups } from "~utils/raidGroups";
-import './index.scss'
+import "./index.scss";
// Props
interface Props {
- showAllRaidsOption: boolean
- currentRaid?: string
- onChange?: (slug?: string) => void
- onBlur?: (event: React.ChangeEvent
+
+
+
+ );
+};
- return (
-
-
-
-
- )
-}
-
-export default Segment
\ No newline at end of file
+export default Segment;
diff --git a/components/SegmentedControl/index.scss b/components/SegmentedControl/index.scss
index 2ae75feb..2d822b27 100644
--- a/components/SegmentedControl/index.scss
+++ b/components/SegmentedControl/index.scss
@@ -1,88 +1,88 @@
.SegmentedControlWrapper {
- display: flex;
- justify-content: center;
+ display: flex;
+ justify-content: center;
}
.SegmentedControl {
- background: white;
- border-radius: $unit * 3;
- display: inline-flex;
- padding: 3px;
- position: relative;
- user-select: none;
- overflow: hidden;
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
- z-index: 1;
-
- &.fire {
- .Segment input:checked + label {
- background: $fire-bg-dark;
- color: $fire-text-dark;
- }
+ background: white;
+ border-radius: $unit * 3;
+ display: inline-flex;
+ padding: 3px;
+ position: relative;
+ user-select: none;
+ overflow: hidden;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+ z-index: 1;
- .Segment:hover label {
- background: $fire-bg-light;
- color: $fire-text-light;
- }
+ &.fire {
+ .Segment input:checked + label {
+ background: $fire-bg-dark;
+ color: $fire-text-dark;
}
- &.water {
- .Segment input:checked + label {
- background: $water-bg-dark;
- color: $water-text-dark;
- }
+ .Segment:hover label {
+ background: $fire-bg-light;
+ color: $fire-text-light;
+ }
+ }
- .Segment:hover label {
- background: $water-bg-light;
- color: $water-text-light;
- }
+ &.water {
+ .Segment input:checked + label {
+ background: $water-bg-dark;
+ color: $water-text-dark;
}
- &.earth {
- .Segment input:checked + label {
- background: $earth-bg-dark;
- color: $earth-text-dark;
- }
+ .Segment:hover label {
+ background: $water-bg-light;
+ color: $water-text-light;
+ }
+ }
- .Segment:hover label {
- background: $earth-bg-light;
- color: $earth-text-light;
- }
+ &.earth {
+ .Segment input:checked + label {
+ background: $earth-bg-dark;
+ color: $earth-text-dark;
}
- &.wind {
- .Segment input:checked + label {
- background: $wind-bg-dark;
- color: $wind-text-dark;
- }
+ .Segment:hover label {
+ background: $earth-bg-light;
+ color: $earth-text-light;
+ }
+ }
- .Segment:hover label {
- background: $wind-bg-light;
- color: $wind-text-light;
- }
+ &.wind {
+ .Segment input:checked + label {
+ background: $wind-bg-dark;
+ color: $wind-text-dark;
}
- &.light {
- .Segment input:checked + label {
- background: $light-bg-dark;
- color: $light-text-dark;
- }
+ .Segment:hover label {
+ background: $wind-bg-light;
+ color: $wind-text-light;
+ }
+ }
- .Segment:hover label {
- background: $light-bg-light;
- color: $light-text-light;
- }
+ &.light {
+ .Segment input:checked + label {
+ background: $light-bg-dark;
+ color: $light-text-dark;
}
- &.dark {
- .Segment input:checked + label {
- background: $dark-bg-dark;
- color: $dark-text-dark;
- }
-
- .Segment:hover label {
- background: $dark-bg-light;
- color: $dark-text-light;
- }
+ .Segment:hover label {
+ background: $light-bg-light;
+ color: $light-text-light;
}
-}
\ No newline at end of file
+ }
+
+ &.dark {
+ .Segment input:checked + label {
+ background: $dark-bg-dark;
+ color: $dark-text-dark;
+ }
+
+ .Segment:hover label {
+ background: $dark-bg-light;
+ color: $dark-text-light;
+ }
+ }
+}
diff --git a/components/SegmentedControl/index.tsx b/components/SegmentedControl/index.tsx
index 13d9e023..5862959d 100644
--- a/components/SegmentedControl/index.tsx
+++ b/components/SegmentedControl/index.tsx
@@ -1,19 +1,19 @@
-import React from 'react'
+import React from "react";
-import './index.scss'
+import "./index.scss";
interface Props {
- elementClass?: string
+ elementClass?: string;
}
const SegmentedControl: React.FC
-
- )
-}
+ return (
+
- {children}
-
-
+
+ );
+};
-export default SegmentedControl
\ No newline at end of file
+export default SegmentedControl;
diff --git a/components/SignupModal/index.scss b/components/SignupModal/index.scss
index 8a537279..5222385f 100644
--- a/components/SignupModal/index.scss
+++ b/components/SignupModal/index.scss
@@ -1,47 +1,47 @@
.Signup.Dialog form {
- display: flex;
- flex-direction: column;
- gap: calc($unit / 2);
- margin-bottom: $unit;
+ display: flex;
+ flex-direction: column;
+ gap: calc($unit / 2);
+ margin-bottom: $unit;
- .Button {
- font-size: $font-regular;
- padding: ($unit * 1.5) ($unit * 2);
- width: 100%;
+ .Button {
+ font-size: $font-regular;
+ padding: ($unit * 1.5) ($unit * 2);
+ width: 100%;
- &.btn-disabled {
- background: $grey-90;
- color: $grey-70;
- cursor: not-allowed;
- }
-
- &:not(.btn-disabled) {
- background: $grey-90;
- color: $grey-40;
-
- &:hover {
- background: $grey-80;
- }
- }
+ &.btn-disabled {
+ background: $grey-90;
+ color: $grey-70;
+ cursor: not-allowed;
}
- .terms {
- color: $grey-40;
- font-size: $font-small;
- line-height: 1.2;
- margin-top: $unit;
- text-align: center;
+ &:not(.btn-disabled) {
+ background: $grey-90;
+ color: $grey-40;
- a {
- color: $blue;
-
- &:hover {
- color: darken($blue, 30);
- }
- }
+ &:hover {
+ background: $grey-80;
+ }
}
+ }
- input {
- background: $grey-90;
+ .terms {
+ color: $grey-40;
+ font-size: $font-small;
+ line-height: 1.2;
+ margin-top: $unit;
+ text-align: center;
+
+ a {
+ color: $blue;
+
+ &:hover {
+ color: darken($blue, 30);
+ }
}
+ }
+
+ input {
+ background: $grey-90;
+ }
}
diff --git a/components/SignupModal/index.tsx b/components/SignupModal/index.tsx
index c27ffa79..8dab18f1 100644
--- a/components/SignupModal/index.tsx
+++ b/components/SignupModal/index.tsx
@@ -1,64 +1,64 @@
-import React, { useEffect, useState } from "react"
-import Link from "next/link"
-import { setCookie } from "cookies-next"
-import { useRouter } from "next/router"
-import { Trans, useTranslation } from "next-i18next"
-import { AxiosResponse } from "axios"
+import React, { useEffect, useState } from "react";
+import Link from "next/link";
+import { setCookie } from "cookies-next";
+import { useRouter } from "next/router";
+import { Trans, useTranslation } from "next-i18next";
+import { AxiosResponse } from "axios";
-import * as Dialog from "@radix-ui/react-dialog"
+import * as Dialog from "@radix-ui/react-dialog";
-import api from "~utils/api"
-import { accountState } from "~utils/accountState"
+import api from "~utils/api";
+import { accountState } from "~utils/accountState";
-import Button from "~components/Button"
-import Fieldset from "~components/Fieldset"
+import Button from "~components/Button";
+import Fieldset from "~components/Fieldset";
-import CrossIcon from "~public/icons/Cross.svg"
-import "./index.scss"
+import CrossIcon from "~public/icons/Cross.svg";
+import "./index.scss";
interface Props {}
interface ErrorMap {
- [index: string]: string
- username: string
- email: string
- password: string
- passwordConfirmation: string
+ [index: string]: string;
+ username: string;
+ email: string;
+ password: string;
+ passwordConfirmation: string;
}
const emailRegex =
- /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+ /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
const SignupModal = (props: Props) => {
- const router = useRouter()
- const { t } = useTranslation("common")
+ const router = useRouter();
+ const { t } = useTranslation("common");
// Set up form states and error handling
- const [formValid, setFormValid] = useState(false)
+ const [formValid, setFormValid] = useState(false);
const [errors, setErrors] = useState
+ {children}
+
+
@@ -243,7 +245,7 @@ const SummonGrid = (props: Props) => {
updateUncap={initiateUncapUpdate}
/>
- )
+ );
const summonGridElement = (
{t("summons.summons")}
@@ -260,11 +262,11 @@ const SummonGrid = (props: Props) => {
updateUncap={initiateUncapUpdate}
/>
- )
+ );
})}
@@ -285,7 +287,7 @@ const SummonGrid = (props: Props) => {
{subAuraSummonElement}
- )
-}
+ );
+};
-export default SummonGrid
+export default SummonGrid;
diff --git a/components/SummonHovercard/index.tsx b/components/SummonHovercard/index.tsx
index 5a391a26..7d325653 100644
--- a/components/SummonHovercard/index.tsx
+++ b/components/SummonHovercard/index.tsx
@@ -1,80 +1,99 @@
-import React from 'react'
-import { useRouter } from 'next/router'
-import { useTranslation } from 'next-i18next'
+import React from "react";
+import { useRouter } from "next/router";
+import { useTranslation } from "next-i18next";
-import * as HoverCard from '@radix-ui/react-hover-card'
+import * as HoverCard from "@radix-ui/react-hover-card";
-import WeaponLabelIcon from '~components/WeaponLabelIcon'
-import UncapIndicator from '~components/UncapIndicator'
+import WeaponLabelIcon from "~components/WeaponLabelIcon";
+import UncapIndicator from "~components/UncapIndicator";
-import './index.scss'
+import "./index.scss";
interface Props {
- gridSummon: GridSummon
- children: React.ReactNode
+ gridSummon: GridSummon;
+ children: React.ReactNode;
}
const SummonHovercard = (props: Props) => {
- const router = useRouter()
- const { t } = useTranslation('common')
- const locale = (router.locale && ['en', 'ja'].includes(router.locale)) ? router.locale : 'en'
+ const router = useRouter();
+ const { t } = useTranslation("common");
+ const locale =
+ router.locale && ["en", "ja"].includes(router.locale)
+ ? router.locale
+ : "en";
- const Element = ['null', 'wind', 'fire', 'water', 'earth', 'dark', 'light']
+ const Element = ["null", "wind", "fire", "water", "earth", "dark", "light"];
- const tintElement = Element[props.gridSummon.object.element]
- const wikiUrl = `https://gbf.wiki/${props.gridSummon.object.name.en.replaceAll(' ', '_')}`
+ const tintElement = Element[props.gridSummon.object.element];
+ const wikiUrl = `https://gbf.wiki/${props.gridSummon.object.name.en.replaceAll(
+ " ",
+ "_"
+ )}`;
- function summonImage() {
- let imgSrc = ""
+ function summonImage() {
+ let imgSrc = "";
- if (props.gridSummon) {
- const summon = props.gridSummon.object
+ if (props.gridSummon) {
+ const summon = props.gridSummon.object;
- const upgradedSummons = [
- '2040094000', '2040100000', '2040080000', '2040098000',
- '2040090000', '2040084000', '2040003000', '2040056000'
- ]
-
- let suffix = ''
- if (upgradedSummons.indexOf(summon.granblue_id.toString()) != -1 && props.gridSummon.uncap_level == 5)
- suffix = '_02'
-
- // Generate the correct source for the summon
- imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/summon-grid/${summon.granblue_id}${suffix}.jpg`
- }
+ const upgradedSummons = [
+ "2040094000",
+ "2040100000",
+ "2040080000",
+ "2040098000",
+ "2040090000",
+ "2040084000",
+ "2040003000",
+ "2040056000",
+ ];
- return imgSrc
+ let suffix = "";
+ if (
+ upgradedSummons.indexOf(summon.granblue_id.toString()) != -1 &&
+ props.gridSummon.uncap_level == 5
+ )
+ suffix = "_02";
+
+ // Generate the correct source for the summon
+ imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/summon-grid/${summon.granblue_id}${suffix}.jpg`;
}
- return (
-
-
- {t('buttons.wiki')}
-
- ![{props.gridSummon.object.name[locale]}]({summonImage()})
-
- { props.gridSummon.object.name[locale] }
-
-
-
-
-
-
+
+
+ {t("buttons.wiki")}
+
+
+
+
+ {props.gridSummon.object.name[locale]}
+
+
+
+
+ ![{summon.name[locale]}]({`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/summon-grid/${summon.granblue_id}.jpg`})
-
-
- {summon.name[locale]}
-
-
-
+
+
+ {summon.name[locale]}
+
+
+
+ x.checked)
+ .filter(Boolean).length
}
+ open={rarityMenu}
+ onOpenChange={rarityMenuOpened}
+ >
+
+ {t("filters.labels.rarity")}
+
+ {Array.from(Array(rarities.length)).map((x, i) => {
+ return (
+
+ {t(`rarities.${rarities[i]}`)}
+
+ );
+ })}
+
- props.sendFilters(filters)
- }
+ x.checked)
+ .filter(Boolean).length
+ }
+ open={elementMenu}
+ onOpenChange={elementMenuOpened}
+ >
+
+ {t("filters.labels.element")}
+
+ {Array.from(Array(elements.length)).map((x, i) => {
+ return (
+
+ {t(`elements.${elements[i]}`)}
+
+ );
+ })}
+
+
+ );
+};
- useEffect(() => {
- sendFilters()
- }, [rarityState, elementState])
-
- return (
-
- x.checked).filter(Boolean).length} open={rarityMenu} onOpenChange={rarityMenuOpened}>
- {t('filters.labels.rarity')}
- { Array.from(Array(rarities.length)).map((x, i) => {
- return (
-
- {t(`rarities.${rarities[i]}`)}
-
- )}
- ) }
-
-
- x.checked).filter(Boolean).length} open={elementMenu} onOpenChange={elementMenuOpened}>
- {t('filters.labels.element')}
- { Array.from(Array(elements.length)).map((x, i) => {
- return (
-
- {t(`elements.${elements[i]}`)}
-
- )}
- ) }
-
-
- )
-}
-
-export default SummonSearchFilterBar
+export default SummonSearchFilterBar;
diff --git a/components/SummonUnit/index.scss b/components/SummonUnit/index.scss
index ac2e2511..6bc79d77 100644
--- a/components/SummonUnit/index.scss
+++ b/components/SummonUnit/index.scss
@@ -1,106 +1,107 @@
.SummonUnit {
- display: flex;
- flex-direction: column;
- gap: 4px;
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
- &.main .SummonImage,
- &.friend .SummonImage {
- aspect-ratio: 182 / 315;
- width: 182px;
- height: auto;
+ &.main .SummonImage,
+ &.friend .SummonImage {
+ aspect-ratio: 182 / 315;
+ width: 182px;
+ height: auto;
- @media (max-width: $medium-screen) {
- width: 20.3vw;
- }
+ @media (max-width: $medium-screen) {
+ width: 20.3vw;
}
+ }
- &.grid {
- // max-width: 148px;
- // min-height: 141px;
- min-height: 180px;
+ &.grid {
+ // max-width: 148px;
+ // min-height: 141px;
+ min-height: 180px;
- @media (max-width: $medium-screen) {
- min-height: 16.5vw;
- }
-
- .SummonImage {
- aspect-ratio: 148 / 111;
- list-style-type: none;
- width: 148px;
- height: auto;
-
- @media (max-width: $medium-screen) {
- width: 20vw;
- }
- }
- }
-
- &.friend {
- margin-right: 0;
- }
-
- &.main.editable .SummonImage:hover,
- &.friend.editable .SummonImage:hover {
- transform: $scale-tall;
- }
-
- &.editable .SummonImage:hover {
- border: $hover-stroke;
- box-shadow: $hover-shadow;
- cursor: pointer;
- transform: $scale-wide;
+ @media (max-width: $medium-screen) {
+ min-height: 16.5vw;
}
.SummonImage {
- background: white;
- border: 1px solid rgba(0, 0, 0, 0);
- border-radius: $unit;
- display: flex;
- align-items: center;
- justify-content: center;
- overflow: hidden;
- transition: all 0.18s ease-in-out;
+ aspect-ratio: 148 / 111;
+ list-style-type: none;
+ width: 148px;
+ height: auto;
- &:hover .icon svg {
- fill: $grey-40;
- }
+ @media (max-width: $medium-screen) {
+ width: 20vw;
+ }
+ }
+ }
- .icon {
- position: absolute;
- height: $unit * 3;
- width: $unit * 3;
- z-index: 1;
-
- svg {
- fill: $grey-70;
- }
- }
+ &.friend {
+ margin-right: 0;
+ }
+
+ &.main.editable .SummonImage:hover,
+ &.friend.editable .SummonImage:hover {
+ transform: $scale-tall;
+ }
+
+ &.editable .SummonImage:hover {
+ border: $hover-stroke;
+ box-shadow: $hover-shadow;
+ cursor: pointer;
+ transform: $scale-wide;
+ }
+
+ .SummonImage {
+ background: white;
+ border: 1px solid rgba(0, 0, 0, 0);
+ border-radius: $unit;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+ transition: all 0.18s ease-in-out;
+
+ &:hover .icon svg {
+ fill: $grey-40;
}
- &.filled h3 {
- display: block;
- }
+ .icon {
+ position: absolute;
+ height: $unit * 3;
+ width: $unit * 3;
+ z-index: 1;
- &.filled ul {
- display: flex;
+ svg {
+ fill: $grey-70;
+ }
}
+ }
- h3, ul {
- display: none;
- }
+ &.filled h3 {
+ display: block;
+ }
- h3 {
- color: #333;
- font-size: $font-regular;
- font-weight: $normal;
- line-height: 1.1;
- margin: 0;
- text-align: center;
- }
+ &.filled ul {
+ display: flex;
+ }
- img {
- position: relative;
- width: 100%;
- z-index: 2;
- }
+ h3,
+ ul {
+ display: none;
+ }
+
+ h3 {
+ color: #333;
+ font-size: $font-regular;
+ font-weight: $normal;
+ line-height: 1.1;
+ margin: 0;
+ text-align: center;
+ }
+
+ img {
+ position: relative;
+ width: 100%;
+ z-index: 2;
+ }
}
diff --git a/components/SummonUnit/index.tsx b/components/SummonUnit/index.tsx
index 462a9db0..1b6451ae 100644
--- a/components/SummonUnit/index.tsx
+++ b/components/SummonUnit/index.tsx
@@ -1,34 +1,36 @@
-import React, { useEffect, useState } from "react"
-import { useRouter } from "next/router"
-import { useTranslation } from "next-i18next"
-import classnames from "classnames"
+import React, { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import { useTranslation } from "next-i18next";
+import classnames from "classnames";
-import SearchModal from "~components/SearchModal"
-import SummonHovercard from "~components/SummonHovercard"
-import UncapIndicator from "~components/UncapIndicator"
-import PlusIcon from "~public/icons/Add.svg"
+import SearchModal from "~components/SearchModal";
+import SummonHovercard from "~components/SummonHovercard";
+import UncapIndicator from "~components/UncapIndicator";
+import PlusIcon from "~public/icons/Add.svg";
-import type { SearchableObject } from "~types"
+import type { SearchableObject } from "~types";
-import "./index.scss"
+import "./index.scss";
interface Props {
- gridSummon: GridSummon | undefined
- unitType: 0 | 1 | 2
- position: number
- editable: boolean
- updateObject: (object: SearchableObject, position: number) => void
- updateUncap: (id: string, position: number, uncap: number) => void
+ gridSummon: GridSummon | undefined;
+ unitType: 0 | 1 | 2;
+ position: number;
+ editable: boolean;
+ updateObject: (object: SearchableObject, position: number) => void;
+ updateUncap: (id: string, position: number, uncap: number) => void;
}
const SummonUnit = (props: Props) => {
- const { t } = useTranslation("common")
+ const { t } = useTranslation("common");
- const [imageUrl, setImageUrl] = useState("")
+ const [imageUrl, setImageUrl] = useState("");
- const router = useRouter()
+ const router = useRouter();
const locale =
- router.locale && ["en", "ja"].includes(router.locale) ? router.locale : "en"
+ router.locale && ["en", "ja"].includes(router.locale)
+ ? router.locale
+ : "en";
const classes = classnames({
SummonUnit: true,
@@ -37,19 +39,19 @@ const SummonUnit = (props: Props) => {
friend: props.unitType == 2,
editable: props.editable,
filled: props.gridSummon !== undefined,
- })
+ });
- const gridSummon = props.gridSummon
- const summon = gridSummon?.object
+ const gridSummon = props.gridSummon;
+ const summon = gridSummon?.object;
useEffect(() => {
- generateImageUrl()
- })
+ generateImageUrl();
+ });
function generateImageUrl() {
- let imgSrc = ""
+ let imgSrc = "";
if (props.gridSummon) {
- const summon = props.gridSummon.object!
+ const summon = props.gridSummon.object!;
const upgradedSummons = [
"2040094000",
@@ -66,28 +68,28 @@ const SummonUnit = (props: Props) => {
"2040027000",
"2040046000",
"2040047000",
- ]
+ ];
- let suffix = ""
+ let suffix = "";
if (
upgradedSummons.indexOf(summon.granblue_id.toString()) != -1 &&
props.gridSummon.uncap_level == 5
)
- suffix = "_02"
+ suffix = "_02";
// Generate the correct source for the summon
if (props.unitType == 0 || props.unitType == 2)
- imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/summon-main/${summon.granblue_id}${suffix}.jpg`
+ imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/summon-main/${summon.granblue_id}${suffix}.jpg`;
else
- imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/summon-grid/${summon.granblue_id}${suffix}.jpg`
+ imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/summon-grid/${summon.granblue_id}${suffix}.jpg`;
}
- setImageUrl(imgSrc)
+ setImageUrl(imgSrc);
}
function passUncapData(uncap: number) {
if (props.gridSummon)
- props.updateUncap(props.gridSummon.id, props.position, uncap)
+ props.updateUncap(props.gridSummon.id, props.position, uncap);
}
const image = (
@@ -101,7 +103,7 @@ const SummonUnit = (props: Props) => {
""
)}
@@ -131,13 +133,13 @@ const SummonUnit = (props: Props) => {
)}
- )
+ );
const withHovercard = (
{summon?.name[locale]}
-
-
-
- )
-}
+ return (
+
+
+
+
+ );
+};
-export default ToggleSwitch
\ No newline at end of file
+export default ToggleSwitch;
diff --git a/components/TopHeader/index.tsx b/components/TopHeader/index.tsx
index 6fdaffe8..46d6ecd7 100644
--- a/components/TopHeader/index.tsx
+++ b/components/TopHeader/index.tsx
@@ -1,97 +1,97 @@
-import React from "react"
-import { useSnapshot } from "valtio"
-import { getCookie, deleteCookie } from "cookies-next"
-import { useRouter } from "next/router"
-import { useTranslation } from "next-i18next"
+import React from "react";
+import { useSnapshot } from "valtio";
+import { getCookie, deleteCookie } from "cookies-next";
+import { useRouter } from "next/router";
+import { useTranslation } from "next-i18next";
-import clonedeep from "lodash.clonedeep"
+import clonedeep from "lodash.clonedeep";
-import api from "~utils/api"
-import { accountState, initialAccountState } from "~utils/accountState"
-import { appState, initialAppState } from "~utils/appState"
+import api from "~utils/api";
+import { accountState, initialAccountState } from "~utils/accountState";
+import { appState, initialAppState } from "~utils/appState";
-import Header from "~components/Header"
-import Button from "~components/Button"
-import HeaderMenu from "~components/HeaderMenu"
+import Header from "~components/Header";
+import Button from "~components/Button";
+import HeaderMenu from "~components/HeaderMenu";
const TopHeader = () => {
- const { t } = useTranslation("common")
+ const { t } = useTranslation("common");
// Cookies
- const accountCookie = getCookie("account")
- const userCookie = getCookie("user")
+ const accountCookie = getCookie("account");
+ const userCookie = getCookie("user");
- const headers = {}
+ const headers = {};
// accountCookies.account != null
// ? {
// Authorization: `Bearer ${accountCookies.account.access_token}`,
// }
// : {}
- const { account } = useSnapshot(accountState)
- const { party } = useSnapshot(appState)
- const router = useRouter()
+ const { account } = useSnapshot(accountState);
+ const { party } = useSnapshot(appState);
+ const router = useRouter();
function copyToClipboard() {
- const el = document.createElement("input")
- el.value = window.location.href
- el.id = "url-input"
- document.body.appendChild(el)
+ const el = document.createElement("input");
+ el.value = window.location.href;
+ el.id = "url-input";
+ document.body.appendChild(el);
- el.select()
- document.execCommand("copy")
- el.remove()
+ el.select();
+ document.execCommand("copy");
+ el.remove();
}
function newParty() {
// Push the root URL
- router.push("/")
+ router.push("/");
// Clean state
- const resetState = clonedeep(initialAppState)
+ const resetState = clonedeep(initialAppState);
Object.keys(resetState).forEach((key) => {
- appState[key] = resetState[key]
- })
+ appState[key] = resetState[key];
+ });
// Set party to be editable
- appState.party.editable = true
+ appState.party.editable = true;
}
function logout() {
- deleteCookie("account")
- deleteCookie("user")
+ deleteCookie("account");
+ deleteCookie("user");
// Clean state
- const resetState = clonedeep(initialAccountState)
+ const resetState = clonedeep(initialAccountState);
Object.keys(resetState).forEach((key) => {
- if (key !== "language") accountState[key] = resetState[key]
- })
+ if (key !== "language") accountState[key] = resetState[key];
+ });
- if (router.route != "/new") appState.party.editable = false
+ if (router.route != "/new") appState.party.editable = false;
- router.push("/")
- return false
+ router.push("/");
+ return false;
}
function toggleFavorite() {
- if (party.favorited) unsaveFavorite()
- else saveFavorite()
+ if (party.favorited) unsaveFavorite();
+ else saveFavorite();
}
function saveFavorite() {
if (party.id)
api.saveTeam({ id: party.id, params: headers }).then((response) => {
- if (response.status == 201) appState.party.favorited = true
- })
- else console.error("Failed to save team: No party ID")
+ if (response.status == 201) appState.party.favorited = true;
+ });
+ else console.error("Failed to save team: No party ID");
}
function unsaveFavorite() {
if (party.id)
api.unsaveTeam({ id: party.id, params: headers }).then((response) => {
- if (response.status == 200) appState.party.favorited = false
- })
- else console.error("Failed to unsave team: No party ID")
+ if (response.status == 200) appState.party.favorited = false;
+ });
+ else console.error("Failed to unsave team: No party ID");
}
const leftNav = () => {
@@ -108,8 +108,8 @@ const TopHeader = () => {
-
{Array.from(Array(numStars)).map((x, i) => {
if (props.type === "character" && i > 4) {
- if (props.special) return ulb(i)
- else return transcendence(i)
+ if (props.special) return ulb(i);
+ else return transcendence(i);
} else if (
(props.special && props.type === "character" && i == 3) ||
(props.type === "character" && i == 4) ||
(props.type !== "character" && i > 2)
) {
- return flb(i)
+ return flb(i);
} else {
- return mlb(i)
+ return mlb(i);
}
})}
@@ -250,10 +251,10 @@ const WeaponGrid = (props: Props) => {
{(() => {
- return party.extra ? extraGridElement : ""
+ return party.extra ? extraGridElement : "";
})()}
- )
-}
+ );
+};
-export default WeaponGrid
+export default WeaponGrid;
diff --git a/components/WeaponHovercard/index.scss b/components/WeaponHovercard/index.scss
index 0a824776..a9f5bd57 100644
--- a/components/WeaponHovercard/index.scss
+++ b/components/WeaponHovercard/index.scss
@@ -1,41 +1,41 @@
.Weapon.Hovercard {
- .skills {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- padding-right: $unit * 2;
+ .skills {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ padding-right: $unit * 2;
- .axSkill {
- align-items: center;
- display: flex;
- flex-direction: row;
+ .axSkill {
+ align-items: center;
+ display: flex;
+ flex-direction: row;
- &.primary img {
- height: 64px;
- width: 64px;
- }
+ &.primary img {
+ height: 64px;
+ width: 64px;
+ }
- &.secondary {
- gap: $unit * 1.5;
+ &.secondary {
+ gap: $unit * 1.5;
- img {
- height: 36px;
- width: 36px;
- }
- }
-
- span {
- font-size: $font-small;
- font-weight: $medium;
- text-align: center;
- }
+ img {
+ height: 36px;
+ width: 36px;
}
- }
+ }
- .weaponKeys {
- display: flex;
- flex-direction: column;
- font-size: $normal;
- gap: calc($unit / 2);
+ span {
+ font-size: $font-small;
+ font-weight: $medium;
+ text-align: center;
+ }
}
-}
\ No newline at end of file
+ }
+
+ .weaponKeys {
+ display: flex;
+ flex-direction: column;
+ font-size: $normal;
+ gap: calc($unit / 2);
+ }
+}
diff --git a/components/WeaponHovercard/index.tsx b/components/WeaponHovercard/index.tsx
index c4d037af..2bd3d5b7 100644
--- a/components/WeaponHovercard/index.tsx
+++ b/components/WeaponHovercard/index.tsx
@@ -1,177 +1,252 @@
-import React from 'react'
-import { useRouter } from 'next/router'
-import { useTranslation } from 'next-i18next'
+import React from "react";
+import { useRouter } from "next/router";
+import { useTranslation } from "next-i18next";
-import * as HoverCard from '@radix-ui/react-hover-card'
+import * as HoverCard from "@radix-ui/react-hover-card";
-import WeaponLabelIcon from '~components/WeaponLabelIcon'
-import UncapIndicator from '~components/UncapIndicator'
+import WeaponLabelIcon from "~components/WeaponLabelIcon";
+import UncapIndicator from "~components/UncapIndicator";
-import { axData } from '~utils/axData'
+import { axData } from "~utils/axData";
-import './index.scss'
+import "./index.scss";
interface Props {
- gridWeapon: GridWeapon
- children: React.ReactNode
+ gridWeapon: GridWeapon;
+ children: React.ReactNode;
}
interface KeyNames {
- [key: string]: {
- [key: string]: string
- en: string,
- ja: string
- }
+ [key: string]: {
+ [key: string]: string;
+ en: string;
+ ja: string;
+ };
}
const WeaponHovercard = (props: Props) => {
- const router = useRouter()
- const { t } = useTranslation('common')
- const locale = (router.locale && ['en', 'ja'].includes(router.locale)) ? router.locale : 'en'
-
- const Element = ['null', 'wind', 'fire', 'water', 'earth', 'dark', 'light']
- const Proficiency = ['none', 'sword', 'dagger', 'axe', 'spear', 'bow', 'staff', 'fist', 'harp', 'gun', 'katana']
- const WeaponKeyNames: KeyNames = {
- '2': {
- en: 'Pendulum',
- ja: 'ペンデュラム'
- },
- '3': {
- en: 'Teluma',
- ja: 'テルマ'
- },
- '17': {
- en: 'Gauph Key',
- ja: 'ガフスキー'
- },
- '22': {
- en: 'Emblem',
- ja: 'エンブレム'
- }
+ const router = useRouter();
+ const { t } = useTranslation("common");
+ const locale =
+ router.locale && ["en", "ja"].includes(router.locale)
+ ? router.locale
+ : "en";
+
+ const Element = ["null", "wind", "fire", "water", "earth", "dark", "light"];
+ const Proficiency = [
+ "none",
+ "sword",
+ "dagger",
+ "axe",
+ "spear",
+ "bow",
+ "staff",
+ "fist",
+ "harp",
+ "gun",
+ "katana",
+ ];
+ const WeaponKeyNames: KeyNames = {
+ "2": {
+ en: "Pendulum",
+ ja: "ペンデュラム",
+ },
+ "3": {
+ en: "Teluma",
+ ja: "テルマ",
+ },
+ "17": {
+ en: "Gauph Key",
+ ja: "ガフスキー",
+ },
+ "22": {
+ en: "Emblem",
+ ja: "エンブレム",
+ },
+ };
+
+ const tintElement =
+ props.gridWeapon.object.element == 0 && props.gridWeapon.element
+ ? Element[props.gridWeapon.element]
+ : Element[props.gridWeapon.object.element];
+ const wikiUrl = `https://gbf.wiki/${props.gridWeapon.object.name.en.replaceAll(
+ " ",
+ "_"
+ )}`;
+
+ const hovercardSide = () => {
+ if (props.gridWeapon.position == -1) return "right";
+ else if ([6, 7, 8, 9, 10, 11].includes(props.gridWeapon.position))
+ return "top";
+ else return "bottom";
+ };
+
+ const createPrimaryAxSkillString = () => {
+ const primaryAxSkills = axData[props.gridWeapon.object.ax - 1];
+
+ if (props.gridWeapon.ax) {
+ const simpleAxSkill = props.gridWeapon.ax[0];
+ const axSkill = primaryAxSkills.find(
+ (skill) => skill.id == simpleAxSkill.modifier
+ );
+
+ return `${axSkill?.name[locale]} +${simpleAxSkill.strength}${
+ axSkill?.suffix ? axSkill.suffix : ""
+ }`;
}
- const tintElement = (props.gridWeapon.object.element == 0 && props.gridWeapon.element) ? Element[props.gridWeapon.element] : Element[props.gridWeapon.object.element]
- const wikiUrl = `https://gbf.wiki/${props.gridWeapon.object.name.en.replaceAll(' ', '_')}`
+ return "";
+ };
- const hovercardSide = () => {
- if (props.gridWeapon.position == -1)
- return "right"
- else if ([6, 7, 8, 9, 10, 11].includes(props.gridWeapon.position))
- return "top"
- else
- return "bottom"
+ const createSecondaryAxSkillString = () => {
+ const primaryAxSkills = axData[props.gridWeapon.object.ax - 1];
+
+ if (props.gridWeapon.ax) {
+ const primarySimpleAxSkill = props.gridWeapon.ax[0];
+ const secondarySimpleAxSkill = props.gridWeapon.ax[1];
+
+ const primaryAxSkill = primaryAxSkills.find(
+ (skill) => skill.id == primarySimpleAxSkill.modifier
+ );
+
+ if (primaryAxSkill && primaryAxSkill.secondary) {
+ const secondaryAxSkill = primaryAxSkill.secondary.find(
+ (skill) => skill.id == secondarySimpleAxSkill.modifier
+ );
+ return `${secondaryAxSkill?.name[locale]} +${
+ secondarySimpleAxSkill.strength
+ }${secondaryAxSkill?.suffix ? secondaryAxSkill.suffix : ""}`;
+ }
}
- const createPrimaryAxSkillString = () => {
- const primaryAxSkills = axData[props.gridWeapon.object.ax - 1]
+ return "";
+ };
- if (props.gridWeapon.ax) {
- const simpleAxSkill = props.gridWeapon.ax[0]
- const axSkill = primaryAxSkills.find(skill => skill.id == simpleAxSkill.modifier)
-
- return `${axSkill?.name[locale]} +${simpleAxSkill.strength}${ (axSkill?.suffix) ? axSkill.suffix : '' }`
- }
+ function weaponImage() {
+ const weapon = props.gridWeapon.object;
- return ''
- }
+ if (props.gridWeapon.object.element == 0 && props.gridWeapon.element)
+ return `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${weapon.granblue_id}_${props.gridWeapon.element}.jpg`;
+ else
+ return `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${weapon.granblue_id}.jpg`;
+ }
- const createSecondaryAxSkillString = () => {
- const primaryAxSkills = axData[props.gridWeapon.object.ax - 1]
+ const keysSection = (
+ + {WeaponKeyNames[props.gridWeapon.object.series][locale]} + {locale === "en" ? "s" : ""} +
+ ) : ( + "" + )} - if (props.gridWeapon.ax) { - const primarySimpleAxSkill = props.gridWeapon.ax[0] - const secondarySimpleAxSkill = props.gridWeapon.ax[1] + {props.gridWeapon.weapon_keys + ? Array.from(Array(props.gridWeapon.weapon_keys.length)).map((x, i) => { + return ( +
+ {props.gridWeapon.weapon_keys![i].name[locale]}
+
+ );
+ })
+ : ""}
+ {t("modals.weapon.subtitles.ax_skills")}
+
+
+
+ 
+ {createPrimaryAxSkillString()}
+
- if (primaryAxSkill && primaryAxSkill.secondary) {
- const secondaryAxSkill = primaryAxSkill.secondary.find(skill => skill.id == secondarySimpleAxSkill.modifier)
- return `${secondaryAxSkill?.name[locale]} +${secondarySimpleAxSkill.strength}${ (secondaryAxSkill?.suffix) ? secondaryAxSkill.suffix : '' }`
- }
- }
+ {props.gridWeapon.ax &&
+ props.gridWeapon.ax[1].modifier &&
+ props.gridWeapon.ax[1].strength ? (
+
+ 
+ {createSecondaryAxSkillString()}
+
+ ) : (
+ ""
+ )}
+ { WeaponKeyNames[props.gridWeapon.object.series][locale] }{ (locale === 'en') ? 's' : '' }
: '' - } - - { (props.gridWeapon.weapon_keys) ? - Array.from(Array(props.gridWeapon.weapon_keys.length)).map((x, i) => { - return ( -
- {props.gridWeapon.weapon_keys![i].name[locale]}
-
- )
- }) : '' }
- {t('modals.weapon.subtitles.ax_skills')}
-
-
+ {props.children}
+
+
-
- { props.children }
-
-
-
-
- )
-}
-
-export default WeaponHovercard
+ {props.gridWeapon.object.ax > 0 &&
+ props.gridWeapon.ax &&
+ props.gridWeapon.ax[0].modifier &&
+ props.gridWeapon.ax[0].strength
+ ? axSection
+ : ""}
+ {props.gridWeapon.weapon_keys && props.gridWeapon.weapon_keys.length > 0
+ ? keysSection
+ : ""}
+
+ {t("buttons.wiki")}
+
+
+
+ );
+};
+export default WeaponHovercard;
diff --git a/components/WeaponKeyDropdown/index.tsx b/components/WeaponKeyDropdown/index.tsx
index e9b15412..c3b8d75f 100644
--- a/components/WeaponKeyDropdown/index.tsx
+++ b/components/WeaponKeyDropdown/index.tsx
@@ -1,134 +1,142 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState } from "react";
-import api from '~utils/api'
+import api from "~utils/api";
-import './index.scss'
+import "./index.scss";
// Props
interface Props {
- currentValue?: WeaponKey
- series: number
- slot: number
- onChange?: (event: React.ChangeEvent) => void
- onBlur?: (event: React.ChangeEvent) => void
+ currentValue?: WeaponKey;
+ series: number;
+ slot: number;
+ onChange?: (event: React.ChangeEvent) => void;
+ onBlur?: (event: React.ChangeEvent) => void;
}
-const WeaponKeyDropdown = React.forwardRef(function useFieldSet(props, ref) {
- const [keys, setKeys] = useState([])
- const [currentKey, setCurrentKey] = useState('')
+const WeaponKeyDropdown = React.forwardRef(
+ function useFieldSet(props, ref) {
+ const [keys, setKeys] = useState([]);
+ const [currentKey, setCurrentKey] = useState("");
const pendulumNames = [
- { en: 'Pendulum', jp: '' },
- { en: 'Chain', jp: '' }
- ]
+ { en: "Pendulum", jp: "" },
+ { en: "Chain", jp: "" },
+ ];
- const telumaNames = [ { en: 'Teluma', jp: '' } ]
- const emblemNames = [ { en: 'Emblem', jp: '' } ]
+ const telumaNames = [{ en: "Teluma", jp: "" }];
+ const emblemNames = [{ en: "Emblem", jp: "" }];
const gauphNames = [
- { en: 'Gauph Key', jp: '' },
- { en: 'Ultima Key', jp: '' },
- { en: 'Gate of Omnipotence', jp: '' }
- ]
+ { en: "Gauph Key", jp: "" },
+ { en: "Ultima Key", jp: "" },
+ { en: "Gate of Omnipotence", jp: "" },
+ ];
useEffect(() => {
- if (props.currentValue)
- setCurrentKey(props.currentValue.id)
- }, [props.currentValue])
+ if (props.currentValue) setCurrentKey(props.currentValue.id);
+ }, [props.currentValue]);
useEffect(() => {
- const filterParams = {
- params: {
- series: props.series,
- slot: props.slot
- }
+ const filterParams = {
+ params: {
+ series: props.series,
+ slot: props.slot,
+ },
+ };
+
+ function organizeWeaponKeys(weaponKeys: WeaponKey[]) {
+ const numGroups = Math.max.apply(
+ Math,
+ weaponKeys.map((key) => key.group)
+ );
+ let groupedKeys = [];
+ for (let i = 0; i <= numGroups; i++) {
+ groupedKeys[i] = weaponKeys.filter((key) => key.group == i);
}
- function organizeWeaponKeys(weaponKeys: WeaponKey[]) {
- const numGroups = Math.max.apply(Math, weaponKeys.map(key => key.group))
- let groupedKeys = []
- for (let i = 0; i <= numGroups; i++) {
- groupedKeys[i] = weaponKeys.filter(key => key.group == i)
- }
-
- setKeys(groupedKeys)
- }
+ setKeys(groupedKeys);
+ }
- function fetchWeaponKeys() {
- api.endpoints.weapon_keys.getAll(filterParams)
- .then((response) => {
- const keys = response.data.map((k: any) => k.weapon_key)
- organizeWeaponKeys(keys)
- })
- }
+ function fetchWeaponKeys() {
+ api.endpoints.weapon_keys.getAll(filterParams).then((response) => {
+ const keys = response.data.map((k: any) => k.weapon_key);
+ organizeWeaponKeys(keys);
+ });
+ }
- fetchWeaponKeys()
- }, [props.series, props.slot])
+ fetchWeaponKeys();
+ }, [props.series, props.slot]);
function weaponKeyGroup(index: number) {
- ['α','β','γ','Δ'].sort((a, b) => a.localeCompare(b, 'el'))
+ ["α", "β", "γ", "Δ"].sort((a, b) => a.localeCompare(b, "el"));
- const sortByOrder = (a: WeaponKey, b: WeaponKey) => a.order > b.order ? 1 : -1
+ const sortByOrder = (a: WeaponKey, b: WeaponKey) =>
+ a.order > b.order ? 1 : -1;
- const options = keys && keys.length > 0 && keys[index].length > 0 &&
- keys[index].sort(sortByOrder).map((item, i) => {
- return (
-
- )
- })
+ const options =
+ keys &&
+ keys.length > 0 &&
+ keys[index].length > 0 &&
+ keys[index].sort(sortByOrder).map((item, i) => {
+ return (
+
+ );
+ });
- let name: { [key: string]: string } = {}
- if (props.series == 2 && index == 0)
- name = pendulumNames[0]
- else if (props.series == 2 && props.slot == 1 && index == 1)
- name = pendulumNames[1]
- else if (props.series == 3)
- name = telumaNames[index]
- else if (props.series == 17)
- name = gauphNames[props.slot]
- else if (props.series == 22)
- name = emblemNames[index]
-
- return (
-
- )
+ let name: { [key: string]: string } = {};
+ if (props.series == 2 && index == 0) name = pendulumNames[0];
+ else if (props.series == 2 && props.slot == 1 && index == 1)
+ name = pendulumNames[1];
+ else if (props.series == 3) name = telumaNames[index];
+ else if (props.series == 17) name = gauphNames[props.slot];
+ else if (props.series == 22) name = emblemNames[index];
+
+ return (
+
+ );
}
function handleChange(event: React.ChangeEvent) {
- if (props.onChange)
- props.onChange(event)
+ if (props.onChange) props.onChange(event);
- setCurrentKey(event.currentTarget.value)
+ setCurrentKey(event.currentTarget.value);
}
const emptyOption = () => {
- let name = ''
- if (props.series == 2)
- name = pendulumNames[0].en
- else if (props.series == 3)
- name = telumaNames[0].en
- else if (props.series == 17)
- name = gauphNames[props.slot].en
- else if (props.series == 22)
- name = emblemNames[0].en
+ let name = "";
+ if (props.series == 2) name = pendulumNames[0].en;
+ else if (props.series == 3) name = telumaNames[0].en;
+ else if (props.series == 17) name = gauphNames[props.slot].en;
+ else if (props.series == 22) name = emblemNames[0].en;
+
+ return `No ${name}`;
+ };
- return `No ${name}`
- }
-
return (
-
- )
-})
+
+ );
+ }
+);
-export default WeaponKeyDropdown
+export default WeaponKeyDropdown;
diff --git a/components/WeaponLabelIcon/index.scss b/components/WeaponLabelIcon/index.scss
index 1e5cd0a5..7b83498d 100644
--- a/components/WeaponLabelIcon/index.scss
+++ b/components/WeaponLabelIcon/index.scss
@@ -1,147 +1,146 @@
.WeaponLabelIcon {
- display: inline-block;
- background-size: 60px 25px;
- height: 25px;
- width: 60px;
+ display: inline-block;
+ background-size: 60px 25px;
+ height: 25px;
+ width: 60px;
- /* Elements */
+ /* Elements */
- &.fire.en {
- background-image: url('/labels/element/fire_en.png')
- }
+ &.fire.en {
+ background-image: url("/labels/element/fire_en.png");
+ }
- &.fire.ja {
- background-image: url('/labels/element/fire_ja.png')
- }
+ &.fire.ja {
+ background-image: url("/labels/element/fire_ja.png");
+ }
- &.water.en {
- background-image: url('/labels/element/water_en.png')
- }
+ &.water.en {
+ background-image: url("/labels/element/water_en.png");
+ }
- &.water.ja {
- background-image: url('/labels/element/water_ja.png')
- }
+ &.water.ja {
+ background-image: url("/labels/element/water_ja.png");
+ }
- &.earth.en {
- background-image: url('/labels/element/earth_en.png')
- }
+ &.earth.en {
+ background-image: url("/labels/element/earth_en.png");
+ }
- &.earth.ja {
- background-image: url('/labels/element/earth_ja.png')
- }
+ &.earth.ja {
+ background-image: url("/labels/element/earth_ja.png");
+ }
- &.wind.en {
- background-image: url('/labels/element/wind_en.png')
- }
+ &.wind.en {
+ background-image: url("/labels/element/wind_en.png");
+ }
- &.wind.ja {
- background-image: url('/labels/element/wind_ja.png')
- }
+ &.wind.ja {
+ background-image: url("/labels/element/wind_ja.png");
+ }
- &.dark.en {
- background-image: url('/labels/element/dark_en.png')
- }
+ &.dark.en {
+ background-image: url("/labels/element/dark_en.png");
+ }
- &.dark.ja {
- background-image: url('/labels/element/dark_ja.png')
- }
+ &.dark.ja {
+ background-image: url("/labels/element/dark_ja.png");
+ }
- &.light.en {
- background-image: url('/labels/element/light_en.png')
- }
+ &.light.en {
+ background-image: url("/labels/element/light_en.png");
+ }
- &.light.ja {
- background-image: url('/labels/element/light_ja.png')
- }
+ &.light.ja {
+ background-image: url("/labels/element/light_ja.png");
+ }
- &.null.en {
- background-image: url('/labels/element/any_en.png')
- }
+ &.null.en {
+ background-image: url("/labels/element/any_en.png");
+ }
- &.null.ja {
- background-image: url('/labels/element/any_ja.png')
- }
+ &.null.ja {
+ background-image: url("/labels/element/any_ja.png");
+ }
- /* Proficiencies */
+ /* Proficiencies */
- &.sword.en {
- background-image: url('/labels/proficiency/sabre_en.png')
- }
+ &.sword.en {
+ background-image: url("/labels/proficiency/sabre_en.png");
+ }
- &.sword.ja {
- background-image: url('/labels/proficiency/sabre_ja.png')
- }
+ &.sword.ja {
+ background-image: url("/labels/proficiency/sabre_ja.png");
+ }
- &.dagger.en {
- background-image: url('/labels/proficiency/dagger_en.png')
- }
+ &.dagger.en {
+ background-image: url("/labels/proficiency/dagger_en.png");
+ }
- &.dagger.ja {
- background-image: url('/labels/proficiency/dagger_ja.png')
- }
+ &.dagger.ja {
+ background-image: url("/labels/proficiency/dagger_ja.png");
+ }
- &.axe.en {
- background-image: url('/labels/proficiency/axe_en.png')
- }
+ &.axe.en {
+ background-image: url("/labels/proficiency/axe_en.png");
+ }
- &.axe.ja {
- background-image: url('/labels/proficiency/axe_ja.png')
- }
+ &.axe.ja {
+ background-image: url("/labels/proficiency/axe_ja.png");
+ }
- &.spear.en {
- background-image: url('/labels/proficiency/spear_en.png')
- }
+ &.spear.en {
+ background-image: url("/labels/proficiency/spear_en.png");
+ }
- &.spear.ja {
- background-image: url('/labels/proficiency/spear_ja.png')
- }
+ &.spear.ja {
+ background-image: url("/labels/proficiency/spear_ja.png");
+ }
- &.staff.en {
- background-image: url('/labels/proficiency/staff_en.png')
- }
+ &.staff.en {
+ background-image: url("/labels/proficiency/staff_en.png");
+ }
- &.staff.ja {
- background-image: url('/labels/proficiency/staff_ja.png')
- }
+ &.staff.ja {
+ background-image: url("/labels/proficiency/staff_ja.png");
+ }
- &.fist.en {
- background-image: url('/labels/proficiency/melee_en.png')
- }
+ &.fist.en {
+ background-image: url("/labels/proficiency/melee_en.png");
+ }
- &.fist.ja {
- background-image: url('/labels/proficiency/melee_ja.png')
- }
+ &.fist.ja {
+ background-image: url("/labels/proficiency/melee_ja.png");
+ }
- &.harp.en {
- background-image: url('/labels/proficiency/harp_en.png')
- }
+ &.harp.en {
+ background-image: url("/labels/proficiency/harp_en.png");
+ }
- &.harp.ja {
- background-image: url('/labels/proficiency/harp_ja.png')
- }
+ &.harp.ja {
+ background-image: url("/labels/proficiency/harp_ja.png");
+ }
- &.gun.en {
- background-image: url('/labels/proficiency/gun_en.png')
- }
+ &.gun.en {
+ background-image: url("/labels/proficiency/gun_en.png");
+ }
- &.gun.ja {
- background-image: url('/labels/proficiency/gun_ja.png')
- }
+ &.gun.ja {
+ background-image: url("/labels/proficiency/gun_ja.png");
+ }
- &.bow.en {
- background-image: url('/labels/proficiency/bow_en.png')
- }
+ &.bow.en {
+ background-image: url("/labels/proficiency/bow_en.png");
+ }
- &.bow.ja {
- background-image: url('/labels/proficiency/bow_ja.png')
- }
+ &.bow.ja {
+ background-image: url("/labels/proficiency/bow_ja.png");
+ }
- &.katana.en {
- background-image: url('/labels/proficiency/katana_en.png')
- }
+ &.katana.en {
+ background-image: url("/labels/proficiency/katana_en.png");
+ }
- &.katana.ja {
- background-image: url('/labels/proficiency/katana_ja.png')
- }
+ &.katana.ja {
+ background-image: url("/labels/proficiency/katana_ja.png");
+ }
}
-
diff --git a/components/WeaponLabelIcon/index.tsx b/components/WeaponLabelIcon/index.tsx
index e49f6911..5503e610 100644
--- a/components/WeaponLabelIcon/index.tsx
+++ b/components/WeaponLabelIcon/index.tsx
@@ -1,18 +1,18 @@
-import React from 'react'
-import { useRouter } from 'next/router'
+import React from "react";
+import { useRouter } from "next/router";
-import './index.scss'
+import "./index.scss";
interface Props {
- labelType: string
+ labelType: string;
}
const WeaponLabelIcon = (props: Props) => {
- const router = useRouter()
-
- return (
-
- )
-}
+ const router = useRouter();
-export default WeaponLabelIcon
+ return (
+
+ );
+};
+
+export default WeaponLabelIcon;
diff --git a/components/WeaponModal/index.scss b/components/WeaponModal/index.scss
index 34e8543d..12de759a 100644
--- a/components/WeaponModal/index.scss
+++ b/components/WeaponModal/index.scss
@@ -1,44 +1,44 @@
.Weapon.Dialog {
- .mods {
- display: flex;
- flex-direction: column;
- gap: $unit * 4;
+ .mods {
+ display: flex;
+ flex-direction: column;
+ gap: $unit * 4;
- section {
- display: flex;
- flex-direction: column;
- gap: calc($unit / 2);
+ section {
+ display: flex;
+ flex-direction: column;
+ gap: calc($unit / 2);
- h3 {
- color: $grey-50;
- font-size: $font-small;
- margin-bottom: $unit;
- }
+ h3 {
+ color: $grey-50;
+ font-size: $font-small;
+ margin-bottom: $unit;
+ }
- select {
- background-color: $grey-90;
- }
- }
-
- .Button {
- font-size: $font-regular;
- padding: ($unit * 1.5) ($unit * 2);
- width: 100%;
-
- &.btn-disabled {
- background: $grey-90;
- color: $grey-70;
- cursor: not-allowed;
- }
-
- &:not(.btn-disabled) {
- background: $grey-90;
- color: $grey-40;
-
- &:hover {
- background: $grey-80;
- }
- }
- }
+ select {
+ background-color: $grey-90;
+ }
}
-}
\ No newline at end of file
+
+ .Button {
+ font-size: $font-regular;
+ padding: ($unit * 1.5) ($unit * 2);
+ width: 100%;
+
+ &.btn-disabled {
+ background: $grey-90;
+ color: $grey-70;
+ cursor: not-allowed;
+ }
+
+ &:not(.btn-disabled) {
+ background: $grey-90;
+ color: $grey-40;
+
+ &:hover {
+ background: $grey-80;
+ }
+ }
+ }
+ }
+}
diff --git a/components/WeaponModal/index.tsx b/components/WeaponModal/index.tsx
index d29b43e6..4581079d 100644
--- a/components/WeaponModal/index.tsx
+++ b/components/WeaponModal/index.tsx
@@ -1,69 +1,71 @@
-import React, { useState } from "react"
-import { getCookie } from "cookies-next"
-import { useRouter } from "next/router"
-import { useTranslation } from "next-i18next"
-import { AxiosResponse } from "axios"
+import React, { useState } from "react";
+import { getCookie } from "cookies-next";
+import { useRouter } from "next/router";
+import { useTranslation } from "next-i18next";
+import { AxiosResponse } from "axios";
-import * as Dialog from "@radix-ui/react-dialog"
+import * as Dialog from "@radix-ui/react-dialog";
-import AXSelect from "~components/AxSelect"
-import ElementToggle from "~components/ElementToggle"
-import WeaponKeyDropdown from "~components/WeaponKeyDropdown"
-import Button from "~components/Button"
+import AXSelect from "~components/AxSelect";
+import ElementToggle from "~components/ElementToggle";
+import WeaponKeyDropdown from "~components/WeaponKeyDropdown";
+import Button from "~components/Button";
-import api from "~utils/api"
-import { appState } from "~utils/appState"
+import api from "~utils/api";
+import { appState } from "~utils/appState";
-import CrossIcon from "~public/icons/Cross.svg"
-import "./index.scss"
+import CrossIcon from "~public/icons/Cross.svg";
+import "./index.scss";
interface GridWeaponObject {
weapon: {
- element?: number
- weapon_key1_id?: string
- weapon_key2_id?: string
- weapon_key3_id?: string
- ax_modifier1?: number
- ax_modifier2?: number
- ax_strength1?: number
- ax_strength2?: number
- }
+ element?: number;
+ weapon_key1_id?: string;
+ weapon_key2_id?: string;
+ weapon_key3_id?: string;
+ ax_modifier1?: number;
+ ax_modifier2?: number;
+ ax_strength1?: number;
+ ax_strength2?: number;
+ };
}
interface Props {
- gridWeapon: GridWeapon
- children: React.ReactNode
+ gridWeapon: GridWeapon;
+ children: React.ReactNode;
}
const WeaponModal = (props: Props) => {
- const router = useRouter()
+ const router = useRouter();
const locale =
- router.locale && ["en", "ja"].includes(router.locale) ? router.locale : "en"
- const { t } = useTranslation("common")
+ router.locale && ["en", "ja"].includes(router.locale)
+ ? router.locale
+ : "en";
+ const { t } = useTranslation("common");
// Cookies
- const cookie = getCookie("account")
+ const cookie = getCookie("account");
const accountData: AccountCookie = cookie
? JSON.parse(cookie as string)
- : null
+ : null;
const headers = accountData
? { Authorization: `Bearer ${accountData.token}` }
- : {}
+ : {};
// Refs
- const weaponKey1Select = React.createRef()
- const weaponKey2Select = React.createRef()
- const weaponKey3Select = React.createRef()
+ const weaponKey1Select = React.createRef();
+ const weaponKey2Select = React.createRef();
+ const weaponKey3Select = React.createRef();
// State
- const [open, setOpen] = useState(false)
- const [formValid, setFormValid] = useState(false)
+ const [open, setOpen] = useState(false);
+ const [formValid, setFormValid] = useState(false);
- const [element, setElement] = useState(-1)
- const [primaryAxModifier, setPrimaryAxModifier] = useState(-1)
- const [secondaryAxModifier, setSecondaryAxModifier] = useState(-1)
- const [primaryAxValue, setPrimaryAxValue] = useState(0.0)
- const [secondaryAxValue, setSecondaryAxValue] = useState(0.0)
+ const [element, setElement] = useState(-1);
+ const [primaryAxModifier, setPrimaryAxModifier] = useState(-1);
+ const [secondaryAxModifier, setSecondaryAxModifier] = useState(-1);
+ const [primaryAxValue, setPrimaryAxValue] = useState(0.0);
+ const [secondaryAxValue, setSecondaryAxValue] = useState(0.0);
function receiveAxValues(
primaryAxModifier: number,
@@ -71,64 +73,64 @@ const WeaponModal = (props: Props) => {
secondaryAxModifier: number,
secondaryAxValue: number
) {
- setPrimaryAxModifier(primaryAxModifier)
- setSecondaryAxModifier(secondaryAxModifier)
+ setPrimaryAxModifier(primaryAxModifier);
+ setSecondaryAxModifier(secondaryAxModifier);
- setPrimaryAxValue(primaryAxValue)
- setSecondaryAxValue(secondaryAxValue)
+ setPrimaryAxValue(primaryAxValue);
+ setSecondaryAxValue(secondaryAxValue);
}
function receiveAxValidity(isValid: boolean) {
- setFormValid(isValid)
+ setFormValid(isValid);
}
function receiveElementValue(element: string) {
- setElement(parseInt(element))
+ setElement(parseInt(element));
}
function prepareObject() {
- let object: GridWeaponObject = { weapon: {} }
+ let object: GridWeaponObject = { weapon: {} };
- if (props.gridWeapon.object.element == 0) object.weapon.element = element
+ if (props.gridWeapon.object.element == 0) object.weapon.element = element;
if ([2, 3, 17, 24].includes(props.gridWeapon.object.series))
- object.weapon.weapon_key1_id = weaponKey1Select.current?.value
+ object.weapon.weapon_key1_id = weaponKey1Select.current?.value;
if ([2, 3, 17].includes(props.gridWeapon.object.series))
- object.weapon.weapon_key2_id = weaponKey2Select.current?.value
+ object.weapon.weapon_key2_id = weaponKey2Select.current?.value;
if (props.gridWeapon.object.series == 17)
- object.weapon.weapon_key3_id = weaponKey3Select.current?.value
+ object.weapon.weapon_key3_id = weaponKey3Select.current?.value;
if (props.gridWeapon.object.ax > 0) {
- object.weapon.ax_modifier1 = primaryAxModifier
- object.weapon.ax_modifier2 = secondaryAxModifier
- object.weapon.ax_strength1 = primaryAxValue
- object.weapon.ax_strength2 = secondaryAxValue
+ object.weapon.ax_modifier1 = primaryAxModifier;
+ object.weapon.ax_modifier2 = secondaryAxModifier;
+ object.weapon.ax_strength1 = primaryAxValue;
+ object.weapon.ax_strength2 = secondaryAxValue;
}
- return object
+ return object;
}
async function updateWeapon() {
- const updateObject = prepareObject()
+ const updateObject = prepareObject();
return await api.endpoints.grid_weapons
.update(props.gridWeapon.id, updateObject, headers)
.then((response) => processResult(response))
- .catch((error) => processError(error))
+ .catch((error) => processError(error));
}
function processResult(response: AxiosResponse) {
- const gridWeapon: GridWeapon = response.data.grid_weapon
+ const gridWeapon: GridWeapon = response.data.grid_weapon;
- if (gridWeapon.mainhand) appState.grid.weapons.mainWeapon = gridWeapon
- else appState.grid.weapons.allWeapons[gridWeapon.position] = gridWeapon
+ if (gridWeapon.mainhand) appState.grid.weapons.mainWeapon = gridWeapon;
+ else appState.grid.weapons.allWeapons[gridWeapon.position] = gridWeapon;
- setOpen(false)
+ setOpen(false);
}
function processError(error: any) {
- console.error(error)
+ console.error(error);
}
const elementSelect = () => {
@@ -140,8 +142,8 @@ const WeaponModal = (props: Props) => {
sendValue={receiveElementValue}
/>
- )
- }
+ );
+ };
const keySelect = () => {
return (
@@ -192,8 +194,8 @@ const WeaponModal = (props: Props) => {
""
)}
- )
- }
+ );
+ };
const axSelect = () => {
return (
@@ -206,12 +208,12 @@ const WeaponModal = (props: Props) => {
sendValues={receiveAxValues}
/>
- )
- }
+ );
+ };
function openChange(open: boolean) {
- setFormValid(false)
- setOpen(open)
+ setFormValid(false);
+ setOpen(open);
}
return (
@@ -255,7 +257,7 @@ const WeaponModal = (props: Props) => {
- ![{weapon.name[locale]}]({`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${weapon.granblue_id}.jpg`})
-
- )
-}
+ return (
+
+
+
+ );
+};
-export default WeaponResult
\ No newline at end of file
+export default WeaponResult;
diff --git a/components/WeaponSearchFilterBar/index.tsx b/components/WeaponSearchFilterBar/index.tsx
index 68ae7063..b21e3fae 100644
--- a/components/WeaponSearchFilterBar/index.tsx
+++ b/components/WeaponSearchFilterBar/index.tsx
@@ -1,224 +1,314 @@
-import React, { useEffect, useState } from 'react'
-import { useTranslation } from 'next-i18next'
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "next-i18next";
-import cloneDeep from 'lodash.clonedeep'
+import cloneDeep from "lodash.clonedeep";
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
-import SearchFilter from '~components/SearchFilter'
-import SearchFilterCheckboxItem from '~components/SearchFilterCheckboxItem'
+import SearchFilter from "~components/SearchFilter";
+import SearchFilterCheckboxItem from "~components/SearchFilterCheckboxItem";
-import './index.scss'
-import { emptyElementState, emptyProficiencyState, emptyRarityState, emptyWeaponSeriesState } from '~utils/emptyStates'
-import { elements, proficiencies, rarities, weaponSeries } from '~utils/stateValues'
+import "./index.scss";
+import {
+ emptyElementState,
+ emptyProficiencyState,
+ emptyRarityState,
+ emptyWeaponSeriesState,
+} from "~utils/emptyStates";
+import {
+ elements,
+ proficiencies,
+ rarities,
+ weaponSeries,
+} from "~utils/stateValues";
interface Props {
- sendFilters: (filters: { [key: string]: number[] }) => void
+ sendFilters: (filters: { [key: string]: number[] }) => void;
}
const WeaponSearchFilterBar = (props: Props) => {
- const { t } = useTranslation('common')
+ const { t } = useTranslation("common");
- const [rarityMenu, setRarityMenu] = useState(false)
- const [elementMenu, setElementMenu] = useState(false)
- const [proficiencyMenu, setProficiencyMenu] = useState(false)
- const [seriesMenu, setSeriesMenu] = useState(false)
+ const [rarityMenu, setRarityMenu] = useState(false);
+ const [elementMenu, setElementMenu] = useState(false);
+ const [proficiencyMenu, setProficiencyMenu] = useState(false);
+ const [seriesMenu, setSeriesMenu] = useState(false);
- const [rarityState, setRarityState] = useState(emptyRarityState)
- const [elementState, setElementState] = useState(emptyElementState)
- const [proficiencyState, setProficiencyState] = useState(emptyProficiencyState)
- const [seriesState, setSeriesState] = useState(emptyWeaponSeriesState)
+ const [rarityState, setRarityState] = useState(emptyRarityState);
+ const [elementState, setElementState] =
+ useState(emptyElementState);
+ const [proficiencyState, setProficiencyState] = useState(
+ emptyProficiencyState
+ );
+ const [seriesState, setSeriesState] = useState(
+ emptyWeaponSeriesState
+ );
- function rarityMenuOpened(open: boolean) {
- if (open) {
- setRarityMenu(true)
- setElementMenu(false)
- setProficiencyMenu(false)
- setSeriesMenu(false)
- } else setRarityMenu(false)
- }
+ function rarityMenuOpened(open: boolean) {
+ if (open) {
+ setRarityMenu(true);
+ setElementMenu(false);
+ setProficiencyMenu(false);
+ setSeriesMenu(false);
+ } else setRarityMenu(false);
+ }
- function elementMenuOpened(open: boolean) {
- if (open) {
- setRarityMenu(false)
- setElementMenu(true)
- setProficiencyMenu(false)
- setSeriesMenu(false)
- } else setElementMenu(false)
- }
+ function elementMenuOpened(open: boolean) {
+ if (open) {
+ setRarityMenu(false);
+ setElementMenu(true);
+ setProficiencyMenu(false);
+ setSeriesMenu(false);
+ } else setElementMenu(false);
+ }
- function proficiencyMenuOpened(open: boolean) {
- if (open) {
- setRarityMenu(false)
- setElementMenu(false)
- setProficiencyMenu(true)
- setSeriesMenu(false)
- } else setProficiencyMenu(false)
- }
+ function proficiencyMenuOpened(open: boolean) {
+ if (open) {
+ setRarityMenu(false);
+ setElementMenu(false);
+ setProficiencyMenu(true);
+ setSeriesMenu(false);
+ } else setProficiencyMenu(false);
+ }
- function seriesMenuOpened(open: boolean) {
- if (open) {
- setRarityMenu(false)
- setElementMenu(false)
- setProficiencyMenu(false)
- setSeriesMenu(true)
- } else setSeriesMenu(false)
- }
+ function seriesMenuOpened(open: boolean) {
+ if (open) {
+ setRarityMenu(false);
+ setElementMenu(false);
+ setProficiencyMenu(false);
+ setSeriesMenu(true);
+ } else setSeriesMenu(false);
+ }
- function handleRarityChange(checked: boolean, key: string) {
- let newRarityState = cloneDeep(rarityState)
- newRarityState[key].checked = checked
- setRarityState(newRarityState)
- }
+ function handleRarityChange(checked: boolean, key: string) {
+ let newRarityState = cloneDeep(rarityState);
+ newRarityState[key].checked = checked;
+ setRarityState(newRarityState);
+ }
- function handleElementChange(checked: boolean, key: string) {
- let newElementState = cloneDeep(elementState)
- newElementState[key].checked = checked
- setElementState(newElementState)
- }
+ function handleElementChange(checked: boolean, key: string) {
+ let newElementState = cloneDeep(elementState);
+ newElementState[key].checked = checked;
+ setElementState(newElementState);
+ }
- function handleProficiencyChange(checked: boolean, key: string) {
- let newProficiencyState = cloneDeep(proficiencyState)
- newProficiencyState[key].checked = checked
- setProficiencyState(newProficiencyState)
- }
+ function handleProficiencyChange(checked: boolean, key: string) {
+ let newProficiencyState = cloneDeep(proficiencyState);
+ newProficiencyState[key].checked = checked;
+ setProficiencyState(newProficiencyState);
+ }
- function handleSeriesChange(checked: boolean, key: string) {
- let newSeriesState = cloneDeep(seriesState)
- newSeriesState[key].checked = checked
- setSeriesState(newSeriesState)
- }
+ function handleSeriesChange(checked: boolean, key: string) {
+ let newSeriesState = cloneDeep(seriesState);
+ newSeriesState[key].checked = checked;
+ setSeriesState(newSeriesState);
+ }
- function sendFilters() {
- const checkedRarityFilters = Object.values(rarityState).filter(x => x.checked).map((x, i) => x.id)
- const checkedElementFilters = Object.values(elementState).filter(x => x.checked).map((x, i) => x.id)
- const checkedProficiencyFilters = Object.values(proficiencyState).filter(x => x.checked).map((x, i) => x.id)
- const checkedSeriesFilters = Object.values(seriesState).filter(x => x.checked).map((x, i) => x.id)
-
- const filters = {
- rarity: checkedRarityFilters,
- element: checkedElementFilters,
- proficiency1: checkedProficiencyFilters,
- series: checkedSeriesFilters
+ function sendFilters() {
+ const checkedRarityFilters = Object.values(rarityState)
+ .filter((x) => x.checked)
+ .map((x, i) => x.id);
+ const checkedElementFilters = Object.values(elementState)
+ .filter((x) => x.checked)
+ .map((x, i) => x.id);
+ const checkedProficiencyFilters = Object.values(proficiencyState)
+ .filter((x) => x.checked)
+ .map((x, i) => x.id);
+ const checkedSeriesFilters = Object.values(seriesState)
+ .filter((x) => x.checked)
+ .map((x, i) => x.id);
+
+ const filters = {
+ rarity: checkedRarityFilters,
+ element: checkedElementFilters,
+ proficiency1: checkedProficiencyFilters,
+ series: checkedSeriesFilters,
+ };
+
+ props.sendFilters(filters);
+ }
+
+ useEffect(() => {
+ sendFilters();
+ }, [rarityState, elementState, proficiencyState, seriesState]);
+
+ return (
+
- )
+ );
const editableImage = (
-
- {createPrimaryAxSkillString()}
-
-
- { (props.gridWeapon.ax && props.gridWeapon.ax[1].modifier && props.gridWeapon.ax[1].strength) ?
-
-
- {createSecondaryAxSkillString()}
-
: ''}
+ return (
+
+
- return (
-
+ ![{props.gridWeapon.object.name[locale]}]({weaponImage()})
+
+ {props.gridWeapon.object.name[locale]}
+
+
+
+ {props.gridWeapon.object.element !== 0 ||
+ (props.gridWeapon.object.element === 0 &&
+ props.gridWeapon.element != null) ? (
+
-
- )
+
-
-
- { (props.gridWeapon.object.ax > 0 && props.gridWeapon.ax && props.gridWeapon.ax[0].modifier && props.gridWeapon.ax[0].strength ) ? axSection : '' }
- { (props.gridWeapon.weapon_keys && props.gridWeapon.weapon_keys.length > 0) ? keysSection : '' }
- {t('buttons.wiki')}
-
-
-
- { props.gridWeapon.object.name[locale] }
-
-
-
- { (props.gridWeapon.object.element !== 0 || (props.gridWeapon.object.element === 0 && props.gridWeapon.element != null)) ?
-
-
-
-
- {weapon.name[locale]}
-
-
-
+
+
+ {weapon.name[locale]}
+
+
+
+ x.checked)
+ .filter(Boolean).length
}
+ open={rarityMenu}
+ onOpenChange={rarityMenuOpened}
+ >
+
+ {t("filters.labels.rarity")}
+
+ {Array.from(Array(rarities.length)).map((x, i) => {
+ return (
+
+ {t(`rarities.${rarities[i]}`)}
+
+ );
+ })}
+
- props.sendFilters(filters)
- }
+ x.checked)
+ .filter(Boolean).length
+ }
+ open={elementMenu}
+ onOpenChange={elementMenuOpened}
+ >
+
+ {t("filters.labels.element")}
+
+ {Array.from(Array(elements.length)).map((x, i) => {
+ return (
+
+ {t(`elements.${elements[i]}`)}
+
+ );
+ })}
+
- useEffect(() => {
- sendFilters()
- }, [rarityState, elementState, proficiencyState, seriesState])
+ x.checked)
+ .filter(Boolean).length
+ }
+ open={proficiencyMenu}
+ onOpenChange={proficiencyMenuOpened}
+ >
+
+ {t("filters.labels.proficiency")}
+
+
+
+ {Array.from(Array(proficiencies.length / 2)).map((x, i) => {
+ return (
+
+ {t(`proficiencies.${proficiencies[i]}`)}
+
+ );
+ })}
+
+
+ {Array.from(Array(proficiencies.length / 2)).map((x, i) => {
+ return (
+
+ {t(
+ `proficiencies.${
+ proficiencies[i + proficiencies.length / 2]
+ }`
+ )}
+
+ );
+ })}
+
+
+
- return (
- x.checked).filter(Boolean).length} open={elementMenu} onOpenChange={elementMenuOpened}>
- {t('filters.labels.element')}
- { Array.from(Array(elements.length)).map((x, i) => {
- return (
-
- {t(`elements.${elements[i]}`)}
-
- )}
- ) }
-
-
- x.checked).filter(Boolean).length} open={proficiencyMenu} onOpenChange={proficiencyMenuOpened}>
- {t('filters.labels.proficiency')}
-
-
- { Array.from(Array(proficiencies.length / 2)).map((x, i) => {
- return (
-
- {t(`proficiencies.${proficiencies[i]}`)}
-
- )}
- ) }
-
-
- { Array.from(Array(proficiencies.length / 2)).map((x, i) => {
- return (
-
- {t(`proficiencies.${proficiencies[i + (proficiencies.length / 2)]}`)}
-
- )}
- ) }
-
-
-
-
- x.checked).filter(Boolean).length} open={seriesMenu} onOpenChange={seriesMenuOpened}>
- {t('filters.labels.series')}
-
-
- { Array.from(Array(weaponSeries.length / 3)).map((x, i) => {
- return (
-
- {t(`series.${weaponSeries[i]}`)}
-
- )}
- ) }
-
-
- { Array.from(Array(weaponSeries.length / 3)).map((x, i) => {
- return (
-
- {t(`series.${weaponSeries[i + (weaponSeries.length / 3)]}`)}
-
- )}
- ) }
-
-
- { Array.from(Array(weaponSeries.length / 3)).map((x, i) => {
- return (
-
- {t(`series.${weaponSeries[i + (2 * (weaponSeries.length / 3))]}`)}
-
- )}
- ) }
-
-
-
-
- )
-}
-
-export default WeaponSearchFilterBar
+export default WeaponSearchFilterBar;
diff --git a/components/WeaponUnit/index.scss b/components/WeaponUnit/index.scss
index d1f86a60..9444f309 100644
--- a/components/WeaponUnit/index.scss
+++ b/components/WeaponUnit/index.scss
@@ -1,125 +1,125 @@
.WeaponUnit {
- display: flex;
- flex-direction: column;
- gap: 4px;
- min-height: 139px;
- position: relative;
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ min-height: 139px;
+ position: relative;
+
+ @media (max-width: $medium-screen) {
+ min-height: auto;
+ }
+
+ &:hover .Button {
+ display: block;
+ }
+
+ &.editable .WeaponImage:hover {
+ border: $hover-stroke;
+ box-shadow: $hover-shadow;
+ cursor: pointer;
+ transform: $scale-wide;
+ }
+
+ &.mainhand {
+ margin-right: $unit * 3;
+ max-width: 200px;
@media (max-width: $medium-screen) {
- min-height: auto;
- }
-
- &:hover .Button {
- display: block;
+ margin-right: $unit * 2;
}
&.editable .WeaponImage:hover {
- border: $hover-stroke;
- box-shadow: $hover-shadow;
- cursor: pointer;
- transform: $scale-wide;
- }
-
- &.mainhand {
- margin-right: $unit * 3;
- max-width: 200px;
-
- @media (max-width: $medium-screen) {
- margin-right: $unit * 2;
- }
-
- &.editable .WeaponImage:hover {
- transform: $scale-tall;
- }
-
- .WeaponImage {
- aspect-ratio: 200 / 418;
- width: 200px;
- height: auto;
-
- @media (max-width: $medium-screen) {
- width: 25vw;
- }
- }
- }
-
- &.grid {
- max-width: 160px;
-
- .WeaponImage {
- aspect-ratio: 160 / 92;
- list-style-type: none;
- width: 160px;
- height: auto;
-
- @media (max-width: $medium-screen) {
- width: 20vw;
- }
- }
- }
-
- &.filled h3 {
- display: block;
- }
-
- &.filled ul {
- display: flex;
- }
-
- & h3,
- & ul {
- display: none;
- }
-
- .Button {
- background: white;
- box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.14);
- display: none;
- position: absolute;
- left: $unit;
- top: $unit;
- z-index: 3;
- }
-
- h3 {
- color: $grey-00;
- font-size: $font-button;
- font-weight: $normal;
- line-height: 1.1;
- margin: 0;
- text-align: center;
+ transform: $scale-tall;
}
.WeaponImage {
- background: white;
- border: 1px solid rgba(0, 0, 0, 0);
- border-radius: $unit;
- display: flex;
- align-items: center;
- justify-content: center;
- margin-bottom: calc($unit / 4);
- overflow: hidden;
- transition: all 0.18s ease-in-out;
+ aspect-ratio: 200 / 418;
+ width: 200px;
+ height: auto;
- &:hover .icon svg {
- fill: $grey-40;
- }
-
- img {
- position: relative;
- width: 100%;
- z-index: 2;
- }
-
- .icon {
- position: absolute;
- height: $unit * 3;
- width: $unit * 3;
- z-index: 1;
-
- svg {
- fill: $grey-70;
- }
- }
+ @media (max-width: $medium-screen) {
+ width: 25vw;
+ }
}
+ }
+
+ &.grid {
+ max-width: 160px;
+
+ .WeaponImage {
+ aspect-ratio: 160 / 92;
+ list-style-type: none;
+ width: 160px;
+ height: auto;
+
+ @media (max-width: $medium-screen) {
+ width: 20vw;
+ }
+ }
+ }
+
+ &.filled h3 {
+ display: block;
+ }
+
+ &.filled ul {
+ display: flex;
+ }
+
+ & h3,
+ & ul {
+ display: none;
+ }
+
+ .Button {
+ background: white;
+ box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.14);
+ display: none;
+ position: absolute;
+ left: $unit;
+ top: $unit;
+ z-index: 3;
+ }
+
+ h3 {
+ color: $grey-00;
+ font-size: $font-button;
+ font-weight: $normal;
+ line-height: 1.1;
+ margin: 0;
+ text-align: center;
+ }
+
+ .WeaponImage {
+ background: white;
+ border: 1px solid rgba(0, 0, 0, 0);
+ border-radius: $unit;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: calc($unit / 4);
+ overflow: hidden;
+ transition: all 0.18s ease-in-out;
+
+ &:hover .icon svg {
+ fill: $grey-40;
+ }
+
+ img {
+ position: relative;
+ width: 100%;
+ z-index: 2;
+ }
+
+ .icon {
+ position: absolute;
+ height: $unit * 3;
+ width: $unit * 3;
+ z-index: 1;
+
+ svg {
+ fill: $grey-70;
+ }
+ }
+ }
}
diff --git a/components/WeaponUnit/index.tsx b/components/WeaponUnit/index.tsx
index 51edee6e..d6f97d45 100644
--- a/components/WeaponUnit/index.tsx
+++ b/components/WeaponUnit/index.tsx
@@ -1,37 +1,39 @@
-import React, { useEffect, useState } from "react"
-import { useRouter } from "next/router"
-import { useTranslation } from "next-i18next"
-import classnames from "classnames"
+import React, { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import { useTranslation } from "next-i18next";
+import classnames from "classnames";
-import SearchModal from "~components/SearchModal"
-import WeaponModal from "~components/WeaponModal"
-import WeaponHovercard from "~components/WeaponHovercard"
-import UncapIndicator from "~components/UncapIndicator"
-import Button from "~components/Button"
+import SearchModal from "~components/SearchModal";
+import WeaponModal from "~components/WeaponModal";
+import WeaponHovercard from "~components/WeaponHovercard";
+import UncapIndicator from "~components/UncapIndicator";
+import Button from "~components/Button";
-import { ButtonType } from "~utils/enums"
-import type { SearchableObject } from "~types"
+import { ButtonType } from "~utils/enums";
+import type { SearchableObject } from "~types";
-import PlusIcon from "~public/icons/Add.svg"
-import "./index.scss"
+import PlusIcon from "~public/icons/Add.svg";
+import "./index.scss";
interface Props {
- gridWeapon: GridWeapon | undefined
- unitType: 0 | 1
- position: number
- editable: boolean
- updateObject: (object: SearchableObject, position: number) => void
- updateUncap: (id: string, position: number, uncap: number) => void
+ gridWeapon: GridWeapon | undefined;
+ unitType: 0 | 1;
+ position: number;
+ editable: boolean;
+ updateObject: (object: SearchableObject, position: number) => void;
+ updateUncap: (id: string, position: number, uncap: number) => void;
}
const WeaponUnit = (props: Props) => {
- const { t } = useTranslation("common")
+ const { t } = useTranslation("common");
- const [imageUrl, setImageUrl] = useState("")
+ const [imageUrl, setImageUrl] = useState("");
- const router = useRouter()
+ const router = useRouter();
const locale =
- router.locale && ["en", "ja"].includes(router.locale) ? router.locale : "en"
+ router.locale && ["en", "ja"].includes(router.locale)
+ ? router.locale
+ : "en";
const classes = classnames({
WeaponUnit: true,
@@ -39,48 +41,48 @@ const WeaponUnit = (props: Props) => {
grid: props.unitType == 1,
editable: props.editable,
filled: props.gridWeapon !== undefined,
- })
+ });
- const gridWeapon = props.gridWeapon
- const weapon = gridWeapon?.object
+ const gridWeapon = props.gridWeapon;
+ const weapon = gridWeapon?.object;
useEffect(() => {
- generateImageUrl()
- })
+ generateImageUrl();
+ });
function generateImageUrl() {
- let imgSrc = ""
+ let imgSrc = "";
if (props.gridWeapon) {
- const weapon = props.gridWeapon.object!
+ const weapon = props.gridWeapon.object!;
if (props.unitType == 0) {
if (props.gridWeapon.object.element == 0 && props.gridWeapon.element)
- imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-main/${weapon.granblue_id}_${props.gridWeapon.element}.jpg`
+ imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-main/${weapon.granblue_id}_${props.gridWeapon.element}.jpg`;
else
- imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-main/${weapon.granblue_id}.jpg`
+ imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-main/${weapon.granblue_id}.jpg`;
} else {
if (props.gridWeapon.object.element == 0 && props.gridWeapon.element)
- imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${weapon.granblue_id}_${props.gridWeapon.element}.jpg`
+ imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${weapon.granblue_id}_${props.gridWeapon.element}.jpg`;
else
- imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${weapon.granblue_id}.jpg`
+ imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${weapon.granblue_id}.jpg`;
}
}
- setImageUrl(imgSrc)
+ setImageUrl(imgSrc);
}
function passUncapData(uncap: number) {
if (props.gridWeapon)
- props.updateUncap(props.gridWeapon.id, props.position, uncap)
+ props.updateUncap(props.gridWeapon.id, props.position, uncap);
}
function canBeModified(gridWeapon: GridWeapon) {
- const weapon = gridWeapon.object
+ const weapon = gridWeapon.object;
return (
weapon.ax > 0 ||
(weapon.series && [2, 3, 17, 22, 24].includes(weapon.series))
- )
+ );
}
const image = (
@@ -94,7 +96,7 @@ const WeaponUnit = (props: Props) => {
""
)}
- x.checked).filter(Boolean).length} open={rarityMenu} onOpenChange={rarityMenuOpened}>
- {t('filters.labels.rarity')}
- { Array.from(Array(rarities.length)).map((x, i) => {
- return (
-
- {t(`rarities.${rarities[i]}`)}
-
- )}
- ) }
-
+ x.checked)
+ .filter(Boolean).length
+ }
+ open={seriesMenu}
+ onOpenChange={seriesMenuOpened}
+ >
+
+ {t("filters.labels.series")}
+
+
+
+ {Array.from(Array(weaponSeries.length / 3)).map((x, i) => {
+ return (
+
+ {t(`series.${weaponSeries[i]}`)}
+
+ );
+ })}
+
+
+ {Array.from(Array(weaponSeries.length / 3)).map((x, i) => {
+ return (
+
+ {t(`series.${weaponSeries[i + weaponSeries.length / 3]}`)}
+
+ );
+ })}
+
+
+ {Array.from(Array(weaponSeries.length / 3)).map((x, i) => {
+ return (
+
+ {t(
+ `series.${weaponSeries[i + 2 * (weaponSeries.length / 3)]}`
+ )}
+
+ );
+ })}
+
+
+
+
+ );
+};
-
@@ -133,13 +135,13 @@ const WeaponUnit = (props: Props) => {
)}
- )
+ );
const withHovercard = (