sepia
/
gomoku
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Restyle buttons

This commit is contained in:
sepia 2025-07-23 21:22:45 -05:00
parent f11b4c935f
commit 6903784136
2 changed files with 50 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
public/style.css
View File

@ -230,9 +230,7 @@ body {
vertical-align: middle; vertical-align: middle;
} }
button { #button-box button {
background-color: var(--color-primary);
color: var(--color-on-primary);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -242,12 +240,9 @@ button {
white-space: nowrap; white-space: nowrap;
border: none; border: none;
cursor: pointer; cursor: pointer;
gap: 8px;
font-size: 1em; font-size: 1em;
} flex-grow: 1;
flex-basis: 0;
button:hover {
background-color: var(--color-primary-light);
} }
#button-box { #button-box {
@ -260,12 +255,12 @@ button:hover {
} }
#resign-button { #resign-button {
background-color: var(--color-error); background-color: var(--color-primary);
color: var(--color-on-primary); color: var(--color-on-primary);
} }
#resign-button:hover { #resign-button:hover {
background-color: var(--color-error-light); background-color: var(--color-primary-light);
} }
#copy-link-button { #copy-link-button {
@ -277,6 +272,42 @@ button:hover {
background-color: var(--color-success); background-color: var(--color-success);
} }
#takeback-button {
background-color: var(--color-info);
color: var(--color-on-primary);
}
#takeback-button:hover {
background-color: var(--color-info-light);
}
#draw-button {
background-color: var(--color-secondary);
color: var(--color-on-secondary);
}
#draw-button:hover {
background-color: var(--color-secondary-light);
}
.accept-button {
background-color: var(--color-success);
color: var(--color-on-primary);
}
.accept-button:hover {
background-color: var(--color-success-light);
}
.decline-button {
background-color: var(--color-error);
color: var(--color-on-primary);
}
.decline-button:hover {
background-color: var(--color-error-light);
}
.player-profile-box { .player-profile-box {
position: absolute; position: absolute;
top: 20px; top: 20px;

18
src/web-socket-handler.tsx
View File

@ -148,7 +148,7 @@ class GameServer {
if (this.takebackRequesterId) { if (this.takebackRequesterId) {
if (this.takebackRequesterId === conn.id) { if (this.takebackRequesterId === conn.id) {
buttons.push( buttons.push(
<button id="cancel-takeback-request-button" ws-send="click"> <button id="cancel-takeback-request-button" class="decline-button" ws-send="click">
<svg class="icon" alt="Cancel"> <svg class="icon" alt="Cancel">
<use href="/icons/decline.svg"></use> <use href="/icons/decline.svg"></use>
</svg> </svg>
@ -157,7 +157,7 @@ class GameServer {
); );
} else { } else {
buttons.push( buttons.push(
<button id="accept-takeback-button" ws-send="click"> <button id="accept-takeback-button" class="accept-button" ws-send="click">
<svg class="icon" alt="Accept"> <svg class="icon" alt="Accept">
<use href="/icons/accept.svg"></use> <use href="/icons/accept.svg"></use>
</svg> </svg>
@ -165,7 +165,7 @@ class GameServer {
</button>, </button>,
); );
buttons.push( buttons.push(
<button id="decline-takeback-button" ws-send="click"> <button id="decline-takeback-button" class="decline-button" ws-send="click">
<svg class="icon" alt="Decline"> <svg class="icon" alt="Decline">
<use href="/icons/decline.svg"></use> <use href="/icons/decline.svg"></use>
</svg> </svg>
@ -176,7 +176,7 @@ class GameServer {
} else if (this.drawRequesterId) { } else if (this.drawRequesterId) {
if (this.drawRequesterId === conn.id) { if (this.drawRequesterId === conn.id) {
buttons.push( buttons.push(
<button id="cancel-draw-request-button" ws-send="click"> <button id="cancel-draw-request-button" class="decline-button" ws-send="click">
<svg class="icon" alt="Cancel"> <svg class="icon" alt="Cancel">
<use href="/icons/decline.svg"></use> <use href="/icons/decline.svg"></use>
</svg> </svg>
@ -185,7 +185,7 @@ class GameServer {
); );
} else { } else {
buttons.push( buttons.push(
<button id="accept-draw-button" ws-send="click"> <button id="accept-draw-button" class="accept-button" ws-send="click">
<svg class="icon" alt="Accept"> <svg class="icon" alt="Accept">
<use href="/icons/accept.svg"></use> <use href="/icons/accept.svg"></use>
</svg> </svg>
@ -193,7 +193,7 @@ class GameServer {
</button>, </button>,
); );
buttons.push( buttons.push(
<button id="decline-draw-button" ws-send="click"> <button id="decline-draw-button" class="decline-button" ws-send="click">
<svg class="icon" alt="Decline"> <svg class="icon" alt="Decline">
<use href="/icons/decline.svg"></use> <use href="/icons/decline.svg"></use>
</svg> </svg>
@ -231,7 +231,7 @@ class GameServer {
if (this.rematchRequesterId) { if (this.rematchRequesterId) {
if (this.rematchRequesterId === conn.id) { if (this.rematchRequesterId === conn.id) {
buttons.push( buttons.push(
<button id="cancel-rematch-request-button" ws-send="click"> <button id="cancel-rematch-request-button" class="decline-button" ws-send="click">
<svg class="icon" alt="Cancel"> <svg class="icon" alt="Cancel">
<use href="/icons/decline.svg"></use> <use href="/icons/decline.svg"></use>
</svg> </svg>
@ -240,7 +240,7 @@ class GameServer {
); );
} else { } else {
buttons.push( buttons.push(
<button id="accept-rematch-button" ws-send="click"> <button id="accept-rematch-button" class="accept-button" ws-send="click">
<svg class="icon" alt="Accept"> <svg class="icon" alt="Accept">
<use href="/icons/accept.svg"></use> <use href="/icons/accept.svg"></use>
</svg> </svg>
@ -248,7 +248,7 @@ class GameServer {
</button>, </button>,
); );
buttons.push( buttons.push(
<button id="decline-rematch-button" ws-send="click"> <button id="decline-rematch-button" class="decline-button" ws-send="click">
<svg class="icon" alt="Decline"> <svg class="icon" alt="Decline">
<use href="/icons/decline.svg"></use> <use href="/icons/decline.svg"></use>
</svg> </svg>