Skip to content

Commit 6ef605e

Browse files
SpookyyQSpookyyQ
committed
Default forged wallpaper with animation overlays; tidy button layout
Backgrounds: make the forged-carbon image the base wallpaper layer and let the animated backgrounds render on top of it instead of replacing it. The custom upload now swaps the base wallpaper, and the picker is split into clear Animation and Wallpaper sections (with a Default reset). Buttons: position the callout markers relative to the square mouse image so the dots sit on the real buttons (notably the side buttons), and arrange the cards in two tidy columns with leader lines. Bump version to 1.3.1.
1 parent 9956d51 commit 6ef605e

12 files changed

Lines changed: 154 additions & 56 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "ipi-fly-driver",
33
"private": true,
4-
"version": "1.3.0",
4+
"version": "1.3.1",
55
"type": "module",
66
"scripts": {
77
"dev": "vite",

‎src-tauri/Cargo.lock‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src-tauri/Cargo.toml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
[package]
22
name = "ipi-fly-driver"
3-
version = "1.3.0"
3+
version = "1.3.1"
44
edition = "2021"
55

66
[build-dependencies]

‎src-tauri/tauri.conf.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
},
88
"package": {
99
"productName": "IPI FLY PRO Driver",
10-
"version": "1.3.0"
10+
"version": "1.3.1"
1111
},
1212
"tauri": {
1313
"allowlist": {

‎src/App.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ export default function App() {
6363

6464
useEffect(() => {
6565
if (wallpaper) localStorage.setItem(BG_WALLPAPER_KEY, wallpaper)
66+
else localStorage.removeItem(BG_WALLPAPER_KEY)
6667
}, [wallpaper])
6768

6869
const pollStatus = useCallback(async () => {

‎src/assets/forged-carbon.jpg‎

333 KB
Loading

‎src/components/AnimatedBackground.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export default function AnimatedBackground({ mode }: Props) {
1414
const canvasRef = useRef<HTMLCanvasElement>(null)
1515

1616
useEffect(() => {
17-
if (mode === 'none' || mode === 'custom') return
17+
if (mode === 'none') return
1818
const canvas = canvasRef.current
1919
if (!canvas) return
2020
const ctx = canvas.getContext('2d')
@@ -290,6 +290,6 @@ export default function AnimatedBackground({ mode }: Props) {
290290
}
291291
}, [mode])
292292

293-
if (mode === 'none' || mode === 'custom') return null
293+
if (mode === 'none') return null
294294
return <canvas ref={canvasRef} className="bg-canvas" aria-hidden="true" />
295295
}

‎src/components/BackgroundLayer.tsx‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,26 @@
11
import AnimatedBackground from './AnimatedBackground'
2-
import { BackgroundId } from '../lib/backgrounds'
2+
import { BackgroundId, resolveWallpaper } from '../lib/backgrounds'
33

44
interface Props {
55
mode: BackgroundId
66
wallpaper: string | null
77
}
88

9+
/**
10+
* Layered backdrop: the wallpaper (custom upload or bundled default) sits at the
11+
* base, a darkening veil keeps content readable, and the optional animation
12+
* renders on top of both.
13+
*/
914
export default function BackgroundLayer({ mode, wallpaper }: Props) {
10-
if (mode === 'custom' && wallpaper) {
11-
return (
12-
<>
13-
<div
14-
className="bg-wallpaper"
15-
style={{ backgroundImage: `url(${wallpaper})` }}
16-
aria-hidden="true"
17-
/>
18-
<div className="bg-wallpaper-veil" aria-hidden="true" />
19-
</>
20-
)
21-
}
22-
return <AnimatedBackground mode={mode} />
15+
return (
16+
<>
17+
<div
18+
className="bg-wallpaper"
19+
style={{ backgroundImage: `url(${resolveWallpaper(wallpaper)})` }}
20+
aria-hidden="true"
21+
/>
22+
<div className="bg-wallpaper-veil" aria-hidden="true" />
23+
<AnimatedBackground mode={mode} />
24+
</>
25+
)
2326
}

‎src/components/BackgroundPicker.tsx‎

Lines changed: 52 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useEffect, useRef, useState } from 'react'
2-
import { Check, Image as ImageIcon, Sparkles, Upload } from 'lucide-react'
2+
import { Check, Image as ImageIcon, Monitor, Sparkles, Upload } from 'lucide-react'
33
import {
44
BackgroundId,
55
backgrounds,
@@ -10,7 +10,7 @@ interface Props {
1010
background: BackgroundId
1111
onBackgroundChange: (id: BackgroundId) => void
1212
hasWallpaper: boolean
13-
onWallpaperChange: (dataUrl: string) => void
13+
onWallpaperChange: (dataUrl: string | null) => void
1414
}
1515

1616
export default function BackgroundPicker({
@@ -41,7 +41,6 @@ export default function BackgroundPicker({
4141
try {
4242
const dataUrl = await loadWallpaperFile(file)
4343
onWallpaperChange(dataUrl)
44-
onBackgroundChange('custom')
4544
} catch {
4645
setError(true)
4746
} finally {
@@ -67,20 +66,18 @@ export default function BackgroundPicker({
6766
className="fixed right-16 top-11 z-[100] w-60 rounded-xl border border-white/10 bg-zinc-950/95 p-2 shadow-2xl shadow-black/50 backdrop-blur-xl"
6867
onPointerDown={event => event.stopPropagation()}
6968
>
69+
<p className="px-3 pb-1 pt-1 text-[10px] font-bold uppercase tracking-[.18em] text-white/35">
70+
Animation
71+
</p>
7072
{backgrounds.map(option => {
7173
const active = option.id === background
72-
const isCustom = option.id === 'custom'
7374
return (
7475
<button
7576
key={option.id}
7677
type="button"
7778
onPointerDown={event => {
7879
event.preventDefault()
7980
event.stopPropagation()
80-
if (isCustom && !hasWallpaper) {
81-
fileRef.current?.click()
82-
return
83-
}
8481
onBackgroundChange(option.id)
8582
setOpen(false)
8683
}}
@@ -89,7 +86,7 @@ export default function BackgroundPicker({
8986
}`}
9087
>
9188
<span className="grid h-4 w-4 place-items-center text-accent">
92-
{isCustom ? <ImageIcon size={14} /> : <Sparkles size={12} />}
89+
<Sparkles size={12} />
9390
</span>
9491
<span className="flex-1 font-semibold">{option.label}</span>
9592
{active && <Check size={14} className="text-accent" />}
@@ -99,6 +96,28 @@ export default function BackgroundPicker({
9996

10097
<div className="my-1 border-t border-white/10" />
10198

99+
<p className="px-3 pb-1 pt-1 text-[10px] font-bold uppercase tracking-[.18em] text-white/35">
100+
Wallpaper
101+
</p>
102+
103+
<button
104+
type="button"
105+
onPointerDown={event => {
106+
event.preventDefault()
107+
event.stopPropagation()
108+
onWallpaperChange(null)
109+
}}
110+
className={`flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-sm transition ${
111+
!hasWallpaper ? 'bg-white/[.10] text-white' : 'text-white/72 hover:bg-white/[.07] hover:text-white'
112+
}`}
113+
>
114+
<span className="grid h-4 w-4 place-items-center text-accent">
115+
<Monitor size={13} />
116+
</span>
117+
<span className="flex-1 font-semibold">Default</span>
118+
{!hasWallpaper && <Check size={14} className="text-accent" />}
119+
</button>
120+
102121
<button
103122
type="button"
104123
onPointerDown={event => {
@@ -107,16 +126,37 @@ export default function BackgroundPicker({
107126
fileRef.current?.click()
108127
}}
109128
disabled={busy}
110-
className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-sm text-white/72 transition hover:bg-white/[.07] hover:text-white disabled:opacity-50"
129+
className={`flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-sm transition disabled:opacity-50 ${
130+
hasWallpaper ? 'bg-white/[.10] text-white' : 'text-white/72 hover:bg-white/[.07] hover:text-white'
131+
}`}
111132
>
112133
<span className="grid h-4 w-4 place-items-center text-accent">
113-
<Upload size={13} />
134+
{hasWallpaper ? <ImageIcon size={14} /> : <Upload size={13} />}
114135
</span>
115136
<span className="flex-1 font-semibold">
116-
{busy ? 'Loading…' : hasWallpaper ? 'Replace wallpaper…' : 'Upload wallpaper…'}
137+
{busy ? 'Loading…' : hasWallpaper ? 'Custom' : 'Upload wallpaper…'}
117138
</span>
139+
{hasWallpaper && <Check size={14} className="text-accent" />}
118140
</button>
119141

142+
{hasWallpaper && (
143+
<button
144+
type="button"
145+
onPointerDown={event => {
146+
event.preventDefault()
147+
event.stopPropagation()
148+
fileRef.current?.click()
149+
}}
150+
disabled={busy}
151+
className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-xs text-white/55 transition hover:bg-white/[.07] hover:text-white disabled:opacity-50"
152+
>
153+
<span className="grid h-4 w-4 place-items-center text-accent">
154+
<Upload size={12} />
155+
</span>
156+
<span className="flex-1 font-semibold">Replace wallpaper…</span>
157+
</button>
158+
)}
159+
120160
{error && (
121161
<p className="px-3 pb-1 pt-0.5 text-xs text-red-300">Could not load that image.</p>
122162
)}

‎src/components/TopBar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ interface Props {
1313
background: BackgroundId
1414
onBackgroundChange: (id: BackgroundId) => void
1515
wallpaper: string | null
16-
onWallpaperChange: (dataUrl: string) => void
16+
onWallpaperChange: (dataUrl: string | null) => void
1717
}
1818

1919
export default function TopBar({

0 commit comments

Comments
 (0)