Add skin value and back-nine doubling to skins games

Players can now set a monetary value per skin when starting a skins game.
For 18-hole games, an option to double the value on holes 10–18 is available.
The value is stored at game creation and displayed throughout the live game
and summary (leaderboard, scorecard, and totals).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Rolf
2026-03-23 20:56:13 +01:00
parent 8601584099
commit 6317422316
5 changed files with 118 additions and 38 deletions
+24 -5
View File
@@ -28,6 +28,8 @@
courseSearch: '',
format: 'bingo_bango_bongo',
carryoverEnabled: true,
skinValue: '',
skinDoubleBackNine: false,
holesCount: '',
selectedPlayers: ['{{ user.id }}'],
selectedTees: {},
@@ -62,10 +64,10 @@
const player = this.getPlayer(uid);
const tee = this.getTee(uid);
const course = COURSES_DATA.find(c => c.id === this.courseId);
if (!course || !tee || player.handicap == null) return null;
const coursePar = (parseInt(this.holesCount) === 9 && course.holes === 18) ? course.par_9 : course.par;
if (!coursePar) return null;
return Math.round(player.handicap * (tee.slope / 113) + (tee.rating - coursePar));
if (!course || !tee || player.handicap == null || !course.par) return null;
const nineOfEighteen = parseInt(this.holesCount) === 9 && course.holes === 18;
const ph = Math.round(player.handicap * (tee.slope / 113) + (tee.rating - course.par));
return nineOfEighteen ? Math.round(ph / 2) : ph;
},
goToConfirm() { this.step = 3; },
backFromConfirm() { this.step = this.hasTees() ? 2 : 1; },
@@ -101,12 +103,25 @@
<span>Skins</span>
</label>
</div>
<div x-show="format === 'skins'" style="margin-top:0.75rem;">
<div x-show="format === 'skins'" style="margin-top:0.75rem; display:flex; flex-direction:column; gap:0.5rem;">
<label style="display:flex; align-items:center; gap:0.5rem; cursor:pointer;">
<input type="checkbox" name="carryover" value="1" checked style="width:auto;"
@change="carryoverEnabled = $event.target.checked">
<span style="font-weight:400; color:var(--text-muted);">Carryover (ties carry to next hole)</span>
</label>
<div style="display:flex; align-items:center; gap:0.75rem;">
<span style="font-weight:400; color:var(--text-muted); font-size:0.95rem;">Value per skin</span>
<input type="number" name="skin_value" x-model="skinValue" min="0" step="0.5"
placeholder="—"
style="width:5rem; padding:0.4rem 0.5rem; border-radius:0.4rem; border:1px solid var(--border); background:var(--surface2); color:var(--text); font-size:1rem; text-align:center;">
</div>
<div x-show="skinValue && holesCount == 18">
<label style="display:flex; align-items:center; gap:0.5rem; cursor:pointer;">
<input type="checkbox" name="skin_double_back_nine" value="1" style="width:auto;"
@change="skinDoubleBackNine = $event.target.checked">
<span style="font-weight:400; color:var(--text-muted);">Double value on back nine (holes 1018)</span>
</label>
</div>
</div>
</div>
@@ -257,6 +272,10 @@
<span class="confirm-label">Carryover</span>
<span class="confirm-value" x-text="carryoverEnabled ? 'Yes' : 'No'"></span>
</div>
<div class="confirm-row" x-show="format === 'skins' && skinValue">
<span class="confirm-label">Skin value</span>
<span class="confirm-value" x-text="skinValue + (skinDoubleBackNine ? ' · doubles on back 9' : '')"></span>
</div>
<div class="confirm-row">
<span class="confirm-label">Course</span>
<span class="confirm-value" x-text="courseLabel || '—'"></span>