From 26576138ea9e0c22f3096d13ecb5f4bc3395ecb1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=ADla=20Kuchta?= Date: Thu, 26 Oct 2023 22:37:17 +0200 Subject: [PATCH] Performance improvements and design changes --- src/components/Add.tsx | 5 ++- src/components/App.tsx | 4 +-- src/components/Header.tsx | 66 ++++++++++++++++++++----------------- src/components/Multiply.tsx | 5 ++- src/components/Show.tsx | 17 +++++----- src/components/Table.tsx | 18 +++++----- src/utils.ts | 24 +++++++++++--- 7 files changed, 78 insertions(+), 61 deletions(-) diff --git a/src/components/Add.tsx b/src/components/Add.tsx index c468b4c..4ac8305 100644 --- a/src/components/Add.tsx +++ b/src/components/Add.tsx @@ -15,12 +15,11 @@ function Add({ radixes }: { radixes: Radix[] }) { const lowest = low >= 0 ? low : low + low const highest = high + high const arr = [ NaN, ...Array.from({ length: high - (low - 1) }, (_, i) => i + low) ] - const rows = arr.length - const numbers = arr.flatMap(row => arr.map(col => { + const numbers = arr.map(row => arr.map(col => { if (isNaN(row) && isNaN(col)) return NaN return isNaN(row) || isNaN(col) ? isNaN(row) ? col : row : row + col })) - return + return
})} } diff --git a/src/components/App.tsx b/src/components/App.tsx index 7798d91..630b0f7 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -21,6 +21,8 @@ export default function App() { const [ radixes, _setRadixes ] = useState(getRadixesLS() ?? createRadixes()) const [ enabledRadixes, setEnabledRadixes ] = useState(radixes.filter(v => v.enabled)) + // console.log('App: ', { enabledRadixes }) + const setRadixes: SetRadixes = (command) => { // console.log('setRadixes:', command) @@ -85,8 +87,6 @@ export default function App() { setEnabledRadixes(newRadixes.filter(v => v.enabled)) } - // console.log('App: ', { enabledRadixes }) - return
diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 842af42..8479296 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -80,9 +80,10 @@ export default function Header({ radixes, setRadixes }: { e
-
-
    -
  • setExpanded(!expanded)}>Settings
    • +
    +
      +
    • + setExpanded(!expanded)}>Settings
    • Themes @@ -132,39 +133,44 @@ export default function Header({ radixes, setRadixes }: { Even - - - Standard - - - - - Bijective - - - - - Balanced - -
    -
    -
    Standard
    -
    - { radixes.filter(r => r.system === "standard").map(radix => button(radix)) } +
    +
    +
    +
    + +
    Standard
    + +
    +
    + { radixes.filter(r => r.system === "standard").map(radix => button(radix)) } +
    +
    -
    -
    Bijective
    -
    - { radixes.filter(r => r.system === "bijective").map(radix => button(radix)) } +
    +
    +
    + +
    Bijective
    + +
    +
    + { radixes.filter(r => r.system === "bijective").map(radix => button(radix)) } +
    -
    -
    Balanced
    -
    - { radixes.filter(r => r.system === "balanced").map(radix => button(radix)) } +
    +
    +
    + +
    Balanced
    + +
    +
    + { radixes.filter(r => r.system === "balanced").map(radix => button(radix)) } +
    diff --git a/src/components/Multiply.tsx b/src/components/Multiply.tsx index 159fad4..86899ac 100644 --- a/src/components/Multiply.tsx +++ b/src/components/Multiply.tsx @@ -15,12 +15,11 @@ function Multiply({ radixes }: { radixes: Radix[] }) { const lowest = low >= 0 ? low : low * high const highest = high * high const arr = [ NaN, ...Array.from({ length: (high - (low - 1)) }, (_, i) => i + low) ] - const rows = arr.length - const numbers = arr.flatMap(row => arr.map(col => { + const numbers = arr.map(row => arr.map(col => { if (isNaN(row) && isNaN(col)) return NaN return isNaN(row) || isNaN(col) ? isNaN(row) ? col : row : row * col })) - return
+ return
})} } diff --git a/src/components/Show.tsx b/src/components/Show.tsx index 192d275..6b8a9d2 100644 --- a/src/components/Show.tsx +++ b/src/components/Show.tsx @@ -10,15 +10,16 @@ function Show({ radixes }: { radixes: Radix[] }) { return { radixes.map(radix => { const { system, low, high } = radix - const bijective = system === 'bijective' - const balanced = system === 'balanced' - const rows = high - (bijective ? 0 : low) + 1 + const bij = system === 'bijective' + const bal = system === 'balanced' + const my = system === 'my' + const rows = high - (bij ? 0 : low) + 1 const cols = high - low + 1 - const highest = balanced ? (high - low) * (high + 1) : bijective ? high * (high + 1) : high === 1 ? 3 : (high + 1) * (high + 1) - 1 - const lowest = balanced ? -highest : low - const mainRow = balanced ? Math.trunc(rows / 2) : 0 - const numbers = [ ...Array(cols * rows) ].map((_, i) => i + lowest) - return
+ const highest = my ? high * (cols + 1) : bal ? (high - low) * (high + 1) : bij ? high * (high + 1) : high === 1 ? 3 : (high + 1) * (high + 1) - 1 + const lowest = my ? low * (cols + 1) : bal ? -highest : low + const mainRow = my ? Math.trunc(rows / 2) - 1 : bal ? Math.trunc(rows / 2) : 0 + const numbers = [ ...Array(rows) ].map((_, i) => [ ...Array(cols) ].map((_, j) => (i * cols) + j + lowest)) + return
})} } diff --git a/src/components/Table.tsx b/src/components/Table.tsx index 264060d..4027b37 100644 --- a/src/components/Table.tsx +++ b/src/components/Table.tsx @@ -9,12 +9,10 @@ export function Tables({ children }: { children: JSX.Element[] }) { } -function Table({ tab, radix, numbers, rows, cols, low, high, mainRow }: { +function Table({ tab, radix, numbers, low, high, mainRow }: { tab: string, radix: Radix, - numbers: number[], - rows: number, - cols: number, + numbers: number[][], low: number, high: number mainRow?: number, @@ -25,10 +23,10 @@ function Table({ tab, radix, numbers, rows, cols, low, high, mainRow }: {
{radix.name}
- { [ ...Array(rows) ].map((_, row) => - { numbers.slice(row * cols, row * cols + cols).map((number, index) => - { numbers.map((row, rowIndex) => + { row.map((number, colIndex) => + )} )} @@ -41,12 +39,12 @@ export default memo(Table, ({radix: oldRadix, numbers: oldNumbers }, { radix: ne const ret = oldRadix.name === newRadix.name && oldRadix.chars.every((char, i) => char === newRadix.chars[i]) && oldNumbers.length === newNumbers.length - && oldNumbers.every((n, i) => isNaN(n) ? isNaN(newNumbers[i]) : n === newNumbers[i]) + && oldNumbers.every((row, i) => row.every((n, j) => isNaN(n) ? isNaN(newNumbers[i][j]) : n === newNumbers[i][j])) // console.log(`areNumbersEqual(${tab}-${newRedix.name}): `, ret) return ret }) -function renderValue({ val, low, high, radix }: { val: number, low: number, high: number, radix: Radix }) { +function renderValue(val: number, low: number, high: number, radix: Radix) { if (isNaN(val)) return const point = low === 0 ? val : val - low const space = low === 0 ? high : high - low diff --git a/src/utils.ts b/src/utils.ts index fbe2bcb..9e305c7 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -21,7 +21,7 @@ export const defaultCharsArray = s2a(defaultChars) export type Radix = { name: string - system: 'standard' | 'bijective' | 'balanced' + system: 'standard' | 'bijective' | 'balanced' | 'my' radix: bigint chars: string[] low: number @@ -77,12 +77,13 @@ export function createRadixes(chars = defaultCharsArray) { const ret = [ createRadix(radix, 'standard', chars) ] if (radix < 36) ret.push(createRadix(radix, 'bijective', chars)) if (radix & 1) ret.push(createRadix(radix, 'balanced', chars)) + // if (radix % 2 === 0) ret.push(createRadix(radix, 'my', chars)) return ret }) } export function createRadix(radix: number, system: Radix["system"], chars = defaultCharsArray, enabled?: boolean, name?: string) { - if (radix < 0 || radix > (system === 'standard' ? 36 : 35)) throw new Error(`getRadix: Radix(${system}) of out range: ${radix}`) + if (radix < 0 || radix > (system === 'standard' || system === 'my' ? 36 : 35)) throw new Error(`getRadix: Radix(${system}) of out range: ${radix}`) if (system === 'balanced' && radix % 2 === 0) throw new Error(`getRadix: Radix(${system}) must be even: ${radix}`) let ret: Radix @@ -97,7 +98,7 @@ export function createRadix(radix: number, system: Radix["system"], chars = defa chars: radix === 27 && chars === defaultCharsArray ? s2a(base27) : chars.slice(zeroAt, zeroAt + radix), low: 0, high: radix - 1, - enabled: enabled != undefined ? enabled : [ 2, 6, 9, 10, 12, 18, 27, 36 ].includes(radix) + enabled: enabled != undefined ? enabled : [ 2, 3, 6, 9, 10, 12, 19, 27 ].includes(radix) } } else if (system === 'bijective') { if (chars.length === radix + 1) zeroAt = 0 @@ -108,9 +109,9 @@ export function createRadix(radix: number, system: Radix["system"], chars = defa chars: radix === 26 && chars === defaultCharsArray ? s2a(bijBase26) : chars.slice(zeroAt, zeroAt + radix + 1), low: 1, high: radix, - enabled: enabled != undefined ? enabled : [ 9, 10, 26, 35 ].includes(radix), + enabled: enabled != undefined ? enabled : [ 6, 9, 10, 26 ].includes(radix), } - } else { + } else if (system === 'balanced') { const half = (radix - 1) / 2 ret = { name: name ?? `bal-${radix}`, @@ -121,6 +122,19 @@ export function createRadix(radix: number, system: Radix["system"], chars = defa high: half, enabled: enabled != undefined ? enabled : [ 3, 9, 19, 27 ].includes(radix), } + } else if (system === 'my') { + const half = radix / 2 + ret = { + name: name ?? `my-${radix}`, + system: 'my', + radix: BigInt(radix), + chars: chars.slice(zeroAt - half + 1, zeroAt + half + 1), + low: -half + 1, + high: half, + enabled: enabled != undefined ? enabled : [ 2, 4, 6, 8, 10, 12, 18, 20, 26, 28 ].includes(radix), + } + } else { + throw new Error('createRadix: Unknown system:', system) } return ret
- { renderValue({ val: number, low, high, radix }) } +
+ { renderValue(number, low, high, radix) }