Skip to content

Commit 4d1220e

Browse files
GlazlkGlazlk
committed
Fix index
1 parent d13612e commit 4d1220e

File tree

3 files changed

+682
-0
lines changed

3 files changed

+682
-0
lines changed

‎public/index.html‎

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="theme-color" content="#667eea" />
8+
<meta
9+
name="description"
10+
content="Elemental Arena - A strategic element-based battle game with mana wagering and upgrades"
11+
/>
12+
<meta name="keywords" content="game, strategy, elements, battle, mana, elemental, react" />
13+
<meta name="author" content="Elemental Arena Team" />
14+
15+
<!-- Preload fonts for better performance -->
16+
<link rel="preconnect" href="https://fonts.googleapis.com" />
17+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
18+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Orbitron:wght@400;700;900&family=Rajdhani:wght@400;500;600;700&family=Cinzel:wght@400;600;700&display=swap" rel="stylesheet" />
19+
20+
<title>⚡ Elemental Arena - Strategic Battle Game</title>
21+
22+
<style>
23+
/* Loading screen styles */
24+
#loading-screen {
25+
position: fixed;
26+
top: 0;
27+
left: 0;
28+
width: 100%;
29+
height: 100%;
30+
background: url("%PUBLIC_URL%/resources/background.png") center/cover no-repeat;
31+
background-size: cover;
32+
display: flex;
33+
flex-direction: column;
34+
justify-content: center;
35+
align-items: center;
36+
z-index: 9999;
37+
font-family: "Volkhov", serif;
38+
}
39+
40+
.logo-container {
41+
margin-bottom: 2rem;
42+
animation: logo-fade-in 2s ease-out;
43+
}
44+
45+
.game-logo {
46+
width: 600px;
47+
height: 600px;
48+
filter: drop-shadow(0 0 30px rgba(218, 165, 32, 0.8));
49+
animation: logo-glow 3s ease-in-out infinite;
50+
}
51+
52+
.game-title {
53+
font-size: 4rem;
54+
font-weight: 700;
55+
color: #daa520;
56+
text-shadow: 0 0 20px rgba(218, 165, 32, 0.8), 0 0 40px rgba(218, 165, 32, 0.6),
57+
0 0 60px rgba(218, 165, 32, 0.4), 2px 2px 4px rgba(0, 0, 0, 0.8);
58+
letter-spacing: 8px;
59+
text-align: center;
60+
animation: title-glow 3s ease-in-out infinite;
61+
}
62+
63+
@keyframes logo-fade-in {
64+
0% {
65+
opacity: 0;
66+
transform: scale(0.5);
67+
}
68+
100% {
69+
opacity: 1;
70+
transform: scale(1);
71+
}
72+
}
73+
74+
@keyframes logo-glow {
75+
0%,
76+
100% {
77+
filter: drop-shadow(0 0 30px rgba(218, 165, 32, 0.8));
78+
}
79+
50% {
80+
filter: drop-shadow(0 0 60px rgba(218, 165, 32, 1));
81+
}
82+
}
83+
84+
@keyframes title-glow {
85+
0%,
86+
100% {
87+
text-shadow: 0 0 20px rgba(218, 165, 32, 0.8), 0 0 40px rgba(218, 165, 32, 0.6),
88+
0 0 60px rgba(218, 165, 32, 0.4), 2px 2px 4px rgba(0, 0, 0, 0.8);
89+
}
90+
50% {
91+
text-shadow: 0 0 30px rgba(218, 165, 32, 1), 0 0 60px rgba(218, 165, 32, 0.8),
92+
0 0 90px rgba(218, 165, 32, 0.6), 2px 2px 4px rgba(0, 0, 0, 0.8);
93+
}
94+
}
95+
96+
@media (max-width: 768px) {
97+
.game-logo {
98+
width: 550px;
99+
height: 550px;
100+
}
101+
.game-title {
102+
font-size: 3rem;
103+
letter-spacing: 4px;
104+
}
105+
}
106+
107+
@media (max-width: 480px) {
108+
.game-logo {
109+
width: 450px;
110+
height: 450px;
111+
}
112+
.game-title {
113+
font-size: 2.5rem;
114+
letter-spacing: 2px;
115+
}
116+
}
117+
118+
/* Hide navigation during loading */
119+
.mobile-nav {
120+
opacity: 0;
121+
visibility: hidden;
122+
transition: all 0.5s ease;
123+
}
124+
125+
/* Show navigation when React loads */
126+
.loaded .mobile-nav {
127+
opacity: 1;
128+
visibility: visible;
129+
}
130+
131+
/* Hide loading screen when React loads */
132+
.loaded #loading-screen {
133+
opacity: 0;
134+
visibility: hidden;
135+
transition: all 0.5s ease;
136+
}
137+
</style>
138+
</head>
139+
<body>
140+
<noscript>
141+
<div style="text-align: center; padding: 2rem; font-family: Arial, sans-serif">
142+
<h1>⚠️ JavaScript Required</h1>
143+
<p>You need to enable JavaScript to run this app.</p>
144+
<p>Elemental Arena requires JavaScript for the interactive gameplay experience.</p>
145+
</div>
146+
</noscript>
147+
148+
<!-- Loading Screen -->
149+
<div id="loading-screen">
150+
<div class="logo-container">
151+
<img src="%PUBLIC_URL%/resources/logo.svg" alt="Logo" class="game-logo" />
152+
</div>
153+
</div>
154+
155+
<!-- React App Root -->
156+
<div id="root"></div>
157+
158+
<script>
159+
// Hide loading screen when React app loads
160+
window.addEventListener("load", function () {
161+
setTimeout(function () {
162+
document.body.classList.add("loaded");
163+
setTimeout(function () {
164+
const loadingScreen = document.getElementById("loading-screen");
165+
if (loadingScreen) {
166+
loadingScreen.remove();
167+
}
168+
}, 2000);
169+
}, 4000);
170+
});
171+
172+
// Performance monitoring
173+
if ("performance" in window) {
174+
window.addEventListener("load", function () {
175+
setTimeout(function () {
176+
const perfData = performance.getEntriesByType("navigation")[0];
177+
console.log("🎮 Elemental Arena loaded in:", Math.round(perfData.loadEventEnd - perfData.fetchStart), "ms");
178+
}, 0);
179+
});
180+
}
181+
</script>
182+
</body>
183+
</html>

‎src/components/LoadingTransition.tsx‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import React, { useEffect, useState } from 'react';
2+
3+
interface LoadingTransitionProps {
4+
onComplete: () => void;
5+
}
6+
7+
const LoadingTransition: React.FC<LoadingTransitionProps> = ({ onComplete }) => {
8+
const [progress, setProgress] = useState(0);
9+
const [currentTip, setCurrentTip] = useState(0);
10+
11+
const tips = [
12+
"🔥 Выбирайте элементы стратегически!",
13+
"💎 Собирайте редких элементалей!",
14+
"⚡ Изучайте слабости противников!",
15+
"🎯 Развивайте своих элементалей!",
16+
"💰 Управляйте маной мудро!"
17+
];
18+
19+
useEffect(() => {
20+
// Progress animation
21+
const progressInterval = setInterval(() => {
22+
setProgress(prev => {
23+
if (prev >= 100) {
24+
clearInterval(progressInterval);
25+
setTimeout(() => {
26+
onComplete();
27+
}, 500);
28+
return 100;
29+
}
30+
return prev + Math.random() * 3 + 1;
31+
});
32+
}, 50);
33+
34+
// Tips rotation
35+
const tipsInterval = setInterval(() => {
36+
setCurrentTip(prev => (prev + 1) % tips.length);
37+
}, 1500);
38+
39+
return () => {
40+
clearInterval(progressInterval);
41+
clearInterval(tipsInterval);
42+
};
43+
}, [onComplete, tips.length]);
44+
45+
return (
46+
<div className="loading-transition">
47+
{/* Background particles */}
48+
<div className="loading-particles">
49+
{[...Array(30)].map((_, i) => (
50+
<div
51+
key={i}
52+
className="loading-particle"
53+
style={{
54+
left: `${Math.random() * 100}%`,
55+
animationDelay: `${Math.random() * 3}s`,
56+
animationDuration: `${Math.random() * 2 + 2}s`
57+
}}
58+
/>
59+
))}
60+
</div>
61+
62+
{/* Logo container */}
63+
<div className="loading-logo-container">
64+
<img
65+
src="/resources/logo.svg"
66+
alt="Loading..."
67+
className="loading-logo"
68+
/>
69+
</div>
70+
71+
{/* Loading text */}
72+
<div className="loading-text">
73+
<h2>Загрузка игры...</h2>
74+
<div className="loading-subtitle">Готовьтесь к эпическим битвам!</div>
75+
</div>
76+
77+
{/* Progress bar */}
78+
<div className="loading-progress-container">
79+
<div className="loading-progress-bar">
80+
<div
81+
className="loading-progress-fill"
82+
style={{ width: `${progress}%` }}
83+
/>
84+
<div className="loading-progress-glow" />
85+
</div>
86+
<div className="loading-progress-text">{Math.round(progress)}%</div>
87+
</div>
88+
89+
{/* Rotating tips */}
90+
<div className="loading-tips">
91+
<div className="loading-tip" key={currentTip}>
92+
{tips[currentTip]}
93+
</div>
94+
</div>
95+
96+
{/* Spinner */}
97+
<div className="loading-spinner">
98+
<div className="loading-spinner-ring"></div>
99+
<div className="loading-spinner-ring"></div>
100+
<div className="loading-spinner-ring"></div>
101+
</div>
102+
</div>
103+
);
104+
};
105+
106+
export default LoadingTransition;

0 commit comments

Comments
 (0)