jupier · jupier · May 27, 2025 · May 27, 2025 · May 27, 2025 · May 27, 2025
diff --git a/index.html b/index.html
@@ -2,9 +2,15 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="mask-icon" href="/favicon.svg" color="#8B4513" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <meta
+      name="description"
+      content="A relaxing wood processing clicker game"
+    />
+    <meta name="theme-color" content="#8B4513" />
+    <title>XClicker - Wood Processing Game</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/favicon.svg b/public/favicon.svg
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.css b/src/App.css
@@ -96,6 +96,11 @@ body {
 .resource-count {
   font-size: 1.2rem;
   font-weight: bold;
+  position: relative;
+}
+
+.resource-count.animate {
+  animation: popIn 0.3s ease-out;
 }
 
 .resource-label {
@@ -438,6 +443,7 @@ button {
   transition:
     transform 0.1s ease,
     background-color 0.2s ease;
+  transform-origin: center;
 }
 
 .click-button {
@@ -515,3 +521,84 @@ button:active {
     max-width: 600px;
   }
 }
+
+/* Resource creation animations */
+@keyframes popIn {
+  0% {
+    transform: scale(0.5);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes floatUp {
+  0% {
+    transform: translateY(0) scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(-20px) scale(0.8);
+    opacity: 0;
+  }
+}
+
+@keyframes shake {
+  0%,
+  100% {
+    transform: rotate(0deg);
+  }
+  25% {
+    transform: rotate(-5deg);
+  }
+  75% {
+    transform: rotate(5deg);
+  }
+}
+
+@keyframes sparkle {
+  0%,
+  100% {
+    filter: brightness(100%);
+    transform: scale(1);
+  }
+  50% {
+    filter: brightness(150%);
+    transform: scale(1.1);
+  }
+}
+
+/* Apply animations to elements */
+.resource-count.animate {
+  animation: popIn 0.3s ease-out;
+}
+
+.resource-popup {
+  position: absolute;
+  top: -20px;
+  left: 50%;
+  transform: translateX(-50%);
+  color: #4caf50;
+  font-weight: bold;
+  pointer-events: none;
+  animation: floatUp 0.8s ease-out forwards;
+}
+
+.upgrade-button:active {
+  animation: shake 0.3s ease-in-out;
+}
+
+.upgrade-item.upgraded {
+  animation: sparkle 0.5s ease-in-out;
+}
+
+.wood-piece.new {
+  animation:
+    stackGrow 0.3s ease-out,
+    sparkle 0.5s ease-in-out;
+}
diff --git a/src/components/AdminPanel.tsx b/src/components/AdminPanel.tsx
@@ -34,7 +34,7 @@ export const AdminPanel: React.FC<AdminPanelProps> = ({
         onClick={() => setIsOpen(!isOpen)}
         style={{
           position: "fixed",
-          top: "10px",
+          bottom: "10px",
           right: "10px",
           zIndex: 1000,
           background: "#ff4444",
@@ -52,7 +52,7 @@ export const AdminPanel: React.FC<AdminPanelProps> = ({
         <div
           style={{
             position: "fixed",
-            top: "60px",
+            bottom: "60px",
             right: "10px",
             background: "#1a202c",
             padding: "20px",

diff --git a/src/components/ProcessingSection.tsx b/src/components/ProcessingSection.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 
 interface ProcessingSectionProps {
   cooldown: number;
@@ -35,6 +35,14 @@ export const ProcessingSection: React.FC<ProcessingSectionProps> = ({
   getLogSplittingButtonText,
   getRoundSplittingButtonText,
 }) => {
+  const [clickedButton, setClickedButton] = useState<string | null>(null);
+
+  const handleButtonClick = (action: () => void, buttonType: string) => {
+    action();
+    setClickedButton(buttonType);
+    setTimeout(() => setClickedButton(null), 300);
+  };
+
   return (
     <section className="processing-section">
       <div className="processing-header">
@@ -49,8 +57,8 @@ export const ProcessingSection: React.FC<ProcessingSectionProps> = ({
       <div className="action-buttons">
         <div className="button-container">
           <button
-            className="click-button"
-            onClick={onGetLog}
+            className={`click-button ${clickedButton === "get-log" ? "shake" : ""}`}
+            onClick={() => handleButtonClick(onGetLog, "get-log")}
             disabled={
               cooldown > 0 || workerHealth < 20 * parallelProcessingLevel
             }
@@ -64,8 +72,8 @@ export const ProcessingSection: React.FC<ProcessingSectionProps> = ({
 
         <div className="button-container">
           <button
-            className="split-button"
-            onClick={onSplitLog}
+            className={`split-button ${clickedButton === "split-log" ? "shake" : ""}`}
+            onClick={() => handleButtonClick(onSplitLog, "split-log")}
             disabled={
               (currentLog === 0 && logs === 0) ||
               (currentLog === 0 && workerHealth < 10) ||
@@ -79,8 +87,8 @@ export const ProcessingSection: React.FC<ProcessingSectionProps> = ({
 
         <div className="button-container">
           <button
-            className="split-round-button"
-            onClick={onSplitRound}
+            className={`split-round-button ${clickedButton === "split-round" ? "shake" : ""}`}
+            onClick={() => handleButtonClick(onSplitRound, "split-round")}
             disabled={
               (currentRound === 0 && rounds === 0) ||
               (currentRound === 0 && workerHealth < 5) ||

diff --git a/src/components/ResourceItem.tsx b/src/components/ResourceItem.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useRef, useState } from "react";
 
 interface ResourceItemProps {
   icon: string;
@@ -11,10 +11,32 @@ export const ResourceItem: React.FC<ResourceItemProps> = ({
   count,
   label,
 }) => {
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [showPopup, setShowPopup] = useState(false);
+  const [popupValue, setPopupValue] = useState(0);
+  const prevCountRef = useRef(count);
+
+  useEffect(() => {
+    const diff = count - prevCountRef.current;
+    if (diff !== 0) {
+      setIsAnimating(true);
+      if (diff > 0) {
+        setShowPopup(true);
+        setPopupValue(diff);
+        setTimeout(() => setShowPopup(false), 800);
+      }
+      setTimeout(() => setIsAnimating(false), 300);
+    }
+    prevCountRef.current = count;
+  }, [count]);
+
   return (
     <div className="resource-item">
       <span className="resource-icon">{icon}</span>
-      <span className="resource-count">{count}</span>
+      <span className={`resource-count ${isAnimating ? "animate" : ""}`}>
+        {count}
+        {showPopup && <span className="resource-popup">+{popupValue}</span>}
+      </span>
       <span className="resource-label">{label}</span>
     </div>
   );

diff --git a/src/components/UpgradeItem.tsx b/src/components/UpgradeItem.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 
 interface UpgradeItemProps {
   title: string;
@@ -17,8 +17,16 @@ export const UpgradeItem: React.FC<UpgradeItemProps> = ({
   woodPieces,
   onUpgrade,
 }) => {
+  const [isUpgraded, setIsUpgraded] = useState(false);
+
+  const handleUpgrade = () => {
+    onUpgrade();
+    setIsUpgraded(true);
+    setTimeout(() => setIsUpgraded(false), 500);
+  };
+
   return (
-    <div className="upgrade-item">
+    <div className={`upgrade-item ${isUpgraded ? "upgraded" : ""}`}>
       <div className="upgrade-info">
         <h3>{title}</h3>
         <p>{description}</p>
@@ -31,7 +39,7 @@ export const UpgradeItem: React.FC<UpgradeItemProps> = ({
       </div>
       <button
         className="upgrade-button"
-        onClick={onUpgrade}
+        onClick={handleUpgrade}
         disabled={woodPieces < cost}
       >
         Upgrade ({cost} wood)