Add: Mark civ as played

schemas/types/valueLabelPair.json

@@ -1,7 +1,7 @@
 {
 	"$schema": "http://json-schema.org/draft-04/schema#",
 	"type": "object",
-	"additionalProperties": false,
+	"additionalProperties": true,
 	"properties": {
 		"value": {
 			"type": "string"

src/dashboard/components/Aoe4CivDraft.tsx

@@ -1,35 +1,41 @@
 import React, { useEffect, useState } from 'react';
 import { useReplicant } from 'use-nodecg';
 import { CivDropdown } from './CivDropdown';
-import type { ValueLabelPair } from '../../types/schemas/index';
 import { NodeCG } from '@nodecg/types/types/nodecg';
 import { Tooltip as ReactTooltip } from "react-tooltip";
 import { TECollapse, TERipple } from "tw-elements-react";
 
+interface ValueLabelPair {
+	value: string;
+	label: string;
+}
+
 interface DropdownOption {
   value: string;
   label: string;
+  picked: boolean;
 }
 
 export function Aoe4CivDraft() {
 
   const [showSettings, set_showSettings] = useState(false);
   const toggleShowSettings = () => set_showSettings(!showSettings);
 
-  const [options, set_options] = useState<ValueLabelPair[]>([]);
+  //@ts-ignore
+  const [options, set_options] = useState([]);
   const [civs, set_civs] = useReplicant<NodeCG.AssetFile[]>('assets:civs', []);
 
   // Could probably have 1 array instead of 2 replicants?
-  const [leftBans, set_leftBans] = useReplicant<ValueLabelPair[]>('leftBans', [{ value: '', label: '' }]);
+  const [leftBans, set_leftBans] = useReplicant<DropdownOption[]>('leftBans', [{ value: '', label: '', picked: false }]);
   const [leftBansCount, set_leftBansCount] = useReplicant<number>('leftBansCount', 0);
 
-  const [leftPicks, set_leftPicks] = useReplicant<ValueLabelPair[]>('leftPicks', [{ value: '', label: '' }]);
+  const [leftPicks, set_leftPicks] = useReplicant<DropdownOption[]>('leftPicks', [{ value: '', label: '', picked: false }]);
   const [leftPicksCount, set_leftPicksCount] = useReplicant<number>('leftPicksCount', 0);
 
-  const [rightPicks, set_rightPicks] = useReplicant<ValueLabelPair[]>('rightPicks', [{ value: '', label: '' }]);
+  const [rightPicks, set_rightPicks] = useReplicant<DropdownOption[]>('rightPicks', [{ value: '', label: '', picked: false }]);
   const [rightPicksCount, set_rightPicksCount] = useReplicant<number>('rightPicksCount', 0);
 
-  const [rightBans, set_rightBans] = useReplicant<ValueLabelPair[]>('rightBans', [{ value: '', label: '' }]);
+  const [rightBans, set_rightBans] = useReplicant<DropdownOption[]>('rightBans', [{ value: '', label: '', picked: false }]);
   const [rightBansCount, set_rightBansCount] = useReplicant<number>('rightBansCount', 0);
 
   const [leftName, set_leftName] = useReplicant<string>('leftName', '');
@@ -38,8 +44,8 @@ export function Aoe4CivDraft() {
   const [rightUnderText, set_rightUnderText] = useReplicant<string>('rightUnderText', '');
 
   //Used if you have the Aoe-4-team-games
-  const [leftSideIcon, set_leftSideIcon] = useReplicant<DropdownOption>('leftSideIcon', { value: '', label: '' }, { namespace: 'aoe-4-team-games' });
-  const [rightSideIcon, set_rightSideIcon] = useReplicant<DropdownOption>('rightSideIcon', { value: '', label: '' }, { namespace: 'aoe-4-team-games' });
+  const [leftSideIcon, set_leftSideIcon] = useReplicant<ValueLabelPair>('leftSideIcon', { value: '', label: '' }, { namespace: 'aoe-4-team-games' });
+  const [rightSideIcon, set_rightSideIcon] = useReplicant<ValueLabelPair>('rightSideIcon', { value: '', label: '' }, { namespace: 'aoe-4-team-games' });
 
   const [importNamesFromDraft, set_importNamesFromDraft] = useReplicant<boolean>('importNamesFromDraft', true);
   const [updateDraftOnImport, set_updateDraftOnImport] = useReplicant<boolean>('updateDraftOnImport', true);
@@ -61,8 +67,10 @@ export function Aoe4CivDraft() {
     civs.forEach((element) => {
       let { name } = element;
       name = name.replace(/_/g, ' ');
+      //@ts-ignore
       _array.push({ value: element?.url, label: name });
     });
+    //@ts-ignore
     _array.sort((a, b) => (a.label > b.label ? 1 : b.label > a.label ? -1 : 0));
     set_options(_array);
   }, [civs]);
@@ -147,8 +155,8 @@ export function Aoe4CivDraft() {
     }
 
 
-    set_leftPicks([{ value: "/assets/aoe-4-civ-draft/civs/Random.png", label: "Random" }])
-    set_rightPicks([{ value: "/assets/aoe-4-civ-draft/civs/Random.png", label: "Random" }])
+    set_leftPicks([{ value: "/assets/aoe-4-civ-draft/civs/Random.png", label: "Random", picked: false }])
+    set_rightPicks([{ value: "/assets/aoe-4-civ-draft/civs/Random.png", label: "Random", picked: false }])
 
     set_leftPicksCount(1)
     set_rightPicksCount(1)
@@ -241,7 +249,7 @@ export function Aoe4CivDraft() {
                   }}
                 />
                 {new Array(leftBansCount).fill(undefined).map((_, i) => (
-                  <CivDropdown key={i + 'lb'} civs={options} target={i} replicant={'leftBans'} value={leftBans[i]} />
+                  <CivDropdown key={i + 'lb'} civs={options} target={i} replicant={'leftBans'} value={leftBans} />
                 ))}
               </div>
 
@@ -258,7 +266,7 @@ export function Aoe4CivDraft() {
                   }}
                 />
                 {new Array(leftPicksCount).fill(undefined).map((_, i) => (
-                  <CivDropdown key={i + 'lp'} civs={options} target={i} replicant={'leftPicks'} value={leftPicks[i]} />
+                  <CivDropdown key={i + 'lp'} civs={options} target={i} replicant={'leftPicks'} value={leftPicks} />
                 ))}
               </div>
             </div>
@@ -299,7 +307,7 @@ export function Aoe4CivDraft() {
                   }}
                 />
                 {new Array(rightBansCount).fill(undefined).map((_, i) => (
-                  <CivDropdown key={i + 'rb'} civs={options} target={i} replicant={'rightBans'} value={rightBans[i]} />
+                  <CivDropdown key={i + 'rb'} civs={options} target={i} replicant={'rightBans'} value={rightBans} />
                 ))}
               </div>
 
@@ -316,7 +324,7 @@ export function Aoe4CivDraft() {
                   }}
                 />
                 {new Array(rightPicksCount).fill(undefined).map((_, i) => (
-                  <CivDropdown key={i + 'rp'} civs={options} target={i} replicant={'rightPicks'} value={rightPicks[i]} />
+                  <CivDropdown key={i + 'rp'} civs={options} target={i} replicant={'rightPicks'} value={rightPicks} />
                 ))}
               </div>
 

src/dashboard/components/CivDropdown.tsx

@@ -1,31 +1,72 @@
 import React, { useCallback } from 'react';
 import Select, { type SingleValue } from 'react-select';
 import { useReplicant } from 'use-nodecg';
-import { type ValueLabelPair } from '../../types/schemas/index';
+
+interface DropdownOption {
+  value: string;
+  label: string;
+  picked?: boolean;
+}
 
 type CivDropdownProps = {
-  civs: ValueLabelPair[];
+  civs: DropdownOption[];
   target: number;
   replicant: string;
-  value?: ValueLabelPair;
+  value?: DropdownOption[];
 };
 
+
 export const CivDropdown = ({ civs, target, replicant, value }: CivDropdownProps) => {
-  const [replicantValue, set_replicantValue] = useReplicant<ValueLabelPair[]>(replicant, [{ value: '', label: '' }]);
+  const [replicantValue, set_replicantValue] = useReplicant<DropdownOption[]>(replicant, [{ value: '', label: '', picked: false }]);
+
+  //Prevent the module from crashing upon new DB
+  if (!value) {
+    console.log("nope")
+    value = []
+  }
 
   const handleChange = useCallback(
-    (selectedOption: SingleValue<ValueLabelPair>) => {
+    (selectedOption: SingleValue<DropdownOption>) => {
       if (!selectedOption) return
       const newRepValue = replicantValue.slice(0);
-      newRepValue[target] = selectedOption;
+      //newRepValue[target] = selectedOption;
+      newRepValue[target] = {
+        value: selectedOption.value,
+        label: selectedOption.label,
+        picked: replicantValue[target]?.picked || false
+      }
+
+      console.log(newRepValue[target])
+
       set_replicantValue(newRepValue);
     },
     [replicantValue, target],
   );
 
+  const handlePickedChange = () => {
+    let newRepValue = replicantValue.slice(0);
+
+    console.log("Civ marked as Played")
+
+    console.log(replicantValue)
+
+    let opposite = !(replicantValue[target]?.picked)
+    newRepValue[target] = {
+      value: replicantValue[target]?.value || '',
+      label: replicantValue[target]?.label || '',
+      picked: opposite
+    }
+
+    console.log(newRepValue)
+
+    set_replicantValue(newRepValue);
+  };
+
   return (
     <div className='py-2'>
-      <Select className="civDropdown" options={civs} onChange={handleChange} value={value}/>
+      <Select className="civDropdown" options={civs} onChange={handleChange} value={value[target]} />
+      <label>Civ Played?</label>
+      <input className='mr-4' type='checkbox' checked={value[target]?.picked} onChange={handlePickedChange} />
     </div>
   );
 };

src/extension/index.ts

@@ -1,7 +1,17 @@
 import type NodeCG from '@nodecg/types';
-import type { ValueLabelPair } from '../types/schemas/index';
 import { klona } from 'klona';
 
+interface DropdownOption {
+	value: string;
+	label: string;
+	picked?: boolean;
+}
+
+interface ValueLabelPair {
+	value: string;
+	label: string;
+}
+
 //Convert from simple name to ValueLabelPair for use in Dashboard and Graphics
 let civMap = new Map<string, ValueLabelPair>([
 	['AbbasidDynasty', {
@@ -44,6 +54,31 @@ let civMap = new Map<string, ValueLabelPair>([
 		"value": "/assets/aoe-4-civ-draft/civs/Rus.png",
 		"label": "Rus"
 	}],
+	['Byzantines', {
+		"value": "/assets/aoe-4-civ-draft/civs/Byzantines.png",
+		"label": "Byzantines"
+	}],
+	['Japanese', {
+		"value": "/assets/aoe-4-civ-draft/civs/Japanese.png",
+		"label": "Japanese"
+	}],
+	['Ayyubids', {
+		"value": "/assets/aoe-4-civ-draft/civs/Ayyubids.png",
+		"label": "Ayyubids"
+	}],
+	['OrderOfTheDragon', {
+		"value": "/assets/aoe-4-civ-draft/civs/Order_Of_The_Dragon.png",
+		"label": "Order of The Dragon"
+	}],
+	['ZhuXisLegacy', {
+		"value": "/assets/aoe-4-civ-draft/civs/Zhu_Xi_Legacy.png",
+		"label": "Zhu Xi's Legacy"
+	}],
+	['JeanneDArc', {
+		"value": "/assets/aoe-4-civ-draft/civs/Jeanne_D_Arc.png",
+		"label": "Jeanne d'Arc"
+	}],
+
 ])
 
 let aoe2cmCivs = [
@@ -56,25 +91,32 @@ let aoe2cmCivs = [
 	"aoe4.Malians",
 	"aoe4.Mongols",
 	"aoe4.Ottomans",
-	"aoe4.Rus"
+	"aoe4.Rus",
+	//These might change
+	"aoe4.Byzantines",
+	"aoe4.Japanese",
+	"aoe4.Ayyubids",
+	"aoe4.JeanneDArc",
+	"aoe4.ZhuXiLegacy",
+	"aoe4.OrderOfTheDragon",
 ]
 
 module.exports = function (nodecg: NodeCG.ServerAPI) {
 
 	let leftBans = nodecg.Replicant('leftBans', 'aoe-4-civ-draft', {
-		defaultValue: [{ value: '', label: '' }]
+		defaultValue: [{ value: '', label: '', picked: false }]
 	})
 
 	let leftPicks = nodecg.Replicant('leftPicks', 'aoe-4-civ-draft', {
-		defaultValue: [{ value: '', label: '' }]
+		defaultValue: [{ value: '', label: '', picked: false }]
 	})
 
 	let rightBans = nodecg.Replicant('rightBans', 'aoe-4-civ-draft', {
-		defaultValue: [{ value: '', label: '' }]
+		defaultValue: [{ value: '', label: '', picked: false }]
 	})
 
 	let rightPicks = nodecg.Replicant('rightPicks', 'aoe-4-civ-draft', {
-		defaultValue: [{ value: '', label: '' }]
+		defaultValue: [{ value: '', label: '', picked: false }]
 	})
 
 	const getDraftInfo = async (draftUrlOrId: string) => {
@@ -345,8 +387,8 @@ module.exports = function (nodecg: NodeCG.ServerAPI) {
 			}
 
 			//#region Set Picks
-			let _leftPicks: (ValueLabelPair | undefined)[] = []
-			let _rightPicks: (ValueLabelPair | undefined)[] = []
+			let _leftPicks: (DropdownOption | undefined)[] = []
+			let _rightPicks: (DropdownOption | undefined)[] = []
 
 			//We can safely assume some civs were picked because if not.. then well.. ???
 			let leftPicksCount = nodecg.Replicant('leftPicksCount')

src/graphics/CivDisplay.tsx

@@ -1,19 +1,30 @@
 import React from 'react';
-import type { ValueLabelPair } from '../types/schemas/index';
+
+interface ValueLabelPair {
+    value: string;
+    label: string;
+}
 
 type CivDisplayProps = {
-    civ: ValueLabelPair;
+    civ: DropdownOption;
     displayName?: boolean
     banned?: boolean;
     sniped?: boolean;
+    picked?: boolean
+}
+
+interface DropdownOption {
+    value: string;
+    label: string;
+    picked?: boolean;
 }
 
-export const CivDisplay = ({ civ, banned, displayName, sniped }: CivDisplayProps) => {
+export const CivDisplay = ({ civ, banned, displayName, picked, sniped }: CivDisplayProps) => {
     //TODO Implement sniped civs to differenciate between banned and sniped
     return (
         <div className='draft-civContainer'>
-            {displayName ? <h1 className='draft-civName'>{civ?.label}</h1> : '' }
-            <img src={civ?.value} className={banned ? 'draft-civBanned draft-civBannedFilter' : 'draft-civPicked'} />
+            {displayName ? <h1 className='draft-civName'>{civ?.label}</h1> : ''}
+            <img src={civ?.value} className={`${picked ? 'draft-civPlayed' : 'draft-civNotPlayed'} ${banned ? 'draft-civBanned draft-civBannedFilter' : 'draft-civPicked'} `} />
             {banned ? <div className='draft-banned'>╲</div> : ''}
         </div>
     )

src/graphics/Index.tsx

@@ -1,24 +1,34 @@
 import React, { useEffect, useState } from 'react';
 import type { NodeCG } from '@nodecg/types/types/nodecg';
 import { useReplicant } from 'use-nodecg';
-import type { ValueLabelPair } from '../types/schemas/index';
 import { CivDisplay } from './CivDisplay';
 
+interface ValueLabelPair {
+	value: string;
+	label: string;
+}
+
+interface DropdownOption {
+	value: string;
+	label: string;
+	picked: boolean;
+  }
+
 export function Index() {
 
 	const [theme, set_theme] = useReplicant<{ value: string; label: string; }>('theme', { value: '../../../assets/nodecg-themer/themes/default.css', label: 'default' }, { namespace: 'nodecg-themer' });
 
 	// Could probably have 1 array instead of 2 replicants?
-	const [leftBans, set_leftBans] = useReplicant<ValueLabelPair[]>('leftBans', []);
+	const [leftBans, set_leftBans] = useReplicant<DropdownOption[]>('leftBans', [{ value: "/assets/aoe-4-civ-draft/civs/Random.png", label: "Random", picked: false }]);
 	const [leftBansCount, set_leftBansCount] = useReplicant<number>('leftBansCount', 1);
 
-	const [leftPicks, set_leftPicks] = useReplicant<ValueLabelPair[]>('leftPicks', []);
+	const [leftPicks, set_leftPicks] = useReplicant<DropdownOption[]>('leftPicks', [{ value: "/assets/aoe-4-civ-draft/civs/Random.png", label: "Random", picked: false }]);
 	const [leftPicksCount, set_leftPicksCount] = useReplicant<number>('leftPicksCount', 1);
 
-	const [rightPicks, set_rightPicks] = useReplicant<ValueLabelPair[]>('rightPicks', []);
+	const [rightPicks, set_rightPicks] = useReplicant<DropdownOption[]>('rightPicks', [{ value: "/assets/aoe-4-civ-draft/civs/Random.png", label: "Random", picked: false }]);
 	const [rightPicksCount, set_rightPicksCount] = useReplicant<number>('rightPicksCount', 1);
 
-	const [rightBans, set_rightBans] = useReplicant<ValueLabelPair[]>('rightBans', []);
+	const [rightBans, set_rightBans] = useReplicant<DropdownOption[]>('rightBans', [{ value: "/assets/aoe-4-civ-draft/civs/Random.png", label: "Random", picked: false }]);
 	const [rightBansCount, set_rightBansCount] = useReplicant<number>('rightBansCount', 1);
 
 	const [leftName, set_leftName] = useReplicant<string>('leftName', '');
@@ -41,15 +51,15 @@ export function Index() {
 
 			<div className='draft-leftPicks'>
 				{new Array(leftPicksCount).fill(undefined).map((_, i) => (
-					<CivDisplay civ={leftPicks[i]} banned={false} displayName/>
+					<CivDisplay civ={leftPicks[i]} picked={leftPicks[i]?.picked} banned={false} displayName/>
 				))}
 			</div>
 
 			<h1 className='draft-rightName'>{rightName}</h1>
 			<h1 className='draft-rightUnderText'>{rightUnderText}</h1>
 			<div className='draft-rightPicks'>
 				{new Array(rightPicksCount).fill(undefined).map((_, i) => (
-					<CivDisplay civ={rightPicks[i]} banned={false} displayName/>
+					<CivDisplay civ={rightPicks[i]} picked={rightPicks[i]?.picked} banned={false} displayName/>
 				))}
 			</div>