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

feat: add in-game chat to Connect 4
All checks were successful
Deploy c4 / deploy (push) Successful in 43s
Details

Browse Source 
Add real-time chat alongside the game board, mirroring the snake chat
implementation. Fix mobile layout for both C4 and snake chats — expand
chat to full width and reduce history height on small screens.
This commit is contained in:
Ryan Hamamura
2026-02-13 10:54:19 -10:00
parent e45559ecb3
commit 9069530e47
4 changed files with 250 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
assets/css/input.css
View File

@@ -111,6 +111,8 @@
}
@media (max-width: 768px) {
.snake-game-area { flex-direction: column; align-items: center; }
.snake-game-area .snake-chat { width: 100%; max-width: 480px; }
.snake-chat-history { height: 150px; }
}
/* Snake chat */
@@ -152,3 +154,56 @@
font-size: 0.85rem;
}
.snake-chat-input button:hover { background: #667; }
/* C4 game area: board + chat side-by-side */
.c4-game-area {
display: flex;
gap: 16px;
align-items: flex-start;
justify-content: center;
}
@media (max-width: 768px) {
.c4-game-area { flex-direction: column; align-items: center; }
.c4-game-area .c4-chat { width: 100%; max-width: 480px; }
.c4-chat-history { height: 150px; }
}
/* C4 chat */
.c4-chat { width: 100%; max-width: 480px; }
.c4-game-area .c4-chat { width: 260px; max-width: none; flex-shrink: 0; }
.c4-chat-history {
height: 300px;
overflow-y: auto;
background: #334;
border-radius: 8px 8px 0 0;
padding: 8px;
display: flex;
flex-direction: column;
gap: 2px;
}
.c4-chat-msg { font-size: 0.85rem; line-height: 1.3; }
.c4-chat-input {
display: flex;
gap: 0;
background: #445;
border-radius: 0 0 8px 8px;
overflow: hidden;
}
.c4-chat-input input {
flex: 1;
padding: 6px 10px;
background: transparent;
border: none;
color: inherit;
outline: none;
font-size: 0.85rem;
}
.c4-chat-input button {
padding: 6px 14px;
background: #556;
border: none;
color: inherit;
cursor: pointer;
font-size: 0.85rem;
}
.c4-chat-input button:hover { background: #667; }

76
assets/css/output.css
View File

@@ -1647,6 +1647,13 @@
flex-direction: column;
align-items: center;
}
.snake-game-area .snake-chat {
width: 100%;
max-width: 480px;
}
.snake-chat-history {
height: 150px;
}
}
.snake-chat {
width: 100%;
@@ -1698,6 +1705,75 @@
.snake-chat-input button:hover {
background: #667;
}
.c4-game-area {
display: flex;
gap: 16px;
align-items: flex-start;
justify-content: center;
}
@media (max-width: 768px) {
.c4-game-area {
flex-direction: column;
align-items: center;
}
.c4-game-area .c4-chat {
width: 100%;
max-width: 480px;
}
.c4-chat-history {
height: 150px;
}
}
.c4-chat {
width: 100%;
max-width: 480px;
}
.c4-game-area .c4-chat {
width: 260px;
max-width: none;
flex-shrink: 0;
}
.c4-chat-history {
height: 300px;
overflow-y: auto;
background: #334;
border-radius: 8px 8px 0 0;
padding: 8px;
display: flex;
flex-direction: column;
gap: 2px;
}
.c4-chat-msg {
font-size: 0.85rem;
line-height: 1.3;
}
.c4-chat-input {
display: flex;
gap: 0;
background: #445;
border-radius: 0 0 8px 8px;
overflow: hidden;
}
.c4-chat-input input {
flex: 1;
padding: 6px 10px;
background: transparent;
border: none;
color: inherit;
outline: none;
font-size: 0.85rem;
}
.c4-chat-input button {
padding: 6px 14px;
background: #556;
border: none;
color: inherit;
cursor: pointer;
font-size: 0.85rem;
}
.c4-chat-input button:hover {
background: #667;
}
@layer base {
:where(:root),:root:has(input.theme-controller[value=light]:checked),[data-theme=light] {
color-scheme: light;