batmanisko
6cb1214f08
CI / Generate TypeScript types (push) Canceled after 7s
CI / Server unit tests (push) Canceled after 0s
CI / Build server (push) Canceled after 0s
CI / Build client (push) Canceled after 0s
CI / Playwright E2E tests (push) Canceled after 0s
CI / Build and push Docker image (push) Canceled after 0s
CI / Notify (push) Canceled after 0s
Minihry se otevírají trojklikem na logo a napsáním kódu hry
("help" vypíše seznam do konzole prohlížeče):
- reakce: reakční hra, 3 kola, pořadí podle součtu časů
- snake: had pro více hráčů, simulaci drží server
- tetris: battle Tetris s odpadními řádky a lokálním tréninkem
- pong: Pong 1v1, ovládání myší i klávesami, bot se 4 obtížnostmi
- kresleni: kreslení a hádání jídel z dnešních menu
Ikony her se řídí zvoleným vzhledem. Stav her je v paměti serveru,
předpokládá se jedna replika.
146 lines
2.8 KiB
SCSS
146 lines
2.8 KiB
SCSS
// Pozvánka Kreslení nad pozvánkami ostatních her, aby se nepřekrývaly
|
|
.duel-invite.draw-invite {
|
|
bottom: 224px;
|
|
}
|
|
|
|
.drawing-game-modal {
|
|
.draw-topbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 16px;
|
|
margin-bottom: 10px;
|
|
font-size: 1.05rem;
|
|
}
|
|
|
|
.draw-hint {
|
|
// Mezery mezi slovy v masce se nesmí slít, jinak nejde poznat počet slov
|
|
white-space: pre;
|
|
font-family: monospace;
|
|
font-size: 1.4rem;
|
|
letter-spacing: 0.15em;
|
|
}
|
|
|
|
.draw-word strong {
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
.draw-timer.urgent {
|
|
color: #ef4444;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.draw-layout {
|
|
display: flex;
|
|
gap: 16px;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.draw-canvas-col {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
.draw-canvas {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
touch-action: none;
|
|
|
|
&.active {
|
|
cursor: crosshair;
|
|
}
|
|
}
|
|
|
|
.draw-tools {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.draw-color {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 50%;
|
|
border: 2px solid rgba(127, 127, 127, 0.5);
|
|
padding: 0;
|
|
|
|
&.selected {
|
|
outline: 3px solid var(--luncher-primary, #198754);
|
|
outline-offset: 1px;
|
|
}
|
|
}
|
|
|
|
.draw-size {
|
|
width: 32px;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 6px;
|
|
border: 1px solid rgba(127, 127, 127, 0.5);
|
|
background: transparent;
|
|
|
|
span {
|
|
display: block;
|
|
border-radius: 50%;
|
|
background: currentColor;
|
|
}
|
|
|
|
&.selected {
|
|
outline: 3px solid var(--luncher-primary, #198754);
|
|
}
|
|
}
|
|
|
|
.draw-sep {
|
|
width: 8px;
|
|
}
|
|
|
|
.draw-side {
|
|
flex: 0 0 260px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.draw-scores {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
|
|
li {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 2px 0;
|
|
}
|
|
|
|
.guessed {
|
|
color: #22c55e;
|
|
}
|
|
}
|
|
|
|
.draw-chat {
|
|
flex: 1 1 auto;
|
|
min-height: 200px;
|
|
max-height: 360px;
|
|
overflow-y: auto;
|
|
border: 1px solid rgba(127, 127, 127, 0.35);
|
|
border-radius: 6px;
|
|
padding: 6px 8px;
|
|
font-size: 0.9rem;
|
|
|
|
.system {
|
|
color: #22c55e;
|
|
font-style: italic;
|
|
}
|
|
}
|
|
|
|
.draw-players {
|
|
columns: 2;
|
|
}
|
|
}
|