feat: join pervious game added

2026-04-19 11:14:14 +02:00
parent bc644c16e3
commit fdc0f1d73b
3 changed files with 162 additions and 4 deletions
@@ -204,6 +204,93 @@ p {
  color: white;
 }

+.join-game-form {
+  grid-column: 1 / -1;
+  background: var(--color-bg-card);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--border-radius-md);
+  padding: var(--size-lg-padding);
+  margin: var(--size-md) 0;
+}
+
+.join-game-form p {
+  margin: 0 0 var(--size-md);
+  font-weight: 600;
+}
+
+.join-game-input-group {
+  display: flex;
+  gap: var(--size-md-gap);
+  flex-wrap: wrap;
+}
+
+.join-game-input {
+  flex: 1;
+  min-width: 150px;
+  padding: var(--size-md-padding);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--border-radius-md);
+  background: white;
+  color: var(--color-text-primary);
+  font-family: inherit;
+  font-size: 1rem;
+  transition: border-color 0.3s ease;
+}
+
+.join-game-input:focus {
+  outline: none;
+  border-color: var(--color-secondary-mint);
+  box-shadow: 0 0 0 3px rgba(185, 218, 209, 0.2);
+}
+
+.join-game-input:disabled {
+  background: var(--color-bg-card);
+  opacity: 0.6;
+}
+
+.join-game-btn {
+  padding: var(--size-md-padding) var(--size-lg);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--border-radius-md);
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 0.95rem;
+  transition: all 0.3s ease;
+}
+
+.join-game-btn.join {
+  background: var(--color-secondary-mint);
+  color: var(--color-text-primary);
+}
+
+.join-game-btn.join:hover:enabled {
+  background: var(--color-secondary-blue);
+}
+
+.join-game-btn.join:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.join-game-btn.cancel {
+  background: var(--color-bg-card);
+  color: var(--color-text-primary);
+}
+
+.join-game-btn.cancel:hover:enabled {
+  background: var(--color-border);
+}
+
+.join-game-btn.cancel:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.difficulty-btn.hard:hover:enabled {
+  background: var(--color-danger, #dc3545);
+  color: white;
+}
+
 .difficulty-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;