alois/OpenFrontIO
1
0
Fork 0
mirror of https://github.com/openfrontio/OpenFrontIO.git synced 2026-06-22 18:06:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #22 from q8gazy/styling-the-checkboxes

Browse Source 
styling the checkboxes
This commit is contained in:
evanpelle
2025-02-12 08:11:46 -08:00
committed by GitHub
parent 2ca6c6d04c 9c0c5b667c
commit 82953d0141
2 changed files with 152 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/HostLobbyModal.ts
+76 -24
View File
@@ -198,7 +198,35 @@ export class HostLobbyModal extends LitElement {
align-items: center;
justify-content: center;
}
.option-card input[type="checkbox"] {
display: none;
}
label.option-card:hover {
transform: none;
}
.checkbox-icon {
width: 16px;
height: 16px;
border: 2px solid #aaa;
border-radius: 6px;
margin: 4px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease-in-out;
}
.option-card.selected .checkbox-icon {
border-color: #4a9eff;
background: #4a9eff;
}
.option-card.selected .checkbox-icon::after {
content: "✓";
color: white;
}
/* HostLobbyModal css */
.clipboard-icon {
display: flex;
@@ -358,6 +386,54 @@ export class HostLobbyModal extends LitElement {
</div>
</div>
<!-- Game Options -->
<div class="options-section">
<div class="option-title">Options</div>
<div class="option-cards">
<label
for="disable-bots"
class="option-card ${this.disableBots ? "selected" : ""}"
>
<div class="checkbox-icon"></div>
<input
type="checkbox"
id="disable-bots"
@change=${this.handleDisableBotsChange}
.checked=${this.disableBots}
/>
<div class="option-card-title">Disable Bots</div>
</label>
<label
for="disable-npcs"
class="option-card ${this.disableNPCs ? "selected" : ""}"
>
<div class="checkbox-icon"></div>
<input
type="checkbox"
id="disable-npcs"
@change=${this.handleDisableNPCsChange}
.checked=${this.disableNPCs}
/>
<div class="option-card-title">Disable NPCs</div>
</label>
<label
for="creative-mode"
class="option-card ${this.creativeMode ? "selected" : ""}"
>
<div class="checkbox-icon"></div>
<input
type="checkbox"
id="creative-mode"
@change=${this.handleCreativeModeChange}
.checked=${this.creativeMode}
/>
<div class="option-card-title">Creative Mode</div>
</label>
</div>
</div>
<!-- Lobby Selection -->
<div class="options-section">
<div class="option-title">
@@ -371,30 +447,6 @@ export class HostLobbyModal extends LitElement {
)}
</div>
</div>
<div>
<input
type="checkbox"
id="disable-bots"
@change=${this.handleDisableBotsChange}
/>
<label for="disable-bots">Disable Bots</label>
</div>
<div>
<input
type="checkbox"
id="disable-npcs"
@change=${this.handleDisableNPCsChange}
/>
<label for="disable-npcs">Disable NPCs</label>
</div>
<div>
<input
type="checkbox"
id="creative-mode"
@change=${this.handleCreativeModeChange}
/>
<label for="creative-mode">Creative mode</label>
</div>
</div>
<button
@click=${this.startGame}
src/client/SinglePlayerModal.ts
+76 -48
View File
@@ -193,6 +193,36 @@ export class SinglePlayerModal extends LitElement {
align-items: center;
justify-content: center;
}
.option-card input[type="checkbox"] {
display: none;
}
label.option-card:hover {
transform: none;
}
.checkbox-icon {
width: 16px;
height: 16px;
border: 2px solid #aaa;
border-radius: 6px;
margin: 4px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease-in-out;
}
.option-card.selected .checkbox-icon {
border-color: #4a9eff;
background: #4a9eff;
}
.option-card.selected .checkbox-icon::after {
content: "✓";
color: white;
}
`;
render() {
@@ -251,56 +281,54 @@ export class SinglePlayerModal extends LitElement {
)}
</div>
</div>
</div>
<div>
<input
type="checkbox"
id="disable-bots"
@change=${this.handleDisableBotsChange}
/>
<label for="disable-bots">Disable Bots</label>
</div>
<div>
<input
type="checkbox"
id="disable-npcs"
@change=${this.handleDisableNPCsChange}
/>
<label for="disable-npcs">Disable NPCs</label>
</div>
<div>
<input
type="checkbox"
id="disable-bots"
@change=${this.handleDisableBotsChange}
/>
<label for="disable-bots">Disable Bots</label>
</div>
<div>
<input
type="checkbox"
id="disable-npcs"
@change=${this.handleDisableNPCsChange}
/>
<label for="disable-npcs">Disable NPCs</label>
</div>
<div>
<input
type="checkbox"
id="creative-mode"
@change=${this.handleCreativeModeChange}
/>
<label for="creative-mode">Creative mode</label>
</div>
<!-- Game Options -->
<div class="options-section">
<div class="option-title">Options</div>
<div class="option-cards">
<label
for="disable-bots"
class="option-card ${this.disableBots ? "selected" : ""}"
>
<div class="checkbox-icon"></div>
<input
type="checkbox"
id="disable-bots"
@change=${this.handleDisableBotsChange}
.checked=${this.disableBots}
/>
<div class="option-card-title">Disable Bots</div>
</label>
<div>
<input
type="checkbox"
id="creative-mode"
@change=${this.handleCreativeModeChange}
/>
<label for="creative-mode">Creative mode</label>
<label
for="disable-npcs"
class="option-card ${this.disableNPCs ? "selected" : ""}"
>
<div class="checkbox-icon"></div>
<input
type="checkbox"
id="disable-npcs"
@change=${this.handleDisableNPCsChange}
.checked=${this.disableNPCs}
/>
<div class="option-card-title">Disable NPCs</div>
</label>
<label
for="creative-mode"
class="option-card ${this.creativeMode ? "selected" : ""}"
>
<div class="checkbox-icon"></div>
<input
type="checkbox"
id="creative-mode"
@change=${this.handleCreativeModeChange}
.checked=${this.creativeMode}
/>
<div class="option-card-title">Creative Mode</div>
</label>
</div>
</div>
</div>
<button @click=${this.startGame} class="start-game-button">