refactor: dnd pages pt7

fezcode · fezcode · commit c5c52bf5fdfe · 2025-12-22T22:25:28.000+03:00
diff --git a/src/components/dnd/DndLayout.js b/src/components/dnd/DndLayout.js
@@ -6,7 +6,55 @@ import DndFooter from './DndFooter';
 import dndWallpapers from '../../utils/dndWallpapers';
 import { parseWallpaperName } from '../../utils/dndUtils';
 import '../../styles/dnd-refactor.css';
-import { GameController, Flame } from '@phosphor-icons/react';
+import { GameController, Flame, TreasureChest } from '@phosphor-icons/react';
+import { useToast } from '../../hooks/useToast';
+
+const Lightning = () => (
+  <div className="dnd-lightning-overlay" />
+);
+
+const LootDiscovery = () => {
+  const { addToast } = useToast();
+  const [showLoot, setShowLoot] = useState(false);
+  const [lootPos, setLootPos] = useState({ top: '50%', left: '50%' });
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      // 50% chance every 15 seconds
+      if (Math.random() > 0.5) {
+        setLootPos({
+          top: `${30 + Math.random() * 40}%`,
+          left: `${20 + Math.random() * 60}%`,
+        });
+        setShowLoot(true);
+        setTimeout(() => setShowLoot(false), 8000); // Hide after 8s
+      }
+    }, 15000);
+    return () => clearInterval(interval);
+  }, []);
+
+  if (!showLoot) return null;
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, scale: 0 }}
+      animate={{ opacity: 1, scale: 1 }}
+      exit={{ opacity: 0, scale: 0 }}
+      onClick={() => {
+        addToast({
+          title: 'Loot Discovered!',
+          message: 'You found an ancient relic in the archives.',
+          type: 'gold',
+        });
+        setShowLoot(false);
+      }}
+      className="fixed z-[150] dnd-loot-item text-dnd-gold"
+      style={{ top: lootPos.top, left: lootPos.left }}
+    >
+      <TreasureChest size={32} weight="fill" />
+    </motion.div>
+  );
+};
 
 const FireplaceAudio = () => {
   const [isPlaying, setIsPlaying] = useState(false);
@@ -184,7 +232,7 @@ const DiceRoller = () => {
       )}
       <button
         onClick={rollDice}
-        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' : ''}`}
+        className={`p-4 bg-dnd-crimson border-2 border-dnd-gold rounded-full text-white/50 shadow-2xl transition-all hover:scale-110 active:scale-95 ${isRolling ? 'dnd-dice-action' : ''}`}
       >
         <GameController size={32} weight="fill" />
       </button>
@@ -205,6 +253,8 @@ const DndLayout = ({ children }) => {
   return (
     <div className="dnd-theme-root min-h-screen flex flex-col relative overflow-x-hidden">
       <ViewportFrame />
+      <Lightning />
+      <LootDiscovery />
       <FireplaceAudio />
       <FireOverlay />
       <Torchlight />
diff --git a/src/pages/dnd/DndEpisodePage.js b/src/pages/dnd/DndEpisodePage.js
@@ -168,9 +168,17 @@ function DndEpisodePage() {
 
                     >
 
-                      <div className="dnd-stat-block shadow-2xl lg:sticky lg:top-40 group">
+                                    <div className="dnd-stat-block shadow-2xl lg:sticky lg:top-40 group">
 
-                        <div className="dnd-stat-block-header">
+                                      {/* Hidden message in sidebar */}
+
+                                      <div className="absolute -bottom-8 left-0 w-full text-center opacity-0 group-hover:opacity-100 transition-opacity duration-1000">
+
+                                         <span className="dnd-secret-text text-[8px] uppercase tracking-[0.2em]">Don't believe the scribes</span>
+
+                                      </div>
+
+                                      <div className="dnd-stat-block-header">
 
                           {currentEpisode.author}
 
@@ -248,17 +256,31 @@ function DndEpisodePage() {
 
                     </motion.aside>
 
-                                <motion.div
+                                            <motion.div
+
+                                              initial={{ opacity: 0, y: 30 }}
+
+                                              animate={{ opacity: 1, y: 0 }}
+
+                                              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"
+
+                                            >
+
+                                              {/* Secret Inscriptions */}
+
+                                              <div className="absolute top-1/4 -left-4 -rotate-90 pointer-events-none">
+
+                                                 <span className="dnd-secret-text text-[10px] uppercase tracking-[1em]">The walls have eyes</span>
 
-                                  initial={{ opacity: 0, y: 30 }}
+                                              </div>
 
-                                  animate={{ opacity: 1, y: 0 }}
+                                              <div className="absolute bottom-1/4 -right-4 rotate-90 pointer-events-none">
 
-                                  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"
+                                                 <span className="dnd-secret-text text-[10px] uppercase tracking-[1em]">History is written by survivors</span>
 
-                                >
+                                              </div>
 
-                                  {/* Scroll Ornaments */}
+                                              {/* Scroll Ornaments */}
 
                                   <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" />
 
diff --git a/src/styles/dnd-refactor.css b/src/styles/dnd-refactor.css
@@ -279,6 +279,60 @@
     0 40px 80px rgba(0,0,0,0.7);
 }
 
+/* Arcane Lightning Flash */
+@keyframes dnd-lightning {
+  0%, 95%, 100% { opacity: 0; }
+  96% { opacity: 0.2; }
+  97% { opacity: 0.05; }
+  98% { opacity: 0.4; }
+}
+
+.dnd-lightning-overlay {
+  position: fixed;
+  inset: 0;
+  background: white;
+  pointer-events: none;
+  z-index: 50;
+  opacity: 0;
+  mix-blend-mode: overlay;
+  animation: dnd-lightning 7s infinite;
+}
+
+/* Secret Inscriptions - More visible */
+.dnd-secret-text {
+  font-family: 'MedievalSharp', cursive;
+  color: var(--dnd-crimson);
+  opacity: 0.15;
+  filter: blur(1px);
+  transition: all 0.5s ease;
+  user-select: none;
+  font-weight: bold;
+}
+
+.dnd-parchment-container:hover .dnd-secret-text {
+  opacity: 0.4;
+  color: var(--dnd-gold);
+  filter: blur(0px);
+  text-shadow: 0 0 10px var(--dnd-gold);
+}
+
+/* Gold Coin / Loot Styling */
+@keyframes loot-shine {
+  0% { filter: brightness(1); }
+  50% { filter: brightness(1.5) drop-shadow(0 0 10px gold); }
+  100% { filter: brightness(1); }
+}
+
+.dnd-loot-item {
+  cursor: pointer;
+  animation: loot-shine 2s infinite ease-in-out;
+  transition: all 0.3s ease;
+}
+
+.dnd-loot-item:hover {
+  transform: scale(1.5) rotate(15deg);
+}
+
 /* Silk Ribbon Style */
 .dnd-ribbon {
   position: absolute;
