Skip to content

Commit

Permalink
fix: basename
Browse files Browse the repository at this point in the history
  • Loading branch information
@heiso
heiso committed Jan 4, 2025
1 parent 7a028e1 commit c91f628
Show file tree
Hide file tree
Showing 5 changed files with 158 additions and 119 deletions.
2 changes: 1 addition & 1 deletion web-app/app/routes/home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export default function Index() {
as="link"
to="https://github.com/heiso/macrolev"
target="_blank"
className="inline-flex gap-2 justify-center"
className="inline-flex gap-2 justify-center items-center"
>
<Icon id="github-logo" className="self-center fill-gray-200" />
GitHub
Expand Down
268 changes: 151 additions & 117 deletions web-app/app/routes/layout-editor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ import KLElayout from '../layout.json'

type Key = {
id: number
amux?: number
amuxSelect?: number
adcChannel?: number
amuxChannel?: number
width: number
height: number
x: number
Expand Down Expand Up @@ -263,7 +263,9 @@ function selectRangeOfKeys(state: State, clickedKey: Key): State {
function addToKeySelection(state: State, clickedKey: Key): State {
return addToHistory({
...state,
selectedKeys: new Set<Key['id']>([...state.selectedKeys, clickedKey.id]),
selectedKeys: state.selectedKeys.has(clickedKey.id)
? new Set<Key['id']>([...state.selectedKeys].filter((id) => clickedKey.id !== id))
: new Set<Key['id']>([...state.selectedKeys, clickedKey.id]),
})
}

Expand Down Expand Up @@ -465,146 +467,178 @@ export default function Index() {
return (
<div className="p-4 sm:p-8 flex flex-col items-center gap-8">
<div className="flex w-full justify-center" ref={containerRef}>
<div className="bg-slate-700 rounded-lg p-4">
<div
className="relative transition-all duration-150"
style={{ height: height * scaleFactor, width: width * scaleFactor }}
ref={keyboardRef}
>
{state.layout.length === 0 && (
<div className="w-full h-full" style={{ padding: (1 * scaleFactor) / 17 }}>
<AddKey
style={{ borderRadius: scaleFactor * 0.15 }}
onClick={() => setState((state) => addFirstKey(state))}
/>
</div>
)}
{state.layout.map((key) => (
<div
key={key.id}
className={`group absolute transition-all duration-150 hover:z-40 ${state.selectedKeys.has(key.id) ? 'z-40' : ''}`}
style={{
width: key.width * scaleFactor,
height: key.height * scaleFactor,
top: key.y * scaleFactor,
left: key.x * scaleFactor,
padding: (1 * scaleFactor) / 17,
}}
>
{canAdd(state, key, 'top') && (
<div className="flex flex-col w-fit gap-4">
<div className="bg-slate-700 rounded-lg p-4">
<div
className="relative transition-all duration-150"
style={{ height: height * scaleFactor, width: width * scaleFactor }}
ref={keyboardRef}
>
{state.layout.length === 0 && (
<div className="w-full h-full" style={{ padding: (1 * scaleFactor) / 17 }}>
<AddKey
style={{ borderRadius: scaleFactor * 0.15 }}
onClick={() => setState((state) => addFirstKey(state))}
/>
</div>
)}
{state.layout.map((key) => (
<div
key={key.id}
className={`group absolute transition-all duration-150 hover:z-40 ${state.selectedKeys.has(key.id) ? 'z-40' : ''}`}
style={{
width: key.width * scaleFactor,
height: key.height * scaleFactor,
top: key.y * scaleFactor,
left: key.x * scaleFactor,
padding: (1 * scaleFactor) / 17,
}}
>
{canAdd(state, key, 'top') && (
<div
className="hidden z-20 group-hover:flex absolute w-full h-full -top-full left-0 justify-center items-end"
style={{ padding: (1 * scaleFactor) / 17 }}
>
<AddKey
onClick={() => setState((state) => addKey(state, key, 'top'))}
style={{ borderRadius: scaleFactor * 0.15 }}
/>
</div>
)}

{canAdd(state, key, 'right') && (
<div
className="hidden z-20 group-hover:flex absolute w-full h-full -right-full top-0 justify-start items-center"
style={{ padding: (1 * scaleFactor) / 17 }}
>
<AddKey
onClick={() => setState((state) => addKey(state, key, 'right'))}
style={{ borderRadius: scaleFactor * 0.15 }}
/>
</div>
)}

{canAdd(state, key, 'bottom') && (
<div
className="hidden z-20 group-hover:flex absolute w-full h-full -bottom-full left-0 justify-center items-start"
style={{ padding: (1 * scaleFactor) / 17 }}
>
<AddKey
onClick={() => setState((state) => addKey(state, key, 'bottom'))}
style={{ borderRadius: scaleFactor * 0.15 }}
/>
</div>
)}

{canAdd(state, key, 'left') && (
<div
className="hidden z-20 group-hover:flex absolute w-full h-full -left-full top-0 justify-end items-center"
style={{ padding: (1 * scaleFactor) / 17 }}
>
<AddKey
onClick={() => setState((state) => addKey(state, key, 'left'))}
style={{ borderRadius: scaleFactor * 0.15 }}
/>
</div>
)}

<div
className="hidden z-20 group-hover:flex absolute w-full h-full -top-full left-0 justify-center items-end"
style={{ padding: (1 * scaleFactor) / 17 }}
className={`flex w-full h-full rounded-sm sm:rounded-md group-hover:border-pink-500 group-hover:border-2 overflow-hidden items-center justify-center cursor-pointer select-none transition-all active:scale-110 ${state.selectedKeys.has(key.id) ? 'bg-pink-500' : 'bg-slate-500'}`}
style={{ borderRadius: scaleFactor * 0.15 }}
onClick={() =>
setState((state) => {
if (isCmdPressed) {
return addToKeySelection(state, key)
}
if (isShiftPressed) {
return selectRangeOfKeys(state, key)
}
return selectKey(state, key)
})
}
>
<AddKey
onClick={() => setState((state) => addKey(state, key, 'top'))}
style={{ borderRadius: scaleFactor * 0.15 }}
/>
{key.width > 1 && (
<div
className={`${state.selectedKeys.has(key.id) ? 'text-pink-100' : 'text-slate-300'}`}
>
{key.width}u
</div>
)}
</div>
)}

{canAdd(state, key, 'right') && (
<div
className="hidden z-20 group-hover:flex absolute w-full h-full -right-full top-0 justify-start items-center"
style={{ padding: (1 * scaleFactor) / 17 }}
className="hidden group-hover:flex absolute z-40 hover:bg-pink-400 w-6 h-4 bg-pink-500 cursor-pointer -top-3 text-xs left-1/2 -ml-3 rounded-t-lg select-none justify-center items-center active:scale-110"
onClick={(event) => {
event.stopPropagation()
setState((state) => resizeKey(state, key, 'y', true))
}}
>
<AddKey
onClick={() => setState((state) => addKey(state, key, 'right'))}
style={{ borderRadius: scaleFactor * 0.15 }}
/>
<div className="leading-none font-semibold">-</div>
</div>
)}

{canAdd(state, key, 'bottom') && (
<div
className="hidden z-20 group-hover:flex absolute w-full h-full -bottom-full left-0 justify-center items-start"
style={{ padding: (1 * scaleFactor) / 17 }}
className="hidden group-hover:flex absolute z-40 hover:bg-pink-400 w-4 h-6 bg-pink-500 cursor-pointer -right-3 text-xs top-1/2 -mt-3 rounded-r-lg select-none justify-center items-center active:scale-110"
onClick={(event) => {
event.stopPropagation()
setState((state) => resizeKey(state, key, 'x'))
}}
>
<AddKey
onClick={() => setState((state) => addKey(state, key, 'bottom'))}
style={{ borderRadius: scaleFactor * 0.15 }}
/>
<div className="leading-none font-semibold">+</div>
</div>
)}

{canAdd(state, key, 'left') && (
<div
className="hidden z-20 group-hover:flex absolute w-full h-full -left-full top-0 justify-end items-center"
style={{ padding: (1 * scaleFactor) / 17 }}
className="hidden group-hover:flex absolute z-40 hover:bg-pink-400 w-6 h-4 bg-pink-500 cursor-pointer -bottom-3 text-xs left-1/2 -ml-3 rounded-b-lg select-none justify-center items-center active:scale-110"
onClick={(event) => {
event.stopPropagation()
setState((state) => resizeKey(state, key, 'y'))
}}
>
<AddKey
onClick={() => setState((state) => addKey(state, key, 'left'))}
style={{ borderRadius: scaleFactor * 0.15 }}
/>
<div className="leading-none font-semibold">+</div>
</div>
)}

<div
className={`flex w-full h-full rounded-sm sm:rounded-md group-hover:border-2 group-hover:border-pink-500 overflow-hidden items-center justify-center cursor-pointer select-none transition-all active:scale-110 ${state.selectedKeys.has(key.id) ? 'bg-pink-500' : 'bg-slate-500'}`}
style={{ borderRadius: scaleFactor * 0.15 }}
onClick={() =>
setState((state) => {
if (isCmdPressed) {
return addToKeySelection(state, key)
}
if (isShiftPressed) {
return selectRangeOfKeys(state, key)
}
return selectKey(state, key)
})
}
>
{key.width > 1 && <div className="text-slate-300">{key.width}u</div>}
<div
className="hidden group-hover:flex absolute z-40 hover:bg-pink-400 w-4 h-6 bg-pink-500 cursor-pointer -left-3 text-xs top-1/2 -mt-3 rounded-l-lg select-none justify-center items-center activer"
onClick={(event) => {
event.stopPropagation()
setState((state) => resizeKey(state, key, 'x', true))
}}
>
<div className="leading-none font-semibold">-</div>
</div>
</div>
))}
</div>
</div>

<div
className="hidden group-hover:flex absolute z-40 hover:bg-pink-400 w-6 h-4 bg-pink-500 cursor-pointer -top-3 text-xs left-1/2 -ml-3 rounded-t-lg select-none justify-center items-center active:scale-110"
onClick={(event) => {
event.stopPropagation()
setState((state) => resizeKey(state, key, 'y', true))
}}
>
<div className="leading-none font-semibold">-</div>
</div>
<div className="flex text-slate-400 text-xs uppercase gap-4 w-full">
<div>
{state.layout.length} key{state.layout.length > 1 ? 's' : ''}
</div>

<div
className="hidden group-hover:flex absolute z-40 hover:bg-pink-400 w-4 h-6 bg-pink-500 cursor-pointer -right-3 text-xs top-1/2 -mt-3 rounded-r-lg select-none justify-center items-center active:scale-110"
onClick={(event) => {
event.stopPropagation()
setState((state) => resizeKey(state, key, 'x'))
}}
>
<div className="leading-none font-semibold">+</div>
</div>
{state.selectedKeys.size > 0 && (
<div>
{state.selectedKeys.size} key{state.selectedKeys.size > 1 ? 's' : ''} selected
</div>
)}

<div
className="hidden group-hover:flex absolute z-40 hover:bg-pink-400 w-6 h-4 bg-pink-500 cursor-pointer -bottom-3 text-xs left-1/2 -ml-3 rounded-b-lg select-none justify-center items-center active:scale-110"
onClick={(event) => {
event.stopPropagation()
setState((state) => resizeKey(state, key, 'y'))
}}
>
<div className="leading-none font-semibold">+</div>
</div>
<div>
{Math.ceil(state.layout.length / 16)} analog demutiplexer
{Math.ceil(state.layout.length / 16) > 1 ? 's' : ''}
</div>

<div
className="hidden group-hover:flex absolute z-40 hover:bg-pink-400 w-4 h-6 bg-pink-500 cursor-pointer -left-3 text-xs top-1/2 -mt-3 rounded-l-lg select-none justify-center items-center activer"
onClick={(event) => {
event.stopPropagation()
setState((state) => resizeKey(state, key, 'x', true))
}}
{state.layout.length > 0 && (
<div>
<span
className="cursor-pointer hover:text-pink-400 active:text-pink-500"
onClick={() => navigator.clipboard.writeText(JSON.stringify(state.layout))}
>
<div className="leading-none font-semibold">-</div>
</div>
Copy json to clipboard
</span>
</div>
))}
)}
</div>
</div>
</div>

<div className="flex text-slate-400">
{state.selectedKeys.size > 0 && <div>{state.selectedKeys.size} keys selected</div>}
</div>
</div>
)
}
Expand Down
1 change: 1 addition & 0 deletions web-app/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"version": "0.0.0",
"scripts": {
"build": "cross-env NODE_ENV=production react-router build",
"preview": "react-router preview",
"dev": "react-router dev",
"start": "cross-env NODE_ENV=production react-router-serve ./build/server/index.js",
"typecheck": "react-router typegen && tsc && && eslint . && prettier --check .",
Expand Down
5 changes: 4 additions & 1 deletion web-app/react-router.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,8 @@ import type { Config } from '@react-router/dev/config'

export default {
ssr: false,
basename: '/macrolev',
basename: '/macrolev/',
future: {
unstable_optimizeDeps: true,
},
} satisfies Config
1 change: 1 addition & 0 deletions web-app/vite.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ export default defineConfig({
server: {
port: 3000,
},
base: '/macrolev/',
css: {
postcss: {
plugins: [tailwindcss, autoprefixer],
Expand Down

0 comments on commit c91f628

Please sign in to comment.