Team names and colors (#45)

src/App.css

@@ -33,6 +33,14 @@ ul {
   margin-bottom: 5px;
 }
 
+.mb2 {
+  margin-bottom: 10px;
+}
+
+input[type='color'] {
+  vertical-align: middle;
+}
+
 .ml {
   margin-left: 5px;
 }

src/App.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import './App.css';
 import { createWorker, createScheduler } from 'tesseract.js';
-import { Category, Progress, Result, Sign } from './types';
+import { Category, LorenziTeam, Progress, Result, Sign } from './types';
 import getColors from 'get-image-colors';
 import Jimp from 'jimp';
 import useWindowSize from 'react-use/lib/useWindowSize';
@@ -51,9 +51,10 @@ import { getIncorrectRaces, validatePoints, validateTeams, validateUsernames } f
 import { uniq } from 'lodash';
 import UAParser from 'ua-parser-js';
 import { createArraySameValue, isEqual } from './utils/array';
-import { createLorenzi } from './utils/lorenzi';
+import { createLorenzi, getInitialLorenziTeams } from './utils/lorenzi';
 import { Footer } from './components/Footer';
 import { BasicMsg } from './components/BasicMsg';
+import { LorenziVisual } from './components/LorenziVisual';
 
 const App = () => {
   const renderProgressBar = () => {
@@ -322,7 +323,7 @@ const App = () => {
           <>
             <CopyToClipboard options={{ message: '' }} text={lorenzi} onCopy={() => setCopiedLorenzi(true)}>
               <button disabled={lorenzi === '' || copiedLorenzi} className="mt">
-                {copiedLorenzi ? 'Copied' : 'Copy to clipboard'}
+                {copiedLorenzi ? 'Copied' : 'Copy Lorenzi to clipboard'}
               </button>
             </CopyToClipboard>
             <a
@@ -334,6 +335,9 @@ const App = () => {
             >
               Go to Lorenzi Table
             </a>
+            {!includeCpuPlayers && !isFFA && (
+              <LorenziVisual lorenziTeams={lorenziTeams} setLorenziTeams={setLorenziTeams} />
+            )}
             <textarea className={`textarea-${classPlatform}`} disabled={true} rows={rowsLorenzi} value={lorenzi} />
           </>
         )}
@@ -815,7 +819,7 @@ const App = () => {
             points: pointsScheme[playerIndex]
           };
 
-          csv.push([result.username, result.rawUsername, result.distanceUsername]);
+          csv.push([result.username, result.rawUsername ?? '', result.distanceUsername ?? result.username.length]);
 
           dataResults.push(result);
         });
@@ -863,6 +867,7 @@ const App = () => {
   const [cpuData, setCpuData] = React.useState<any>({});
   const [includeCpuPlayers, setIncludeCpuPlayers] = React.useState(false);
   const [teams, setTeams] = React.useState<string[]>(getTeamNames(INITIAL_TEAMS_NB));
+  const [lorenziTeams, setLorenziTeams] = React.useState<LorenziTeam[]>(getInitialLorenziTeams(INITIAL_TEAMS_NB));
   const [nbTeams, setNbTeams] = React.useState(INITIAL_TEAMS_NB);
   const [playerTeams, setPlayerTeams] = React.useState<Record<string, string>>({});
   const [indexRace, setIndexRace] = React.useState(0);
@@ -900,12 +905,20 @@ const App = () => {
 
   React.useEffect(() => {
     if (resultsOcr && resultsOcr.length > 0) {
-      const newLorenzi = createLorenzi(resultsOcr, playerTeams, nbTeams, nbPlayers, teams, includeCpuPlayers);
+      const newLorenzi = createLorenzi(
+        resultsOcr,
+        playerTeams,
+        nbTeams,
+        nbPlayers,
+        teams,
+        includeCpuPlayers,
+        lorenziTeams
+      );
 
       setLorenzi(newLorenzi.join('\n'));
       setCopiedLorenzi(false);
     }
-  }, [resultsOcr]);
+  }, [resultsOcr, lorenziTeams]);
 
   React.useEffect(() => {
     if (shouldIncludeCpuPlayers && !includeCpuPlayers) {
@@ -919,6 +932,7 @@ const App = () => {
 
     setNbTeams(INITIAL_TEAMS_NB);
     setTeams(getTeamNames(INITIAL_TEAMS_NB));
+    setLorenziTeams(getInitialLorenziTeams(INITIAL_TEAMS_NB));
     setPlayerTeams({});
   };
 
@@ -956,6 +970,7 @@ const App = () => {
 
     setNbTeams(INITIAL_TEAMS_NB);
     setTeams(getTeamNames(INITIAL_TEAMS_NB));
+    setLorenziTeams(getInitialLorenziTeams(INITIAL_TEAMS_NB));
     setPlayerTeams({});
   };
 
@@ -966,6 +981,7 @@ const App = () => {
 
     setNbTeams(newNbTeams);
     setTeams(teamNames);
+    setLorenziTeams(getInitialLorenziTeams(newNbTeams));
     setPlayerTeams({});
 
     setSignPointsScheme(createArraySameValue(CTR_MAX_PLAYERS, Sign.Positive));

src/components/LorenziVisual.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { LorenziTeam } from '../types';
+
+export interface LorenziVisualProps {
+  lorenziTeams: LorenziTeam[];
+  setLorenziTeams: React.Dispatch<React.SetStateAction<LorenziTeam[]>>;
+}
+
+const LorenziVisual: React.FC<LorenziVisualProps> = (props) => {
+  const { lorenziTeams, setLorenziTeams } = props;
+
+  const onChangeProperty = (index: number, isName: boolean) => (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (lorenziTeams.length <= index) return;
+
+    const { value } = e.currentTarget;
+    const newLorenziTeams = [...lorenziTeams];
+
+    if (isName) newLorenziTeams[index].name = value;
+    else newLorenziTeams[index].color = value;
+
+    setLorenziTeams(newLorenziTeams);
+  };
+
+  const renderLorenziTeam = (team: LorenziTeam, index: number) => {
+    const { name, color } = team;
+
+    return (
+      <div className="mb" key={index}>
+        <input className="mr" onChange={onChangeProperty(index, true)} value={name} />
+        <input className="ml" onChange={onChangeProperty(index, false)} type="color" value={color} />
+      </div>
+    );
+  };
+
+  return <div className="text-center mb2">{lorenziTeams.map(renderLorenziTeam)}</div>;
+};
+
+export { LorenziVisual };

src/components/__test__/__snapshots__/Footer.test.tsx.snap

@@ -39,7 +39,7 @@ NodeList [
       target="_blank"
       title="Website changelog"
     >
-      1.0.17
+      1.1.0
     </a>
   </div>,
 ]

src/constants/general.ts

@@ -8,7 +8,7 @@ export const CRASH_TEAM_RANKING_AUTHOR_URL = 'https://crashteamranking.com/membe
 export const GUIDE_FOLDER = `${PROJECT_URL}/blob/main/doc/guide/${WEBSITE_LANGUAGE}/`;
 export const DEBUG_MODE = false;
 export const WEBSITE_TITLE = 'Crash Team Results';
-export const WEBSITE_VERSION = '1.0.17';
+export const WEBSITE_VERSION = '1.1.0';
 export const WEBSITE_DEFAULT_LANGUAGE = 'en';
 export const URL_CPUS = `${AUTHOR_GITHUB}/json/${JSON_FOLDER}/players.json`;
 export const EXAMPLE_IMAGES_FOLDER = `https://raw.githubusercontent.com/${AUTHOR_NAME}/${PROJECT_NAME}/main/src/img/examples/`;

src/types.ts

@@ -17,6 +17,11 @@ export type Validation = {
   isWarning?: boolean;
 };
 
+export type LorenziTeam = {
+  name: string;
+  color: string;
+};
+
 export type Coord = {
   height: number;
   left: number;
@@ -27,9 +32,9 @@ export type Coord = {
 export type Result = {
   username: string;
   position: number;
-  distanceUsername: number;
+  distanceUsername?: number;
   points: number;
-  rawUsername: string;
+  rawUsername?: string;
 };
 
 export enum Sign {