Skip to content

simplify odds generator #184

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
notune wants to merge 5 commits into
base: master
Choose a base branch
from
Open

simplify odds generator #184

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
de33b50
simplify odds generator
notune Nov 25, 2025
c894890
disabled button for invalid config + guidance below button
notune Nov 26, 2025
8e2eef9
add checbox to toggle random frc value & update generated value in te…
notune Nov 26, 2025
4d7ca11
allow to copy invalid config
notune Nov 26, 2025
f55b72d
Merge branch 'master' into simplify-odds-generator
notune Nov 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 30 additions & 52 deletions layouts/shortcodes/odds-selector.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{{ .Page.Scratch.Add "requiredCSS" (slice "odds.css") }}
{{ .Page.Scratch.Add "requiredJS" (slice "odds.js") }}

<div class="container">
<div class="container odds-selector">

<!-- 1. Configuration Card -->
<div class="odds-card">
Expand All @@ -15,14 +15,20 @@ <h2 class="card-title">Game Configuration</h2>
<label for="frc-toggle">Enable Fischer Random (Chess960)</label>
</div>

<div id="frc-input-container" class="hidden indent-container">
<div class="input-group">
<label for="frc-id">FRC ID (0-959):</label>
<input type="number" id="frc-id" placeholder="Auto" min="0" max="959">
</div>
<small class="helper-text">Piece positions are determined from the Bot's perspective.</small>
</div>
</div>
<div id="frc-input-container" class="hidden indent-container">
<div class="input-group frc-input-group">
<label for="frc-id">FRC ID (0-959):</label>
<div class="frc-input-controls">
<input type="number" id="frc-id" min="0" max="959" value="0">
<label for="frc-random" class="frc-random-toggle">
<input type="checkbox" id="frc-random" checked>
<span>Generate random</span>
</label>
</div>
</div>
<small class="helper-text">Piece positions are determined from the Bot's perspective.</small>
</div>
</div>

<div class="radio-group">
<div class="radio-card selected">
Expand Down Expand Up @@ -106,50 +112,22 @@ <h3 class="column-label">Rooks</h3>
</div>
</div>

<!-- 3. Action Button -->
<button id="generateBtn" class="btn-generate">
<i class="material-symbols--bolt"></i>
Generate Link
</button>
<!-- 3. Action Buttons & Feedback -->
<div class="actions-container">
<div class="buttons-row" style="display: flex; gap: 0.75rem; margin-bottom: 1rem;">
<!-- Copy Button (Small, Left) -->
<button id="copyBtn" class="btn btn-secondary odds-btn" title="Copy Link" style="flex: 0 0 auto;">
<i class="material-symbols--content-copy"></i>
</button>

<!-- 4. Results -->
<div id="result" class="result-area">
<div class="result-card" id="resultCard">
<div class="result-header">
<div>
<div class="result-label">Target Bot</div>
<div class="result-bot-name" id="botValue">LeelaQueenOdds</div>
</div>
<div class="result-actions">
<button class="btn btn-secondary" id="copyBtn">
<i class="material-symbols--content-copy"></i> Copy
</button>
<a class="btn btn-primary" id="openLink" target="_blank" href="#">
<i class="material-symbols--open-in-new"></i> Open Lichess
</a>
</div>
</div>

<!-- Collapsible/Small Technical Info -->
<div class="tech-details">
<div class="detail-row">
<span class="detail-label">FEN</span>
<code class="detail-code" id="fenValue">rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq</code>
</div>
<div class="detail-row hidden" id="frcIdResultContainer">
<span class="detail-label">FRC ID</span>
<span id="frcIdValue">725</span>
</div>
</div>
<!-- Challenge Button (Main) -->
<button id="generateBtn" class="btn-generate odds-btn" style="flex: 1;">
⚔️ Challenge
</button>
</div>

<!-- Error Message -->
<div class="alert alert-important hidden">
<summary class="alert-header">
<i class="material-symbols--error"></i>
Error
</summary>
<p id="errorMessage"></p>
</div>
<small id="configHint" class="config-hint hidden" aria-live="polite" style="display: block; margin-top: 0.25rem;">
Complete the configuration to generate a challenge.
</small>
</div>
</div>
</div>
119 changes: 85 additions & 34 deletions themes/leela/assets/css/additional/odds.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,31 +52,66 @@
border-left: 2px solid var(--color-border-primary);
}

.input-group {
display: flex;
align-items: center;
gap: 1rem;
}

#frc-id {
padding: 0.5rem;
border: 1px solid var(--color-border-primary);
background-color: var(--color-bg-secondary);
color: var(--color-text-primary);
border-radius: 0.375rem;
width: 100px;
}

#frc-id:focus {
border-color: var(--color-border-active);
outline: none;
}

.helper-text {
display: block;
margin-top: 0.5rem;
font-size: 0.75rem;
font-style: italic;
.input-group {
display: flex;
align-items: center;
gap: 1rem;
}

.frc-input-group {
flex-wrap: wrap;
}

#frc-id {
padding: 0.5rem;
border: 1px solid var(--color-border-primary);
background-color: var(--color-bg-primary);
color: var(--color-text-primary);
border-radius: 0.375rem;
width: 100px;
}

#frc-id[readonly] {
background-color: var(--color-bg-secondary);
color: var(--color-text-secondary);
cursor: not-allowed;
}

#frc-id:focus {
border-color: var(--color-border-active);
outline: none;
}

.frc-input-controls {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}

.frc-random-toggle {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.85rem;
font-weight: 600;
color: var(--color-text-primary);
cursor: pointer;
user-select: none;
}

.frc-random-toggle input {
width: 1rem;
height: 1rem;
cursor: pointer;
accent-color: var(--color-accent);
}

.helper-text {
display: block;
margin-top: 0.5rem;
font-size: 0.75rem;
font-style: italic;
color: var(--color-text-tertiary);
}

Expand Down Expand Up @@ -345,12 +380,28 @@
width: 60px;
}

.detail-code {
color: var(--color-text-secondary);
word-break: break-all;
}

/* --- Helpers --- */
.hidden {
display: none;
}
.detail-code {
color: var(--color-text-secondary);
word-break: break-all;
}

.odds-selector .odds-btn {
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.odds-selector .odds-btn:disabled,
.odds-selector .odds-btn.odds-btn-disabled {
background-color: #d1d5db;
border-color: #d1d5db;
color: #4b5563;
cursor: not-allowed;
}

.odds-selector .config-hint {
color: #000;
}

/* --- Helpers --- */
.hidden {
display: none;
}
Loading