From 1206c1978fa3301be9f62b07126728c113e2dbe0 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Fri, 6 Jan 2023 00:49:41 -0800 Subject: [PATCH] Add WIP RingSelect doesn't send data yet --- components/RingSelect/index.scss | 5 + components/RingSelect/index.tsx | 302 +++++++++++++++++++++++++++++++ 2 files changed, 307 insertions(+) create mode 100644 components/RingSelect/index.scss create mode 100644 components/RingSelect/index.tsx diff --git a/components/RingSelect/index.scss b/components/RingSelect/index.scss new file mode 100644 index 00000000..8a080fd1 --- /dev/null +++ b/components/RingSelect/index.scss @@ -0,0 +1,5 @@ +.Rings { + display: flex; + flex-direction: column; + gap: $unit; +} diff --git a/components/RingSelect/index.tsx b/components/RingSelect/index.tsx new file mode 100644 index 00000000..a6846090 --- /dev/null +++ b/components/RingSelect/index.tsx @@ -0,0 +1,302 @@ +// Core dependencies +import React, { useEffect, useState } from 'react' +import { useRouter } from 'next/router' +import { useTranslation } from 'next-i18next' +import classNames from 'classnames' + +// UI dependencies +import SelectWithSelect from '~components/SelectWithSelect' + +// Data +import { overMastery } from '~data/overMastery' + +// Styles and icons +import './index.scss' + +// Types +import { CharacterOverMastery } from '~types' + +type SelectOpenStates = { + [key: string]: boolean + modifier1: boolean + modifier2: boolean + modifier3: boolean + modifier4: boolean + strength1: boolean + strength2: boolean + strength3: boolean + strength4: boolean +} + +interface Ring { + open: boolean + modifier: number + strength: number + error: string +} + +interface RingMap { + [index: number]: Ring + 1: Ring + 2: Ring + 3: Ring + 4: Ring +} + +const emptyRing: Ring = { + open: false, + modifier: 0, + strength: 0, + error: '', +} + +interface Props { + gridCharacter: GridCharacter + onOpenChange: (index: 1 | 2 | 3 | 4, open: boolean) => void + sendValidity: (isValid: boolean) => void + sendValues: (overMastery: CharacterOverMastery) => void +} + +const RingSelect = (props: Props) => { + const router = useRouter() + const locale = + router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en' + const { t } = useTranslation('common') + + // Ring value states + const [ringModifier1, setRingModifier1] = useState(0) + const [ringModifier2, setRingModifier2] = useState(0) + const [ringModifier3, setRingModifier3] = useState(0) + const [ringModifier4, setRingModifier4] = useState(0) + + const [ringStrength1, setRingStrength1] = useState(0) + const [ringStrength2, setRingStrength2] = useState(0) + const [ringStrength3, setRingStrength3] = useState(0) + const [ringStrength4, setRingStrength4] = useState(0) + + // UI states + const [openStates, setOpenStates] = useState({ + modifier1: false, + modifier2: false, + modifier3: false, + modifier4: false, + strength1: false, + strength2: false, + strength3: false, + strength4: false, + }) + + // Rings + let rings: RingMap = { + 1: { ...emptyRing, modifier: 1 }, + 2: { ...emptyRing, modifier: 2 }, + 3: emptyRing, + 4: emptyRing, + } + + function setOpen( + index: number, + side: 'modifier' | 'strength', + value: boolean + ) { + const key = `${side}${index}` + setOpenStates({ + ...openStates, + [key]: value, + }) + } + + const errorClasses = { + 1: classNames({ + errors: true, + visible: rings[1].error.length > 0, + }), + 2: classNames({ + errors: true, + visible: rings[2].error.length > 0, + }), + 3: classNames({ + errors: true, + visible: rings[3].error.length > 0, + }), + 4: classNames({ + errors: true, + visible: rings[4].error.length > 0, + }), + } + + function dataSet(index: number) { + const noValue = { + name: { + en: 'No over mastery bonus', + ja: 'EXリミットボーナスなし', + }, + id: 0, + slug: 'no-bonus', + minValue: 0, + maxValue: 0, + suffix: '', + fractional: false, + secondary: [], + } + + switch (index) { + case 1: + return overMastery.a ? [overMastery.a[0]] : [] + case 2: + return overMastery.a ? [overMastery.a[1]] : [] + case 3: + return overMastery.b ? [noValue, ...overMastery.b] : [] + case 4: + return overMastery.c ? [noValue, ...overMastery.c] : [] + default: + return [] + } + } + + // useEffect(() => { + // props.sendValues( + // primaryAxModifier, + // primaryAxValue, + // secondaryAxModifier, + // secondaryAxValue + // ) + // }, [ + // props, + // primaryAxModifier, + // primaryAxValue, + // secondaryAxModifier, + // secondaryAxValue, + // ]) + + // useEffect(() => { + // if ( + // props.currentSkills && + // props.currentSkills[0].modifier != null && + // props.currentSkills[0].modifier >= 0 + // ) { + // setPrimaryAxModifier(props.currentSkills[0].modifier) + // setPrimaryAxValue(props.currentSkills[0].strength) + // } else setPrimaryAxModifier(-1) + // }, [props.currentSkills, setPrimaryAxModifier]) + + // useEffect(() => { + // if (props.currentSkills && props.currentSkills[1].modifier) { + // setSecondaryAxModifier(props.currentSkills[1].modifier) + // setSecondaryAxValue(props.currentSkills[1].strength) + // } else { + // setSecondaryAxModifier(-1) + // } + // }, [props.currentSkills, setSecondaryAxModifier]) + + // useEffect(() => { + // let noErrors = false + + // // if (errors.axValue1 === '' && errors.axValue2 === '') { + + // // noErrors = true + // // } + + // props.sendValidity(noErrors) + // }, [errors]) + + function openChange(index: 1 | 2 | 3 | 4, side: 'modifier' | 'strength') { + switch (index) { + case 1: + props.onOpenChange(1, !ring1Open) + setRing1Open(!ring1Open) + break + case 2: + props.onOpenChange(2, !ring2Open) + setRing2Open(!ring2Open) + break + case 3: + props.onOpenChange(3, !ring3Open) + setRing3Open(!ring3Open) + break + case 4: + props.onOpenChange(4, !ring4Open) + setRing4Open(!ring4Open) + break + } + } + + function onClose(index: 1 | 2 | 3 | 4) { + props.onOpenChange(index, false) + } + + // function generateOptions(modifierSet: number) { + // const axOptions = ax[props.axType - 1] + + // let axOptionElements: React.ReactNode[] = [] + // if (modifierSet == 0) { + // axOptionElements = axOptions.map((ax, i) => { + // return ( + // + // {ax.name[locale]} + // + // ) + // }) + // } else { + // // If we are loading data from the server, state doesn't set before render, + // // so our defaultValue is undefined. + // let modifier = -1 + // if (primaryAxModifier >= 0) modifier = primaryAxModifier + // else if (props.currentSkills) modifier = props.currentSkills[0].modifier + + // if (modifier >= 0 && axOptions[modifier]) { + // const primarySkill = axOptions[modifier] + + // if (primarySkill.secondary) { + // const secondaryAxOptions = primarySkill.secondary + // axOptionElements = secondaryAxOptions.map((ax, i) => { + // return ( + // + // {ax.name[locale]} + // + // ) + // }) + // } + // } + // } + + // axOptionElements?.unshift( + // + // {t('ax.no_skill')} + // + // ) + // return axOptionElements + // } + + function handleInputChange(event: React.ChangeEvent) {} + + function handleErrors(number: number) {} + + function receiveRingValues(left: number, right: number) {} + + return ( +
+ {[...Array(4)].map((element, i) => { + const ringIndex = i + 1 + + return ( + {}} + sendValues={(value: number) => { + console.log(`VALUE ${value} RECEIVED`) + }} + /> + ) + })} +
+ ) +} + +export default RingSelect