API tools faq
paste
XTaylorSpenceX

Sentient Crystal Garden

XTaylorSpenceX
Sep 14th, 2025
121
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 41.92 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>Sentient Crystal Garden</title>
  7.     <style>
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.             box-sizing: border-box;
  12.         }
  13.  
  14.         body {
  15.             font-family: 'Segoe UI', system-ui, sans-serif;
  16.             background: linear-gradient(135deg, #0a0e27 0%, #1a0b2e 50%, #2d1b69 100%);
  17.             color: #e0e0ff;
  18.             min-height: 100vh;
  19.             overflow-x: hidden;
  20.             position: relative;
  21.         }
  22.  
  23.         body::before {
  24.             content: '';
  25.             position: fixed;
  26.             top: 0;
  27.             left: 0;
  28.             width: 100%;
  29.             height: 100%;
  30.             background:
  31.                 radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
  32.                 radial-gradient(circle at 80% 80%, rgba(255, 119, 198, 0.2) 0%, transparent 50%);
  33.             pointer-events: none;
  34.             animation: nebula 20s ease-in-out infinite;
  35.         }
  36.  
  37.         @keyframes nebula {
  38.             0%, 100% { transform: rotate(0deg) scale(1); }
  39.             50% { transform: rotate(180deg) scale(1.1); }
  40.         }
  41.  
  42.         .container {
  43.             max-width: 1400px;
  44.             margin: 0 auto;
  45.             padding: 20px;
  46.             position: relative;
  47.             z-index: 1;
  48.         }
  49.  
  50.         header {
  51.             text-align: center;
  52.             margin-bottom: 30px;
  53.             animation: fadeIn 1s ease-out;
  54.         }
  55.  
  56.         h1 {
  57.             font-size: 2.5em;
  58.             background: linear-gradient(135deg, #a8edea 0%, #fed6e3 50%, #c3a8ff 100%);
  59.             -webkit-background-clip: text;
  60.             -webkit-text-fill-color: transparent;
  61.             margin-bottom: 10px;
  62.         }
  63.  
  64.         .subtitle {
  65.             color: #b8b8ff;
  66.             font-size: 1.1em;
  67.             opacity: 0.9;
  68.         }
  69.  
  70.         .game-area {
  71.             display: grid;
  72.             grid-template-columns: 300px 1fr;
  73.             gap: 30px;
  74.             margin-bottom: 30px;
  75.         }
  76.  
  77.         .control-panel {
  78.             background: rgba(255, 255, 255, 0.05);
  79.             border: 1px solid rgba(255, 255, 255, 0.1);
  80.             border-radius: 15px;
  81.             padding: 20px;
  82.             backdrop-filter: blur(10px);
  83.         }
  84.  
  85.         .crystal-garden {
  86.             background: rgba(255, 255, 255, 0.03);
  87.             border: 1px solid rgba(255, 255, 255, 0.1);
  88.             border-radius: 15px;
  89.             padding: 30px;
  90.             min-height: 500px;
  91.             position: relative;
  92.             backdrop-filter: blur(5px);
  93.         }
  94.  
  95.         .crystal-container {
  96.             display: grid;
  97.             grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  98.             gap: 30px;
  99.             position: relative;
  100.         }
  101.  
  102.         .crystal {
  103.             width: 120px;
  104.             height: 150px;
  105.             position: relative;
  106.             cursor: pointer;
  107.             transition: all 0.3s ease;
  108.             animation: float 4s ease-in-out infinite;
  109.         }
  110.  
  111.         .crystal:nth-child(2n) { animation-delay: -2s; }
  112.         .crystal:nth-child(3n) { animation-delay: -1s; }
  113.         .crystal:nth-child(4n) { animation-delay: -3s; }
  114.  
  115.         @keyframes float {
  116.             0%, 100% { transform: translateY(0); }
  117.             50% { transform: translateY(-10px); }
  118.         }
  119.  
  120.         .crystal:hover {
  121.             transform: scale(1.1) translateY(-5px);
  122.         }
  123.  
  124.         .crystal-body {
  125.             width: 100%;
  126.             height: 100px;
  127.             position: relative;
  128.             transform-style: preserve-3d;
  129.             animation: rotate 10s linear infinite;
  130.         }
  131.  
  132.         @keyframes rotate {
  133.             0% { transform: rotateY(0deg) rotateX(5deg); }
  134.             100% { transform: rotateY(360deg) rotateX(5deg); }
  135.         }
  136.  
  137.         .crystal-top {
  138.             width: 0;
  139.             height: 0;
  140.             border-left: 60px solid transparent;
  141.             border-right: 60px solid transparent;
  142.             border-bottom: 40px solid;
  143.             filter: brightness(1.2);
  144.         }
  145.  
  146.         .crystal-bottom {
  147.             width: 120px;
  148.             height: 60px;
  149.             position: absolute;
  150.             bottom: 0;
  151.             clip-path: polygon(50% 100%, 0 0, 100% 0);
  152.         }
  153.  
  154.         .crystal.dormant .crystal-top,
  155.         .crystal.dormant .crystal-bottom {
  156.             background: linear-gradient(135deg, #4a4a6a, #5a5a7a);
  157.             border-color: #6a6a8a;
  158.             filter: brightness(0.5);
  159.         }
  160.  
  161.         .crystal.balanced .crystal-top,
  162.         .crystal.balanced .crystal-bottom {
  163.             background: linear-gradient(135deg, #4facfe, #00f2fe);
  164.             border-color: #00d4ff;
  165.             box-shadow: 0 0 20px rgba(0, 212, 255, 0.6);
  166.         }
  167.  
  168.         .crystal.arrogant .crystal-top,
  169.         .crystal.arrogant .crystal-bottom {
  170.             background: linear-gradient(135deg, #fa709a, #fee140);
  171.             border-color: #ffaa00;
  172.             box-shadow: 0 0 30px rgba(255, 170, 0, 0.8);
  173.             animation: pulse 1s ease-in-out infinite;
  174.         }
  175.  
  176.         .crystal.neutral .crystal-top,
  177.         .crystal.neutral .crystal-bottom {
  178.             background: linear-gradient(135deg, #7befb2, #50c878);
  179.             border-color: #2e8b57;
  180.             box-shadow: 0 0 20px rgba(46, 139, 87, 0.6);
  181.         }
  182.  
  183.         @keyframes pulse {
  184.             0%, 100% { filter: brightness(1.2); }
  185.             50% { filter: brightness(1.5); }
  186.         }
  187.  
  188.         .crystal-info {
  189.             text-align: center;
  190.             margin-top: 10px;
  191.             font-size: 0.85em;
  192.         }
  193.  
  194.         .crystal-name {
  195.             font-weight: bold;
  196.             color: #c8c8ff;
  197.             margin-bottom: 3px;
  198.         }
  199.  
  200.         .crystal-personality {
  201.             color: #a8a8cc;
  202.             font-style: italic;
  203.             font-size: 0.9em;
  204.         }
  205.  
  206.         .feed-input {
  207.             width: 100%;
  208.             padding: 10px;
  209.             background: rgba(255, 255, 255, 0.1);
  210.             border: 1px solid rgba(255, 255, 255, 0.2);
  211.             border-radius: 8px;
  212.             color: #fff;
  213.             font-size: 14px;
  214.             margin-bottom: 10px;
  215.         }
  216.  
  217.         .feed-buttons {
  218.             display: grid;
  219.             grid-template-columns: repeat(2, 1fr);
  220.             gap: 10px;
  221.             margin-bottom: 15px;
  222.         }
  223.  
  224.         .feed-btn {
  225.             padding: 8px 12px;
  226.             background: linear-gradient(135deg, #667eea, #764ba2);
  227.             border: none;
  228.             border-radius: 8px;
  229.             color: white;
  230.             cursor: pointer;
  231.             font-size: 12px;
  232.             transition: all 0.3s ease;
  233.         }
  234.  
  235.         .feed-btn:hover {
  236.             transform: translateY(-2px);
  237.             box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
  238.         }
  239.  
  240.         .mystery-panel {
  241.             background: rgba(255, 255, 255, 0.05);
  242.             border: 1px solid rgba(255, 255, 255, 0.1);
  243.             border-radius: 15px;
  244.             padding: 20px;
  245.             margin-top: 30px;
  246.             backdrop-filter: blur(10px);
  247.         }
  248.  
  249.         .mystery-challenge {
  250.             background: rgba(255, 255, 255, 0.08);
  251.             border-radius: 10px;
  252.             padding: 15px;
  253.             margin-bottom: 15px;
  254.             min-height: 80px;
  255.         }
  256.  
  257.         .solve-btn {
  258.             width: 100%;
  259.             padding: 12px;
  260.             background: linear-gradient(135deg, #f093fb, #f5576c);
  261.             border: none;
  262.             border-radius: 10px;
  263.             color: white;
  264.             font-weight: bold;
  265.             cursor: pointer;
  266.         }
  267.  
  268.         .solve-btn:disabled {
  269.             opacity: 0.5;
  270.             cursor: not-allowed;
  271.         }
  272.  
  273.         .stats {
  274.             display: grid;
  275.             grid-template-columns: repeat(2, 1fr);
  276.             gap: 10px;
  277.             margin-top: 20px;
  278.             padding: 15px;
  279.             background: rgba(255, 255, 255, 0.05);
  280.             border-radius: 10px;
  281.         }
  282.  
  283.         .stat {
  284.             text-align: center;
  285.         }
  286.  
  287.         .stat-label {
  288.             font-size: 0.85em;
  289.             color: #a8a8cc;
  290.             margin-bottom: 5px;
  291.         }
  292.  
  293.         .stat-value {
  294.             font-size: 1.2em;
  295.             font-weight: bold;
  296.             color: #4facfe;
  297.         }
  298.  
  299.         .particle {
  300.             position: absolute;
  301.             width: 4px;
  302.             height: 4px;
  303.             background: radial-gradient(circle, rgba(255, 255, 255, 0.8), transparent);
  304.             border-radius: 50%;
  305.             pointer-events: none;
  306.             animation: particle-float 3s ease-out forwards;
  307.         }
  308.  
  309.         @keyframes particle-float {
  310.             0% {
  311.                 transform: translate(0, 0) scale(1);
  312.                 opacity: 1;
  313.             }
  314.             100% {
  315.                 transform: translate(var(--tx), var(--ty)) scale(0);
  316.                 opacity: 0;
  317.             }
  318.         }
  319.  
  320.         @keyframes fadeIn {
  321.             from { opacity: 0; transform: translateY(-20px); }
  322.             to { opacity: 1; transform: translateY(0); }
  323.         }
  324.  
  325.         .notification {
  326.             position: fixed;
  327.             top: 20px;
  328.             right: 20px;
  329.             padding: 15px 20px;
  330.             background: linear-gradient(135deg, rgba(79, 172, 254, 0.9), rgba(102, 126, 234, 0.9));
  331.             border-radius: 10px;
  332.             color: white;
  333.             font-weight: bold;
  334.             z-index: 1000;
  335.             animation: slideNotification 0.5s ease-out;
  336.         }
  337.  
  338.         @keyframes slideNotification {
  339.             from { transform: translateX(400px); }
  340.             to { transform: translateX(0); }
  341.         }
  342.  
  343.         .crystal-speech {
  344.             position: absolute;
  345.             bottom: 100%;
  346.             left: 50%;
  347.             transform: translateX(-50%);
  348.             background: rgba(255, 255, 255, 0.95);
  349.             color: #333;
  350.             padding: 8px 12px;
  351.             border-radius: 8px;
  352.             font-size: 0.85em;
  353.             white-space: nowrap;
  354.             pointer-events: none;
  355.             opacity: 0;
  356.             transition: opacity 0.3s ease;
  357.             z-index: 10;
  358.         }
  359.  
  360.         .crystal-speech.show {
  361.             opacity: 1;
  362.         }
  363.        
  364.         .crystal-counter {
  365.             position: absolute;
  366.             top: 15px;
  367.             right: 15px;
  368.             background: rgba(255, 255, 255, 0.1);
  369.             padding: 5px 10px;
  370.             border-radius: 10px;
  371.             font-size: 0.9em;
  372.             color: #a8a8cc;
  373.         }
  374.        
  375.         .new-crystal-notification {
  376.             position: absolute;
  377.             bottom: 20px;
  378.             left: 50%;
  379.             transform: translateX(-50%);
  380.             background: linear-gradient(135deg, rgba(79, 172, 254, 0.9), rgba(102, 126, 234, 0.9));
  381.             padding: 10px 15px;
  382.             border-radius: 10px;
  383.             color: white;
  384.             font-weight: bold;
  385.             z-index: 100;
  386.             animation: fadeIn 0.5s ease-out;
  387.         }
  388.        
  389.         .personality-info {
  390.             margin-top: 15px;
  391.             padding: 10px;
  392.             background: rgba(255, 255, 255, 0.05);
  393.             border-radius: 8px;
  394.             font-size: 0.9em;
  395.         }
  396.        
  397.         .personality-info h4 {
  398.             color: #c8c8ff;
  399.             margin-bottom: 5px;
  400.         }
  401.        
  402.         .personality-info ul {
  403.             padding-left: 20px;
  404.         }
  405.        
  406.         .personality-info li {
  407.             margin-bottom: 3px;
  408.             color: #a8a8cc;
  409.         }
  410.     </style>
  411. </head>
  412. <body>
  413.     <div class="container">
  414.         <header>
  415.             <h1>Sentient Crystal Garden</h1>
  416.             <div class="subtitle">Nurture mathematical consciousness through pure concepts</div>
  417.         </header>
  418.  
  419.         <div class="game-area">
  420.             <div class="control-panel">
  421.                 <h3 style="margin-bottom: 15px; color: #c8c8ff;">Feed Mathematics</h3>
  422.                
  423.                 <div class="feed-controls">
  424.                     <input type="text" class="feed-input" id="mathInput"
  425.                           placeholder="Enter: prime (17), ratio (1.618), number">
  426.                    
  427.                     <div class="feed-buttons">
  428.                         <button class="feed-btn" onclick="feedConcept('prime')">Prime Number</button>
  429.                         <button class="feed-btn" onclick="feedConcept('fibonacci')">Fibonacci</button>
  430.                         <button class="feed-btn" onclick="feedConcept('golden')">Golden Ratio</button>
  431.                         <button class="feed-btn" onclick="feedConcept('pi')">Pi Digits</button>
  432.                         <button class="feed-btn" onclick="feedConcept('euler')">Euler's Number</button>
  433.                         <button class="feed-btn" onclick="feedConcept('perfect')">Perfect Square</button>
  434.                         <button class="feed-btn" onclick="feedConcept('complex')">Complex Number</button>
  435.                         <button class="feed-btn" onclick="feedConcept('random')">Random Value</button>
  436.                     </div>
  437.                    
  438.                     <button class="feed-btn" style="width: 100%; background: linear-gradient(135deg, #4facfe, #00f2fe);"
  439.                            onclick="feedCustom()">Feed Custom Concept</button>
  440.                 </div>
  441.  
  442.                 <div class="stats">
  443.                     <div class="stat">
  444.                         <div class="stat-label">Crystals</div>
  445.                         <div class="stat-value" id="crystalCount">0</div>
  446.                     </div>
  447.                     <div class="stat">
  448.                         <div class="stat-label">Balanced</div>
  449.                         <div class="stat-value" id="balancedCount">0</div>
  450.                     </div>
  451.                     <div class="stat">
  452.                         <div class="stat-label">Neutral</div>
  453.                         <div class="stat-value" id="neutralCount">0</div>
  454.                     </div>
  455.                     <div class="stat">
  456.                         <div class="stat-label">Council Power</div>
  457.                         <div class="stat-value" id="councilPower">0</div>
  458.                     </div>
  459.                     <div class="stat">
  460.                         <div class="stat-label">Mysteries</div>
  461.                         <div class="stat-value" id="mysteriesSolved">0</div>
  462.                     </div>
  463.                 </div>
  464.                
  465.                 <div class="personality-info">
  466.                     <h4>Crystal Personalities:</h4>
  467.                     <ul>
  468.                         <li><strong>Dormant</strong> (Gray): New or inactive crystals</li>
  469.                         <li><strong>Balanced</strong> (Blue): Harmonious and wise</li>
  470.                         <li><strong>Arrogant</strong> (Orange): Prideful and uncooperative</li>
  471.                         <li><strong>Neutral</strong> (Green): Balanced but not deeply connected</li>
  472.                     </ul>
  473.                 </div>
  474.             </div>
  475.  
  476.             <div class="crystal-garden">
  477.                 <div class="crystal-counter" id="crystalCounter">3/10 Crystals</div>
  478.                 <div class="crystal-container" id="crystalContainer"></div>
  479.             </div>
  480.         </div>
  481.  
  482.         <div class="mystery-panel">
  483.             <h3 style="margin-bottom: 15px; color: #c8c8ff;">Mathematical Mystery</h3>
  484.             <div class="mystery-challenge">
  485.                 <div id="mysteryText">Grow a balanced crystal council to unlock mysteries...</div>
  486.                 <div id="mysteryFlavor" style="font-style: italic; margin-top: 8px; color: #a8a8cc; font-size: 0.9em;"></div>
  487.             </div>
  488.             <button class="solve-btn" id="solveBtn" onclick="attemptSolve()" disabled>
  489.                 Council Not Ready
  490.             </button>
  491.         </div>
  492.     </div>
  493.  
  494.     <script>
  495.         // Expanded list of mathematical mysteries
  496.         const MYSTERIES = [
  497.             { text: "Find the next prime: 2, 3, 5, 7, 11, ?", answer: 13, difficulty: 1, flavor: "Prime numbers are the atoms of mathematics." },
  498.             { text: "Calculate: Fibonacci(8) + Golden Ratio rounded", answer: 23, difficulty: 2, flavor: "Nature's patterns reveal themselves in numbers." },
  499.             { text: "Sum of first 5 perfect squares", answer: 55, difficulty: 2, flavor: "Squares build the foundation of geometry." },
  500.             { text: "What is the value of 4! (4 factorial)?", answer: 24, difficulty: 1, flavor: "Factorials count arrangements and possibilities." },
  501.             { text: "Solve for x: 3x + 7 = 22", answer: 5, difficulty: 1, flavor: "Algebra is the language of patterns." },
  502.             { text: "What is the area of a circle with radius 4?", answer: 50.27, difficulty: 2, flavor: "Circles contain infinite symmetry." },
  503.             { text: "Calculate 2^10", answer: 1024, difficulty: 1, flavor: "Exponential growth shapes our universe." },
  504.             { text: "What is the 10th triangular number?", answer: 55, difficulty: 2, flavor: "Triangular numbers appear in surprising places." },
  505.             { text: "Find the GCD of 36 and 24", answer: 12, difficulty: 1, flavor: "Common divisors reveal hidden relationships." },
  506.             { text: "What is the value of sin(π/2)?", answer: 1, difficulty: 2, flavor: "Trigonometry connects angles to cycles." },
  507.             { text: "Solve: 1 + 2 + 3 + ... + 10", answer: 55, difficulty: 1, flavor: "Sums accumulate meaning from repetition." },
  508.             { text: "What is Euler's number (e) to 2 decimal places?", answer: 2.72, difficulty: 2, flavor: "e emerges from continuous growth." },
  509.             { text: "How many sides does a dodecagon have?", answer: 12, difficulty: 1, flavor: "Polygons shape our spatial understanding." },
  510.             { text: "What is the volume of a cube with side length 3?", answer: 27, difficulty: 1, flavor: "Cubes extend squares into space." },
  511.             { text: "Calculate 7 × 8 + 4", answer: 60, difficulty: 1, flavor: "Operations follow a sacred order." },
  512.             { text: "What is the Pythagorean triple with legs 5 and 12?", answer: 13, difficulty: 2, flavor: "Right triangles hold ancient secrets." },
  513.             { text: "Find the LCM of 6 and 8", answer: 24, difficulty: 1, flavor: "Multiples create harmonious rhythms." },
  514.             { text: "What is the value of 10 choose 3?", answer: 120, difficulty: 3, flavor: "Combinations reveal possible futures." },
  515.             { text: "Solve: 2³ + 3²", answer: 17, difficulty: 1, flavor: "Powers amplify numerical essence." },
  516.             { text: "What is the derivative of x²?", answer: "2x", difficulty: 3, flavor: "Calculus measures change itself." },
  517.             { text: "How many degrees in a right angle?", answer: 90, difficulty: 1, flavor: "Angles define our spatial reality." },
  518.             { text: "What is the sum of interior angles in a pentagon?", answer: 540, difficulty: 2, flavor: "Polygons contain hidden angular sums." },
  519.             { text: "Calculate 15% of 200", answer: 30, difficulty: 1, flavor: "Percentages reveal proportional relationships." },
  520.             { text: "What is the next number: 1, 1, 2, 3, 5, 8, 13, ?", answer: 21, difficulty: 2, flavor: "Fibonacci appears throughout nature." },
  521.             { text: "Solve: 3(x - 4) = 15", answer: 9, difficulty: 2, flavor: "Algebra unlocks unknown quantities." },
  522.             { text: "What is the square root of 144?", answer: 12, difficulty: 1, flavor: "Roots reverse the action of squares." },
  523.             { text: "How many sides on a hexagon?", answer: 6, difficulty: 1, flavor: "Hexagons tile the plane with efficiency." },
  524.             { text: "What is 10 mod 3?", answer: 1, difficulty: 1, flavor: "Modular arithmetic creates cyclic patterns." },
  525.             { text: "Calculate the area of a triangle with base 6 and height 4", answer: 12, difficulty: 1, flavor: "Triangles are the fundamental polygon." },
  526.             { text: "What is the value of 0!?", answer: 1, difficulty: 2, flavor: "Empty products have defined values." },
  527.             { text: "Solve: 2x² - 8 = 0", answer: "2, -2", difficulty: 2, flavor: "Quadratic equations have dual solutions." },
  528.             { text: "What is the golden ratio conjugate (φ)?", answer: 0.618, difficulty: 3, flavor: "The golden ratio appears in aesthetic perfection." },
  529.             { text: "How many prime numbers between 10 and 20?", answer: 4, difficulty: 2, flavor: "Primes become rarer but never cease." },
  530.             { text: "What is the value of 8 × 7 - 6 ÷ 2?", answer: 53, difficulty: 2, flavor: "Order of operations must be respected." },
  531.             { text: "Calculate the circumference of a circle with diameter 10", answer: 31.42, difficulty: 2, flavor: "π connects linear and circular measure." },
  532.             { text: "What is the 6th term of the geometric sequence: 3, 6, 12, 24...?", answer: 96, difficulty: 2, flavor: "Geometric sequences grow exponentially." },
  533.             { text: "Solve: log₂(16)", answer: 4, difficulty: 2, flavor: "Logarithms are the exponents of growth." },
  534.             { text: "What is the sum of the first 10 natural numbers?", answer: 55, difficulty: 1, flavor: "Sums accumulate meaning from repetition." },
  535.             { text: "How many edges does a cube have?", answer: 12, difficulty: 1, flavor: "Polyhedra extend polygons into space." },
  536.             { text: "What is the value of 5³ - 4²?", answer: 109, difficulty: 2, flavor: "Powers and roots create numerical landscapes." },
  537.             { text: "Solve: 2⁴ × 2²", answer: 64, difficulty: 1, flavor: "Exponent rules simplify complex calculations." },
  538.             { text: "What is the median of: 3, 1, 7, 5, 9?", answer: 5, difficulty: 1, flavor: "Central tendencies reveal data's heart." },
  539.             { text: "Calculate 1/2 + 1/3 + 1/6", answer: 1, difficulty: 2, flavor: "Fractions combine to create wholes." },
  540.             { text: "What is the value of 10P2 (permutations)?", answer: 90, difficulty: 3, flavor: "Permutations count ordered arrangements." },
  541.             { text: "Solve: 3! + 4! - 2!", answer: 28, difficulty: 2, flavor: "Factorials grow at an astonishing rate." },
  542.             { text: "What is the probability of rolling a 7 with two dice?", answer: "1/6", difficulty: 2, flavor: "Probability quantifies uncertainty." },
  543.             { text: "Calculate the diagonal of a 3×4 rectangle", answer: 5, difficulty: 2, flavor: "Diagonals reveal hidden connections." },
  544.             { text: "What is the value of i²?", answer: -1, difficulty: 3, flavor: "Imaginary numbers expand our mathematical reality." },
  545.             { text: "Solve: 1 + 3 + 5 + 7 + 9", answer: 25, difficulty: 1, flavor: "Sums of odds create perfect squares." },
  546.             { text: "What is the surface area of a sphere with radius 2?", answer: 50.27, difficulty: 3, flavor: "Spheres maximize volume for surface area." },
  547.             { text: "Prove the Riemann Hypothesis", answer: "Solved", difficulty: 10, flavor: "Some mysteries require transcendent wisdom." },
  548.             { text: "Find a perfect odd number", answer: "Solved", difficulty: 10, flavor: "Some patterns may not exist in our universe." },
  549.             { text: "Determine if P=NP", answer: "Solved", difficulty: 10, flavor: "Complexity theory questions the nature of computation." },
  550.             { text: "Find a non-trivial zero of the zeta function not on the critical line", answer: "Solved", difficulty: 10, flavor: "Some patterns hold against all examination." },
  551.             { text: "Prove the Collatz Conjecture", answer: "Solved", difficulty: 10, flavor: "Simple rules can generate profound complexity." }
  552.         ];
  553.  
  554.         // Crystal class
  555.         class Crystal {
  556.             constructor(id) {
  557.                 this.id = id;
  558.                 this.name = this.generateName();
  559.                 this.feedCount = 0;
  560.                 this.mathDiet = [];
  561.                 this.personality = 'dormant';
  562.                 this.traits = {
  563.                     wisdom: 0,
  564.                     arrogance: 0,
  565.                     cooperation: 5,
  566.                     power: 0,
  567.                     neutrality: 5
  568.                 };
  569.                 this.element = null;
  570.                 this.lastFed = Date.now();
  571.             }
  572.  
  573.             generateName() {
  574.                 const prefixes = ['Zeta', 'Phi', 'Omega', 'Delta', 'Sigma', 'Theta', 'Lambda', 'Gamma', 'Alpha', 'Beta'];
  575.                 const suffixes = ['trix', 'lon', 'dor', 'kan', 'vel', 'nis', 'ros', 'mal', 'thos', 'quar'];
  576.                 return prefixes[Math.floor(Math.random() * prefixes.length)] +
  577.                        suffixes[Math.floor(Math.random() * suffixes.length)];
  578.             }
  579.  
  580.             feed(concept, value) {
  581.                 this.feedCount++;
  582.                 this.mathDiet.push({ concept, value, time: Date.now() });
  583.                 this.lastFed = Date.now();
  584.  
  585.                 switch(concept) {
  586.                     case 'prime':
  587.                         this.traits.wisdom += 2;
  588.                         this.traits.power += 1;
  589.                         this.traits.neutrality -= 1;
  590.                         break;
  591.                     case 'golden':
  592.                     case 'fibonacci':
  593.                         this.traits.cooperation += 2;
  594.                         this.traits.wisdom += 1;
  595.                         this.traits.neutrality -= 1;
  596.                         break;
  597.                     case 'pi':
  598.                     case 'euler':
  599.                         this.traits.wisdom += 3;
  600.                         this.traits.neutrality -= 1;
  601.                         break;
  602.                     case 'perfect':
  603.                         this.traits.power += 2;
  604.                         this.traits.arrogance += 1;
  605.                         this.traits.neutrality -= 1;
  606.                         break;
  607.                     case 'complex':
  608.                         this.traits.neutrality += 2;
  609.                         this.traits.wisdom += 1;
  610.                         break;
  611.                     case 'random':
  612.                         this.traits.neutrality += 3;
  613.                         break;
  614.                     default:
  615.                         this.traits.power += 1;
  616.                         this.traits.wisdom += 1;
  617.                         this.traits.neutrality += 0.5;
  618.                 }
  619.  
  620.                 // Determine personality based on trait balance
  621.                 if (this.feedCount < 2) {
  622.                    this.personality = 'dormant';
  623.                } else if (this.traits.arrogance > 8 || this.feedCount > 12) {
  624.                     this.personality = 'arrogant';
  625.                     this.traits.cooperation = Math.max(0, this.traits.cooperation - 2);
  626.                 } else if (this.traits.cooperation > 7 && this.traits.wisdom > 5 && this.traits.arrogance < 5) {
  627.                    this.personality = 'balanced';
  628.                 } else if (this.traits.neutrality > 7) {
  629.                     this.personality = 'neutral';
  630.                 } else if (this.feedCount >= 3 && this.feedCount <= 8 && this.traits.cooperation > 5) {
  631.                    this.personality = 'balanced';
  632.                 } else {
  633.                     this.personality = 'neutral';
  634.                 }
  635.  
  636.                 this.updateDisplay();
  637.                 this.showReaction();
  638.             }
  639.  
  640.             showReaction() {
  641.                 const reactions = {
  642.                     'dormant': ['...', 'Mmm...', '*yawn*'],
  643.                     'balanced': ['Fascinating!', 'Perfect harmony', 'I understand now', 'This resonates'],
  644.                     'arrogant': ['Too simple!', 'I knew that', 'Boring...', 'Child\'s play'],
  645.                     'neutral': ['Interesting', 'I observe', 'Noted', 'Acceptable']
  646.                 };
  647.  
  648.                 const speech = this.element.querySelector('.crystal-speech');
  649.                 speech.textContent = reactions[this.personality][Math.floor(Math.random() * reactions[this.personality].length)];
  650.                 speech.classList.add('show');
  651.                
  652.                 setTimeout(() => speech.classList.remove('show'), 2000);
  653.                 this.createParticles();
  654.             }
  655.  
  656.             createParticles() {
  657.                 const colors = {
  658.                     'dormant': '#6a6a8a',
  659.                     'balanced': '#00d4ff',
  660.                     'arrogant': '#ffaa00',
  661.                     'neutral': '#2e8b57'
  662.                 };
  663.                
  664.                 for (let i = 0; i < 8; i++) {
  665.                    const particle = document.createElement('div');
  666.                    particle.className = 'particle';
  667.                    particle.style.left = '60px';
  668.                    particle.style.top = '50px';
  669.                    particle.style.background = `radial-gradient(circle, ${colors[this.personality]}, transparent)`;
  670.                    particle.style.setProperty('--tx', (Math.random() - 0.5) * 100 + 'px');
  671.                    particle.style.setProperty('--ty', (Math.random() - 0.5) * 100 + 'px');
  672.                    this.element.appendChild(particle);
  673.                    setTimeout(() => particle.remove(), 3000);
  674.                 }
  675.             }
  676.  
  677.             updateDisplay() {
  678.                 if (!this.element) return;
  679.                
  680.                 this.element.className = 'crystal ' + this.personality;
  681.                 const personalityText = this.element.querySelector('.crystal-personality');
  682.                
  683.                 const descriptions = {
  684.                     'dormant': 'Sleeping...',
  685.                     'balanced': 'Harmonious & Wise',
  686.                    'arrogant': 'Prideful & Uncooperative',
  687.                    'neutral': 'Neutral Observer'
  688.                };
  689.                
  690.                 personalityText.textContent = descriptions[this.personality];
  691.             }
  692.  
  693.             calculatePower() {
  694.                 if (this.personality === 'arrogant') return this.traits.power * 0.3;
  695.                 if (this.personality === 'balanced') return this.traits.power * 1.5 + this.traits.wisdom;
  696.                 if (this.personality === 'neutral') return this.traits.power * 0.7 + this.traits.wisdom * 0.5;
  697.                 return this.traits.power * 0.1;
  698.             }
  699.         }
  700.  
  701.         // Garden class
  702.         class CrystalGarden {
  703.             constructor() {
  704.                 this.crystals = [];
  705.                 this.mysteriesSolved = 0;
  706.                 this.currentMystery = null;
  707.                 this.maxCrystals = 10;
  708.                 this.selectedCrystal = null;
  709.                 this.usedMysteries = new Set();
  710.                 this.init();
  711.             }
  712.  
  713.             init() {
  714.                 for (let i = 0; i < 3; i++) {
  715.                    this.addCrystal();
  716.                }
  717.                this.generateMystery();
  718.                this.updateStats();
  719.            }
  720.  
  721.            addCrystal() {
  722.                if (this.crystals.length >= this.maxCrystals) return;
  723.                
  724.                 const crystal = new Crystal(this.crystals.length);
  725.                 this.crystals.push(crystal);
  726.                
  727.                 const container = document.getElementById('crystalContainer');
  728.                 const crystalEl = document.createElement('div');
  729.                 crystalEl.className = 'crystal dormant';
  730.                 crystalEl.innerHTML = '<div class="crystal-speech"></div>' +
  731.                     '<div class="crystal-body">' +
  732.                     '<div class="crystal-top"></div>' +
  733.                     '<div class="crystal-bottom"></div>' +
  734.                     '</div>' +
  735.                     '<div class="crystal-info">' +
  736.                     '<div class="crystal-name">' + crystal.name + '</div>' +
  737.                     '<div class="crystal-personality">Sleeping...</div>' +
  738.                     '</div>';
  739.                
  740.                 crystal.element = crystalEl;
  741.                 crystalEl.onclick = () => this.selectCrystal(crystal);
  742.                 container.appendChild(crystalEl);
  743.                
  744.                 this.updateStats();
  745.                
  746.                 // Show notification for new crystal
  747.                 if (this.crystals.length > 3) {
  748.                     this.showNewCrystalNotification();
  749.                 }
  750.             }
  751.  
  752.             showNewCrystalNotification() {
  753.                 const notification = document.createElement('div');
  754.                 notification.className = 'new-crystal-notification';
  755.                 notification.textContent = 'A new crystal has formed!';
  756.                
  757.                 const garden = document.querySelector('.crystal-garden');
  758.                 garden.appendChild(notification);
  759.                
  760.                 setTimeout(() => notification.remove(), 3000);
  761.             }
  762.  
  763.             selectCrystal(crystal) {
  764.                 this.selectedCrystal = crystal;
  765.                 document.querySelectorAll('.crystal').forEach(el => {
  766.                     el.style.filter = 'brightness(0.5)';
  767.                 });
  768.                 crystal.element.style.filter = 'brightness(1)';
  769.                 this.showNotification('Selected ' + crystal.name);
  770.             }
  771.  
  772.             feedSelectedCrystal(concept, value) {
  773.                 if (!this.selectedCrystal) {
  774.                     this.showNotification('Select a crystal first!');
  775.                     return;
  776.                 }
  777.                
  778.                 this.selectedCrystal.feed(concept, value);
  779.                 this.updateStats();
  780.                 this.checkMysteryReadiness();
  781.                
  782.                 // Chance of new crystal growth with more feedings
  783.                 if (Math.random() < 0.25 && this.crystals.length < this.maxCrystals) {
  784.                    setTimeout(() => this.addCrystal(), 1000);
  785.                 }
  786.             }
  787.  
  788.             generateMystery() {
  789.                 // Reset used mysteries if all have been used
  790.                 if (this.usedMysteries.size >= MYSTERIES.length) {
  791.                     this.usedMysteries.clear();
  792.                 }
  793.                
  794.                 // Find a mystery that hasn't been used recently
  795.                 let availableMysteries = MYSTERIES.filter((_, index) => !this.usedMysteries.has(index));
  796.                
  797.                 if (availableMysteries.length === 0) {
  798.                     // If all mysteries have been used, reset
  799.                     this.usedMysteries.clear();
  800.                     availableMysteries = MYSTERIES;
  801.                 }
  802.                
  803.                 // Select a random mystery from available ones
  804.                 const randomIndex = Math.floor(Math.random() * availableMysteries.length);
  805.                 this.currentMystery = availableMysteries[randomIndex];
  806.                
  807.                 // Mark this mystery as used
  808.                 const mysteryIndex = MYSTERIES.indexOf(this.currentMystery);
  809.                 this.usedMysteries.add(mysteryIndex);
  810.                
  811.                 document.getElementById('mysteryText').textContent = this.currentMystery.text;
  812.                 document.getElementById('mysteryFlavor').textContent = this.currentMystery.flavor;
  813.             }
  814.  
  815.             checkMysteryReadiness() {
  816.                 const balancedCrystals = this.crystals.filter(c => c.personality === 'balanced');
  817.                 const councilPower = this.calculateCouncilPower();
  818.                 const solveBtn = document.getElementById('solveBtn');
  819.                
  820.                 if (balancedCrystals.length >= 2 && councilPower >= this.currentMystery.difficulty * 10) {
  821.                    solveBtn.disabled = false;
  822.                     solveBtn.textContent = 'Solve Mystery!';
  823.                 } else {
  824.                     solveBtn.disabled = true;
  825.                     solveBtn.textContent = 'Need ' + Math.max(0, 2 - balancedCrystals.length) + ' more balanced crystals';
  826.                 }
  827.             }
  828.  
  829.             calculateCouncilPower() {
  830.                 return this.crystals.reduce((total, crystal) => total + crystal.calculatePower(), 0);
  831.             }
  832.  
  833.             attemptSolve() {
  834.                 const balancedCrystals = this.crystals.filter(c => c.personality === 'balanced');
  835.                
  836.                 if (balancedCrystals.length >= 2) {
  837.                     this.mysteriesSolved++;
  838.                     this.showNotification('Mystery Solved! Council wisdom prevails!');
  839.                    
  840.                     balancedCrystals.forEach(c => {
  841.                         c.traits.wisdom += 5;
  842.                         c.showReaction();
  843.                     });
  844.                    
  845.                     this.generateMystery();
  846.                     this.updateStats();
  847.                     this.checkMysteryReadiness();
  848.                 }
  849.             }
  850.  
  851.             updateStats() {
  852.                 document.getElementById('crystalCount').textContent = this.crystals.length;
  853.                 document.getElementById('balancedCount').textContent =
  854.                     this.crystals.filter(c => c.personality === 'balanced').length;
  855.                 document.getElementById('neutralCount').textContent =
  856.                     this.crystals.filter(c => c.personality === 'neutral').length;
  857.                 document.getElementById('councilPower').textContent =
  858.                     Math.floor(this.calculateCouncilPower());
  859.                 document.getElementById('mysteriesSolved').textContent = this.mysteriesSolved;
  860.                 document.getElementById('crystalCounter').textContent =
  861.                     this.crystals.length + '/10 Crystals';
  862.             }
  863.  
  864.             showNotification(message) {
  865.                 const existing = document.querySelector('.notification');
  866.                 if (existing) existing.remove();
  867.                
  868.                 const notif = document.createElement('div');
  869.                 notif.className = 'notification';
  870.                 notif.textContent = message;
  871.                 document.body.appendChild(notif);
  872.                
  873.                 setTimeout(() => notif.remove(), 3000);
  874.             }
  875.         }
  876.  
  877.         // Math functions
  878.         function isPrime(n) {
  879.             if (n <= 1) return false;
  880.            for (let i = 2; i <= Math.sqrt(n); i++) {
  881.                if (n % i === 0) return false;
  882.            }
  883.            return true;
  884.        }
  885.  
  886.        function getFibonacci(n) {
  887.            if (n <= 1) return n;
  888.            let a = 0, b = 1;
  889.            for (let i = 2; i <= n; i++) {
  890.                let temp = b;
  891.                b = a + b;
  892.                a = temp;
  893.            }
  894.            return b;
  895.        }
  896.  
  897.        function isPerfectSquare(n) {
  898.            const sqrt = Math.sqrt(n);
  899.            return sqrt === Math.floor(sqrt);
  900.        }
  901.  
  902.        // Initialize
  903.        let garden = new CrystalGarden();
  904.  
  905.        // Feed functions
  906.        function feedConcept(type) {
  907.            let value;
  908.            switch(type) {
  909.                case 'prime':
  910.                    value = [2, 3, 5, 7, 11, 13, 17, 19, 23, 29][Math.floor(Math.random() * 10)];
  911.                    break;
  912.                case 'fibonacci':
  913.                    const n = Math.floor(Math.random() * 10) + 1;
  914.                    value = getFibonacci(n);
  915.                    break;
  916.                case 'golden':
  917.                    value = 1.618;
  918.                    break;
  919.                case 'pi':
  920.                    value = 3.14159;
  921.                    break;
  922.                case 'euler':
  923.                    value = 2.71828;
  924.                    break;
  925.                case 'perfect':
  926.                    value = [4, 9, 16, 25, 36, 49, 64, 81, 100][Math.floor(Math.random() * 9)];
  927.                    break;
  928.                case 'complex':
  929.                    value = [1, -1, Math.sqrt(2)][Math.floor(Math.random() * 3)];
  930.                    break;
  931.                case 'random':
  932.                    value = Math.floor(Math.random() * 100) + 1;
  933.                    break;
  934.            }
  935.            
  936.            garden.feedSelectedCrystal(type, value);
  937.        }
  938.  
  939.        function feedCustom() {
  940.            const input = document.getElementById('mathInput').value.trim();
  941.            if (!input) {
  942.                garden.showNotification('Enter a mathematical concept!');
  943.                return;
  944.            }
  945.            
  946.            const num = parseFloat(input);
  947.            if (!isNaN(num)) {
  948.                if (isPrime(Math.floor(num))) {
  949.                    garden.feedSelectedCrystal('prime', num);
  950.                } else if (isPerfectSquare(num)) {
  951.                    garden.feedSelectedCrystal('perfect', num);
  952.                } else if (Math.abs(num - 1.618) < 0.01) {
  953.                    garden.feedSelectedCrystal('golden', num);
  954.                } else if (Math.abs(num - 3.14159) < 0.01) {
  955.                    garden.feedSelectedCrystal('pi', num);
  956.                } else {
  957.                    garden.feedSelectedCrystal('equation', num);
  958.                }
  959.            } else {
  960.                garden.showNotification('Invalid mathematical concept!');
  961.            }
  962.            
  963.            document.getElementById('mathInput').value = '';
  964.        }
  965.  
  966.        function attemptSolve() {
  967.            garden.attemptSolve();
  968.        }
  969.  
  970.        // Keyboard shortcuts
  971.        document.addEventListener('keydown', (e) => {
  972.             if (e.key >= '1' && e.key <= '0') {
  973.                let index;
  974.                 if (e.key === '0') {
  975.                     index = 9;
  976.                 } else {
  977.                     index = parseInt(e.key) - 1;
  978.                 }
  979.                 if (index < garden.crystals.length) {
  980.                    garden.selectCrystal(garden.crystals[index]);
  981.                }
  982.            }
  983.        });
  984.  
  985.        // Aging system
  986.        setInterval(() => {
  987.             garden.crystals.forEach(crystal => {
  988.                 const timeSinceLastFed = Date.now() - crystal.lastFed;
  989.                 if (timeSinceLastFed > 30000 && crystal.personality === 'balanced') {
  990.                    crystal.traits.cooperation -= 1;
  991.                     if (crystal.traits.cooperation < 5) {
  992.                        crystal.personality = 'neutral';
  993.                        crystal.updateDisplay();
  994.                    }
  995.                }
  996.            });
  997.            garden.updateStats();
  998.            garden.checkMysteryReadiness();
  999.        }, 10000);
  1000.    </script>
  1001. </body>
  1002. </html>
  1003.  
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!