feat: added a cat not sure about it tho

2026-04-28 22:45:37 +02:00
parent 19f3359106
commit 3b757d7ff7
3 changed files with 396 additions and 0 deletions
@@ -49,11 +49,28 @@ export class WelcomeComponent implements OnInit, OnDestroy {
  isSunsetMode = false;
  modeBadge = 'NIGHT MODE';

+  // Speech bubble and zoom features
+  showSpeechBubble = false;
+  isZoomedIn = false;
+  showSecondSpeechBubble = false;
+  showHappyBubble = false;
+  showMeatEmoji = false;
+  bubbleMessage = 'meow';
+
+  // Meat emoji drag state
+  meatX = 0;
+  meatY = 0;
+  isDraggingMeat = false;
+  meatDragOffsetX = 0;
+  meatDragOffsetY = 0;
+
  stars: Star[] = [];
  bgBuildings: BackgroundBuilding[] = [];
  windows: Record<string, WindowCell[]> = {};

  private flickerIntervalId: ReturnType<typeof setInterval> | undefined;
+  private speechBubbleTimeoutId: ReturnType<typeof setTimeout> | undefined;
+  private zoomTimeoutId: ReturnType<typeof setTimeout> | undefined;

  private coolColors = ['#7de8ff', '#00d5ff', '#5bc0de', '#31b0d5', '#4fc3f7', '#29b6f6'];
  private coolGlowColors = ['#00d5ff', '#00d5ff', '#31b0d5', '#31b0d5', '#03a9f4', '#0288d1'];
@@ -73,10 +90,21 @@ export class WelcomeComponent implements OnInit, OnDestroy {
    this.generateBackgroundBuildings();
    this.generateWindowsForAllBuildings();
    this.startWindowFlicker();
+    
+    // Show speech bubble after 5 seconds
+    this.speechBubbleTimeoutId = setTimeout(() => {
+      this.showSpeechBubble = true;
+    }, 5000);
  }

  ngOnDestroy(): void {
    this.stopWindowFlicker();
+    if (this.speechBubbleTimeoutId) {
+      clearTimeout(this.speechBubbleTimeoutId);
+    }
+    if (this.zoomTimeoutId) {
+      clearTimeout(this.zoomTimeoutId);
+    }
  }

  toggleTheme(): void {
@@ -245,6 +273,88 @@ export class WelcomeComponent implements OnInit, OnDestroy {
    });
  }

+  onSpeechBubbleClick(): void {
+    this.showSpeechBubble = false;
+    this.isZoomedIn = true;
+    this.bubbleMessage = 'meow';
+    this.showMeatEmoji = true;
+    this.showHappyBubble = false;
+    this.showSecondSpeechBubble = true;
+    
+    // Reset meat position
+    this.meatX = window.innerWidth / 2 - 100;
+    this.meatY = window.innerHeight / 2 + 150;
+  }
+
+  onZoomedViewClick(): void {
+    this.isZoomedIn = false;
+    this.showSecondSpeechBubble = false;
+    this.showHappyBubble = false;
+    this.showMeatEmoji = false;
+    this.bubbleMessage = 'meow';
+    
+    if (this.zoomTimeoutId) {
+      clearTimeout(this.zoomTimeoutId);
+    }
+  }
+
+  onMeatMouseDown(event: MouseEvent): void {
+    this.isDraggingMeat = true;
+    const rect = (event.target as HTMLElement).getBoundingClientRect();
+    this.meatDragOffsetX = event.clientX - rect.left;
+    this.meatDragOffsetY = event.clientY - rect.top;
+  }
+
+  onMouseMove(event: MouseEvent): void {
+    if (!this.isDraggingMeat) {
+      return;
+    }
+
+    this.meatX = event.clientX - this.meatDragOffsetX;
+    this.meatY = event.clientY - this.meatDragOffsetY;
+
+    // Get gif element position
+    const gifElement = document.querySelector('.player-2-gif') as HTMLElement;
+    if (!gifElement) {
+      return;
+    }
+
+    const gifRect = gifElement.getBoundingClientRect();
+    const gifCenterX = gifRect.left + gifRect.width / 2;
+    const gifCenterY = gifRect.top + gifRect.height / 2;
+
+    // Get meat center position
+    const meatElement = document.querySelector('.meat-emoji') as HTMLElement;
+    if (!meatElement) {
+      return;
+    }
+
+    const meatRect = meatElement.getBoundingClientRect();
+    const meatCenterX = meatRect.left + meatRect.width / 2;
+    const meatCenterY = meatRect.top + meatRect.height / 2;
+
+    // Calculate distance
+    const distance = Math.sqrt(
+      Math.pow(meatCenterX - gifCenterX, 2) + Math.pow(meatCenterY - gifCenterY, 2)
+    );
+
+    // If meat is close enough to gif center (within 50px), trigger the interaction
+    if (distance < 50) {
+      this.onMeatFed();
+    }
+  }
+
+  onMouseUp(): void {
+    this.isDraggingMeat = false;
+  }
+
+  onMeatFed(): void {
+    this.showMeatEmoji = false;
+    this.showSecondSpeechBubble = false;
+    this.showHappyBubble = true;
+    this.isDraggingMeat = false;
+  }
+
  private closeAllDialogs(): void {
    this.showDifficultyDialog = false;
    this.showOptionsDialog = false;