Skip to content

Commit 541fb40

Browse files
fezcodefezcode
committed
refactor: dnd pages pt4
1 parent d9c2a57 commit 541fb40

File tree

5 files changed

+324
-69
lines changed

5 files changed

+324
-69
lines changed

‎src/components/dnd/DndCard.js‎

Lines changed: 33 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,33 @@ import {Link} from 'react-router-dom';
33
import {motion} from 'framer-motion';
44

55
const DndCard = ({
6-
title,
7-
description,
8-
link,
9-
icon,
10-
}) => {
6+
title,
7+
description,
8+
link,
9+
icon,
10+
}) => {
1111
return (
1212
<motion.div
13-
whileHover={{y: -10}}
14-
transition={{type: 'spring', stiffness: 300}}
13+
whileHover={{ y: -10 }}
14+
transition={{ type: 'spring', stiffness: 300 }}
1515
>
1616
<Link
1717
to={link}
18-
className="block group relative p-12 dnd-fantasy-card text-center h-full min-h-[400px] flex flex-col items-center justify-center border-2 border-black/40 shadow-2xl overflow-hidden"
18+
className="block group relative p-12 dnd-fantasy-card text-center h-full min-h-[450px] flex flex-col items-center justify-center border-2 border-black/20 shadow-2xl overflow-hidden"
1919
>
20+
{/* Silk Ribbon */}
21+
<div className="dnd-ribbon transition-transform duration-500 group-hover:translate-y-2" />
22+
23+
{/* Background Runes */}
24+
<div className="dnd-card-rune top-12 left-12 -rotate-12">ᚦ</div>
25+
<div className="dnd-card-rune bottom-12 right-12 rotate-12">ᛉ</div>
26+
27+
{/* Ink Splatters */}
28+
<div className="dnd-ink-splatter w-8 h-8 top-1/4 right-8" />
29+
<div className="dnd-ink-splatter w-4 h-4 bottom-1/3 left-12" />
30+
2031
{/* Parchment Texture Overlay */}
21-
<div
22-
className="absolute inset-0 opacity-[0.05] group-hover:opacity-[0.08] transition-opacity pointer-events-none bg-[url('https://www.transparenttextures.com/patterns/handmade-paper.png')]"/>
32+
<div className="absolute inset-0 opacity-[0.05] group-hover:opacity-[0.08] transition-opacity pointer-events-none bg-[url('https://www.transparenttextures.com/patterns/handmade-paper.png')]" />
2333

2434
{/* Inner Border Shadow - Darker */}
2535
<div className="absolute inset-4 border border-black/5 pointer-events-none" />
@@ -31,20 +41,27 @@ const DndCard = ({
3141
<div className="absolute bottom-6 left-6 w-12 h-12 border-b-2 border-l-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500" />
3242
<div className="absolute bottom-6 right-6 w-12 h-12 border-b-2 border-r-2 border-dnd-gold opacity-60 group-hover:opacity-100 group-hover:scale-110 transition-all duration-500" />
3343

34-
<div className="mb-10 text-dnd-crimson/60 group-hover:text-dnd-crimson group-hover:scale-125 transition-all duration-700 drop-shadow-[0_0_15px_rgba(74,4,4,0.2)]">
44+
<div className="mb-10 text-dnd-crimson/60 group-hover:text-dnd-crimson group-hover:scale-125 transition-all duration-700 drop-shadow-[0_0_15px_rgba(74,4,4,0.2)] relative z-10">
3545
{icon}
3646
</div>
3747

38-
<h3 className="text-4xl md:text-5xl font-playfairDisplay italic font-black text-dnd-crimson uppercase tracking-tighter mb-6 transition-transform duration-500 group-hover:-translate-y-1">
48+
<h3 className="text-4xl md:text-5xl font-playfairDisplay italic font-black text-dnd-crimson uppercase tracking-tighter mb-6 transition-transform duration-500 group-hover:-translate-y-1 relative z-10">
3949
{title}
4050
</h3>
4151

42-
<p className="text-lg font-arvo text-black/70 group-hover:text-black transition-all duration-500 leading-relaxed max-w-[280px]">
52+
<p className="text-lg font-arvo text-black/70 group-hover:text-black transition-all duration-500 leading-relaxed max-w-[280px] relative z-10">
4353
{description}
4454
</p>
4555

56+
{/* Mini Wax Seal at bottom */}
57+
<div className="absolute bottom-12 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-all duration-1000 translate-y-4 group-hover:translate-y-0 pointer-events-none scale-50">
58+
<div className="dnd-wax-seal">
59+
<span className="dnd-wax-seal-inner text-sm">SF</span>
60+
</div>
61+
</div>
62+
4663
{/* Interaction hint - refined and darker */}
47-
<div className="mt-10 pt-8 border-t border-black/10 w-full flex flex-col items-center gap-2 opacity-0 group-hover:opacity-100 transition-all duration-700 transform translate-y-4 group-hover:translate-y-0">
64+
<div className="mt-10 pt-8 border-t border-black/10 w-full flex flex-col items-center gap-2 opacity-0 group-hover:opacity-100 transition-all duration-700 transform translate-y-4 group-hover:translate-y-0 relative z-10">
4865
<div className="flex items-center gap-4">
4966
<div className="h-px w-8 bg-dnd-crimson/20" />
5067
<div className="w-1.5 h-1.5 bg-dnd-gold rounded-full animate-pulse shadow-[0_0_8px_var(--dnd-gold)]" />
@@ -54,7 +71,8 @@ const DndCard = ({
5471
Open_Script
5572
</span>
5673
</div>
57-
</Link></motion.div>
74+
</Link>
75+
</motion.div>
5876
);
5977
};
6078

‎src/components/dnd/DndFooter.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const DndFooter = () => {
1414
S & F
1515
</span>
1616
</div>
17-
<p className="font-mono text-[10px] uppercase tracking-[0.4em] text-white/70">
17+
<p className="font-arvo text-[10px] uppercase tracking-[0.4em] text-white/70">
1818
From Serfs and Frauds
1919
</p>
2020
</div>
@@ -27,14 +27,14 @@ const DndFooter = () => {
2727
</div>
2828

2929
<div className="space-y-4 md:text-right">
30-
<p className="font-mono text-[9px] uppercase tracking-widest text-white">
30+
<p className="font-arvo text-[9px] uppercase tracking-widest text-white">
3131
Digital Archive Kernel // v0.8.7
3232
</p>
33-
<p className="font-mono text-[9px] uppercase tracking-widest text-white">
33+
<p className="font-arvo text-[9px] uppercase tracking-widest text-white">
3434
Wallpaper Source // <span className="text-white font-bold">{bgImageName || 'Default_Vault'}</span>
3535
</p>
3636
<div className="h-px w-12 bg-dnd-gold ml-auto opacity-50" />
37-
<p className="font-mono text-[10px] uppercase tracking-[0.2em] text-white">
37+
<p className="font-arvo text-[10px] uppercase tracking-[0.2em] text-white">
3838
&copy; {new Date().getFullYear()} Archives of the Realm
3939
</p>
4040
</div>

‎src/components/dnd/DndLayout.js‎

Lines changed: 95 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import React, { useContext, useEffect, useState } from 'react';
2+
import { motion, useMotionValue, useSpring } from 'framer-motion';
23
import { DndContext } from '../../context/DndContext';
34
import DndNavbar from './DndNavbar';
45
import DndFooter from './DndFooter';
56
import dndWallpapers from '../../utils/dndWallpapers';
67
import { parseWallpaperName } from '../../utils/dndUtils';
78
import '../../styles/dnd-refactor.css';
9+
import { GameController } from '@phosphor-icons/react';
810

911
const DustMotes = () => (
1012
<div className="fixed inset-0 pointer-events-none z-10 overflow-hidden">
@@ -46,6 +48,95 @@ const FloatingRunes = () => {
4648
);
4749
};
4850

51+
const FireParticles = () => {
52+
const colors = [
53+
'radial-gradient(circle, #ff4500 0%, #ff8c00 70%, transparent 100%)', // Red-Orange
54+
'radial-gradient(circle, #ff8c00 0%, #ffd700 70%, transparent 100%)', // Orange-Gold
55+
'radial-gradient(circle, #ff0000 0%, #ff4500 70%, transparent 100%)', // Pure Red
56+
];
57+
58+
return (
59+
<div className="fixed inset-0 pointer-events-none z-10 overflow-hidden">
60+
{[...Array(50)].map((_, i) => {
61+
const size = 3 + Math.random() * 8;
62+
return (
63+
<div
64+
key={i}
65+
className="dnd-fire-particle"
66+
style={{
67+
left: `${Math.random() * 100}%`,
68+
width: `${size}px`,
69+
height: `${size}px`,
70+
background: colors[Math.floor(Math.random() * colors.length)],
71+
animationDuration: `${5 + Math.random() * 10}s`,
72+
animationDelay: `${-Math.random() * 15}s`,
73+
boxShadow: `0 0 ${size * 2}px #ff4500`,
74+
}}
75+
/>
76+
);
77+
})}
78+
</div>
79+
);
80+
};
81+
const Torchlight = () => {
82+
const mouseX = useMotionValue(0);
83+
const mouseY = useMotionValue(0);
84+
85+
const springX = useSpring(mouseX, { damping: 50, stiffness: 200 });
86+
const springY = useSpring(mouseY, { damping: 50, stiffness: 200 });
87+
88+
useEffect(() => {
89+
const handleMouseMove = (e) => {
90+
mouseX.set(e.clientX);
91+
mouseY.set(e.clientY);
92+
};
93+
window.addEventListener('mousemove', handleMouseMove);
94+
return () => window.removeEventListener('mousemove', handleMouseMove);
95+
}, [mouseX, mouseY]);
96+
97+
return (
98+
<motion.div
99+
className="fixed inset-0 pointer-events-none z-[100] hidden md:block"
100+
style={{
101+
background: `radial-gradient(circle 400px at ${springX}px ${springY}px, rgba(255, 180, 50, 0.08), transparent 80%)`,
102+
}}
103+
/>
104+
);
105+
};
106+
107+
const DiceRoller = () => {
108+
const [roll, setRoll] = useState(null);
109+
const [isRolling, setIsRolling] = useState(false);
110+
111+
const rollDice = () => {
112+
setIsRolling(true);
113+
setTimeout(() => {
114+
setRoll(Math.floor(Math.random() * 20) + 1);
115+
setIsRolling(false);
116+
}, 600);
117+
};
118+
119+
return (
120+
<div className="fixed bottom-8 right-8 z-[110] flex flex-col items-center gap-4">
121+
{roll !== null && (
122+
<motion.div
123+
initial={{ opacity: 0, scale: 0.5, y: 20 }}
124+
animate={{ opacity: 1, scale: 1, y: 0 }}
125+
className="bg-dnd-crimson border-2 border-dnd-gold text-white px-4 py-2 rounded-sm font-mono text-xs shadow-2xl"
126+
>
127+
{roll === 20 ? 'CRITICAL SUCCESS!' : roll === 1 ? 'CRITICAL FAILURE...' : `YOU ROLLED: ${roll}`}
128+
</motion.div>
129+
)}
130+
<button
131+
onClick={rollDice}
132+
className={`p-4 bg-dnd-crimson border-2 border-dnd-gold rounded-full text-dnd-gold shadow-2xl transition-all hover:scale-110 active:scale-95 ${isRolling ? 'dnd-dice-action' : ''}`}
133+
>
134+
<GameController size={32} weight="fill" />
135+
</button>
136+
</div>
137+
);
138+
};
139+
49140
const DndLayout = ({ children }) => {
50141
const { setBgImageName } = useContext(DndContext);
51142
const [bgImage, setBgImage] = useState('');
@@ -58,6 +149,9 @@ const DndLayout = ({ children }) => {
58149

59150
return (
60151
<div className="dnd-theme-root min-h-screen flex flex-col relative overflow-x-hidden">
152+
<Torchlight />
153+
<DiceRoller />
154+
<FireParticles />
61155
<DustMotes />
62156
<FloatingRunes />
63157
{/* Immersive Background */}
@@ -87,4 +181,4 @@ const DndLayout = ({ children }) => {
87181
);
88182
};
89183

90-
export default DndLayout;
184+
export default DndLayout;

0 commit comments

Comments
 (0)