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;
}
button {
background-color: var(--color-primary);
color: var(--color-on-primary);
#button-box button {
display: flex;
justify-content: center;
align-items: center;
@ -242,12 +240,9 @@ button {
white-space: nowrap;
border: none;
cursor: pointer;
gap: 8px;
font-size: 1em;
}
button:hover {
background-color: var(--color-primary-light);
flex-grow: 1;
flex-basis: 0;
}
#button-box {
@ -260,12 +255,12 @@ button:hover {
}
#resign-button {
background-color: var(--color-error);
background-color: var(--color-primary);
color: var(--color-on-primary);
}
#resign-button:hover {
background-color: var(--color-error-light);
background-color: var(--color-primary-light);
}
#copy-link-button {
@ -277,6 +272,42 @@ button:hover {
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 {
position: absolute;
top: 20px;

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

@ -148,7 +148,7 @@ class GameServer {
if (this.takebackRequesterId) {
if (this.takebackRequesterId === conn.id) {
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">
<use href="/icons/decline.svg"></use>
</svg>
@ -157,7 +157,7 @@ class GameServer {
);
} else {
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">
<use href="/icons/accept.svg"></use>
</svg>
@ -165,7 +165,7 @@ class GameServer {
</button>,
);
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">
<use href="/icons/decline.svg"></use>
</svg>
@ -176,7 +176,7 @@ class GameServer {
} else if (this.drawRequesterId) {
if (this.drawRequesterId === conn.id) {
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">
<use href="/icons/decline.svg"></use>
</svg>
@ -185,7 +185,7 @@ class GameServer {
);
} else {
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">
<use href="/icons/accept.svg"></use>
</svg>
@ -193,7 +193,7 @@ class GameServer {
</button>,
);
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">
<use href="/icons/decline.svg"></use>
</svg>
@ -231,7 +231,7 @@ class GameServer {
if (this.rematchRequesterId) {
if (this.rematchRequesterId === conn.id) {
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">
<use href="/icons/decline.svg"></use>
</svg>
@ -240,7 +240,7 @@ class GameServer {
);
} else {
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">
<use href="/icons/accept.svg"></use>
</svg>
@ -248,7 +248,7 @@ class GameServer {
</button>,
);
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">
<use href="/icons/decline.svg"></use>
</svg>