ryan/games
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 9 Wiki Activity

feat: add snake multiplayer chat as sidebar with vivid player colors

Browse Source 
Move chat to the right of the board using a flex wrapper that stacks
vertically on narrow screens. Restore original snake player colors by
removing the desaturation filter added with the dark theme.
This commit is contained in:
Ryan Hamamura
2026-02-05 10:15:26 -10:00
parent 0279615b36
commit 3d019fd948
4 changed files with 248 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
assets/css/output.css
View File

@@ -1252,6 +1252,14 @@
}
}
}
.chat {
@layer daisyui.l1.l2.l3 {
display: grid;
column-gap: calc(0.25rem * 3);
padding-block: calc(0.25rem * 1);
--mask-chat: url("data:image/svg+xml,%3csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='black' d='M0 11.5004C0 13.0004 2 13.0004 2 13.0004H12H13V0.00036329L12.5 0C12.5 0 11.977 2.09572 11.8581 2.50033C11.6075 3.35237 10.9149 4.22374 9 5.50036C6 7.50036 0 10.0004 0 11.5004Z'/%3e%3c/svg%3e");
}
}
.flex {
display: flex;
}
@@ -1432,6 +1440,9 @@
.opacity-60 {
opacity: 60%;
}
.opacity-70 {
opacity: 70%;
}
.btn-ghost {
@layer daisyui.l1 {
&:not(.btn-active, :hover, :active:focus, :focus-visible, input:checked:not(.filter .btn)) {
@@ -1607,11 +1618,67 @@
.snake-wrapper:focus {
outline: none;
}
.snake-cell[style*="background"] {
filter: saturate(0) brightness(0.85);
.snake-game-area {
display: flex;
gap: 16px;
align-items: flex-start;
justify-content: center;
}
.snake-cell.snake-head[style] {
box-shadow: none !important;
@media (max-width: 768px) {
.snake-game-area {
flex-direction: column;
align-items: center;
}
}
.snake-chat {
width: 100%;
max-width: 480px;
}
.snake-game-area .snake-chat {
width: 260px;
max-width: none;
flex-shrink: 0;
}
.snake-chat-history {
height: 300px;
overflow-y: auto;
background: #334;
border-radius: 8px 8px 0 0;
padding: 8px;
display: flex;
flex-direction: column;
gap: 2px;
}
.snake-chat-msg {
font-size: 0.85rem;
line-height: 1.3;
}
.snake-chat-input {
display: flex;
gap: 0;
background: #445;
border-radius: 0 0 8px 8px;
overflow: hidden;
}
.snake-chat-input input {
flex: 1;
padding: 6px 10px;
background: transparent;
border: none;
color: inherit;
outline: none;
font-size: 0.85rem;
}
.snake-chat-input button {
padding: 6px 14px;
background: #556;
border: none;
color: inherit;
cursor: pointer;
font-size: 0.85rem;
}
.snake-chat-input button:hover {
background: #667;
}
@layer base {
:where(:root),:root:has(input.theme-controller[value=light]:checked),[data-theme=light] {