kccleoc/seedpgp-web
0
0
Fork 0
mirror of https://github.com/kccleoc/seedpgp-web.git synced 2026-03-07 09:57:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(entropy): Enhance entropy generation UX and fix resets

Browse Source 
This commit introduces several improvements to the entropy generation and application state management:

1.  **Implement Dice Entropy Stats Panel:**
    - After generating entropy from dice rolls, a detailed statistics panel is now displayed for user review.
    - This panel includes roll distribution, chi-square analysis, and a preview of the generated seed.
    - Users can now choose to "Continue with this Seed" or "Roll Again" to discard and restart, improving user control and confidence in the entropy quality.

2.  **Fix UI Layering and Overflow:**
    - Increased the header's `z-index` to `z-[100]` to ensure it always remains on top of other components, fixing an issue where the "Reset All" button was inaccessible.
    - Made the main content area for entropy components scrollable to prevent the new stats panels from overflowing the viewport on smaller screens.

3.  **Improve "Reset All" Functionality:**
    - The "Reset All" button now correctly resets the internal state of the `DiceEntropy` and `CameraEntropy` components.
    - This is achieved by adding a `resetCounter` to the `App` state and passing it into the `key` prop of the entropy components, forcing a full remount on reset.
This commit is contained in:
LC mac
2026-02-10 23:02:13 +08:00
parent a67a2159f2
commit f52186f2e7
3 changed files with 108 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/Header.tsx
View File

@@ -47,9 +47,9 @@ const Header: React.FC<HeaderProps> = ({
onResetAll
}) => {
return (
<header className="sticky top-0 z-50 bg-[#0a0a0f] border-b border-[#00f0ff30] backdrop-blur-sm">
<header className="sticky top-0 z-[100] bg-[#0a0a0f] border-b border-[#00f0ff30] backdrop-blur-sm">
<div className="w-full px-4 py-3 space-y-3">
{/* ROW 1: Logo + App Info (LEFT) | Reset (RIGHT) */}
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
@@ -96,11 +96,10 @@ const Header: React.FC<HeaderProps> = ({
{/* Network Block toggle */}
<button
onClick={onToggleNetwork}
className={`flex items-center gap-1 px-2.5 py-1.5 text-xs rounded-lg font-medium transition-all whitespace-nowrap ${
isNetworkBlocked
className={`flex items-center gap-1 px-2.5 py-1.5 text-xs rounded-lg font-medium transition-all whitespace-nowrap ${isNetworkBlocked
? 'bg-[#16213e] border border-[#ff006e] text-[#ff006e] hover:bg-[#ff006e20]'
: 'bg-[#16213e] border border-[#39ff14] text-[#39ff14] hover:bg-[#39ff1420]'
}`}
}`}
title={isNetworkBlocked ? 'Network BLOCKED' : 'Network ACTIVE'}
>
<span className="text-sm">{isNetworkBlocked ? '🚫' : '🌐'}</span>
@@ -114,11 +113,10 @@ const Header: React.FC<HeaderProps> = ({
{/* ROW 3: Navigation Tabs */}
<div className="grid grid-cols-4 gap-2">
<button
className={`py-2 rounded-lg font-medium text-xs whitespace-nowrap transition-all ${
activeTab === 'create'
className={`py-2 rounded-lg font-medium text-xs whitespace-nowrap transition-all ${activeTab === 'create'
? 'bg-[#1a1a2e] text-[#00f0ff] border-2 border-[#ff006e] shadow-[0_0_15px_rgba(255,0,110,0.5)]'
: 'bg-[#0a0a0f] text-[#9d84b7] border-2 border-[#00f0ff30] hover:text-[#6ef3f7] hover:border-[#00f0ff50]'
}`}
}`}
style={activeTab === 'create' ? { textShadow: '0 0 10px rgba(0,240,255,0.8)' } : undefined}
onClick={() => onRequestTabChange('create')}
>
@@ -126,11 +124,10 @@ const Header: React.FC<HeaderProps> = ({
</button>
<button
className={`py-2 rounded-lg font-medium text-xs whitespace-nowrap transition-all ${
activeTab === 'backup'
className={`py-2 rounded-lg font-medium text-xs whitespace-nowrap transition-all ${activeTab === 'backup'
? 'bg-[#1a1a2e] text-[#00f0ff] border-2 border-[#ff006e] shadow-[0_0_15px_rgba(255,0,110,0.5)]'
: 'bg-[#0a0a0f] text-[#9d84b7] border-2 border-[#00f0ff30] hover:text-[#6ef3f7] hover:border-[#00f0ff50]'
}`}
}`}
style={activeTab === 'backup' ? { textShadow: '0 0 10px rgba(0,240,255,0.8)' } : undefined}
onClick={() => onRequestTabChange('backup')}
>
@@ -138,11 +135,10 @@ const Header: React.FC<HeaderProps> = ({
</button>
<button
className={`py-2 rounded-lg font-medium text-xs whitespace-nowrap transition-all ${
activeTab === 'restore'
className={`py-2 rounded-lg font-medium text-xs whitespace-nowrap transition-all ${activeTab === 'restore'
? 'bg-[#1a1a2e] text-[#00f0ff] border-2 border-[#ff006e] shadow-[0_0_15px_rgba(255,0,110,0.5)]'
: 'bg-[#0a0a0f] text-[#9d84b7] border-2 border-[#00f0ff30] hover:text-[#6ef3f7] hover:border-[#00f0ff50]'
}`}
}`}
style={activeTab === 'restore' ? { textShadow: '0 0 10px rgba(0,240,255,0.8)' } : undefined}
onClick={() => onRequestTabChange('restore')}
>
@@ -150,11 +146,10 @@ const Header: React.FC<HeaderProps> = ({
</button>
<button
className={`py-2 rounded-lg font-medium text-xs whitespace-nowrap transition-all ${
activeTab === 'seedblender'
className={`py-2 rounded-lg font-medium text-xs whitespace-nowrap transition-all ${activeTab === 'seedblender'
? 'bg-[#1a1a2e] text-[#00f0ff] border-2 border-[#ff006e] shadow-[0_0_15px_rgba(255,0,110,0.5)]'
: 'bg-[#0a0a0f] text-[#9d84b7] border-2 border-[#00f0ff30] hover:text-[#6ef3f7] hover:border-[#00f0ff50]'
}`}
}`}
style={activeTab === 'seedblender' ? { textShadow: '0 0 10px rgba(0,240,255,0.8)' } : undefined}
onClick={() => onRequestTabChange('seedblender')}
>