From 4cb8f7e93d3791fd8130f198889af7bdaeebf317 Mon Sep 17 00:00:00 2001 From: jupier Date: Tue, 27 May 2025 22:16:40 +0200 Subject: [PATCH 1/4] Update website title and add custom favicon --- index.html | 9 ++++++--- public/favicon.png | 1 + public/favicon.svg | 12 ++++++++++++ public/vite.svg | 1 - 4 files changed, 19 insertions(+), 4 deletions(-) create mode 100644 public/favicon.png create mode 100644 public/favicon.svg delete mode 100644 public/vite.svg diff --git a/index.html b/index.html index e4b78ea..3f1e111 100644 --- a/index.html +++ b/index.html @@ -1,10 +1,13 @@ - + - + + - Vite + React + TS + + + XClicker - Wood Processing Game
diff --git a/public/favicon.png b/public/favicon.png new file mode 100644 index 0000000..0519ecb --- /dev/null +++ b/public/favicon.png @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/favicon.svg b/public/favicon.svg new file mode 100644 index 0000000..67e7583 --- /dev/null +++ b/public/favicon.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/public/vite.svg b/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file From 939877c62f47810ba1ea39704829506ef813b03c Mon Sep 17 00:00:00 2001 From: jupier Date: Tue, 27 May 2025 22:23:35 +0200 Subject: [PATCH 2/4] Add fun animations for resources, upgrades, and processing - Add pop-in and floating number animations for resources, sparkle and shake effects for upgrades, button shake animations for processing actions --- src/App.css | 77 ++++++++++++++++++++++++++++ src/components/ProcessingSection.tsx | 22 +++++--- src/components/ResourceItem.tsx | 26 +++++++++- src/components/UpgradeItem.tsx | 14 +++-- 4 files changed, 127 insertions(+), 12 deletions(-) diff --git a/src/App.css b/src/App.css index 2527e48..34b2b4a 100644 --- 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,74 @@ 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/ProcessingSection.tsx b/src/components/ProcessingSection.tsx index b99ea5c..cf9f6bc 100644 --- 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 = ({ getLogSplittingButtonText, getRoundSplittingButtonText, }) => { + const [clickedButton, setClickedButton] = useState(null); + + const handleButtonClick = (action: () => void, buttonType: string) => { + action(); + setClickedButton(buttonType); + setTimeout(() => setClickedButton(null), 300); + }; + return (
@@ -49,8 +57,8 @@ export const ProcessingSection: React.FC = ({