diff --git a/package.json b/package.json index 5d9bde2..6478894 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "@testing-library/react": "^13.0.0", "@testing-library/user-event": "^13.2.1", "@types/jest": "^27.0.1", + "@types/lodash": "^4.14.188", "@types/node": "^16.7.13", "@types/react": "^18.0.0", "@types/react-dom": "^18.0.0", diff --git a/src/App.tsx b/src/App.tsx index 70ecd6a..a40e362 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,8 @@ -import React, {useState, useEffect} from 'react'; +import React, {useState, useEffect, useRef} from 'react'; import db from './db.json'; import {i18nLabels, defaultLang, $lang0, setLang} from './i18n'; import {events, i18nEventNames, presets} from './events'; +import _uniqueId from 'lodash/uniqueId'; import styles from './App.module.sass'; const langs = [ @@ -26,7 +27,7 @@ const f2f = (f: number) => { const sf = String(f%30)+'f'; const s = f/30|0; if (s === 0) return sign+sf; - const ssf = `${s%30}:${sf.padStart(3, '0')}`; + const ssf = `${s%60}:${sf.padStart(3, '0')}`; const m = s/60|0; if (m === 0) return sign+ssf; return `${sign}${m}:${ssf.padStart(6, '0')}`; @@ -45,14 +46,18 @@ const f2s = (f: number) => { export const RadioGroup = ({name, value: val, values, onChange, ...props}: { values: (string | [value: string, label: string])[] -} & React.ComponentProps<'input'>) => <>{values.map(o => { - const [value, label] = typeof o === 'string' ? [o, o] : o; - return
- - {label} -
; -})}; +} & React.ComponentProps<'input'>) => { + const {current: idp} = useRef(_uniqueId('rg-')); + return <>{values.map(o => { + const [value, label] = typeof o === 'string' ? [o, o] : o; + const id = idp+value; + return
+ + +
; + })}; +}; function App() { const [selected, setSelected] = useState( @@ -60,6 +65,7 @@ function App() { ); const [timeFormat, setTimeFormat] = useState('s'); const f2t = timeFormat === 'f' ? f2f : f2s; + const {current: idpEv} = useRef(_uniqueId('ev-')); const [$lang, set$lang] = useState($lang0); useEffect(() => setLang($lang), [$lang]); @@ -115,7 +121,7 @@ function App() {
{L('timeFormat')} setTimeFormat(e.target.value)} />
@@ -142,11 +148,11 @@ function App() {

Cutscenes

{events.map(id =>
- setSelected(o => ({...o, [id]: e.target.checked}))} /> - {eventNames[id]} +
)}
diff --git a/yarn.lock b/yarn.lock index 51bd2e0..c502239 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1997,6 +1997,11 @@ resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee" integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ== +"@types/lodash@^4.14.188": + version "4.14.188" + resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.188.tgz#e4990c4c81f7c9b00c5ff8eae389c10f27980da5" + integrity sha512-zmEmF5OIM3rb7SbLCFYoQhO4dGt2FRM9AMkxvA3LaADOF1n8in/zGJlWji9fmafLoNyz+FoL6FE0SLtGIArD7w== + "@types/mime@*": version "3.0.1" resolved "https://registry.yarnpkg.com/@types/mime/-/mime-3.0.1.tgz#5f8f2bca0a5863cb69bc0b0acd88c96cb1d4ae10"