Add Skins as a side game for Bingo Bango Bongo

Players can now opt into a Skins side game when creating a BBB round.
The side game uses the same skins settings (carryover, net/gross, skin
value, double back nine). The scorecard gains a third Skins tab during
play and on the summary; the BBB leaderboard continues to rank by BBB
points.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Rolf
2026-03-23 22:09:16 +01:00
parent c298c473f4
commit 5432734240
5 changed files with 56 additions and 18 deletions
+19 -5
View File
@@ -31,6 +31,7 @@
skinValue: '',
skinDoubleBackNine: false,
skinsNet: false,
sideSkinsEnabled: false,
holesCount: '',
selectedPlayers: ['{{ user.id }}'],
selectedTees: {},
@@ -80,6 +81,7 @@
backFromConfirm() { this.step = this.hasTees() ? 2 : 1; },
formatLabel() {
if (this.format === 'skins') return 'Skins';
if (this.sideSkinsEnabled) return 'Bingo Bango Bongo + Skins';
return 'Bingo Bango Bongo';
}
}">
@@ -106,11 +108,18 @@
</label>
<label class="radio-card" style="flex:1;">
<input type="radio" name="format" value="skins"
@change="format = $event.target.value">
@change="format = $event.target.value; sideSkinsEnabled = false">
<span>Skins</span>
</label>
</div>
<div x-show="format === 'skins'" style="margin-top:0.75rem; display:flex; flex-direction:column; gap:0.5rem;">
<div x-show="format === 'bingo_bango_bongo'" style="margin-top:0.5rem;">
<label style="display:flex; align-items:center; gap:0.5rem; cursor:pointer;">
<input type="checkbox" style="width:auto;"
@change="sideSkinsEnabled = $event.target.checked">
<span style="font-weight:400; color:var(--text-muted);">Add Skins as a side game</span>
</label>
</div>
<div x-show="format === 'skins' || sideSkinsEnabled" style="margin-top:0.75rem; display:flex; flex-direction:column; gap:0.5rem;">
<input type="hidden" name="skins_net" :value="skinsNet ? '1' : '0'">
<div style="display:flex; gap:0.75rem;">
<label class="radio-card" style="flex:1;">
@@ -288,15 +297,19 @@
<span class="confirm-label">Format</span>
<span class="confirm-value" x-text="formatLabel()"></span>
</div>
<div class="confirm-row" x-show="format === 'skins'">
<div class="confirm-row" x-show="format === 'bingo_bango_bongo' && sideSkinsEnabled">
<span class="confirm-label">Side game</span>
<span class="confirm-value">Skins</span>
</div>
<div class="confirm-row" x-show="format === 'skins' || sideSkinsEnabled">
<span class="confirm-label">Scoring</span>
<span class="confirm-value" x-text="skinsNet ? 'Net (handicap)' : 'Straight up'"></span>
</div>
<div class="confirm-row" x-show="format === 'skins'">
<div class="confirm-row" x-show="format === 'skins' || sideSkinsEnabled">
<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">
<div class="confirm-row" x-show="(format === 'skins' || sideSkinsEnabled) && skinValue">
<span class="confirm-label">Skin value</span>
<span class="confirm-value" x-text="skinValue + (skinDoubleBackNine ? ' · doubles on back 9' : '')"></span>
</div>
@@ -354,6 +367,7 @@
<template x-for="pid in selectedPlayers" :key="pid">
<input type="hidden" name="players" :value="pid">
</template>
<input type="hidden" name="side_skins_enabled" :value="sideSkinsEnabled ? '1' : '0'">
</form>
</div>