API tools faq
paste
XTaylorSpenceX

Dream Dealer Deck

XTaylorSpenceX
Sep 27th, 2025
78
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 32.66 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Dream Dealer Deck</title>
  7.     <style>
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.             box-sizing: border-box;
  12.         }
  13.         body {
  14.             font-family: 'Georgia', serif;
  15.             background: linear-gradient(135deg, #1a0033, #330066, #000033);
  16.             color: #e0d5ff;
  17.             min-height: 100vh;
  18.             overflow-x: hidden;
  19.             position: relative;
  20.         }
  21.         /* Animated background particles */
  22.         body::before {
  23.             content: '';
  24.             position: fixed;
  25.             top: 0;
  26.             left: 0;
  27.             width: 100%;
  28.             height: 100%;
  29.             background-image:
  30.                 radial-gradient(circle at 20% 50%, rgba(120, 119, 255, 0.3) 0%, transparent 50%),
  31.                 radial-gradient(circle at 80% 80%, rgba(255, 119, 168, 0.3) 0%, transparent 50%),
  32.                 radial-gradient(circle at 40% 20%, rgba(119, 255, 247, 0.3) 0%, transparent 50%);
  33.             animation: dreamFloat 20s ease-in-out infinite;
  34.             pointer-events: none;
  35.         }
  36.         @keyframes dreamFloat {
  37.             0%, 100% { transform: translate(0, 0) rotate(0deg); }
  38.             33% { transform: translate(-20px, -20px) rotate(120deg); }
  39.             66% { transform: translate(20px, 10px) rotate(240deg); }
  40.         }
  41.         .game-container {
  42.             max-width: 1400px;
  43.             margin: 0 auto;
  44.             padding: 20px;
  45.             position: relative;
  46.             z-index: 1;
  47.         }
  48.         .header {
  49.             text-align: center;
  50.             margin-bottom: 30px;
  51.             animation: fadeIn 1s ease-out;
  52.         }
  53.         h1 {
  54.             font-size: 3em;
  55.             background: linear-gradient(45deg, #ff79c6, #bd93f9, #8be9fd);
  56.             -webkit-background-clip: text;
  57.             -webkit-text-fill-color: transparent;
  58.             background-clip: text;
  59.             text-shadow: 0 0 30px rgba(189, 147, 249, 0.5);
  60.             margin-bottom: 10px;
  61.             animation: glow 3s ease-in-out infinite;
  62.         }
  63.         @keyframes glow {
  64.             0%, 100% { filter: brightness(1); }
  65.             50% { filter: brightness(1.2); }
  66.         }
  67.         .stats {
  68.             display: flex;
  69.             justify-content: center;
  70.             gap: 30px;
  71.             margin-bottom: 20px;
  72.             flex-wrap: wrap;
  73.         }
  74.         .stat {
  75.             background: rgba(255, 255, 255, 0.1);
  76.             padding: 10px 20px;
  77.             border-radius: 20px;
  78.             backdrop-filter: blur(10px);
  79.             border: 1px solid rgba(255, 255, 255, 0.2);
  80.             transition: all 0.3s;
  81.         }
  82.         .stat:hover {
  83.             transform: translateY(-2px);
  84.             box-shadow: 0 5px 20px rgba(189, 147, 249, 0.3);
  85.         }
  86.         .dreamscape {
  87.             background: radial-gradient(ellipse at center, rgba(189, 147, 249, 0.1), transparent);
  88.             border: 2px solid rgba(189, 147, 249, 0.3);
  89.             border-radius: 20px;
  90.             padding: 30px;
  91.             margin-bottom: 30px;
  92.             min-height: 200px;
  93.             position: relative;
  94.             overflow: hidden;
  95.             backdrop-filter: blur(5px);
  96.         }
  97.         .dreamscape::before {
  98.             content: '';
  99.             position: absolute;
  100.             top: -50%;
  101.             left: -50%;
  102.             width: 200%;
  103.             height: 200%;
  104.             background: radial-gradient(circle, transparent, rgba(189, 147, 249, 0.1), transparent);
  105.             animation: dreamPulse 4s ease-in-out infinite;
  106.         }
  107.         @keyframes dreamPulse {
  108.             0%, 100% { transform: scale(1) rotate(0deg); }
  109.             50% { transform: scale(1.1) rotate(180deg); }
  110.         }
  111.         .narrative {
  112.             position: relative;
  113.             z-index: 1;
  114.             font-size: 1.2em;
  115.             line-height: 1.8;
  116.             color: #f8f8f2;
  117.             text-align: center;
  118.             font-style: italic;
  119.             animation: fadeIn 0.5s ease-out;
  120.         }
  121.         .dream-symbol {
  122.             display: inline-block;
  123.             margin: 0 5px;
  124.             padding: 2px 8px;
  125.             background: linear-gradient(135deg, rgba(189, 147, 249, 0.3), rgba(255, 121, 198, 0.3));
  126.             border-radius: 10px;
  127.             animation: symbolFloat 3s ease-in-out infinite;
  128.         }
  129.         @keyframes symbolFloat {
  130.             0%, 100% { transform: translateY(0); }
  131.             50% { transform: translateY(-3px); }
  132.         }
  133.         .card-area {
  134.             display: flex;
  135.             gap: 30px;
  136.             margin-bottom: 30px;
  137.             flex-wrap: wrap;
  138.             justify-content: center;
  139.         }
  140.         .hand, .deck-area {
  141.             flex: 1;
  142.             min-width: 300px;
  143.         }
  144.         .section-title {
  145.             text-align: center;
  146.             margin-bottom: 15px;
  147.             color: #bd93f9;
  148.             font-size: 1.3em;
  149.         }
  150.         .hand-cards {
  151.             display: flex;
  152.             gap: 15px;
  153.             flex-wrap: wrap;
  154.             justify-content: center;
  155.             min-height: 250px;
  156.             padding: 20px;
  157.             background: rgba(0, 0, 0, 0.3);
  158.             border-radius: 15px;
  159.             border: 1px solid rgba(189, 147, 249, 0.2);
  160.         }
  161.         .card {
  162.             width: 140px;
  163.             height: 200px;
  164.             background: linear-gradient(135deg, #2a0845, #1a0033);
  165.             border: 2px solid rgba(189, 147, 249, 0.5);
  166.             border-radius: 15px;
  167.             padding: 15px;
  168.             cursor: pointer;
  169.             transition: all 0.3s;
  170.             position: relative;
  171.             overflow: hidden;
  172.             display: flex;
  173.             flex-direction: column;
  174.             justify-content: space-between;
  175.             animation: cardAppear 0.5s ease-out;
  176.         }
  177.         @keyframes cardAppear {
  178.             from {
  179.                 opacity: 0;
  180.                 transform: scale(0.8) rotateY(90deg);
  181.             }
  182.             to {
  183.                 opacity: 1;
  184.                 transform: scale(1) rotateY(0);
  185.             }
  186.         }
  187.         .card::before {
  188.             content: '';
  189.             position: absolute;
  190.             top: -50%;
  191.             left: -50%;
  192.             width: 200%;
  193.             height: 200%;
  194.             background: radial-gradient(circle, transparent, rgba(255, 255, 255, 0.1), transparent);
  195.             animation: cardShimmer 3s linear infinite;
  196.             pointer-events: none;
  197.         }
  198.         @keyframes cardShimmer {
  199.             0% { transform: rotate(0deg); }
  200.             100% { transform: rotate(360deg); }
  201.         }
  202.         .card:hover {
  203.             transform: translateY(-10px) scale(1.05);
  204.             box-shadow: 0 10px 30px rgba(189, 147, 249, 0.5);
  205.             border-color: #ff79c6;
  206.         }
  207.         .card-symbol {
  208.             font-size: 3em;
  209.             text-align: center;
  210.             margin-bottom: 10px;
  211.             filter: drop-shadow(0 0 10px currentColor);
  212.             animation: symbolRotate 10s linear infinite;
  213.         }
  214.         @keyframes symbolRotate {
  215.             0% { transform: rotate(0deg); }
  216.             100% { transform: rotate(360deg); }
  217.         }
  218.         .card-name {
  219.             font-size: 1em;
  220.             font-weight: bold;
  221.             text-align: center;
  222.             color: #f8f8f2;
  223.             margin-bottom: 5px;
  224.         }
  225.         .card-power {
  226.             text-align: center;
  227.             color: #8be9fd;
  228.             font-size: 0.9em;
  229.         }
  230.         .deck {
  231.             width: 160px;
  232.             height: 220px;
  233.             margin: 0 auto;
  234.             background: linear-gradient(135deg, #1a0033, #000033);
  235.             border: 3px solid #bd93f9;
  236.             border-radius: 15px;
  237.             display: flex;
  238.             align-items: center;
  239.             justify-content: center;
  240.             cursor: pointer;
  241.             position: relative;
  242.             transition: all 0.3s;
  243.             box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
  244.         }
  245.         .deck:hover {
  246.             transform: scale(1.05);
  247.             box-shadow: 0 10px 30px rgba(189, 147, 249, 0.5);
  248.         }
  249.         .deck-count {
  250.             font-size: 2em;
  251.             color: #ff79c6;
  252.             text-shadow: 0 0 20px rgba(255, 121, 198, 0.8);
  253.         }
  254.         .controls {
  255.             display: flex;
  256.             gap: 20px;
  257.             justify-content: center;
  258.             margin-top: 30px;
  259.             flex-wrap: wrap;
  260.         }
  261.         button {
  262.             padding: 12px 30px;
  263.             background: linear-gradient(135deg, #ff79c6, #bd93f9);
  264.             border: none;
  265.             border-radius: 25px;
  266.             color: white;
  267.             font-size: 1.1em;
  268.             cursor: pointer;
  269.             transition: all 0.3s;
  270.             box-shadow: 0 5px 15px rgba(189, 147, 249, 0.3);
  271.         }
  272.         button:hover {
  273.             transform: translateY(-3px);
  274.             box-shadow: 0 8px 25px rgba(189, 147, 249, 0.5);
  275.         }
  276.         button:active {
  277.             transform: translateY(-1px);
  278.         }
  279.         button:disabled {
  280.             opacity: 0.5;
  281.             cursor: not-allowed;
  282.             transform: none;
  283.         }
  284.         .collapse-warning {
  285.             color: #ff5555;
  286.             text-align: center;
  287.             font-size: 1.2em;
  288.             margin-top: 10px;
  289.             animation: warningPulse 1s ease-in-out infinite;
  290.         }
  291.         @keyframes warningPulse {
  292.             0%, 100% { opacity: 0.7; }
  293.             50% { opacity: 1; }
  294.         }
  295.         @keyframes fadeIn {
  296.             from { opacity: 0; }
  297.             to { opacity: 1; }
  298.         }
  299.         .modal {
  300.             display: none;
  301.             position: fixed;
  302.             top: 0;
  303.             left: 0;
  304.             width: 100%;
  305.             height: 100%;
  306.             background: rgba(0, 0, 0, 0.8);
  307.             z-index: 1000;
  308.             animation: fadeIn 0.3s;
  309.         }
  310.         .modal-content {
  311.             position: absolute;
  312.             top: 50%;
  313.             left: 50%;
  314.             transform: translate(-50%, -50%);
  315.             background: linear-gradient(135deg, #2a0845, #1a0033);
  316.             border: 2px solid #bd93f9;
  317.             border-radius: 20px;
  318.             padding: 30px;
  319.             text-align: center;
  320.             box-shadow: 0 0 50px rgba(189, 147, 249, 0.5);
  321.         }
  322.         .modal h2 {
  323.             color: #ff79c6;
  324.             margin-bottom: 20px;
  325.             font-size: 2em;
  326.         }
  327.         .modal p {
  328.             margin-bottom: 20px;
  329.             font-size: 1.2em;
  330.         }
  331.     </style>
  332. </head>
  333. <body>
  334.     <div class="game-container">
  335.         <div class="header">
  336.             <h1>Dream Dealer Deck</h1>
  337.             <div class="stats">
  338.                 <div class="stat">Stability: <span id="stability">100</span>%</div>
  339.                 <div class="stat">Cards Played: <span id="cards-played">0</span></div>
  340.                 <div class="stat">Dream Depth: <span id="dream-depth">0</span></div>
  341.             </div>
  342.         </div>
  343.         <div class="dreamscape">
  344.             <div class="narrative" id="narrative">
  345.                 The dreamscape awaits your first fragment...
  346.             </div>
  347.         </div>
  348.         <div class="card-area">
  349.             <div class="hand">
  350.                 <h2 class="section-title">Your Dream Fragments</h2>
  351.                 <div class="hand-cards" id="hand-cards"></div>
  352.             </div>
  353.             <div class="deck-area">
  354.                 <h2 class="section-title">Dream Deck</h2>
  355.                 <div class="deck" id="deck" onclick="drawCard()">
  356.                     <div class="deck-count" id="deck-count">∞</div>
  357.                 </div>
  358.             </div>
  359.         </div>
  360.         <div class="controls">
  361.             <button onclick="drawCard()">Draw Fragment</button>
  362.             <button onclick="resetDream()">New Dream</button>
  363.         </div>
  364.         <div class="collapse-warning" id="warning" style="display: none;">
  365.             ⚠ The dream grows unstable...
  366.         </div>
  367.     </div>
  368.     <div class="modal" id="game-over-modal">
  369.         <div class="modal-content">
  370.             <h2>The Dream Collapses!</h2>
  371.             <p id="final-narrative"></p>
  372.             <button onclick="resetDream()">Dream Again</button>
  373.         </div>
  374.     </div>
  375.     <script>
  376.         const dreamFragments = [
  377.             { symbol: '🌙', name: 'Lunar Echo', power: 3, theme: 'celestial', sentiment: 'positive' },
  378.             { symbol: 'ðŸĶ‹', name: 'Morphing Wings', power: 2, theme: 'transformation', sentiment: 'positive' },
  379.             { symbol: 'ðŸ”Ū', name: 'Crystal Vision', power: 4, theme: 'prophecy', sentiment: 'positive' },
  380.             { symbol: '🌊', name: 'Tide Memory', power: 3, theme: 'flow', sentiment: 'neutral' },
  381.             { symbol: '👁ïļ', name: 'Watcher\'s Gaze', power: 5, theme: 'awareness', sentiment: 'negative' },
  382.             { symbol: 'ðŸŒļ', name: 'Bloom Decay', power: 2, theme: 'cycle', sentiment: 'negative' },
  383.             { symbol: '⚡', name: 'Static Whisper', power: 4, theme: 'energy', sentiment: 'neutral' },
  384.             { symbol: '🎭', name: 'Masked Truth', power: 3, theme: 'identity', sentiment: 'neutral' },
  385.             { symbol: '🌀', name: 'Spiral Dance', power: 3, theme: 'chaos', sentiment: 'negative' },
  386.             { symbol: 'âœĻ', name: 'Star Dust', power: 2, theme: 'wonder', sentiment: 'positive' },
  387.             { symbol: '🕷ïļ', name: 'Web Weaver', power: 4, theme: 'connection', sentiment: 'positive' },
  388.             { symbol: '🍄', name: 'Spore Dream', power: 3, theme: 'growth', sentiment: 'positive' },
  389.             { symbol: 'ðŸ”Ĩ', name: 'Ember Memory', power: 4, theme: 'passion', sentiment: 'positive' },
  390.             { symbol: '❄ïļ', name: 'Frost Pattern', power: 3, theme: 'stillness', sentiment: 'neutral' },
  391.             { symbol: '🌈', name: 'Spectrum Shift', power: 2, theme: 'change', sentiment: 'neutral' },
  392.             { symbol: '🗝ïļ', name: 'Lost Key', power: 5, theme: 'mystery', sentiment: 'negative' },
  393.             { symbol: 'âģ', name: 'Sand Fall', power: 4, theme: 'time', sentiment: 'neutral' },
  394.             { symbol: 'ðŸŠķ', name: 'Feather Float', power: 1, theme: 'lightness', sentiment: 'positive' },
  395.             { symbol: '💎', name: 'Prism Heart', power: 5, theme: 'refraction', sentiment: 'positive' },
  396.             { symbol: '🌑', name: 'Void Whisper', power: 6, theme: 'emptiness', sentiment: 'negative' }
  397.         ];
  398.  
  399.         // Dynamic narrative generation components
  400.         const narrativeComponents = {
  401.             openings: [
  402.                 "The dream begins with",
  403.                 "In the haze of sleep emerges",
  404.                 "From the depths of slumber comes",
  405.                 "A vision forms of",
  406.                 "The subconscious reveals"
  407.             ],
  408.             transitions: [
  409.                 "As the dream unfolds,",
  410.                 "Shifting subtly,",
  411.                 "With a gentle transition,",
  412.                 "As reality warps,",
  413.                 "In the flow of consciousness,"
  414.             ],
  415.             connections: [
  416.                 "echoing the earlier",
  417.                 "building upon the",
  418.                 "contrasting with the previous",
  419.                 "harmonizing with the",
  420.                 "transforming the essence of the"
  421.             ],
  422.             themeDescriptors: {
  423.                 celestial: ["starlit", "cosmic", "ethereal", "lunar", "astral"],
  424.                 transformation: ["shifting", "metamorphic", "evolving", "changing", "mutating"],
  425.                 prophecy: ["visionary", "oracular", "predictive", "fateful", "divinatory"],
  426.                 flow: ["fluid", "current-like", "streaming", "wavelike", "rhythmic"],
  427.                 awareness: ["observant", "conscious", "perceptive", "mindful", "cognizant"],
  428.                 cycle: ["recurring", "circular", "repeating", "cyclical", "periodic"],
  429.                 energy: ["vibrant", "dynamic", "electrifying", "powerful", "intense"],
  430.                 identity: ["personal", "individual", "characteristic", "defining", "distinctive"],
  431.                 chaos: ["disorderly", "turbulent", "random", "unpredictable", "entropic"],
  432.                 wonder: ["marvelous", "astonishing", "amazing", "awe-inspiring", "miraculous"],
  433.                 connection: ["linking", "bonding", "unifying", "relational", "interconnected"],
  434.                 growth: ["expanding", "developing", "maturing", "blossoming", "flourishing"],
  435.                 passion: ["intense", "fervent", "ardent", "emotional", "fiery"],
  436.                 stillness: ["calm", "peaceful", "tranquil", "serene", "quiet"],
  437.                 change: ["altering", "modifying", "varying", "transforming", "shifting"],
  438.                 mystery: ["enigmatic", "puzzling", "cryptic", "secretive", "unknown"],
  439.                 time: ["temporal", "chronological", "sequential", "progressive", "historic"],
  440.                 lightness: ["airy", "buoyant", "weightless", "floating", "ethereal"],
  441.                 refraction: ["splintered", "divided", "dispersed", "scattered", "fragmented"],
  442.                 emptiness: ["void-like", "hollow", "vacant", "unfilled", "desolate"]
  443.             },
  444.             actions: {
  445.                 celestial: ["illuminates", "guides", "shines upon", "blesses", "watches over"],
  446.                 transformation: ["alters", "reshapes", "transforms", "metamorphoses", "evolves"],
  447.                 prophecy: ["foretells", "predicts", "reveals", "divines", "envisions"],
  448.                 flow: ["streams", "courses", "washes over", "flows through", "meanders"],
  449.                 awareness: ["observes", "perceives", "notices", "discerns", "recognizes"],
  450.                 cycle: ["repeats", "cycles", "returns", "revolves", "recurs"],
  451.                 energy: ["energizes", "electrifies", "vibrates", "powers", "animates"],
  452.                 identity: ["defines", "characterizes", "personifies", "represents", "embodies"],
  453.                 chaos: ["disrupts", "scrambles", "randomizes", "jumbles", "disorganizes"],
  454.                 wonder: ["amazes", "astonishes", "marvels", "awes", "impresses"],
  455.                 connection: ["links", "connects", "binds", "unites", "joins"],
  456.                 growth: ["grows", "expands", "develops", "blossoms", "flourishes"],
  457.                 passion: ["ignites", "inflames", "drives", "motivates", "compels"],
  458.                 stillness: ["calms", "quiets", "stillens", "pacifies", "settles"],
  459.                 change: ["changes", "alters", "modifies", "varies", "shifts"],
  460.                 mystery: ["mystifies", "puzzles", "baffles", "perplexes", "intrigues"],
  461.                 time: ["passes", "progresses", "advances", "unfolds", "transpires"],
  462.                 lightness: ["lightens", "floats", "rises", "ascends", "soars"],
  463.                 refraction: ["refracts", "splits", "disperses", "scatters", "divides"],
  464.                 emptiness: ["empties", "voids", "clears", "vacates", "hollows"]
  465.             },
  466.             environments: {
  467.                 celestial: ["the starry expanse", "the cosmic void", "the lunar landscape", "the astral plane", "the heavenly spheres"],
  468.                 transformation: ["the shifting sands", "the mutable realm", "the changing tides", "the fluid reality", "the evolving space"],
  469.                 prophecy: ["the oracle's chamber", "the vision pool", "the future's edge", "the divination circle", "the foresight realm"],
  470.                 flow: ["the river of time", "the stream of consciousness", "the ocean of thought", "the current of being", "the tide of existence"],
  471.                 awareness: ["the observatory", "the mind's eye", "the perception field", "the consciousness plane", "the awareness sphere"],
  472.                 cycle: ["the eternal return", "the wheel of fate", "the circle of life", "the recurring dream", "the cyclical realm"],
  473.                 energy: ["the power source", "the vibrant core", "the energetic field", "the dynamic space", "the electric atmosphere"],
  474.                 identity: ["the self's reflection", "the mirror of being", "the identity chamber", "the persona realm", "the essence space"],
  475.                 chaos: ["the turbulent void", "the disorderly realm", "the random chaos", "the entropic field", "the unpredictable space"],
  476.                 wonder: ["the marvel garden", "the amazing vista", "the awe-inspiring landscape", "the miraculous realm", "the astonishing dimension"],
  477.                 connection: ["the web of life", "the network of being", "the interconnected space", "the relational field", "the unity realm"],
  478.                 growth: ["the fertile ground", "the blossoming field", "the developing space", "the growth chamber", "the flourishing realm"],
  479.                 passion: ["the fiery heart", "the emotional core", "the ardent space", "the intense realm", "the fervent dimension"],
  480.                 stillness: ["the calm center", "the peaceful haven", "the tranquil space", "the serene realm", "the quiet dimension"],
  481.                 change: ["the shifting ground", "the altering reality", "the changing space", "the mutable dimension", "the transforming realm"],
  482.                 mystery: ["the enigmatic chamber", "the puzzling labyrinth", "the cryptic space", "the secretive realm", "the unknown dimension"],
  483.                 time: ["the temporal flow", "the chronological stream", "the time river", "the historic space", "the progression realm"],
  484.                 lightness: ["the airy expanse", "the buoyant space", "the weightless realm", "the floating dimension", "the ethereal plane"],
  485.                 refraction: ["the prismatic chamber", "the fragmented space", "the scattered realm", "the divided dimension", "the splintered plane"],
  486.                 emptiness: ["the void chamber", "the hollow space", "the vacant realm", "the unfilled dimension", "the desolate plane"]
  487.             },
  488.             conclusions: [
  489.                 "weaving itself into the fabric of the dream.",
  490.                 "becoming an integral part of the subconscious landscape.",
  491.                 "altering the course of the dreaming mind.",
  492.                 "reshaping the reality of the slumbering world.",
  493.                 "leaving an indelible mark on the dreamer's psyche."
  494.             ]
  495.         };
  496.  
  497.         let gameState = {
  498.             hand: [],
  499.             stability: 100,
  500.             cardsPlayed: 0,
  501.             dreamDepth: 0,
  502.             narrative: [],
  503.             themes: [],
  504.             lastCards: [] // Track the sequence of played cards for narrative context
  505.         };
  506.  
  507.         function initGame() {
  508.             drawCard();
  509.             drawCard();
  510.             drawCard();
  511.             updateDisplay();
  512.         }
  513.  
  514.         function drawCard() {
  515.             if (gameState.hand.length >= 7) {
  516.                 return;
  517.             }
  518.            
  519.             const card = {...dreamFragments[Math.floor(Math.random() * dreamFragments.length)]};
  520.             gameState.hand.push(card);
  521.             renderHand();
  522.            
  523.             // Deck animation
  524.             const deck = document.getElementById('deck');
  525.             deck.style.transform = 'scale(0.95)';
  526.             setTimeout(() => deck.style.transform = 'scale(1)', 200);
  527.         }
  528.  
  529.         function playCard(index) {
  530.             if (gameState.stability <= 0) return;
  531.          
  532.            const card = gameState.hand[index];
  533.            gameState.hand.splice(index, 1);
  534.          
  535.            // Update game state
  536.            gameState.cardsPlayed++;
  537.            gameState.dreamDepth += card.power;
  538.            gameState.themes.push(card.theme);
  539.          
  540.            // Add to last cards for narrative context (keep last 3)
  541.            gameState.lastCards.unshift(card);
  542.            if (gameState.lastCards.length > 3) {
  543.                 gameState.lastCards.pop();
  544.             }
  545.            
  546.             // Calculate stability change
  547.             const change = calculateStabilityChange(card);
  548.             gameState.stability = Math.max(0, Math.min(100, gameState.stability + change));
  549.            
  550.             // Generate dynamic narrative
  551.             addToNarrative(card);
  552.            
  553.             // Update display
  554.             updateDisplay();
  555.             renderHand();
  556.            
  557.             // Check game over
  558.             if (gameState.stability <= 0) {
  559.                endDream();
  560.            } else if (gameState.stability < 30) {
  561.                document.getElementById('warning').style.display = 'block';
  562.            } else {
  563.                document.getElementById('warning').style.display = 'none';
  564.            }
  565.          
  566.            // Auto-draw if hand is getting empty
  567.            if (gameState.hand.length < 2) {
  568.                setTimeout(drawCard, 500);
  569.            }
  570.        }
  571.  
  572.        function calculateStabilityChange(card) {
  573.            // Base stability drain increases with dream depth
  574.            let change = - (3 + Math.floor(gameState.dreamDepth / 10));
  575.          
  576.            // Sentiment effect - POSITIVE CARDS NOW INCREASE STABILITY
  577.            if (card.sentiment === 'positive') {
  578.                change += 8 + Math.floor(card.power / 2);
  579.            } else if (card.sentiment === 'negative') {
  580.                change -= 5 + card.power;
  581.            } else {
  582.                change -= 2; // slight drain for neutral
  583.            }
  584.          
  585.            // Theme coherence (flow) - matching themes provide stability
  586.            const recentThemes = gameState.themes.slice(-3);
  587.            if (recentThemes.length >= 2) {
  588.                 const uniqueThemes = new Set(recentThemes);
  589.                 if (uniqueThemes.size === 1) {
  590.                     change += 8; // strong flow bonus for consistent themes
  591.                 } else if (uniqueThemes.size === recentThemes.length) {
  592.                     change -= 3; // slight penalty for complete theme changes
  593.                 }
  594.             }
  595.            
  596.             return change;
  597.         }
  598.  
  599.         function addToNarrative(card) {
  600.             let narrativeFragment = generateNarrativeFragment(card);
  601.             gameState.narrative.push(narrativeFragment);
  602.            
  603.             // Keep only recent narrative
  604.             if (gameState.narrative.length > 5) {
  605.                 gameState.narrative.shift();
  606.             }
  607.            
  608.             document.getElementById('narrative').innerHTML = gameState.narrative.join(' ');
  609.         }
  610.  
  611.         function generateNarrativeFragment(currentCard) {
  612.             const components = narrativeComponents;
  613.             let narrative = '';
  614.            
  615.             // Determine the context based on previously played cards
  616.             const prevCard1 = gameState.lastCards[1]; // Card before current
  617.             const prevCard2 = gameState.lastCards[2]; // Card two before current
  618.            
  619.             // Opening for first card
  620.             if (gameState.cardsPlayed === 1) {
  621.                 const opening = components.openings[Math.floor(Math.random() * components.openings.length)];
  622.                 const descriptor = components.themeDescriptors[currentCard.theme][Math.floor(Math.random() * components.themeDescriptors[currentCard.theme].length)];
  623.                 const environment = components.environments[currentCard.theme][Math.floor(Math.random() * components.environments[currentCard.theme].length)];
  624.                
  625.                 narrative = `<span class="dream-symbol">${currentCard.symbol} ${currentCard.name}</span> ${opening} a ${descriptor} presence in ${environment}, `;
  626.             }
  627.             // Subsequent cards with context awareness
  628.             else {
  629.                 const transition = components.transitions[Math.floor(Math.random() * components.transitions.length)];
  630.                
  631.                 narrative = `${transition} `;
  632.                
  633.                 // Check for theme repetition or contrast
  634.                 if (prevCard1 && prevCard1.theme === currentCard.theme) {
  635.                    // Same theme as previous card
  636.                    const connection = components.connections[Math.floor(Math.random() * 2)]; // First two connections work for repetition
  637.                     narrative += `<span class="dream-symbol">${currentCard.symbol} ${currentCard.name}</span> appears, ${connection} ${prevCard1.theme} theme, `;
  638.                 } else if (prevCard1 && prevCard2 && prevCard1.theme === prevCard2.theme && prevCard1.theme !== currentCard.theme) {
  639.                    // Breaking a pattern of same themes
  640.                    narrative += `<span class="dream-symbol">${currentCard.symbol} ${currentCard.name}</span> disrupts the pattern, introducing a new ${currentCard.theme} element, `;
  641.                 } else if (prevCard1) {
  642.                     // Different theme from previous
  643.                     const connection = components.connections[2 + Math.floor(Math.random() * 3)]; // Last three connections work for contrast
  644.                     narrative += `<span class="dream-symbol">${currentCard.symbol} ${currentCard.name}</span> emerges, ${connection} ${prevCard1.theme} energy, `;
  645.                 } else {
  646.                     // Fallback
  647.                     narrative += `<span class="dream-symbol">${currentCard.symbol} ${currentCard.name}</span> manifests, `;
  648.                 }
  649.             }
  650.            
  651.             // Add action and environment based on current card
  652.             const action = components.actions[currentCard.theme][Math.floor(Math.random() * components.actions[currentCard.theme].length)];
  653.             const environment = components.environments[currentCard.theme][Math.floor(Math.random() * components.environments[currentCard.theme].length)];
  654.            
  655.             narrative += `${action} ${environment} and ${components.conclusions[Math.floor(Math.random() * components.conclusions.length)]}`;
  656.            
  657.             return narrative;
  658.         }
  659.  
  660.         function renderHand() {
  661.             const handElement = document.getElementById('hand-cards');
  662.             handElement.innerHTML = '';
  663.            
  664.             gameState.hand.forEach((card, index) => {
  665.                 const cardElement = document.createElement('div');
  666.                 cardElement.className = 'card';
  667.                 cardElement.onclick = () => playCard(index);
  668.                
  669.                 // Add sentiment-based border color
  670.                 let borderColor = '#bd93f9'; // default
  671.                 if (card.sentiment === 'positive') borderColor = '#50fa7b';
  672.                 if (card.sentiment === 'negative') borderColor = '#ff5555';
  673.                
  674.                 cardElement.style.borderColor = borderColor;
  675.                 cardElement.innerHTML = `
  676.                     <div class="card-symbol">${card.symbol}</div>
  677.                     <div class="card-name">${card.name}</div>
  678.                     <div class="card-power">Power: ${card.power}</div>
  679.                     <div class="card-power">${card.sentiment}</div>
  680.                 `;
  681.                 handElement.appendChild(cardElement);
  682.             });
  683.         }
  684.  
  685.         function updateDisplay() {
  686.             document.getElementById('stability').textContent = gameState.stability;
  687.             document.getElementById('cards-played').textContent = gameState.cardsPlayed;
  688.             document.getElementById('dream-depth').textContent = gameState.dreamDepth;
  689.            
  690.             // Update stability color
  691.             const stabilityElement = document.getElementById('stability');
  692.             if (gameState.stability > 60) {
  693.                 stabilityElement.style.color = '#50fa7b';
  694.             } else if (gameState.stability > 30) {
  695.                 stabilityElement.style.color = '#f1fa8c';
  696.             } else {
  697.                 stabilityElement.style.color = '#ff5555';
  698.             }
  699.         }
  700.  
  701.         function endDream() {
  702.             const modal = document.getElementById('game-over-modal');
  703.             const finalNarrative = document.getElementById('final-narrative');
  704.            
  705.             finalNarrative.innerHTML = `
  706.                 Your dream lasted for ${gameState.cardsPlayed} fragments,
  707.                 reaching a depth of ${gameState.dreamDepth} layers.<br><br>
  708.                 Final vision: ${gameState.narrative[gameState.narrative.length - 1]}
  709.             `;
  710.            
  711.             modal.style.display = 'block';
  712.         }
  713.  
  714.         function resetDream() {
  715.             gameState = {
  716.                 hand: [],
  717.                 stability: 100,
  718.                 cardsPlayed: 0,
  719.                 dreamDepth: 0,
  720.                 narrative: [],
  721.                 themes: [],
  722.                 lastCards: []
  723.             };
  724.            
  725.             document.getElementById('narrative').innerHTML = 'The dreamscape awaits your first fragment...';
  726.             document.getElementById('warning').style.display = 'none';
  727.             document.getElementById('game-over-modal').style.display = 'none';
  728.            
  729.             initGame();
  730.         }
  731.  
  732.         // Start game on load
  733.         window.onload = initGame;
  734.     </script>
  735. </body>
  736. </html>
  737.  
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!