Merge pull request #30 from Acr515/development

v2024.1.2 merge-in

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fortyeight",
-  "version": "3.1.1",
+  "version": "3.1.2",
   "description": "",
   "homepage": "./",
   "main": "index.js",

public/manifest-ghp.json

@@ -0,0 +1,30 @@
+{
+    "short_name": "FortyEight",
+    "name": "FortyEight: FRC Scouting",
+    "icons": [
+        {
+            "src": "./pwa-icons/icon_1024.png",
+            "sizes": "1024x1024",
+            "type": "image/png"
+        },
+        {
+            "src": "./pwa-icons/icon_512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        },
+        {
+            "src": "./pwa-icons/icon_196.png",
+            "sizes": "196x196",
+            "type": "image/png"
+        },
+        {
+            "src": "./pwa-icons/icon_144.png",
+            "sizes": "144x144",
+            "type": "image/png"
+        }
+    ],
+    "start_url": "/FortyEight/",
+    "display": "standalone",
+    "theme_color": "#4941B1",
+    "background_color": "#fff"
+}

public/manifest.json → public/manifest-local.json

@@ -3,27 +3,27 @@
     "name": "FortyEight: FRC Scouting",
     "icons": [
         {
-            "src": "../pwa-icons/icon_1024.png",
+            "src": "./pwa-icons/icon_1024.png",
             "sizes": "1024x1024",
             "type": "image/png"
         },
         {
-            "src": "../pwa-icons/icon_512.png",
+            "src": "./pwa-icons/icon_512.png",
             "sizes": "512x512",
             "type": "image/png"
         },
         {
-            "src": "../pwa-icons/icon_196.png",
+            "src": "./pwa-icons/icon_196.png",
             "sizes": "196x196",
             "type": "image/png"
         },
         {
-            "src": "../pwa-icons/icon_144.png",
+            "src": "./pwa-icons/icon_144.png",
             "sizes": "144x144",
             "type": "image/png"
         }
     ],
-    "start_url": "../",
+    "start_url": "./",
     "display": "standalone",
     "theme_color": "#4941B1",
     "background_color": "#fff"

src/components/Input/index.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
-import './style.scss';
 import Chevron from '../../assets/images/chevron.png';
+import './style.scss';
+import Spinner from 'components/Spinner';
 
 /**
  * Creates an input box.
@@ -10,6 +11,7 @@ import Chevron from '../../assets/images/chevron.png';
  * @param onInput A function that runs alongside the input's normal input event. The `e` variable is automatically used as a parameter, so keep this in mind
  * @param isCheckbox Whether to make the input a checkbox or not
  * @param isNumerical Whether to add arrows that count up/down or not
+ * @param {array} bounds If isNumerical is true, the first entry should be the lower boundary and the second entry should be the upper boundary
  * @param optionList Omit if not using an option list. Should be an array of objects containing "label" and "value" keys
  * @param marginBottom Defaults to 18. Pixel margin to add to bottom of container element
  * @param alignLabel Where to vertically align the label of the textbox. Accepts a string "top", "middle", or "bottom"
@@ -23,7 +25,7 @@ import Chevron from '../../assets/images/chevron.png';
  * @param getExternalUpdate This function should return a value that will be used to set the value state of this input component
  * @param floodLabel Optional. When true, floods the available space with the label instead of the normal 50/50 width split
  */
-export default function Input({ label, prefill, id, onInput, isCheckbox, isNumerical, optionList, marginBottom, alignLabel = "middle", textArea = false, required = false, disabled = false, warning = false, style = {}, labelStyle = {}, externalUpdate = null, getExternalUpdate = null, floodLabel = false }) {
+export default function Input({ label, prefill, id, onInput, isCheckbox, isNumerical = false, bounds = null, optionList, marginBottom, alignLabel = "middle", textArea = false, required = false, disabled = false, warning = false, style = {}, labelStyle = {}, externalUpdate = null, getExternalUpdate = null, floodLabel = false }) {
 
     optionList = typeof optionList !== "undefined" ? optionList : false;
 
@@ -43,11 +45,13 @@ export default function Input({ label, prefill, id, onInput, isCheckbox, isNumer
     }
 
     const increment = () => {
-        setValue(Number(value) + 1);
+        if (bounds == null) setValue(Number(value) + 1);
+        else if (Number(value) < bounds[1]) setValue(Number(value) + 1);
     }
 
     const decrement = () => {
-        setValue(Number(value) - 1);
+        if (bounds == null) setValue(Number(value) - 1);
+        else if (Number(value) > bounds[0]) setValue(Number(value) - 1);
     }
 
     if (externalUpdate != null) useEffect(() => {
@@ -98,24 +102,11 @@ export default function Input({ label, prefill, id, onInput, isCheckbox, isNumer
                         }
                     </select>
                 )}
-                {isNumerical && (
-                    <div className="control-area">
-                        <button 
-                            type="button" 
-                            className="arrow"
-                            style={{ backgroundImage: 'url(' + Chevron + ')' }}
-                            onClick={increment}
-                            disabled={disabled}
-                        />
-                        <button 
-                            type="button" 
-                            className="arrow down" 
-                            style={{ backgroundImage: 'url(' + Chevron + ')' }}
-                            onClick={decrement}
-                            disabled={disabled}
-                        />
-                    </div>
-                )}
+                { isNumerical && <Spinner
+                    increment={increment}
+                    decrement={decrement}
+                    disabled={disabled}
+                />} 
             </div>
         </div>
     )

src/components/Input/style.scss

@@ -48,38 +48,10 @@
             border-color: #4941B1;
             background-color: #F2F1FF;
         }
-        .control-area {
-            width: 24px;
+        ._Spinner {
             flex-shrink: 0;
             flex-grow: 0;
-            display: flex;
-            flex-direction: column;
-            box-sizing: border-box;
             padding-left: 8px;
-
-            .arrow {
-                background-size: contain;
-                background-position: center center;
-                background-repeat: no-repeat;
-                width: 19px;
-                height: 14px;
-                background-color: transparent;
-                outline: none;
-                border: none;
-                padding: 2px;
-                margin-bottom: 4px;
-                filter: invert(70%);
-                transition: filter .15s;
-                cursor: pointer;
-            }
-            .arrow:hover {
-                filter: invert(22%) sepia(56%) saturate(2475%) hue-rotate(231deg) brightness(99%) contrast(93%);
-            }
-            .arrow.down {
-                transform: scaleY(-1);
-                margin-bottom: 0;
-                margin-top: 4px;
-            }
         }
     }
 

src/components/PlayoffHelperTeam/index.jsx

@@ -120,7 +120,7 @@ export default function PlayoffHelperTeam({ team, isOnTheClock = false, captain
 
     const teamNumber = team.teamNumber;
     const place = getOrdinalSuffix(team.qualRanking);
-    const record = `(${typeof team.getRecord !== 'undefined' ? team.getRecord() : ""})`;
+    const record = team.wins == -1 ? "" : `(${typeof team.getRecord !== 'undefined' ? team.getRecord() : ""})`;
     const partnerTeamNumbers = partners.map(p => p.teamNumber);
 
     return (

src/components/Spinner/index.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+import Chevron from '../../assets/images/chevron.png';
+import './style.scss';
+
+/**
+ * Creates a small set of arrows that pair with an input element. Can use custom functions for the arrows.
+ * @param {function} increment The function to run when the up arrow is clicked 
+ * @param {function} decrement The function to run when the down arrow is clicked 
+ * @param {boolean} disabled Optional. When false, the arrows don't do anything
+ * @returns 
+ */
+export default function Spinner({ increment = () => {}, decrement = () => {}, disabled = false }) {
+    return (
+        <div className="_Spinner">
+            <button 
+                type="button" 
+                className="arrow"
+                style={{ backgroundImage: 'url(' + Chevron + ')' }}
+                onClick={increment}
+                disabled={disabled}
+            />
+            <button 
+                type="button" 
+                className="arrow down" 
+                style={{ backgroundImage: 'url(' + Chevron + ')' }}
+                onClick={decrement}
+                disabled={disabled}
+            />
+        </div>
+    )
+}

src/components/Spinner/style.scss

@@ -0,0 +1,30 @@
+._Spinner {
+    width: 24px;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+
+    .arrow {
+        background-size: contain;
+        background-position: center center;
+        background-repeat: no-repeat;
+        width: 19px;
+        height: 14px;
+        background-color: transparent;
+        outline: none;
+        border: none;
+        padding: 2px;
+        margin-bottom: 4px;
+        filter: invert(70%);
+        transition: filter .15s;
+        cursor: pointer;
+    }
+    .arrow:hover {
+        filter: invert(22%) sepia(56%) saturate(2475%) hue-rotate(231deg) brightness(99%) contrast(93%);
+    }
+    .arrow.down {
+        transform: scaleY(-1);
+        margin-bottom: 0;
+        margin-top: 4px;
+    }
+}

src/components/game_specific/GameDataInputs/2024.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Input from 'components/Input';
 import { EndgameResult } from 'data/game_specific/performanceObject/2024';
 
@@ -52,32 +52,57 @@ export const GameDataInputs = {
             prefill={edit.isEdit ? edit.data.performance.teleop.speaker : undefined}
         />
     </>,
-    EndgameSection: ({edit}) => <>
-        <Input
-            label="Climb"
-            id="Form_endgame_state"
-            optionList={[
-                { value: EndgameResult.NONE, label: EndgameResult.NONE },
-                { value: EndgameResult.PARKED, label: EndgameResult.PARKED },
-                { value: EndgameResult.ONSTAGE, label: EndgameResult.ONSTAGE },
-                { value: EndgameResult.HARMONIZED, label: EndgameResult.HARMONIZED },
-            ]}
-            required={true}
-            prefill={edit.isEdit ? edit.data.performance.endgame.state : undefined}
-        />
-        <Input
-            label="Scored note in trap?"
-            id="Form_endgame_trap"
-            isCheckbox={true}
-            prefill={edit.isEdit ? edit.data.performance.endgame.trap : undefined}
-        />
-        <Input
-            label="Tried to climb but failed?"
-            id="Form_endgame_failedAttempt"
-            isCheckbox={true}
-            prefill={edit.isEdit ? edit.data.performance.endgame.failedAttempt : undefined}
-        />
-    </>,
+    EndgameSection: ({edit}) => {
+        const [endgameState, setEndgameState] = useState(edit.isEdit ? (edit.data.performance.endgame.state == EndgameResult.HARMONIZED ? EndgameResult.ONSTAGE : edit.data.performance.endgame.state) : undefined);
+        const [trapNotes, setTrapNotes] = useState(edit.isEdit ? (edit.data.performance.endgame.trap === true ? 1 : edit.data.performance.endgame.trap) : 0);
+        const checkTrapNoteSetting = value => {
+            if (Number(value) != value) value = 0;
+            if (Number(value) < 0) value = 0;
+            if (Number(value) > 3) value = 3;
+            setTrapNotes(value);
+        };
+
+        return <>
+            <Input
+                label="Climb"
+                id="Form_endgame_state"
+                optionList={[
+                    { value: EndgameResult.NONE, label: EndgameResult.NONE },
+                    { value: EndgameResult.PARKED, label: EndgameResult.PARKED },
+                    { value: EndgameResult.ONSTAGE, label: EndgameResult.ONSTAGE },
+                ]}
+                onInput={e => setEndgameState(e.target.value)}
+                required={true}
+                prefill={endgameState}
+            />
+            {
+                endgameState == EndgameResult.ONSTAGE && (
+                    <Input
+                        label="Harmonized? (Climbed onto same chain as another robot)"
+                        id="Form_endgame_harmonized"
+                        isCheckbox
+                        prefill={edit.isEdit ? edit.data.performance.endgame.state == EndgameResult.HARMONIZED : undefined}
+                    />
+                )
+            }
+            <Input
+                label="Notes scored in trap"
+                id="Form_endgame_trap"
+                isNumerical
+                onInput={e => checkTrapNoteSetting(e.target.value)}
+                prefill={trapNotes}
+                externalUpdate={trapNotes}
+                getExternalUpdate={() => trapNotes}
+                bounds={[0, 3]}
+            />
+            <Input
+                label="Tried to climb but failed?"
+                id="Form_endgame_failedAttempt"
+                isCheckbox={true}
+                prefill={edit.isEdit ? edit.data.performance.endgame.failedAttempt : undefined}
+            />
+        </>
+    },
     NotesSection: ({edit}) => <>
         <Input
             label="This team missed a majority of the shots they took"

src/components/game_specific/PlayoffHelperTeamCell/2024.jsx

@@ -8,7 +8,7 @@ import { getOrdinalSuffix } from "util/getOrdinalSuffix";
  */
 export default function PlayoffHelperTeamCellSet({ team }) { 
 
-    const defenseScore = team.powerScores.WellRounded.Defense == 0 ? "--" : team.powerScores.WellRounded.Defense;
+    const defenseScore = team.powerScores.WellRounded.Defense == 0 ? "--" : team.powerScores.Defensive.Defense;
     const defenseRanking = team.powerScores.WellRounded.Defense == 0 ? "" : getOrdinalSuffix(team.powerScoreRankings.Defense);
 
     return (
@@ -19,6 +19,7 @@ export default function PlayoffHelperTeamCellSet({ team }) {
             <PlayoffHelperTeamCell value={team.powerScores.WellRounded.Amp} place={getOrdinalSuffix(team.powerScoreRankings.Amp)} label={"Amp Scoring"} />
             <PlayoffHelperTeamCell value={team.powerScores.WellRounded.Endgame} place={getOrdinalSuffix(team.powerScoreRankings.Endgame)} label={"Endgame"} />
             <PlayoffHelperTeamCell value={defenseScore} place={defenseRanking} label={"Defense"} />
+            <PlayoffHelperTeamCell value={team.cycleRate} place={getOrdinalSuffix(team.cycleRateRanking)} label={`Cycles / Game`} />
         </>
     )
 }

src/components/game_specific/ViewIndividualData/2024.jsx

@@ -59,7 +59,7 @@ export default function ViewIndividualData({data}) {
                     )}
                     { (p.endgame.state != EndgameResult.NONE && p.endgame.state != EndgameResult.PARKED) && (
                         <div className="content-cell">
-                            <div className="cell-data">{p.endgame.trap ? "Yes" : "No"}</div>
+                            <div className="cell-data">{p.endgame.trap ? `Yes (${p.endgame.trap === true ? 1 : p.endgame.trap})` : "No"}</div>
                             <div className="cell-label">Trap score</div>
                         </div>
                     )}