Skip to content

Commit

Permalink
Performance improvements and design changes
Browse files Browse the repository at this point in the history
  • Loading branch information
kuchta committed Oct 26, 2023
1 parent 6242178 commit 2657613
Show file tree
Hide file tree
Showing 7 changed files with 78 additions and 61 deletions.
5 changes: 2 additions & 3 deletions src/components/Add.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 <Table key={`add-${radix.name}`} tab="add" radix={radix} numbers={numbers} rows={rows} cols={rows} low={lowest} high={highest}/>
return <Table key={`add-${radix.name}`} tab="add" radix={radix} numbers={numbers} low={lowest} high={highest}/>
})}
</Tables>
}
Expand Down
4 changes: 2 additions & 2 deletions src/components/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down Expand Up @@ -85,8 +87,6 @@ export default function App() {
setEnabledRadixes(newRadixes.filter(v => v.enabled))
}

// console.log('App: ', { enabledRadixes })

return <div className="font-mono">
<Header radixes={radixes} setRadixes={setRadixes}/>
<div className="tabs justify-center mb-4">
Expand Down
66 changes: 36 additions & 30 deletions src/components/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -80,9 +80,10 @@ export default function Header({ radixes, setRadixes }: {
<span style={{ color: `hsl(324 80% 40%)`}}>e</span>
</button>
</div>
<div className="flex flex-row justify-between z-50">
<ul className="menu menu-horizontal px-1">
<li><a className={`menu-dropdown-toggle ${expanded ? 'menu-dropdown-show' : ''}`} onClick={() => setExpanded(!expanded)}>Settings</a></li>
<div className="z-50">
<ul className="menu menu-horizontal justify-end">
<li>
<a className={`menu-dropdown-toggle ${expanded ? 'menu-dropdown-show' : ''}`} onClick={() => setExpanded(!expanded)}>Settings</a></li>
<li>
<details>
<summary>Themes</summary>
Expand Down Expand Up @@ -132,39 +133,44 @@ export default function Header({ radixes, setRadixes }: {
<span className="btn btn-xs btn-outline pointer-events-none join-item cursor-default">Even</span>
<button className="btn btn-xs btn-outline btn-error join-item" onClick={() => setRadixes({ what: 'toggle', who: 'even', enabled: false })}>Remove</button>
</span>
<span className="join">
<button className="btn btn-xs btn-outline btn-success join-item" onClick={() => setRadixes({ what: 'toggle', who: 'standard', enabled: true })}>Add</button>
<span className="btn btn-xs btn-outline pointer-events-none join-item cursor-default">Standard</span>
<button className="btn btn-xs btn-outline btn-error join-item" onClick={() => setRadixes({ what: 'toggle', who: 'standard', enabled: false })}>Remove</button>
</span>
<span className="join">
<button className="btn btn-xs btn-outline btn-success join-item" onClick={() => setRadixes({ what: 'toggle', who: 'bijective', enabled: true })}>Add</button>
<span className="btn btn-xs btn-outline pointer-events-none join-item cursor-default">Bijective</span>
<button className="btn btn-xs btn-outline btn-error join-item" onClick={() => setRadixes({ what: 'toggle', who: 'bijective', enabled: false })}>Remove</button>
</span>
<span className="join">
<button className="btn btn-xs btn-outline btn-success join-item" onClick={() => setRadixes({ what: 'toggle', who: 'balanced', enabled: true })}>Add</button>
<span className="btn btn-xs btn-outline pointer-events-none join-item cursor-default">Balanced</span>
<button className="btn btn-xs btn-outline btn-error join-item" onClick={() => setRadixes({ what: 'toggle', who: 'balanced', enabled: false })}>Remove</button>
</span>
</div>
<div className="card md:flex-row p-1">
<div className="card card-bordered items-center p-1 m-1">
<div className="card-title">Standard</div>
<div className="card-actions flex-row justify-center">
{ radixes.filter(r => r.system === "standard").map(radix => button(radix)) }
<div className="flex flex-col">
<div className="flex flex-col items-center">
<div className="card card-bordered p-1 m-1">
<div className="flex justify-between items-center gap-2">
<button className="btn btn-xs btn-outline btn-success m-1" onClick={() => setRadixes({ what: 'toggle', who: 'standard', enabled: true })}>Add</button>
<div className="card-title">Standard</div>
<button className="btn btn-xs btn-outline btn-error m-1" onClick={() => setRadixes({ what: 'toggle', who: 'standard', enabled: false })}>Remove</button>
</div>
<div className="card-actions flex-row justify-center">
{ radixes.filter(r => r.system === "standard").map(radix => button(radix)) }
</div>
</div>
</div>
</div>
<div className="card card-bordered items-center p-1 m-1">
<div className="card-title">Bijective</div>
<div className="card-actions flex-row justify-center">
{ radixes.filter(r => r.system === "bijective").map(radix => button(radix)) }
<div className="flex flex-col items-center">
<div className="card card-bordered p-1 m-1">
<div className="flex justify-between items-center gap-2">
<button className="btn btn-xs btn-outline btn-success m-1" onClick={() => setRadixes({ what: 'toggle', who: 'bijective', enabled: true })}>Add</button>
<div className="card-title">Bijective</div>
<button className="btn btn-xs btn-outline btn-error m-1" onClick={() => setRadixes({ what: 'toggle', who: 'bijective', enabled: false })}>Remove</button>
</div>
<div className="card-actions flex-row justify-center">
{ radixes.filter(r => r.system === "bijective").map(radix => button(radix)) }
</div>
</div>
</div>
<div className="card card-bordered items-center p-1 m-1">
<div className="card-title">Balanced</div>
<div className="card-actions flex-row justify-center">
{ radixes.filter(r => r.system === "balanced").map(radix => button(radix)) }
<div className="flex flex-col items-center">
<div className="card card-bordered p-1 m-1">
<div className="flex justify-between items-center gap-2">
<button className="btn btn-xs btn-outline btn-success m-1" onClick={() => setRadixes({ what: 'toggle', who: 'balanced', enabled: true })}>Add</button>
<div className="card-title">Balanced</div>
<button className="btn btn-xs btn-outline btn-error m-1" onClick={() => setRadixes({ what: 'toggle', who: 'balanced', enabled: false })}>Remove</button>
</div>
<div className="card-actions flex-row justify-center">
{ radixes.filter(r => r.system === "balanced").map(radix => button(radix)) }
</div>
</div>
</div>
</div>
Expand Down
5 changes: 2 additions & 3 deletions src/components/Multiply.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 <Table key={`multiply-${radix.name}`} tab="multiply" radix={radix} numbers={numbers} rows={rows} cols={rows} low={lowest} high={highest}/>
return <Table key={`multiply-${radix.name}`} tab="multiply" radix={radix} numbers={numbers} low={lowest} high={highest}/>
})}
</Tables>
}
Expand Down
17 changes: 9 additions & 8 deletions src/components/Show.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,16 @@ function Show({ radixes }: { radixes: Radix[] }) {
return <Tables>
{ 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 <Table key={`show-${radix.name}`} tab="show" radix={radix} numbers={numbers} rows={rows} cols={cols} low={lowest} high={highest} mainRow={mainRow}/>
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 <Table key={`show-${radix.name}`} tab="show" radix={radix} numbers={numbers} low={lowest} high={highest} mainRow={mainRow}/>
})}
</Tables>
}
Expand Down
18 changes: 8 additions & 10 deletions src/components/Table.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,10 @@ export function Tables({ children }: { children: JSX.Element[] }) {
</div>
}

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,
Expand All @@ -25,10 +23,10 @@ function Table({ tab, radix, numbers, rows, cols, low, high, mainRow }: {
<div className="card-title self-center badge badge-lg badge-outline m-2">{radix.name}</div>
<div className="card-body overflow-y-auto p-2">
<table className="table table-xs text-sm w-auto">
<tbody>{ [ ...Array(rows) ].map((_, row) =>
<tr className={`hover row${row === mainRow ? ' active' : ''}`} key={`row-${row}`}>{ numbers.slice(row * cols, row * cols + cols).map((number, index) =>
<td className="text-right px-[2px] py-[2px]" key={`col-${index}`}>
{ renderValue({ val: number, low, high, radix }) }
<tbody>{ numbers.map((row, rowIndex) =>
<tr className={`hover row${rowIndex === mainRow ? ' active' : ''}`} key={`row-${rowIndex}`}>{ row.map((number, colIndex) =>
<td className="text-right px-[2px] py-[2px]" key={`col-${colIndex}`}>
{ renderValue(number, low, high, radix) }
</td>)}
</tr>)}
</tbody>
Expand All @@ -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 <span></span>
const point = low === 0 ? val : val - low
const space = low === 0 ? high : high - low
Expand Down
24 changes: 19 additions & 5 deletions src/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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}`,
Expand All @@ -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
Expand Down

0 comments on commit 2657613

Please sign in to comment.