Added mccodegen

Author: rislaed

static/mccodegen/animations.js

@@ -0,0 +1,199 @@
+import { playSound } from './sounds.js';
+
+export async function animateExplosion(container) {
+  const containerRect = container.getBoundingClientRect();
+
+  // Create explosion particles (yellow, smaller)
+  for (let i = 0; i < 50; i++) {
+    const particle = document.createElement('div');
+    particle.classList.add('explosion-particle');
+    particle.style.width = `${Math.random() * 10 + 5}px`;
+    particle.style.height = particle.style.width;
+    particle.style.left = `${containerRect.left + containerRect.width / 2}px`;
+    particle.style.top = `${containerRect.top + containerRect.height / 2}px`;
+    const angle = Math.random() * Math.PI * 2;
+    const distance = Math.random() * 200 + 50;
+    particle.style.setProperty('--x', `${Math.cos(angle) * distance}px`);
+    particle.style.setProperty('--y', `${Math.sin(angle) * distance}px`);
+    document.body.appendChild(particle);
+    particle.addEventListener('animationend', () => particle.remove());
+  }
+
+  // Create huge smoke particles (grey, larger, slower fade)
+  // This will be replaced by the new corner smoke system during the raccoon transition
+  // For standard generate button explosion, keep a few smoke particles
+  for (let i = 0; i < 10; i++) { // Reduced number for normal explosion
+    const smokeParticle = document.createElement('div');
+    smokeParticle.classList.add('smoke-particle');
+    smokeParticle.style.width = `${Math.random() * 60 + 30}px`;
+    smokeParticle.style.height = smokeParticle.style.width;
+    smokeParticle.style.left = `${containerRect.left + containerRect.width / 2}px`;
+    smokeParticle.style.top = `${containerRect.top + containerRect.height / 2}px`;
+    const angle = Math.random() * Math.PI * 2;
+    const distance = Math.random() * 200 + 50;
+    smokeParticle.style.setProperty('--x', `${Math.cos(angle) * distance}px`);
+    smokeParticle.style.setProperty('--y', `${Math.sin(angle) * distance}px`);
+    document.body.appendChild(smokeParticle);
+    smokeParticle.addEventListener('animationend', () => smokeParticle.remove());
+  }
+
+  // Shatter the container into pieces
+  container.classList.add('container-shattered');
+  const numPieces = 10; // Number of pieces to break into
+  for (let i = 0; i < numPieces; i++) {
+    const piece = document.createElement('div');
+    piece.classList.add('container-piece');
+    piece.style.width = `${Math.random() * 50 + 20}px`;
+    piece.style.height = `${Math.random() * 50 + 20}px`;
+    piece.style.left = `${containerRect.left + containerRect.width / 2}px`;
+    piece.style.top = `${containerRect.top + containerRect.height / 2}px`;
+
+    const angle = Math.random() * Math.PI * 2;
+    const distance = Math.random() * 300 + 100;
+    piece.style.setProperty('--x', `${Math.cos(angle) * distance}px`);
+    piece.style.setProperty('--y', `${Math.sin(angle) * distance}px`);
+    piece.style.setProperty('--rotate', `${Math.random() * 720 - 360}deg`); // Random rotation
+    document.body.appendChild(piece);
+    piece.addEventListener('animationend', () => piece.remove());
+  }
+
+  return new Promise(resolve => {
+    // We resolve immediately as the container's visual disappearance is handled by CSS,
+    // and its 'display: none' is managed in main.js after smoke starts.
+    // The shattering animation runs in parallel.
+    setTimeout(() => resolve(), 500); // Allow some time for pieces to start moving
+  });
+}
+
+export function animatePageExplosion(hugeSmoke = false) {
+  // Clear previous smoke-dragger elements, but not the new corner-smoke-cloud
+  document.querySelectorAll('.smoke-dragger').forEach(el => el.remove());
+
+  const body = document.body;
+  const numParticles = hugeSmoke ? 0 : 100; // No traditional explosion particles if hugeSmoke
+  // const smokeCloudCount = hugeSmoke ? 20 : 0; // Number of drifting smoke clouds - handled by new corner smoke now
+
+  // Drifting smoke clouds (kept for other general smoke effects if needed)
+  if (!hugeSmoke) {
+    for (let i = 0; i < 20; i++) {
+      const smokeDragger = document.createElement('div');
+      smokeDragger.classList.add('smoke-dragger');
+
+      // Random start position
+      const startX = Math.random() * window.innerWidth - window.innerWidth / 2;
+      const startY = Math.random() * window.innerHeight - window.innerHeight / 2;
+      // Random end position
+      const endX = Math.random() * window.innerWidth * 2 - window.innerWidth;
+      const endY = Math.random() * window.innerHeight * 2 - window.innerHeight;
+
+      smokeDragger.style.setProperty('--startX', `${startX}px`);
+      smokeDragger.style.setProperty('--startY', `${startY}px`);
+      smokeDragger.style.setProperty('--endX', `${endX}px`);
+      smokeDragger.style.setProperty('--endY', `${endY}px`);
+      smokeDragger.style.animationDelay = `${Math.random() * 2}s`; // Stagger animation start
+      smokeDragger.style.animationDuration = `${5 + Math.random() * 3}s`; // Random duration, slightly shorter
+      smokeDragger.style.width = `${100 + Math.random() * 100}px`; // Random size
+      smokeDragger.style.height = smokeDragger.style.width;
+
+      body.appendChild(smokeDragger);
+      smokeDragger.addEventListener('animationend', () => smokeDragger.remove());
+    }
+  }
+
+  // Traditional page explosion particles (only if not hugeSmoke mode)
+  for (let i = 0; i < numParticles; i++) {
+    const particle = document.createElement('div');
+    particle.classList.add('page-explosion-particle');
+    particle.style.width = `${Math.random() * 30 + 10}px`;
+    particle.style.height = particle.style.width;
+    particle.style.left = `${Math.random() * window.innerWidth}px`;
+    particle.style.top = `${Math.random() * window.innerHeight}px`;
+
+    const angle = Math.random() * Math.PI * 2;
+    const distance = Math.random() * 500 + 200;
+    particle.style.setProperty('--x', `${Math.cos(angle) * distance}px`);
+    particle.style.setProperty('--y', `${Math.sin(angle) * distance}px`);
+    body.appendChild(particle);
+    particle.addEventListener('animationend', () => particle.remove());
+  }
+}
+
+// These functions are no longer used for the "forever long" glitch/shake,
+// as classes are added directly. Kept for potential other uses.
+export function animatePageShake() {
+  return new Promise(resolve => {
+    document.body.classList.add('shake');
+    document.body.addEventListener('animationend', function handler() {
+      document.body.removeEventListener('animationend', handler);
+      document.body.classList.remove('shake');
+      resolve();
+    }, { once: true });
+  });
+}
+
+export function animatePageBreak() {
+  return new Promise(resolve => {
+    document.body.classList.add('page-break');
+    document.body.addEventListener('animationend', function handler() {
+      document.body.removeEventListener('animationend', handler);
+      document.body.classList.remove('page-break');
+      resolve();
+    }, { once: true });
+  });
+}
+
+export function animatePageGlitches(duration = 1000) {
+  document.body.classList.add('glitch');
+  return new Promise(resolve => {
+    setTimeout(() => {
+      document.body.classList.remove('glitch');
+      resolve();
+    }, duration);
+  });
+}
+
+export function createCenterSmoke(overlayElement) {
+  const smokeClouds = [];
+  const numClouds = 45; // Increased number of clouds
+
+  for (let i = 0; i < numClouds; i++) {
+    const smokeCloud = document.createElement('div');
+    smokeCloud.classList.add('center-smoke-cloud');
+    
+    // Position near the center initially
+    smokeCloud.style.left = `calc(50% + ${Math.random() * 150 - 75}px)`; // Slightly wider initial spread
+    smokeCloud.style.top = `calc(50% + ${Math.random() * 150 - 75}px)`;
+    
+    // Random initial size (smaller than before to grow aggressively)
+    const initialSize = 15 + Math.random() * 25; // From 15 to 40px (slightly larger start)
+    smokeCloud.style.width = `${initialSize}px`;
+    smokeCloud.style.height = `${initialSize}px`;
+
+    const initialRotation = Math.random() * 360;
+    const finalRotation = initialRotation + (Math.random() > 0.5 ? 1 : -1) * (360 + Math.random() * 360); // Spin 1 to 2 times
+    
+    // Randomized movement values - Increased for more movement
+    const startMoveX = Math.random() * 600 - 300; // Wider initial random movement
+    const startMoveY = Math.random() * 600 - 300;
+    const endMoveX = Math.random() * 2000 - 1000; // Even wider range for final drift
+    const endMoveY = Math.random() * 2000 - 1000;
+
+    // Random final scale, ensuring they grow large to block view significantly - Increased scale
+    const finalScale = 20 + Math.random() * 20; // Scale from 20x to 40x (larger final scale)
+    
+    // Set CSS variables for animation
+    smokeCloud.style.setProperty('--initial-rotation', `${initialRotation}deg`);
+    smokeCloud.style.setProperty('--final-rotation', `${finalRotation}deg`);
+    // The individual cloud animation should be longer than the total obscuring phase
+    smokeCloud.style.setProperty('--animation-duration', `${5 + Math.random() * 3}s`); // 5-8 seconds duration
+    smokeCloud.style.setProperty('--start-move-x', `${startMoveX}px`);
+    smokeCloud.style.setProperty('--start-move-y', `${startMoveY}px`);
+    smokeCloud.style.setProperty('--end-move-x', `${endMoveX}px`);
+    smokeCloud.style.setProperty('--end-move-y', `${endMoveY}px`);
+    smokeCloud.style.setProperty('--final-scale', finalScale); // Pass final scale
+    
+    overlayElement.appendChild(smokeCloud);
+    smokeClouds.push(smokeCloud);
+  }
+  return smokeClouds;
+}

static/mccodegen/bubble_pop.mp3

@@ -0,0 +1,89 @@
+import { playSound } from './sounds.js';
+
+const chatButton = document.getElementById('chat-button');
+const chatContainer = document.getElementById('chat-container');
+const closeChatButton = document.getElementById('close-chat');
+const chatMessages = document.getElementById('chat-messages');
+const chatInput = document.getElementById('chat-input');
+const chatSendButton = document.getElementById('chat-send');
+
+let conversationHistory = [];
+
+chatButton.addEventListener('click', () => {
+    chatContainer.style.display = 'flex';
+    playSound('bubblePopBuffer'); // Play bubble pop sound on chat button click
+});
+
+closeChatButton.addEventListener('click', () => {
+    chatContainer.style.display = 'none';
+    playSound('bubblePopBuffer'); // Play bubble pop sound on close chat button click
+});
+
+chatSendButton.addEventListener('click', async () => {
+  const messageText = chatInput.value;
+  if (!messageText) return;
+
+  // Validate if message matches the gift code format
+  const codeFormat = /^[A-Z0-9]{5}-[A-Z0-9]{5}-[A-Z0-9]{5}-[A-Z0-9]{5}-[A-Z0-9]{5}$/;
+  if (!codeFormat.test(messageText)) {
+      alert('Please enter a message with a valid gift code format (#####-#####-#####-#####-#####).');
+      playSound('bubblePopBuffer'); // Play bubble pop sound on alert
+      return;
+  }
+
+  // Display user message with avatar
+  displayMessage(messageText, 'user');
+  chatInput.value = '';
+
+  // Add the message to the conversation history
+  conversationHistory.push({
+      sender: 'user',
+      message: messageText
+  });
+  playSound('bubblePopBuffer'); // Play bubble pop sound on sending message
+});
+
+export function displayMessage(message, sender) {
+    const messageDiv = document.createElement('div');
+    messageDiv.classList.add('message');
+
+    if (sender === 'user') {
+        messageDiv.classList.add('user-message');
+    } else if (sender === 'error') {
+        messageDiv.style.backgroundColor = '#f44336';
+        messageDiv.style.color = 'white';
+    }
+
+    // Create message text node
+    const messageTextNode = document.createTextNode(message);
+
+    if (sender === 'user') {
+      messageDiv.appendChild(messageTextNode);
+      // Add delete button for user messages
+      const deleteButton = document.createElement('button');
+      deleteButton.textContent = '❌';
+      deleteButton.classList.add('delete-button');
+      deleteButton.addEventListener('click', () => {
+        deleteMessage(messageDiv);
+        playSound('bubblePopBuffer'); // Play bubble pop sound on deleting message
+      });
+      messageDiv.appendChild(deleteButton);
+    } else {
+      messageDiv.appendChild(avatarImg); // Avatar on the left for others
+      messageDiv.appendChild(messageTextNode);
+    }
+
+    chatMessages.appendChild(messageDiv);
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+}
+
+function deleteMessage(messageDiv) {
+    // Remove the message from the chat messages
+    chatMessages.removeChild(messageDiv);
+
+    // Remove the message from the conversation history
+    const messageIndex = Array.from(chatMessages.children).indexOf(messageDiv);
+    if (messageIndex !== -1) {
+        conversationHistory.splice(messageIndex, 1);
+    }
+}

static/mccodegen/chat.js

@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Minecraft Gift Codegen</title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="/style.css">
+  <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
+  <!-- SVG filter for glitch effect -->
+  <svg style="display: none;">
+    <filter id="glitch-filter-light">
+      <feTurbulence type="fractalNoise" baseFrequency="0.02" numOctaves="3" result="noise" />
+      <feDisplacementMap in="SourceGraphic" in2="noise" scale="20" xChannelSelector="R" yChannelSelector="G" />
+    </filter>
+    <filter id="glitch-filter-medium">
+      <feTurbulence type="fractalNoise" baseFrequency="0.03" numOctaves="4" result="noise" />
+      <feDisplacementMap in="SourceGraphic" in2="noise" scale="40" xChannelSelector="R" yChannelSelector="G" />
+    </filter>
+    <filter id="glitch-filter-heavy">
+      <feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="5" result="noise" />
+      <feDisplacementMap in="SourceGraphic" in2="noise" scale="60" xChannelSelector="R" yChannelSelector="G" />
+    </filter>
+  </svg>
+</head>
+<body>
+  <div id="background-effects-layer"></div>
+  <button id="chat-button" class="action-button">💬 Share Code</button>
+
+  <div class="alert">
+    <span class="closebtn" onclick="this.parentElement.style.display='none'; playSound('bubblePopBuffer');">&times;</span>
+    <strong>Disclaimer!</strong> NOT EVERY CODE WORKS BUT A FEW CAN WORK!
+  </div>
+  <div id="container">
+    <img id="title-image" src="/minecraft_logo.png" alt="Minecraft Logo">
+    <div class="input-card">
+      <label for="numCodes">Number of Codes:</label>
+      <input type="number" id="numCodes" value="1" min="1">
+      <button id="generate" class="action-button">Generate</button>
+    </div>
+    <div id="code-container">
+      <!-- Generated codes will be appended here -->
+    </div>
+  </div>
+  <div id="copy-container" style="display:none;">
+      <label for="copyCodeInput">Enter code number to copy:</label>
+      <input type="number" id="copyCodeInput" min="1">
+      <button id="copy" class="action-button">Copy Code</button>
+  </div>
+
+  <div id="chat-container">
+    <div id="chat-header">
+      💬 Share Code
+      <span id="close-chat">&times;</span>
+    </div>
+    <div id="chat-messages">
+      <!-- Chat messages will be displayed here -->
+    </div>
+    <div id="chat-input-area">
+      <input type="text" id="chat-input" placeholder="Type your code! (#####-#####-#####-#####-#####)">
+      <button id="chat-send" class="action-button">Send</button>
+    </div>
+  </div>
+  <!-- Raccoon dance frames, initially hidden by CSS -->
+  <img class="dancing-raccoon-frame" id="raccoon-frame-1" src="/raccoon_dance_1.png" alt="Dancing Raccoon Frame 1">
+  <img class="dancing-raccoon-frame" id="raccoon-frame-2" src="/raccoon_dance_2.png" alt="Dancing Raccoon Frame 2">
+  <img class="dancing-raccoon-frame" id="raccoon-frame-3" src="/raccoon_dance_3.png" alt="Dancing Raccoon Frame 3">
+  <img class="dancing-raccoon-frame" id="raccoon-frame-4" src="/raccoon_dance_4.png" alt="Dancing Raccoon Frame 4">
+  <div id="smoke-overlay" style="display: none;">
+  </div>
+  <script type="module" src="/main.js"></script>
+  <script type="module" src="/sounds.js"></script>
+  <script type="module" src="/animations.js"></script>
+  <script type="module" src="/chat.js"></script>
+</body>
+</html>