fin du jeu en multi + grisage des cases impossibles

cryptide_project/server/server.js

@@ -84,4 +84,20 @@ io.on('connection', (socket) => {
     io.to(room).emit("node checked", id, works, color, playerIndex)
   })
   
+  socket.on("put correct background", (id) =>{
+    io.to(id).emit("put correct background")
+  })
+
+  socket.on("put grey background", (id, player) =>{
+    io.to(id).emit("put grey background", player)
+  })
+
+  socket.on("put imossible grey", (id) =>{
+    io.to(id).emit("put imossible grey")
+  })
+
+  socket.on("end game", (winnerIndex, room) =>{
+    console.log("endgame")
+    io.to(room).emit("end game", winnerIndex)
+  })
 });

cryptide_project/src/Components/GraphContainer.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { DataSet, Network} from "vis-network/standalone/esm/vis-network";
 import EdgesCreator from "../model/EdgesCreator";
 import GraphCreator from "../model/Graph/GraphCreator";
@@ -20,12 +20,15 @@ import { Navigate, useLocation, useNavigate } from "react-router-dom";
 import { useGame } from "../Contexts/GameContext";
 import { socket } from "../SocketConfig"
 import { colorToEmoji, positionToColor } from "../ColorHelper";
+import { ColorToHexa } from "../model/EnumExtender";
 
 
 interface MyGraphComponentProps {
   onNodeClick: (shouldShowChoiceBar: boolean) => void;
   handleShowTurnBar: (shouldShowTurnBar: boolean) => void
   handleTurnBarTextChange: (newTurnBarText: string) => void
+  setPlayerTouched: (newPlayerTouch: number) => void;
+  playerTouched: number
 }
 
 let lastAskingPlayer = 0
@@ -34,17 +37,35 @@ let first = true
 let askedWrong = false
 let solo: boolean = true
 let mapIndexPersons: Map<number, Person[]> = new Map<number, Person[]>()
+let touchedPlayer = -1
 
 
-const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange}) => {
-
-  const { indices, indice, person, personNetwork, setNodeIdData, players, askedPersons, setActualPlayerIndexData, room, actualPlayerIndex, turnPlayerIndex, onlyFalse, setOnlyFalseData } = useGame();
+const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleShowTurnBar, handleTurnBarTextChange, playerTouched, setPlayerTouched}) => {
 
+  const { indices, indice, person, personNetwork, setNodeIdData, players, askedPersons, setActualPlayerIndexData, room, actualPlayerIndex, turnPlayerIndex, setWinnerData } = useGame();
   const params = new URLSearchParams(window.location.search);
   const solotmp = params.get('solo');
   const navigate = useNavigate();
 
 
+  useEffect(() =>{
+    touchedPlayer=playerTouched
+    if (touchedPlayer == -1){
+      if (!askedWrong){
+        socket.emit("put correct background", socket.id)
+      }
+    }
+    else if (touchedPlayer < players.length && touchedPlayer>=0){
+      if(!askedWrong){
+        socket.emit("put correct background", socket.id)
+        socket.emit("put grey background", socket.id, touchedPlayer)
+      }
+    }
+    else if(touchedPlayer == players.length){
+      socket.emit("put imossible grey", socket.id)
+    }
+  }, [playerTouched])
+  
 
   let playerIndex: number = turnPlayerIndex
   let index = 0
@@ -111,6 +132,7 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
     
     const networkData = { nodes: nodes, edges: graph.edges };
     const network = new Network(container, networkData, initialOptions);
+
     if (!solo){
       socket.on("asked all", (id) =>{
         const pers = personNetwork.getPersons().find((p) => p.getId() == id)
@@ -124,9 +146,18 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
         if (node!=undefined){
           onNodeClick(false)
           playerIndex = newPlayerIndex
+          if (mapIndexPersons.get(askedIndex)?.find((p) => p.getId() == id) == undefined){
+            const p = personNetwork.getPersons().find((p)=> p.getId() == id)
+            const tab = mapIndexPersons.get(askedIndex)
+            if (p!=undefined && tab != undefined){
+              tab.push(p)
+            } 
+          }
+          
           if (!node.label.includes(colorToEmoji(positionToColor(askedIndex), works))){
             networkData.nodes.update({id: id, label: node.label + colorToEmoji(positionToColor(askedIndex), works)})
           }
+          
           if (playerIndex === thisPlayerIndex){
             handleTurnBarTextChange("À vous de jouer")
             handleShowTurnBar(true)
@@ -144,15 +175,14 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
       })
   
       socket.on("asked wrong", () =>{
-        setOnlyFalseData(true)
         askedWrong = true
         handleShowTurnBar(true)
         handleTurnBarTextChange("Mauvais choix, posez un carré !")
+        socket.emit("put grey background", socket.id, thisPlayerIndex)
       })
   
   
       socket.on("asked", (nodeId, askingPlayer, askingPlayerIndex) => {
-        console.log(askingPlayerIndex)
         if (askingPlayer.id !== lastAskingPlayer || nodeId !== lastNodeId ){
           lastAskingPlayer = askingPlayer.id
           lastNodeId = nodeId
@@ -192,6 +222,61 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
     }
     
 
+    socket.on("put correct background", () =>{
+      if (personNetwork != null){
+        for(const person of personNetwork.getPersons()){
+          networkData.nodes.update({id: person.getId(), color: ColorToHexa(person.getColor())})
+        }
+      }
+    })
+
+    socket.on("put grey background", (player) =>{
+      if (personNetwork != null){
+        const tab = mapIndexPersons.get(player)
+        if (tab != undefined){
+          if (player != thisPlayerIndex){
+            for(const person of personNetwork.getPersons().filter((p) => tab.includes(p))){
+              networkData.nodes.update({id: person.getId(), color: "#808080"})
+            }
+          }
+          else if(indice != null){
+            const tester = IndiceTesterFactory.Create(indice)
+            for(const person of personNetwork.getPersons().filter((p) => tab.includes(p) || tester.Works(p))){
+              networkData.nodes.update({id: person.getId(), color: "#808080"})
+            }
+          }
+        }
+      }
+    })
+
+    socket.on("put imossible grey", ()=>{
+      if (personNetwork != null && indice!=null){
+        const tabNodes: any = []
+        const tester = IndiceTesterFactory.Create(indice)
+        for (const pers of personNetwork.getPersons()){
+          const node = nodes.get().find((n) => pers.getId() == n.id)
+          if (node != undefined){
+            for(let i=0; i<players.length; i++){
+              if (node.label.includes(colorToEmoji(positionToColor(i), false)) || !tester.Works(pers)){
+                console.log(tester.Works(pers))
+                tabNodes.push(node)
+                break
+              }
+            }
+          }
+          
+        }
+        for(const n of tabNodes){
+          networkData.nodes.update({id: n.id, color: "#808080"})
+        }
+      }
+    })
+
+    socket.on("end game", (winnerIndex) =>{
+      setWinnerData(players[winnerIndex])
+      navigate("/endgame")
+    })
+
 
     
     personNetwork.getPersons().forEach(p => {
@@ -234,24 +319,59 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
                   playerIndex = 0
                 }
                 socket.emit("node checked", params.nodes[0], false, thisPlayerIndex, room, playerIndex)
+                socket.emit("put correct background", socket.id)
+                touchedPlayer=-1
                 askedPersons.push(person)
                 askedWrong = false
               }
             }
           }
-          else if (thisPlayerIndex == playerIndex){
-            onNodeClick(true)
+          else if(touchedPlayer != - 1 && playerIndex == actualPlayerIndex && touchedPlayer<players.length){
+            socket.emit("ask player", params.nodes[0], players[touchedPlayer].id, players.find((p) => p.id === socket.id, actualPlayerIndex))
+            socket.emit("put correct background", socket.id)
+            touchedPlayer=-1
           }
-          else{
-            onNodeClick(false)
+          else if(playerIndex == actualPlayerIndex && touchedPlayer==players.length){
+            const person = personNetwork?.getPersons().find((p) => p.getId() == params.nodes[0])
+            if (person != undefined){
+              const indiceTester = IndiceTesterFactory.Create(indices[actualPlayerIndex])
+              let nextPlayerIndex = actualPlayerIndex + 1
+              if (nextPlayerIndex == players.length){
+                nextPlayerIndex = 0
+              }
+      
+              let playerIndex = actualPlayerIndex + 1
+              if (indiceTester.Works(person)){
+                socket.emit("node checked", params.nodes[0], true, actualPlayerIndex, room, nextPlayerIndex)
+                while(playerIndex != actualPlayerIndex){
+                  if (playerIndex == players.length){
+                    playerIndex = 0
+                  }
+                  const tester = IndiceTesterFactory.Create(indices[playerIndex])
+                  const works = tester.Works(person)
+                  await delay(500);
+                  socket.emit("asked all 1by1", person.getId(), players[playerIndex].id)
+                  socket.emit("node checked", params.nodes[0], works, playerIndex, room, nextPlayerIndex)
+                  if(!works){
+                    socket.emit("put correct background", socket.id)
+                    touchedPlayer=-1
+                    return
+                  }
+                  playerIndex ++
+                }
+                touchedPlayer=-1
+                socket.emit("put correct background", socket.id)
+                await delay(1000)
+                socket.emit("end game", thisPlayerIndex, room)
+              }
+            }
           }
-        }
+        } 
         else{
           const person = personNetwork?.getPersons().find((p) => p.getId() == params.nodes[0]) //person sélectionnée
           if (person != undefined){
             let index =0
             let works = true
-            let promises: Promise<void>[] = []
             for (const i of indices){
               const tester = IndiceTesterFactory.Create(i)
               const test = tester.Works(person)
@@ -278,6 +398,7 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
       else{
         // Renvoyer un false pour cacher la choice bar
         onNodeClick(false)
+        setPlayerTouched(-1)
       }
     });
   }, []); // Le tableau vide signifie que cela ne s'exécutera qu'une fois après le premier rendu
@@ -291,6 +412,12 @@ const MyGraphComponent: React.FC<MyGraphComponentProps> = ({onNodeClick, handleS
   function delay(ms: number): Promise<void> {
     return new Promise(resolve => setTimeout(resolve, ms));
   }
+
+  function putGreyBackgroud(index: number){
+    /*
+    
+    */
+  }
 }
 
 

cryptide_project/src/Components/PersonStatus.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 /* Style */
 import '../Style/Global.css'
@@ -7,17 +7,40 @@ import { useTheme } from '../Style/ThemeContext';
 /* Ressources */
 import Person from '../res/img/Person.png'
 import leave from '../res/img/bot.png'
+interface PlayerStatusProps {
+    img: any
+    state: any
+    name: string
+    index: number
+    setPlayerTouched: (newPlayerTouch: number) => void;
+    playerTouched: number
+  }
+  let touchedPlayer = -1
 
 //@ts-ignore
-function PersonStatus({img = Person, state= Person, name = "Dummy"}) {
+const PersonStatus: React.FC<PlayerStatusProps> = ({img = Person, state= Person, name = "Dummy", index, playerTouched, setPlayerTouched}) => {
     const theme=useTheme();
+
+    const [touchedPlayer, setTouchedPlayer] = useState(-2)
+    useEffect(() =>{
+        setTouchedPlayer(playerTouched)
+        console.log(touchedPlayer)
+    }, [playerTouched])
     return (
-        <div className='centerDivV'>
-            <img src={img} alt="player" height="100" width="100"/>
-            <h4>{name}</h4>
-            <div className='statusDiv' style={{ backgroundColor: theme.colors.primary }}>
-                <img src={state} alt="state" height="30" width="30"/>
-            </div>
+        <div className='centerDivV' onClick={() => setPlayerTouched(index)}>
+            <img src={img} alt="player" height="60" width="60"/>
+            <h5>{name}</h5>
+            {(touchedPlayer == index) ?(
+                <div className='statusDiv' style={{ backgroundColor: "gold" }}>
+                    <img src={state} alt="state" height="30" width="30"/>
+                </div>
+            ): 
+            (
+                <div className='statusDiv' style={{ backgroundColor: theme.colors.primary }}>
+                    <img src={state} alt="state" height="30" width="30"/>
+                </div>
+            )  }
+            
         </div>
     );
 }

cryptide_project/src/Components/PlayerList.tsx

@@ -1,19 +1,66 @@
 
 import React from 'react';
 import { colorToEmoji, positionToColor } from '../ColorHelper';
+import Player from '../model/Player';
+import { useTheme } from '../Style/ThemeContext';
 import PersonStatus from './PersonStatus';
+import Person from '../res/img/Person.png'
+import { socket } from '../SocketConfig';
+
 
 //@ts-ignore
-function PlayerList({ players }) {
+
+interface PlayerListProps {
+    players: Player[];
+    playerTouched: number
+    setPlayerTouched: (newPlayerTouch: number) => void;
+  }
+
+const PlayerList: React.FC<PlayerListProps> = ({ players, playerTouched, setPlayerTouched}) => {
+    const theme = useTheme();
+
     return (
-        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '16px' }}>
-            {
-                //@ts-ignore
-                players.map((player, index) => (
-                    <PersonStatus key={index} state={player.state} name={player.name + " " + colorToEmoji(positionToColor(index), true)} />
-                ))
+        <div>
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '16px' }}>
+                {
+                    //@ts-ignore
+                    players.map((player, index) => (
+                        player.id!=socket.id && <PersonStatus img={Person} state={Person} key={index} name={player.name + " " + colorToEmoji(positionToColor(index), true)} playerTouched={playerTouched} setPlayerTouched={setPlayerTouched} index={index}/>
+                    ))
+                }
+            </div>
+            <div 
+            style={{display: 'flex',
+                justifyContent: "center",
+                alignSelf: "center",
+                alignItems:"center",
+                margin: 10
+                }}>
+                {(playerTouched == players.length) 
+                ?(
+                    <button style={{ 
+                    backgroundColor: "gold",
+                    borderColor: theme.colors.secondary,
+                    borderRadius: "10px",
+                    border: "solid 1px",
+                    textAlign: "center",
+                    padding: "10px"}}
+                    onClick={() => setPlayerTouched(players.length)}>Ask everyone</button>
+                ):
+                (
+                    <button style={{ 
+                        backgroundColor: theme.colors.primary,
+                        borderColor: theme.colors.secondary,
+                        borderRadius: "10px",
+                        border: "solid 1px",
+                        textAlign: "center",
+                        padding: "10px"}}
+                    onClick={() => setPlayerTouched(players.length)}>Ask everyone</button>
+                )
             }
+            </div>
         </div>
+        
 
     );
 }   

cryptide_project/src/Contexts/GameContext.tsx

@@ -16,6 +16,7 @@ interface GameContextProps {
   turnPlayerIndex: number;
   room: string;
   onlyFalse: boolean
+  winner: Player | null
   setIndicesData: (newIndices: Indice[]) => void;
   setIndiceData: (newIndice: Indice) => void;
   setPersonData: (newPerson: Person) => void;
@@ -27,6 +28,7 @@ interface GameContextProps {
   setTurnPlayerIndexData: (newTurnPlayerIndex: number) => void;
   setRoomData: (newRoom: string) => void;
   setOnlyFalseData: (newOnlyFalse: boolean) => void
+  setWinnerData: (winner: Player) => void
 }
 
 const GameContext = createContext<GameContextProps | undefined>(undefined);
@@ -47,6 +49,7 @@ export const GameProvider: React.FC<GameProviderProps> = ({ children }) => {
   const [turnPlayerIndex, setTurnPlayerIndex] = useState<number>(-1)
   const [room, setRoom] = useState<string>("")
   const [onlyFalse, setOnlyFalse] = useState<boolean>(false)
+  const [winner, setWinner] = useState<Player | null>(null)
 
 
   const setIndicesData = (newIndices: Indice[]) => {
@@ -94,8 +97,12 @@ export const GameProvider: React.FC<GameProviderProps> = ({ children }) => {
     setOnlyFalse(newOnlyFalse)
   }
 
+  const setWinnerData = (winner: Player) =>{
+    setWinner(winner)
+  }
+
   return (
-    <GameContext.Provider value={{ indices, setIndicesData, indice, setIndiceData, person, setPersonData, personNetwork, setPersonNetworkData, players, setPlayersData, nodeId, setNodeIdData, askedPersons, setAskedPersonsData, actualPlayerIndex, setActualPlayerIndexData, turnPlayerIndex, setTurnPlayerIndexData, room, setRoomData, onlyFalse, setOnlyFalseData }}>
+    <GameContext.Provider value={{ indices, setIndicesData, indice, setIndiceData, person, setPersonData, personNetwork, setPersonNetworkData, players, setPlayersData, nodeId, setNodeIdData, askedPersons, setAskedPersonsData, actualPlayerIndex, setActualPlayerIndexData, turnPlayerIndex, setTurnPlayerIndexData, room, setRoomData, onlyFalse, setOnlyFalseData, winner, setWinnerData }}>
       {children}
     </GameContext.Provider>
   );

cryptide_project/src/Pages/EndGame.tsx

@@ -21,17 +21,20 @@ import { Link } from 'react-router-dom';
 
 /* lang */
 import { FormattedMessage } from 'react-intl';
+import { useGame } from '../Contexts/GameContext';
 
 
 function EndGame() {
 
+    const {winner, person} =useGame()
+    console.log(winner)
     const theme = useTheme();
     return (
         <div>
             <div className="head">
                 <header className='leaderboard-header' style={{ borderColor: theme.colors.primary }}>
-                    <h1>Dummy a gagné !</h1>
-                    <h3>Le tueur était <u>Bob</u></h3>
+                    <h1>{winner?.name} a gagné !</h1>
+                    <h3>Le tueur était <u>{person?.getName()}</u></h3>
                 </header>
             </div>
             <div className='winner'>
@@ -42,9 +45,12 @@ function EndGame() {
                     <BigButtonNav dest="/play" img={Leave}/>
                 </div>
                 <div className='centerDivH'>
-                    <PersonStatus state={Replay} name="Dummy"/>
-                    <PersonStatus state={Leave} name="bot2"/>
-                    <PersonStatus state={Leave} name="bot3"/>
+                    {/*
+                    <PersonStatus img={Person} state={Replay} name="Dummy"/>
+                    <PersonStatus img={Person} state={Leave} name="bot2"/>
+                    <PersonStatus img={Person} state={Leave} name="bot3"/>
+                    */}
+                    
                 </div>
                 <div className='centerDivH'>
                     <BigButtonNav dest="/lobby" img={Replay}/>

cryptide_project/src/Pages/InGame.tsx

@@ -43,10 +43,15 @@ const InGame = ({locale, changeLocale}) => {
     const [showChoiceBar, setShowChoiceBar] = useState(false);
     const [showTurnBar, setShowTurnBar] = useState(false);
     const [turnBarText, setTurnBarText] = useState("");
+    const [playerTouched, setPlayerTouched] = useState(-2)
   
     const handleNodeClick = (shouldShowChoiceBar: boolean) => {
       setShowChoiceBar(shouldShowChoiceBar);
     };
+
+    const handleSetPlayerTouched = (newPlayerTouched: number) => {
+      setPlayerTouched(newPlayerTouched);
+    };
   
 
     const handleShowTurnBar = (shouldShowTurnBar: boolean) => {
@@ -114,18 +119,7 @@ const InGame = ({locale, changeLocale}) => {
       <div id="mainDiv">
         {showTurnBar && <TurnBar text={turnBarText}/>}
         <div id='graphDiv'>
-          <GraphContainer onNodeClick={handleNodeClick} handleShowTurnBar={handleShowTurnBar} handleTurnBarTextChange={handleTurnBarTextChange} />
-        </div>
-
-        <div className='playerlistDiv'>
-          <button className='button' 
-            style={{ 
-                backgroundColor: theme.colors.primary,
-                borderColor: theme.colors.secondary
-            }}
-            onClick={handleChangeP}>
-            Players
-          </button>
+          <GraphContainer onNodeClick={handleNodeClick} handleShowTurnBar={handleShowTurnBar} handleTurnBarTextChange={handleTurnBarTextChange} playerTouched={playerTouched} setPlayerTouched={handleSetPlayerTouched}/>
         </div>
 
         <div className='paramDiv'>
@@ -172,6 +166,7 @@ const InGame = ({locale, changeLocale}) => {
           </button>
         </div>
 
+{/*
         <Offcanvas show={showP} 
                   onHide={handleCloseP}>
           <Offcanvas.Header closeButton>
@@ -179,15 +174,14 @@ const InGame = ({locale, changeLocale}) => {
             <h3>Il y a {players.length} joueurs</h3>
           </Offcanvas.Header>
           <Offcanvas.Body>
-              {/* affichage d'une liste responsive dynamic */}
-            {/* <div className='playerCanvasBody'>
-              <PersonStatus state={Replay} name="Dummy"/>
-              <PersonStatus state={Replay} name="Boat"/>
-              <PersonStatus state={Replay} name="Bot-tom"/>
-            </div> */}
-            <PlayerList players={players} />
+
           </Offcanvas.Body>
         </Offcanvas>
+          */}
+          <div className='playerlistDiv'>
+            <PlayerList players={players} setPlayerTouched={handleSetPlayerTouched} playerTouched={playerTouched} />
+          </div>
+
 
         <Offcanvas show={show} 
                   onHide={handleClose} 

cryptide_project/src/Translations/en.json

@@ -55,7 +55,7 @@
     "color_start": "The suspect has",
     "color_end": "hair",
 
-    "nb_friends_indice_start": "The suspect has at least",
+    "nb_friends_indice_start": "The suspect has",
     "nb_friends_indice_end": "friends",
 
     "nb_sports_indice_start": "The suspect is playing",

cryptide_project/src/Translations/fr.json

@@ -54,7 +54,7 @@
     "color_start": "Le suspect a les cheveux",
     "color_end": "",
 
-    "nb_friends_indice_start": "Le suspect a au moins",
+    "nb_friends_indice_start": "Le suspect",
     "nb_friends_indice_end": "amis",
 
     "nb_sports_indice_start": "Le suspect pratique",

cryptide_project/src/model/Graph/GraphCreator.ts

@@ -11,7 +11,7 @@ class GraphCreator{
         const nodesPerson : NodePerson[] = []
         const edges: Edge[] = []
         network.getPersons().forEach((p) =>{
-            let label = p.getName() + "\n" + p.getAge() + "\n"
+            let label = p.getName() + "\n" + p.getAge() + "🎂" + "\n"
             for (let i = 0; i<p.getSports().length; i++){
                 label += SportToIcon(p.getSports()[i])
             }

cryptide_project/src/model/IndiceEdgesCreator.ts/NbEdgesIndiceEdgesCreator.ts

@@ -18,7 +18,7 @@ class NbEdgesIndiceEdgesCreator implements IndiceEdgesCreator{
 
     createWorkingEdges(personNetwork: PersonNetwork, person: Person, indices: Indice[]): number {
         let indiceTest = new NbEdgesIndiceTester(this.indice)
-        const nbEdges = this.indice.getNbEdges() + Math.floor(Math.random() * 2)
+        const nbEdges = this.indice.getNbEdges()
         personNetwork.getPersons().forEach(p => {
             if (person.getFriends().length == nbEdges){
                 return

cryptide_project/src/model/IndiceTester/NbEdgesIndiceTester.ts

@@ -12,7 +12,7 @@ class NbEdgesIndiceTester implements IndiceTester{
     }
 
     Works(person: Person): boolean {
-        return person.getFriends().length >= this.nbEdgesIndice.getNbEdges()
+        return person.getFriends().length == this.nbEdgesIndice.getNbEdges()
     }
 }
 

cryptide_project/src/model/Stub.ts

@@ -11,16 +11,17 @@ import Sport from "./Sport"
 class Stub{
 
     static GenerateIndice(): Indice[]{
-        let indice = new NbEdgesIndice(1, 3)
-        let indice1 = new NbEdgesIndice(2, 4)
-        let ageIndice = new AgeIndice(3, 0, 14)
-        let ageIndice1 = new AgeIndice(4, 15, 19)
-        let ageIndice2 = new AgeIndice(5, 20, 29)
-        let ageIndice3 = new AgeIndice(6, 30, 100000)
+        let indice = new NbEdgesIndice(1, 2)
+        let indice1 = new NbEdgesIndice(2, 3)
+        let indice2 = new NbEdgesIndice(3, 4)
+        let ageIndice = new AgeIndice(4, 0, 14)
+        let ageIndice1 = new AgeIndice(5, 15, 19)
+        let ageIndice2 = new AgeIndice(6, 20, 29)
+        let ageIndice3 = new AgeIndice(7, 30, 100000)
 
-        let indices: Indice[] = [indice, indice1, ageIndice, ageIndice1, ageIndice2, ageIndice3]
+        let indices: Indice[] = [indice, indice1, indice2, ageIndice, ageIndice1, ageIndice2, ageIndice3]
 
-        let test = 7
+        let test = 8
         for (let i: Color=0; i<5; i++){
             for (let j: Color=0; j<5; j++){
                 if (j==i){