render league brackets correctly for two weeks per round leagues

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.2.17] - 2022-04-13
+
+### Fixed
+
+- Brackets now account for two week per round leagues [issue #97](https://github.com/nmelhado/league-page/issues/97)
+
 ## [1.2.16] - 2022-01-06
 
 ### Fixed

package.json

@@ -1,6 +1,6 @@
 {
   "name": "league-page",
-  "version": "1.2.16",
+  "version": "1.2.17",
   "homepage": "https://github.com/nmelhado/league-page",
   "repository": {
     "type": "git",

src/lib/Matchups/Brackets.svelte

@@ -1,6 +1,7 @@
 <script>
     import { goto } from "$app/navigation";
     import { onMount } from "svelte";
+    import Button, { Group, Label } from '@smui/button';
     import BracketsColumn from "./BracketsColumn.svelte";
     import Matchup from "./Matchup.svelte";
 
@@ -66,6 +67,12 @@
         window.scrollTo({left: 0, top, behavior: 'smooth'});
     }
 
+    let matchupWeek = 1;
+
+    const changeMatchupGame = (week) => {
+        matchupWeek = week;
+    }
+
     $: changeDisplay(selected);
 </script>
 
@@ -84,6 +91,13 @@
         padding: 2em 0;
         margin-bottom: 2em;
     }
+
+    .buttonHolder {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin: 3em 0;
+    }
 </style>
 
 <div class="brackets">
@@ -104,6 +118,20 @@
 
 <div class="matchupEnclosure" bind:this={el}>
     {#if matchup}
-        <Matchup ix={selected} active={selected} {matchup} {players} {displayWeek} expandOverride={true} />
+        {#if matchup[0].starters[2] }
+            <div class="buttonHolder">
+                <Group variant="outlined">
+                    <!-- Regular Season -->
+                    <Button class="selectionButtons" on:click={() => changeMatchupGame(1)} variant="{matchupWeek == 1 ? "raised" : "outlined"}">
+                        <Label>First Week</Label>
+                    </Button>
+                    <!-- Championship Bracket -->
+                    <Button class="selectionButtons" on:click={() => changeMatchupGame(2)} variant="{matchupWeek == 2 ? "raised" : "outlined"}">
+                        <Label>Second Week</Label>
+                    </Button>
+                </Group>
+            </div>
+        {/if}
+        <Matchup ix={selected} active={selected} {matchup} {matchupWeek} {players} {displayWeek} expandOverride={true} />
     {/if}
 </div>

src/lib/Matchups/BracketsColumn.svelte

@@ -101,20 +101,31 @@
         return '';
     }
 
-    const calculatePoints = (points) => {
-        if(!points) return 0;
+    const calculatePoints = (allPoints) => {
+        if(Array.isArray(allPoints)) return 0;
         let totalPoints = 0;
-        for(const point of points) {
-            totalPoints += point;
+        for(const k in allPoints) {
+            const points = allPoints[k];
+            if(!points) break;
+            for(const point of points) {
+                totalPoints += point;
+            }
         }
         return round(totalPoints)
     }
 
-    const calculatePotentialPoints = (starters, ix, p) => {
-        if(!starters) return 0;
+    const calculatePotentialPoints = (startersWeeks, ix, p) => {
+        if(!startersWeeks) return 0;
         let totalPoints = 0;
-        for(const starter of starters) {
-            totalPoints += parseFloat(players[starter]?.wi && players[starter].wi[playoffsStart - ix]?.p ? players[starter].wi[playoffsStart - ix].p : 0);
+        
+        for(const k in startersWeeks) {
+            const starters = startersWeeks[k];
+            if(!starters) break;
+
+            const i = ix + k -1;
+            for(const starter of starters) {
+                totalPoints += parseFloat(players[starter]?.wi && players[starter].wi[playoffsStart - i]?.p ? players[starter].wi[playoffsStart - i].p : 0);
+            }
         }
         return round(totalPoints);
     }
@@ -242,13 +253,13 @@
         line-height: 1.1em;
         font-size: 0.85em;
         padding-left: 1em;
-        color: #333;
+        color: var(--g333);
         text-align: right;
     }
 
     .projectedPoints {
         font-size: 0.8em;
-        color: #888;
+        color: var(--g999);
     }
 
     /* SVG styling */

src/lib/Matchups/Matchup.svelte

@@ -1,7 +1,7 @@
 <script>
     import {round} from '$lib/utils/helper'
 
-    export let matchup, players, active, ix, displayWeek, expandOverride=false;
+    export let matchup, players, active, ix, displayWeek, expandOverride=false, matchupWeek;
 
     let home = matchup[0];
     let away = matchup[1];
@@ -16,10 +16,10 @@
     const digestStarters = (x, p) => {
         home = matchup[0];
         away = matchup[1];
-        const homeStarters = home.starters;
-        const awayStarters = away.starters;
-        const homePoints = home.points;
-        const awayPoints = away.points;
+        const homeStarters = matchupWeek ? home.starters[matchupWeek] : home.starters;
+        const awayStarters = matchupWeek ? away.starters[matchupWeek] : away.starters;
+        const homePoints = matchupWeek ? home.points[matchupWeek] : home.points;
+        const awayPoints = matchupWeek ? away.points[matchupWeek] : away.points;
 
         homePointsTotal = 0;
         homeProjectionTotal = 0;
@@ -75,7 +75,7 @@
 
     let starters;
     
-    $: digestStarters(ix, players);
+    $: digestStarters(ix, players, matchupWeek);
 
     let el;
 
@@ -100,7 +100,8 @@
         if(innerWidth < 410) {
             multiplier = 71;
         }
-        return home.starters.length * multiplier + 37;
+        const startersLength = matchupWeek ? home.starters[matchupWeek].length : home.starters.length;
+        return startersLength * multiplier + 37;
     }
 
 </script>