Skip to content

Commit 950ad67

Browse files
fezcodefezcode
committed
feat: options to configure dnd effects
1 parent 7f9c62c commit 950ad67

File tree

4 files changed

+107
-39
lines changed

4 files changed

+107
-39
lines changed

‎src/App.jsx‎

Lines changed: 35 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import { SidePanelProvider } from './context/SidePanelContext';
1717
import { HomepageOrderProvider } from './context/HomepageOrderContext';
1818
import { SiteConfigProvider } from './context/SiteConfigContext';
1919
import { CloudMusicProvider } from './context/CloudMusicContext';
20+
import { DndProvider } from './context/DndContext';
2021
import TinyCloudPlayer from './app/apps/CloudMusicPlayer/components/TinyCloudPlayer';
2122

2223
function App() {
@@ -60,39 +61,41 @@ function App() {
6061
<ToastProvider>
6162
<SiteConfigProvider>
6263
<CloudMusicProvider>
63-
<AchievementProvider>
64-
<AchievementListeners />
65-
<HomepageOrderProvider>
66-
<VisualSettingsProvider>
67-
<DigitalRain isActive={isRainActive} />
68-
<BSOD isActive={isBSODActive} toggleBSOD={toggleBSOD} />
69-
<ScrollToTop />
70-
<TinyCloudPlayer />
71-
<CommandPaletteProvider>
72-
<SidePanelProvider>
73-
<Layout
74-
toggleModal={toggleModal}
75-
isSearchVisible={isSearchVisible}
76-
toggleSearch={toggleSearch}
77-
openGenericModal={openGenericModal}
78-
toggleDigitalRain={toggleDigitalRain}
79-
toggleBSOD={toggleBSOD}
64+
<DndProvider>
65+
<AchievementProvider>
66+
<AchievementListeners />
67+
<HomepageOrderProvider>
68+
<VisualSettingsProvider>
69+
<DigitalRain isActive={isRainActive} />
70+
<BSOD isActive={isBSODActive} toggleBSOD={toggleBSOD} />
71+
<ScrollToTop />
72+
<TinyCloudPlayer />
73+
<CommandPaletteProvider>
74+
<SidePanelProvider>
75+
<Layout
76+
toggleModal={toggleModal}
77+
isSearchVisible={isSearchVisible}
78+
toggleSearch={toggleSearch}
79+
openGenericModal={openGenericModal}
80+
toggleDigitalRain={toggleDigitalRain}
81+
toggleBSOD={toggleBSOD}
82+
>
83+
<AnimatedRoutes />
84+
</Layout>
85+
</SidePanelProvider>
86+
</CommandPaletteProvider>
87+
<ContactModal isOpen={isModalOpen} onClose={toggleModal} />
88+
<GenericModal
89+
isOpen={isGenericModalOpen}
90+
onClose={closeGenericModal}
91+
title={genericModalContent.title}
8092
>
81-
<AnimatedRoutes />
82-
</Layout>
83-
</SidePanelProvider>
84-
</CommandPaletteProvider>
85-
<ContactModal isOpen={isModalOpen} onClose={toggleModal} />
86-
<GenericModal
87-
isOpen={isGenericModalOpen}
88-
onClose={closeGenericModal}
89-
title={genericModalContent.title}
90-
>
91-
{genericModalContent.content}
92-
</GenericModal>
93-
</VisualSettingsProvider>
94-
</HomepageOrderProvider>
95-
</AchievementProvider>
93+
{genericModalContent.content}
94+
</GenericModal>
95+
</VisualSettingsProvider>
96+
</HomepageOrderProvider>
97+
</AchievementProvider>
98+
</DndProvider>
9699
</CloudMusicProvider>
97100
</SiteConfigProvider>
98101
</ToastProvider>

‎src/components/dnd/DndLayout.jsx‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -245,7 +245,14 @@ const DiceRoller = () => {
245245
};
246246

247247
const DndLayout = ({ children }) => {
248-
const { setBgImageName } = useContext(DndContext);
248+
const {
249+
setBgImageName,
250+
isLightningEnabled,
251+
isLootDiscoveryEnabled,
252+
isFireOverlayEnabled,
253+
isFireParticlesEnabled,
254+
isViewportFrameEnabled,
255+
} = useContext(DndContext);
249256
const [bgImage, setBgImage] = useState('');
250257

251258
useEffect(() => {
@@ -257,14 +264,14 @@ const DndLayout = ({ children }) => {
257264
return (
258265
<div className="dnd-theme-root min-h-screen flex flex-col relative overflow-x-hidden">
259266
<div className="hidden md:block">
260-
<ViewportFrame />
261-
<Lightning />
262-
<LootDiscovery />
267+
{isViewportFrameEnabled && <ViewportFrame />}
268+
{isLightningEnabled && <Lightning />}
269+
{isLootDiscoveryEnabled && <LootDiscovery />}
263270
<FireplaceAudio />
264-
<FireOverlay />
271+
{isFireOverlayEnabled && <FireOverlay />}
265272
<Torchlight />
266273
<DiceRoller />
267-
<FireParticles />
274+
{isFireParticlesEnabled && <FireParticles />}
268275
<DustMotes />
269276
<FloatingRunes />
270277
</div>

‎src/context/DndContext.jsx‎

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,43 @@
11
import React, { createContext, useState } from 'react';
2+
import usePersistentState from '../hooks/usePersistentState';
23

34
export const DndContext = createContext();
45

56
export const DndProvider = ({ children }) => {
67
const [bgImageName, setBgImageName] = useState('');
78
const [breadcrumbs, setBreadcrumbs] = useState([]); // Add breadcrumbs state
89

10+
// Effect Settings (User requested 5 specific ones)
11+
const [isLightningEnabled, setIsLightningEnabled] = usePersistentState('dnd-lightning-enabled', true);
12+
const [isLootDiscoveryEnabled, setIsLootDiscoveryEnabled] = usePersistentState('dnd-loot-enabled', true);
13+
const [isFireOverlayEnabled, setIsFireOverlayEnabled] = usePersistentState('dnd-fire-overlay-enabled', true);
14+
const [isFireParticlesEnabled, setIsFireParticlesEnabled] = usePersistentState('dnd-fire-particles-enabled', true);
15+
const [isViewportFrameEnabled, setIsViewportFrameEnabled] = usePersistentState('dnd-viewport-frame-enabled', true);
16+
17+
const toggleLightning = () => setIsLightningEnabled(!isLightningEnabled);
18+
const toggleLootDiscovery = () => setIsLootDiscoveryEnabled(!isLootDiscoveryEnabled);
19+
const toggleFireOverlay = () => setIsFireOverlayEnabled(!isFireOverlayEnabled);
20+
const toggleFireParticles = () => setIsFireParticlesEnabled(!isFireParticlesEnabled);
21+
const toggleViewportFrame = () => setIsViewportFrameEnabled(!isViewportFrameEnabled);
22+
923
return (
1024
<DndContext.Provider
11-
value={{ bgImageName, setBgImageName, breadcrumbs, setBreadcrumbs }}
25+
value={{
26+
bgImageName,
27+
setBgImageName,
28+
breadcrumbs,
29+
setBreadcrumbs,
30+
isLightningEnabled,
31+
toggleLightning,
32+
isLootDiscoveryEnabled,
33+
toggleLootDiscovery,
34+
isFireOverlayEnabled,
35+
toggleFireOverlay,
36+
isFireParticlesEnabled,
37+
toggleFireParticles,
38+
isViewportFrameEnabled,
39+
toggleViewportFrame
40+
}}
1241
>
1342
{children}
1443
</DndContext.Provider>

‎src/pages/SettingsPage.jsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {
1717
import { useAnimation } from '../context/AnimationContext';
1818
import { useVisualSettings } from '../context/VisualSettingsContext';
1919
import { useAchievements } from '../context/AchievementContext';
20+
import { DndContext } from '../context/DndContext';
2021
import CustomToggle from '../components/CustomToggle';
2122
import CustomDropdown from '../components/CustomDropdown';
2223
import useSeo from '../hooks/useSeo';
@@ -120,6 +121,19 @@ const SettingsPage = () => {
120121
setSidebarColor,
121122
} = useVisualSettings();
122123

124+
const {
125+
isLightningEnabled,
126+
toggleLightning,
127+
isLootDiscoveryEnabled,
128+
toggleLootDiscovery,
129+
isFireOverlayEnabled,
130+
toggleFireOverlay,
131+
isFireParticlesEnabled,
132+
toggleFireParticles,
133+
isViewportFrameEnabled,
134+
toggleViewportFrame,
135+
} = React.useContext(DndContext);
136+
123137
const { addToast } = useToast();
124138

125139
const { sectionOrder, toggleSectionOrder, resetSectionOrder } =
@@ -414,6 +428,21 @@ const SettingsPage = () => {
414428
</div>
415429
</Section>
416430

431+
{/* DND Experience Settings */}
432+
<Section title="DND Experience" icon={<FilmStripIcon />} delay={0.32}>
433+
<p className="mb-10 text-gray-500 font-mono text-[10px] uppercase tracking-[0.2em]">
434+
Fine-tune the immersive effects of the "From Serfs and Frauds" archives.
435+
</p>
436+
437+
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
438+
<CustomToggle id="dnd-lightning" label="Lightning Strikes" checked={isLightningEnabled} onChange={toggleLightning} />
439+
<CustomToggle id="dnd-loot" label="Loot Discovery" checked={isLootDiscoveryEnabled} onChange={toggleLootDiscovery} />
440+
<CustomToggle id="dnd-fire-overlay" label="Fire Overlay" checked={isFireOverlayEnabled} onChange={toggleFireOverlay} />
441+
<CustomToggle id="dnd-fire-particles" label="Fire Particles" checked={isFireParticlesEnabled} onChange={toggleFireParticles} />
442+
<CustomToggle id="dnd-frame" label="Viewport Frame" checked={isViewportFrameEnabled} onChange={toggleViewportFrame} />
443+
</div>
444+
</Section>
445+
417446
{/* Toast Verification */}
418447
<Section title="System Feedback" icon={<ArticleIcon />} delay={0.35}>
419448
<p className="mb-10 text-gray-500 font-mono text-[10px] uppercase tracking-[0.2em]">

0 commit comments

Comments
 (0)