Add straight up / net handicap option for skins games

When creating a skins game, players can now choose between straight up
(gross scores) or net scoring (strokes subtracted per hole based on
playing handicap and stroke index). Net mode is stored on the game and
applied in both the live scorecard and the summary.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/templates/games/game.html

@@ -280,6 +280,7 @@ const GAME_FORMAT = "{{ game.format }}";
 const SKINS_CARRYOVER = {{ carryover | tojson }};
 const SKIN_VALUE = {{ skin_value | tojson }};
 const SKIN_DOUBLE_BACK9 = {{ skin_double_back9 | tojson }};
+const SKINS_NET = {{ skins_net | tojson }};
 const HOLE_PARS = {{ hole_pars | tojson }};
 const HOLE_SIS = {{ hole_stroke_indices | tojson }};
 const STROKES_PER_HOLE = {{ strokes_per_hole | tojson }};
@@ -494,8 +495,12 @@ function gameApp() {
         if (this.isSkipped(hole)) continue;
         const holeScores = this.scores[hole] || {};
         const scored = PLAYERS_DATA
-          .map(p => ({ id: p.id, strokes: holeScores[p.id]?.strokes || 0 }))
-          .filter(x => x.strokes > 0);
+          .map(p => {
+            const gross = holeScores[p.id]?.strokes || 0;
+            const net = SKINS_NET ? gross - ((STROKES_PER_HOLE[p.id] || {})[hole] || 0) : gross;
+            return { id: p.id, strokes: net, gross };
+          })
+          .filter(x => x.gross > 0);
         if (scored.length === 0) continue;
         pot += 1;
         if (SKIN_VALUE) moneyPot += SKIN_VALUE * (SKIN_DOUBLE_BACK9 && hole >= 10 ? 2 : 1);

app/templates/games/new_game.html

@@ -30,6 +30,7 @@
        carryoverEnabled: true,
        skinValue: '',
        skinDoubleBackNine: false,
+       skinsNet: false,
        holesCount: '',
        selectedPlayers: ['{{ user.id }}'],
        selectedTees: {},
@@ -104,6 +105,19 @@
             </label>
           </div>
           <div x-show="format === 'skins'" 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;">
+                <input type="radio" name="_skins_mode" value="0" checked
+                       @change="skinsNet = false">
+                <span>Straight up</span>
+              </label>
+              <label class="radio-card" style="flex:1;">
+                <input type="radio" name="_skins_mode" value="1"
+                       @change="skinsNet = true">
+                <span>Net (handicap)</span>
+              </label>
+            </div>
             <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">
@@ -268,6 +282,10 @@
           <span class="confirm-label">Format</span>
           <span class="confirm-value" x-text="formatLabel()"></span>
         </div>
+        <div class="confirm-row" x-show="format === 'skins'">
+          <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'">
           <span class="confirm-label">Carryover</span>
           <span class="confirm-value" x-text="carryoverEnabled ? 'Yes' : 'No'"></span>

app/templates/games/summary.html

@@ -7,7 +7,7 @@
     <a href="javascript:history.back()" style="color:var(--text-muted); font-size:0.9rem;">← Back</a>
     <div style="text-align:center;">
       <div style="font-weight:600;">{{ game.course_name or 'Bingo Bango Bongo' }}</div>
-      <div style="font-size:0.8rem; color:var(--text-muted);">{{ game.holes_count }} holes · {{ game.created_at[:10] }}</div>
+      <div style="font-size:0.8rem; color:var(--text-muted);">{{ game.holes_count }} holes · {{ game.created_at[:10] }}{% if game.format == 'skins' and skins_net %} · net{% endif %}</div>
     </div>
     <div style="width:3rem;"></div>
   </div>