feat: update player stats

game.html

@@ -19,7 +19,7 @@
 
       <div id="input-display">
         <div id="input-local">
-          <div id="typed-text"></div>
+          <div id="typed-text">ты можешь набирать слова прямо тут</div>
         </div>
         <div id="input-chat" class="hidden">
           <div id="chat-text"></div>

js/game.js

@@ -146,8 +146,9 @@ function renderPlayerStats() {
   top3.forEach((name, i) => {
     const row = document.createElement("div");
     row.className = "stats-row" + (i === 0 ? " stats-top1" : i === 1 ? " stats-top2" : " stats-top3");
+    const crown = i === 0 ? '<span class="stats-crown">👑</span> ' : "";
     const place = i === 0 ? "1" : i === 1 ? "2" : "3";
-    row.innerHTML = `<span class="stats-place">#${place}</span> <span class="stats-name">${name}</span> <span class="stats-kills">${playerStats[name].kills}</span>`;
+    row.innerHTML = `<span class="stats-place">#${place}</span> ${crown}<span class="stats-name">${name}</span> <span class="stats-kills">${playerStats[name].kills}</span>`;
     container.appendChild(row);
   });
 

js/utils.js

@@ -123,7 +123,23 @@ function applyOverlayScale(W, H) {
     if (note) note.style.fontSize = Math.round(16 * H / 1000) + "px";
   }
   const goTitle = document.getElementById("gameover-title");
-  if (goTitle) goTitle.style.fontSize = Math.round(32 * H / 1000) + "px";
+  if (goTitle) goTitle.style.fontSize = Math.round(64 * H / 1000) + "px";
+  const goSubs = document.querySelectorAll("#gameover-screen .screen-subtitle");
+  for (let el of goSubs) el.style.fontSize = Math.round(28 * H / 1000) + "px";
+  const statsTitle = document.querySelectorAll(".stats-section-title");
+  for (let el of statsTitle) el.style.fontSize = Math.round(28 * H / 1000) + "px";
+  const statsTop1 = document.querySelectorAll(".stats-top1");
+  for (let el of statsTop1) el.style.fontSize = Math.round(48 * H / 1000) + "px";
+  const statsTop2 = document.querySelectorAll(".stats-top2");
+  for (let el of statsTop2) el.style.fontSize = Math.round(36 * H / 1000) + "px";
+  const statsTop3 = document.querySelectorAll(".stats-top3");
+  for (let el of statsTop3) el.style.fontSize = Math.round(28 * H / 1000) + "px";
+  const statsRow = document.querySelectorAll(".stats-row:not(.stats-top1):not(.stats-top2):not(.stats-top3)");
+  for (let el of statsRow) el.style.fontSize = Math.round(24 * H / 1000) + "px";
+  const mazila = document.querySelectorAll(".stats-mazila");
+  for (let el of mazila) el.style.fontSize = Math.round(28 * H / 1000) + "px";
+  const crown = document.querySelectorAll(".stats-crown");
+  for (let el of crown) el.style.fontSize = Math.round(56 * H / 1000) + "px";
 }
 
 function drawGrid() {

style.css

@@ -118,32 +118,33 @@ body {
 }
 .screen-title {
   color: #00ff41;
-  font-size: 32px;
+  font-size: 64px;
   margin-bottom: 12px;
   text-shadow: 0 0 20px #00ff41;
   letter-spacing: 4px;
 }
 .screen-subtitle {
   color: #00cc33;
-  font-size: 14px;
+  font-size: 28px;
   margin-bottom: 30px;
   opacity: 0.8;
 }
 #player-stats {
   margin-bottom: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   width: 80%;
-  max-width: 400px;
 }
 .stats-section-title {
   color: #00ff41;
-  font-size: 16px;
+  font-size: 28px;
   letter-spacing: 3px;
   margin-bottom: 10px;
   text-shadow: 0 0 10px #00ff41;
 }
 .stats-row {
   display: flex;
-  justify-content: space-between;
   align-items: center;
   padding: 4px 12px;
   margin-bottom: 4px;
@@ -151,47 +152,56 @@ body {
   opacity: 0.8;
 }
 .stats-top1 {
-  font-size: 18px;
+  font-size: 48px;
   font-weight: bold;
   color: #00ff41;
   border-left-width: 4px;
   opacity: 1;
-  text-shadow: 0 0 12px #00ff41;
+  text-shadow: 0 0 16px #00ff41;
+}
+.stats-crown {
+  font-size: 1.2em;
+  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.7));
 }
 .stats-top2 {
-  font-size: 15px;
+  font-size: 40px;
   font-weight: 600;
   color: #00dd33;
   opacity: 0.9;
+  text-shadow: 0 0 10px #00dd33;
 }
 .stats-top3 {
-  font-size: 13px;
+  font-size: 36px;
   color: #00bb22;
+  text-shadow: 0 0 8px #00bb22;
 }
 .stats-place {
   min-width: 28px;
 }
 .stats-name {
-  flex: 1;
   text-align: left;
   margin-left: 8px;
+  margin-right: 10vw;
 }
 .stats-kills {
   min-width: 24px;
   text-align: right;
 }
 .stats-mazila {
-  margin-top: 14px;
+  margin-top: 40px;
-  font-size: 14px;
+  font-size: 28px;
-  color: #ff6644;
+  color: #ff4444;
-  opacity: 0.85;
+  text-shadow:
+    0 0 12px #ff4444,
+    0 0 24px rgba(255, 68, 68, 0.4);
 }
 .mazila-title {
   font-weight: bold;
-  text-shadow: 0 0 8px #ff6644;
+  color: #ff6666;
+  text-shadow: 0 0 16px #ff6666;
 }
 .mazila-count {
-  opacity: 0.6;
+  color: #cc2222;
 }
 .hidden {
   display: none !important;