Merge branch '2024-setup' into 2024-endgame-section

docs/QUICK_START.md

@@ -157,7 +157,7 @@ npm run dev
 
 Build the app to deploy to [netlify](https://app.netlify.com/drop). Running this command will generate a `dist` folder.
 ```
-npm run dist
+npm run build
 ```
 
 ### Setting up config files
@@ -259,4 +259,4 @@ For each page you have 4 parts. `name`, `description`, `components`, `export`.
 }
 ```
 
-By doing this, your scouting app should be setup. You can take a look at the [example forms](./EXAMPLE_FORMS.md) page to look at forms we have made for you to help your setup.
+By doing this, your scouting app should be setup. You can take a look at the [example forms](./EXAMPLE_FORMS.md) page to look at forms we have made for you to help your setup.

scoutingapp/src/App.tsx

@@ -1,11 +1,15 @@
 import './App.css'
 import { Routes, Route } from 'react-router-dom';
-import { Page, ParentPage } from "./components/pages"
+import { Page, ParentPage, StoragePage } from "./components/pages"
 import structure from "./config/structure.json"
 import React from 'react';
 
 
 function App() {
+  if ([null, ""].includes(localStorage.getItem("codes"))){
+    localStorage.setItem("codes", "{}")
+  }
+
   return (
     <Routes>
       <Route path='/' element={<ParentPage pageSetup={structure}/>}></Route>
@@ -16,6 +20,7 @@ function App() {
             )
         })
       }
+      <Route path='/saved' element={<StoragePage/>}></Route>
     </Routes>
 
 

scoutingapp/src/components/inputs/ConeCubeIncrementInput.tsx

@@ -0,0 +1,69 @@
+import React from "react"
+import { useState } from "react";
+import { ComponentSetup } from "../interface";
+
+function ConeCubeIncrementInput(props: ComponentSetup) {
+
+    const [coneCounter, setConeCounter] = useState(0)
+    const [cubeCounter, setCubeCounter] = useState(0)
+
+    const color = props?.options?.[0]
+
+    const updateStateText = (values: any) => {
+		var state = props.getValue
+
+
+		state[props.id] = values
+		props.setValue(state)
+	}
+
+    return (
+        <div className="mx-3 my-3">
+            <label className="block text-[#344054] text-sm mb-2">
+                { props.text }
+            </label>
+            <div className="flex justify-between"> 
+                <div className="w-[45%] h-16 border border-color-[#D0D5DD] border-[1.5px] rounded-xl">
+                    <button
+                        type="button"
+                        className="w-1/3 text-[#cc2936] h-full text-5xl rounded-l-xl float-left bg-[#FDE7E7]"
+                        onClick={function () {if (coneCounter > 0) {setConeCounter(coneCounter-1); updateStateText([coneCounter-1, cubeCounter])}}}
+                    >
+                        -
+                    </button>
+                    <div className={`flex w-1/3  h-full text-2xl float-left items-center ${color == "red" ? "bg-red-400" : color == "yellow" ? "bg-amber-300" : color == "green" ? "bg-green-400" : "bg-white"}`}>
+                        <p className={"text-center text-white  font-semibold flex items-center pt-1 justify-center text-md h-[80%] w-full  bg-center bg-[url('../public/coneSprite.svg')] bg-contain bg-no-repeat"}>{coneCounter}</p>
+                    </div>
+                    <button
+                        type="button"
+                        className="text-5xl text-[#18611B] w-1/3 h-full rounded-r-xl float-right bg-[#E2F8E3]"
+                        onClick={function () {setConeCounter(coneCounter+1); updateStateText([coneCounter+1, cubeCounter])}}
+                    >
+                        +
+                    </button>
+                </div>
+                <div className="w-[45%] h-16 border border-color-[#D0D5DD] border-[1.5px] rounded-xl">
+                    <button
+                        type="button"
+                        className="w-1/3 text-[#cc2936] h-full text-5xl rounded-l-xl float-left bg-[#FDE7E7]"
+                        onClick={function () {if (cubeCounter > 0) {setCubeCounter(cubeCounter-1); updateStateText([coneCounter, cubeCounter-1])}}}
+                    >
+                        -
+                    </button>
+                    <div className={`flex w-1/3  h-full text-2xl float-left items-center ${color == "red" ? "bg-red-400" : color == "yellow" ? "bg-amber-300" : color == "green" ? "bg-green-400" : "bg-white"}`}>
+                        <p className={"text-center text-white font-semibold flex items-center pt-1 justify-center text-md h-[80%] w-full  bg-center bg-[url('../public/cubeSprite.svg')] bg-contain bg-no-repeat"}>{cubeCounter}</p>
+                    </div>
+                    <button
+                        type="button"
+                        className="text-5xl text-[#18611B] w-1/3 h-full rounded-r-xl float-right bg-[#E2F8E3]"
+                        onClick={function () {setCubeCounter(cubeCounter+1); updateStateText([coneCounter, cubeCounter+1])}}
+                    >
+                        +
+                    </button>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default ConeCubeIncrementInput

scoutingapp/src/components/inputs/DropdownTextInput.tsx

@@ -21,10 +21,15 @@ function DropdownTextInput(props: ComponentSetup) {
         <div className="mx-3 my-3">
             <label className="block text-[#344054] text-sm mb-2">
                 { props.text }
+                { props.required == true && (
+					<span className="ml-1 text-red-400 font-bold">
+						*	
+					</span>
+				)}
             </label>
             <div className="flex appearance-none h-[40px] border border-color-[#D0D5DD] border-[1.5px] rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                 <select name="option" id="options" className="inline" onChange={updateStateDropdown}>
-                    <option value="none">none</option>
+                    <option disabled selected value=""> -- </option>
                     { props.options?.map (option => (
                         <option value={option}>{option}</option>
                     ))}

scoutingapp/src/components/inputs/GenericTextInput.tsx

@@ -14,7 +14,12 @@ function GenericTextInput(props: ComponentSetup) {
 
 		<div className="mx-3 my-3">
 			<label className="block text-[#344054] text-sm mb-2">
-				{props.text}
+				{props.text} 
+				{ props.required == true && (
+					<span className="ml-1 text-red-400 font-bold">
+						*	
+					</span>
+				)}
 			</label>
 			<input 
 				className="appearance-none border border-color-[#D0D5DD] rounded w-full py-2 px-3 text-gray-700 focus:outline-none" id="textInput" type="text" placeholder={props.placeholder?.[0]}

scoutingapp/src/components/inputs/IncrementNumberInput.tsx

@@ -6,6 +6,8 @@ function IncrementNumberInput(props: ComponentSetup) {
 
     const [counter, setCounter] = useState(0)
 
+    const color = props?.options?.[0]
+
     const updateStateText = (value: any) => {
 		//console.log(props.getValue)
 		var state = props.getValue
@@ -26,8 +28,8 @@ function IncrementNumberInput(props: ComponentSetup) {
                 >
                     -
                 </button>
-                <div className="flex w-1/3 h-full text-2xl float-left items-center">
-                    <p className="text-center w-full">{counter}</p>
+                <div className={`flex w-1/3 h-full text-2xl float-left items-center ${color == "red" ? "bg-red-400" : color == "yellow" ? "bg-amber-300" : color == "green" ? "bg-green-400" : "bg-white"}`}>
+                    <p className={"text-center w-full"}>{counter}</p>
                 </div>
                 <button
                     type="button"

scoutingapp/src/components/inputs/index.ts

@@ -11,4 +11,7 @@ import SliderInput from "./SliderInput";
 export {SliderInput}
 
 import IncrementNumberInput from "./IncrementNumberInput";
-export {IncrementNumberInput}
+export {IncrementNumberInput}
+
+import ConeCubeIncrementInput from "./ConeCubeIncrementInput";
+export {ConeCubeIncrementInput}

scoutingapp/src/components/interface.ts

@@ -3,10 +3,10 @@ export interface ComponentSetup {
     route?: string;
     options?: Array<string>;
     placeholder?: Array<string>;
-    required?: Boolean;
     getValue?: any;
     setValue?: any;
     id?: any;
+    required?: any
 }
 
 export interface PageSetup {

scoutingapp/src/components/pages/Page.tsx

@@ -2,17 +2,18 @@ import React from "react"
 import { useEffect, useState } from "react"
 import { Link } from "react-router-dom"
 import { DarkButton } from "../buttons"
-import { DropdownTextInput, GenericTextArea, GenericTextInput, IncrementNumberInput, SliderInput } from "../inputs"
+import { DropdownTextInput, GenericTextArea, GenericTextInput, IncrementNumberInput, SliderInput, ConeCubeIncrementInput } from "../inputs"
 import { ComponentSetup, PageSetup } from "../interface"
 import { GenericCheckboxSelect, GenericDropdown, GenericRadioSelect, GenericToggle, ChargedUpGridSelect } from "../selects"
 import { GenericHeaderOne, GenericHeaderTwo, QRCodeModal, Timer } from "../texts"
 import { CycleCounter } from "../monitor"
+import ChargedUpStartingPosition from "../selects/ChargedUpStartingPosition"
 
 interface ImportedComponentSetup extends ComponentSetup {
     type: string;
 }
 
-export function Page(props: PageSetup){
+export function Page(props: PageSetup) {
     const ComponentLibrary: Object = {
         "DarkButton": [DarkButton, false],
         "DropdownTextInput": [DropdownTextInput, ["", ""]],
@@ -28,21 +29,23 @@ export function Page(props: PageSetup){
         "GenericHeaderTwo": [GenericHeaderTwo, ""],
         "CycleCounter": [CycleCounter, ""],
         "Timer": [Timer, ""],
-        "ChargedUpGridSelect": [ChargedUpGridSelect, []]
+        "ChargedUpGridSelect": [ChargedUpGridSelect, []],
+        "ChargedUpStartingPosition": [ChargedUpStartingPosition, ""],
+        "ConeCubeIncrementInput": [ConeCubeIncrementInput, []]
     }
 
     let componentSetup: any = {}
 
     const required: String[] = [];
 
     props?.config?.components?.map((component: ImportedComponentSetup) => {
-        if (component.type != "Spacing"){
+        if (component.type != "Spacing") {
             try {
                 componentSetup[component.id] = (ComponentLibrary as any)[component.type][1]
-                if (component.required == true){
+                if (component.required == true) {
                     required.push(component.id)
                 }
-            } catch {}
+            } catch { }
         }
     })
 
@@ -52,16 +55,18 @@ export function Page(props: PageSetup){
         isRequiredCompleted: false
     }
 
+    const requiredComponents: String[] = []
+
     const [pageComponents, setPageComponents] = useState(componentSetup)
     const propsSetPageComponent = (state: any) => {
         console.log("test")
         //setPageComponents(state)
         componentSetup = pageComponents
-        if (pageComponents["result"]){
+        if (pageComponents["result"]) {
             var order = ""
-            for (var i = 0; i < props?.config?.export.order.length; i++){
+            for (var i = 0; i < props?.config?.export.order.length; i++) {
                 order += pageComponents[props?.config?.export.order[i]]
-                if (i != props?.config?.export.order.length - 1){
+                if (i != props?.config?.export.order.length - 1) {
                     order += props?.config?.export.delimiter
                 }
             }
@@ -70,7 +75,7 @@ export function Page(props: PageSetup){
         }
         props?.config?.components?.map((requiredId: any) => {
             componentSetup["export"].isRequiredCompleted = true
-            if (!["", []].includes(componentSetup[requiredId])){
+            if (!["", []].includes(componentSetup[requiredId])) {
                 console.log(false)
                 componentSetup["export"].isRequiredCompleted = false
             }
@@ -84,15 +89,19 @@ export function Page(props: PageSetup){
             <Link to="/">
                 <div className="w-full h-6 mx-4 text-2xl font-bold">
                     <svg xmlns="http://www.w3.org/2000/svg" height="40" width="40" viewBox="0 0 75 75">
-                        <path d="M20 44 0 24 20 4l2.8 2.85L5.65 24 22.8 41.15Z"/>
+                        <path d="M20 44 0 24 20 4l2.8 2.85L5.65 24 22.8 41.15Z" />
                     </svg>
                 </div>
             </Link>
             {
                 props?.config?.components?.map((component: ImportedComponentSetup) => {
-                    if (component.type == "Spacing"){
+                    if (component.required == true) {
+                        requiredComponents.push(component.id)
+                    }
+
+                    if (component.type == "Spacing") {
                         return (
-                            <div className="h-[1px]"/>
+                            <div className="h-[2px]" />
                         )
                     }
                     else {
@@ -107,13 +116,13 @@ export function Page(props: PageSetup){
                         const FoundComponent = (ComponentLibrary as any)[component.type][0];
 
                         return (
-                            <FoundComponent {...sendprops} getValue={pageComponents} setValue={propsSetPageComponent} id={component.id}/>
+                            <FoundComponent {...sendprops} getValue={pageComponents} setValue={propsSetPageComponent} id={component.id} />
                         );
 
                     }
                 })
             }
-            <QRCodeModal getValue={pageComponents} setValue={propsSetPageComponent}/>
+            <QRCodeModal getValue={pageComponents} setValue={propsSetPageComponent} required={requiredComponents} />
         </div>
     )
-}
+}

scoutingapp/src/components/pages/ParentPage.tsx

@@ -9,7 +9,10 @@ export function ParentPage(props: ParentPageSetup){
 
     return (
         <div className="mx-4 pt-8 pb-10 max-w-[40rem] md:mx-auto">
-            <h1 className="text-3xl font-bold mb-8">FalconScout</h1>
+            <div className="h-10 w-full mb-8">
+                <h1 className="text-3xl font-bold mb-8 inline float-left">FalconScout</h1>
+                <Link className="text-xl font-semibold mb-8 inline float-left ml-4 -mt-1 bg-gray-200 rounded-md p-2" to="/saved">Saved Codes</Link>
+            </div>
             {
                 props?.pageSetup?.map((page: any) => {
                     return (

scoutingapp/src/components/pages/StoragePage.tsx

@@ -0,0 +1,36 @@
+import React from "react"
+import { Link } from "react-router-dom";
+import QRCode from 'react-qr-code'
+
+export function StoragePage() {
+    return (
+        <div className="mx-4 pt-8 pb-10 max-w-[40rem] md:mx-auto">
+            <Link to="/">
+                <div className="w-full h-6 mx-4 text-2xl font-bold">
+                    <svg xmlns="http://www.w3.org/2000/svg" height="40" width="40" viewBox="0 0 75 75">
+                        <path d="M20 44 0 24 20 4l2.8 2.85L5.65 24 22.8 41.15Z"/>
+                    </svg>
+                </div>
+            </Link>
+            <div className="px-4">
+                <div className="h-10 w-full mb-8 mt-4">
+                    <h1 className="text-3xl font-bold mb-8 inline float-left">Saved Codes</h1>
+                </div>
+            </div>
+            <div className="mt-4 px-4">
+                { Object.keys(JSON.parse(localStorage.getItem("codes") as string)).map ((option: any) => (
+                    <div className="border-b-2 border-gray-700 pb-4 pt-4">
+                        <h1 className="text-2xl font-bold mb-4">{option}</h1>
+                        <QRCode
+                            size={256}
+                            style={{ height: "auto", maxWidth: "200px", width: "200px"}}
+                            value={JSON.parse(localStorage.getItem("codes") as string)[option]}
+                            viewBox={`0 0 256 256`}
+                            className="h-[200px] w-[200px] mx-auto mb-4"
+                        />
+                    </div>
+                ))}
+            </div>
+        </div>
+    )
+}