Skip to content

Commit 161bbdf

Browse files
author
danil-nizamov
committed
added meteorite game
1 parent be87f00 commit 161bbdf

File tree

8 files changed

+828
-34
lines changed

8 files changed

+828
-34
lines changed

‎client/app.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
// app.js
22
(function() {
3-
const status = document.getElementById('status');
43
let websocket = null;
54

65
function setStatus(msg) {
7-
status.textContent = msg;
6+
// Status element removed - function kept for compatibility but does nothing
87
}
98

109
// Initialize WebSocket connection

‎client/assets/heart.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎client/assets/meteor.svg‎

Lines changed: 13 additions & 0 deletions
Loading

‎client/config.json‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,23 @@
11
{
2-
"gameType": "racing",
2+
"gameType": "meteoriteRain",
33
"keyboard": true,
44
"availableKeys": [],
55
"showStats": true,
66
"realTimeStats": ["time", "chars"],
77
"racing": {
88
"opponentSpeeds": [0.3, 0.4, 0.5],
99
"mistakesAllowed": 0
10+
},
11+
"meteoriteRain": {
12+
"meteoriteSpeed": 50,
13+
"spawnInterval": 2000,
14+
"pointsPerChar": 100,
15+
"difficulty": {
16+
"baseSpawnInterval": 2000,
17+
"minSpawnInterval": 1500,
18+
"baseSpeed": 50,
19+
"maxSpeed": 100,
20+
"difficultyIncreaseRate": 0.05
21+
}
1022
}
1123
}

‎client/index.html‎

Lines changed: 32 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,6 @@
2929
<!-- Navigation Header -->
3030
<header class="header">
3131
<h1>Typing Simulator</h1>
32-
<div class="spacer"></div>
33-
<div id="status" class="status">Ready</div>
34-
<button id="btn-help" class="button button-text">Help</button>
3532
</header>
3633

3734
<!-- Main Application Content -->
@@ -87,6 +84,38 @@ <h1>Typing Simulator</h1>
8784
<div class="racing-finish-line" id="racing-finish-line"></div>
8885
</div>
8986
</div>
87+
<!-- Meteorite Rain Game -->
88+
<div id="meteorite-rain-container" class="meteorite-rain-container" style="display: none;">
89+
<div class="meteorite-rain-game">
90+
<div class="meteorite-rain-ui">
91+
<div class="meteorite-score" id="meteorite-score">0</div>
92+
<div class="meteorite-lives" id="meteorite-lives">
93+
<div class="meteorite-heart"></div>
94+
<div class="meteorite-heart"></div>
95+
<div class="meteorite-heart"></div>
96+
</div>
97+
</div>
98+
<div class="meteorite-start-message" id="meteorite-start-message">
99+
Press space to start
100+
</div>
101+
<div class="meteorite-rain-play-area" id="meteorite-play-area">
102+
<!-- Meteorites will be dynamically added here -->
103+
</div>
104+
<div class="meteorite-ground" id="meteorite-ground"></div>
105+
<div class="meteorite-typing-input-container">
106+
<input
107+
type="text"
108+
id="meteorite-typing-input"
109+
class="input"
110+
autocomplete="off"
111+
autocorrect="off"
112+
autocapitalize="off"
113+
spellcheck="false"
114+
placeholder=""
115+
/>
116+
</div>
117+
</div>
118+
</div>
90119
<!-- Classic Typing View (fallback for non-racing games) -->
91120
<div class="typing-text-container" id="classic-typing-container">
92121
<div id="typing-text" class="typing-text"></div>

‎client/stats.txt‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
Status: lose
1+
Status: win
22

33
Typing Statistics
44
==================
55

6-
Total Errors Made: 147
6+
Total Errors Made: 0
77
Errors Left (Unfixed): 0
8-
Total Time: 23.27 seconds
9-
Accuracy: 10.37%
10-
Speed: 30.94 words per minute
8+
Total Time: 70.16 seconds
9+
Accuracy: 100.00%
10+
Speed: 10.26 words per minute
1111

12-
Generated: 02/12/2025, 05:55:45
12+
Generated: 04/12/2025, 14:24:55

‎client/typing-simulator.css‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -887,6 +887,147 @@
887887
}
888888
}
889889

890+
/* Meteorite Rain Game Styles */
891+
.bespoke .meteorite-rain-container {
892+
flex: 1 1 auto;
893+
position: relative;
894+
width: 100%;
895+
height: 100%;
896+
display: flex;
897+
flex-direction: column;
898+
min-height: 0;
899+
background: #000232;
900+
overflow: hidden;
901+
}
902+
903+
.bespoke .meteorite-rain-game {
904+
position: relative;
905+
width: 100%;
906+
height: 100%;
907+
display: flex;
908+
flex-direction: column;
909+
}
910+
911+
.bespoke .meteorite-rain-ui {
912+
position: absolute;
913+
top: var(--UI-Spacing-spacing-xl);
914+
left: var(--UI-Spacing-spacing-xl);
915+
right: var(--UI-Spacing-spacing-xl);
916+
z-index: 100;
917+
display: flex;
918+
flex-direction: row;
919+
justify-content: space-between;
920+
align-items: center;
921+
gap: var(--UI-Spacing-spacing-xl);
922+
pointer-events: none;
923+
}
924+
925+
.bespoke .meteorite-score {
926+
font-size: var(--Fonts-Headlines-xl);
927+
font-weight: 600;
928+
color: #FFFFFF;
929+
font-family: var(--heading-family);
930+
line-height: 1;
931+
}
932+
933+
.bespoke .meteorite-lives {
934+
display: flex;
935+
flex-direction: row;
936+
gap: var(--UI-Spacing-spacing-sm);
937+
align-items: center;
938+
}
939+
940+
.bespoke .meteorite-heart {
941+
width: 20px;
942+
height: 20px;
943+
background-image: url('./assets/heart.svg');
944+
background-size: contain;
945+
background-repeat: no-repeat;
946+
background-position: center;
947+
display: inline-block;
948+
}
949+
950+
.bespoke .meteorite-start-message {
951+
position: absolute;
952+
top: 50%;
953+
left: 50%;
954+
transform: translate(-50%, -50%);
955+
z-index: 200;
956+
font-size: var(--Fonts-Headlines-lg);
957+
font-weight: 600;
958+
color: #FFFFFF;
959+
font-family: var(--heading-family);
960+
text-align: center;
961+
pointer-events: none;
962+
display: flex;
963+
align-items: center;
964+
justify-content: center;
965+
}
966+
967+
.bespoke .meteorite-rain-play-area {
968+
flex: 1 1 auto;
969+
position: relative;
970+
width: 100%;
971+
min-height: 0;
972+
overflow: hidden;
973+
}
974+
975+
.bespoke .meteorite {
976+
position: absolute;
977+
display: flex;
978+
flex-direction: column;
979+
align-items: center;
980+
gap: var(--UI-Spacing-spacing-xs);
981+
z-index: 10;
982+
}
983+
984+
.bespoke .meteorite-circle {
985+
width: 40px;
986+
height: 40px;
987+
background-image: url('./assets/meteor.svg');
988+
background-size: contain;
989+
background-repeat: no-repeat;
990+
background-position: center;
991+
}
992+
993+
.bespoke .meteorite-word {
994+
font-size: var(--Fonts-Body-Default-sm);
995+
font-weight: 600;
996+
color: #FFFFFF;
997+
white-space: nowrap;
998+
pointer-events: none;
999+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
1000+
}
1001+
1002+
.bespoke .meteorite-ground {
1003+
position: absolute;
1004+
bottom: 0;
1005+
left: 0;
1006+
right: 0;
1007+
height: 20px;
1008+
background: #C4C4C4;
1009+
z-index: 5;
1010+
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
1011+
}
1012+
1013+
.bespoke .meteorite-typing-input-container {
1014+
position: absolute;
1015+
bottom: 30px;
1016+
left: 50%;
1017+
transform: translateX(-50%);
1018+
z-index: 50;
1019+
display: flex;
1020+
flex-direction: column;
1021+
align-items: center;
1022+
min-width: 200px;
1023+
max-width: 300px;
1024+
width: auto;
1025+
}
1026+
1027+
.bespoke .meteorite-typing-input-container .input {
1028+
width: 100%;
1029+
}
1030+
8901031
@media (max-width: 480px) {
8911032
.bespoke .keyboard-stats-wrapper {
8921033
margin: var(--UI-Spacing-spacing-sm) auto 0;

0 commit comments

Comments
 (0)