Skip to content

Commit 3173d97

Browse files
fezcodefezcode
committed
refactor: dnd pages pt6
1 parent e8ce028 commit 3173d97

File tree

5 files changed

+93
-12
lines changed

5 files changed

+93
-12
lines changed

‎src/components/dnd/DndLayout.js‎

Lines changed: 39 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,47 @@
1-
import React, { useContext, useEffect, useState } from 'react';
1+
import React, { useContext, useEffect, useState, useRef } from 'react';
22
import { motion, useMotionValue, useSpring } from 'framer-motion';
33
import { DndContext } from '../../context/DndContext';
44
import DndNavbar from './DndNavbar';
55
import DndFooter from './DndFooter';
66
import dndWallpapers from '../../utils/dndWallpapers';
77
import { parseWallpaperName } from '../../utils/dndUtils';
88
import '../../styles/dnd-refactor.css';
9-
import { GameController } from '@phosphor-icons/react';
9+
import { GameController, Flame } from '@phosphor-icons/react';
10+
11+
const FireplaceAudio = () => {
12+
const [isPlaying, setIsPlaying] = useState(false);
13+
const audioRef = useRef(null);
14+
15+
const toggleAudio = () => {
16+
if (isPlaying) {
17+
audioRef.current.pause();
18+
} else {
19+
audioRef.current.play();
20+
}
21+
setIsPlaying(!isPlaying);
22+
};
23+
24+
return (
25+
<div className="fixed bottom-8 left-8 z-[110]">
26+
<audio
27+
ref={audioRef}
28+
src={`${process.env.PUBLIC_URL}/sounds/static.mp3`} // Using static.mp3 as a fireplace crackle proxy if specific fire sound doesn't exist
29+
loop
30+
/>
31+
<button
32+
onClick={toggleAudio}
33+
className={`p-4 rounded-full border-2 transition-all shadow-2xl ${isPlaying ? 'bg-dnd-crimson border-dnd-gold text-white animate-pulse' : 'bg-black/40 border-white/10 text-white/40 hover:text-white'}`}
34+
title="Toggle Ambient Fireplace"
35+
>
36+
<Flame size={32} weight={isPlaying ? "fill" : "bold"} />
37+
</button>
38+
</div>
39+
);
40+
};
41+
42+
const FireOverlay = () => (
43+
<div className="dnd-fire-overlay" />
44+
);
1045

1146
const DustMotes = () => (
1247
<div className="fixed inset-0 pointer-events-none z-10 overflow-hidden">
@@ -170,6 +205,8 @@ const DndLayout = ({ children }) => {
170205
return (
171206
<div className="dnd-theme-root min-h-screen flex flex-col relative overflow-x-hidden">
172207
<ViewportFrame />
208+
<FireplaceAudio />
209+
<FireOverlay />
173210
<Torchlight />
174211
<DiceRoller />
175212
<FireParticles />

‎src/pages/dnd/DndBookPage.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,8 +67,12 @@ function DndBookPage() {
6767
<motion.div
6868
initial={{ opacity: 0, y: 30 }}
6969
animate={{ opacity: 1, y: 0 }}
70-
className="dnd-parchment-container p-12 md:p-24 shadow-2xl border-2 border-black/10"
70+
className="dnd-parchment-container p-12 md:p-24 shadow-2xl border-2 border-black/10 dnd-parchment-glow relative"
7171
>
72+
{/* Scroll Ornaments */}
73+
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-64 h-8 bg-dnd-crimson/5 rounded-b-full blur-xl dnd-scroll-accent" />
74+
<div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-64 h-8 bg-dnd-crimson/5 rounded-t-full blur-xl dnd-scroll-accent" />
75+
7276
<div className="dnd-ornate-corner dnd-ornate-corner-tl !w-16 !h-16" />
7377
<div className="dnd-ornate-corner dnd-ornate-corner-tr !w-16 !h-16" />
7478
<div className="dnd-ornate-corner dnd-ornate-corner-bl !w-16 !h-16" />

‎src/pages/dnd/DndEpisodePage.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -248,21 +248,21 @@ function DndEpisodePage() {
248248

249249
</motion.aside>
250250

251-
<motion.div
251+
<motion.div
252252

253-
initial={{ opacity: 0, y: 30 }}
253+
initial={{ opacity: 0, y: 30 }}
254254

255-
animate={{ opacity: 1, y: 0 }}
255+
animate={{ opacity: 1, y: 0 }}
256256

257-
className="lg:col-span-4 dnd-parchment-container p-8 md:p-24 shadow-2xl border-2 border-black/10 min-h-[60vh] flex flex-col relative"
257+
className="lg:col-span-4 dnd-parchment-container p-8 md:p-24 shadow-2xl border-2 border-black/10 min-h-[60vh] flex flex-col relative dnd-parchment-glow"
258258

259-
>
259+
>
260260

261-
{/* Scroll Ornaments */}
261+
{/* Scroll Ornaments */}
262262

263-
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-64 h-8 bg-dnd-crimson/5 rounded-b-full blur-xl" />
263+
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-64 h-8 bg-dnd-crimson/5 rounded-b-full blur-xl dnd-scroll-accent" />
264264

265-
<div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-64 h-8 bg-dnd-crimson/5 rounded-t-full blur-xl" />
265+
<div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-64 h-8 bg-dnd-crimson/5 rounded-t-full blur-xl dnd-scroll-accent" />
266266

267267
<div className="dnd-ornate-corner dnd-ornate-corner-tl !w-20 !h-20" />
268268

‎src/pages/dnd/DndLorePage.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,11 @@ function DndLorePage() {
8080
))}
8181
</div>
8282

83-
<div className="dnd-parchment-container p-12 md:p-24 shadow-2xl border-2 border-black/10">
83+
<div className="dnd-parchment-container p-12 md:p-24 shadow-2xl border-2 border-black/10 dnd-parchment-glow relative">
84+
{/* Scroll Ornaments */}
85+
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-64 h-8 bg-dnd-crimson/5 rounded-b-full blur-xl dnd-scroll-accent" />
86+
<div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-64 h-8 bg-dnd-crimson/5 rounded-t-full blur-xl dnd-scroll-accent" />
87+
8488
<div className="dnd-ornate-corner dnd-ornate-corner-tl !w-16 !h-16" />
8589
<div className="dnd-ornate-corner dnd-ornate-corner-tr !w-16 !h-16" />
8690
<div className="dnd-ornate-corner dnd-ornate-corner-bl !w-16 !h-16" />

‎src/styles/dnd-refactor.css‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -243,6 +243,42 @@
243243
animation: arcane-glow 4s infinite ease-in-out;
244244
}
245245

246+
/* Fire/Ambient Overlay - Intensified */
247+
@keyframes ambient-flicker {
248+
0%, 100% { opacity: 0.1; }
249+
50% { opacity: 0.2; }
250+
}
251+
252+
.dnd-fire-overlay {
253+
position: fixed;
254+
inset: 0;
255+
pointer-events: none;
256+
z-index: 30;
257+
background:
258+
radial-gradient(circle at bottom, rgba(255, 69, 0, 0.15), transparent 70%),
259+
linear-gradient(to top, rgba(255, 69, 0, 0.05), transparent 40%);
260+
mix-blend-mode: screen;
261+
animation: ambient-flicker 0.5s infinite;
262+
}
263+
264+
/* Ornate Scroll Ornament Animation - Brighter */
265+
@keyframes scroll-glow {
266+
0%, 100% { opacity: 0.4; filter: blur(15px); }
267+
50% { opacity: 0.8; filter: blur(25px); }
268+
}
269+
270+
.dnd-scroll-accent {
271+
animation: scroll-glow 4s infinite ease-in-out;
272+
background: rgba(212, 175, 55, 0.15) !important;
273+
}
274+
275+
/* Animated Parchment Shadow */
276+
.dnd-parchment-glow {
277+
box-shadow:
278+
0 0 40px rgba(212, 175, 55, 0.1),
279+
0 40px 80px rgba(0,0,0,0.7);
280+
}
281+
246282
/* Silk Ribbon Style */
247283
.dnd-ribbon {
248284
position: absolute;

0 commit comments

Comments
 (0)