VMztU1LeDdtT9uy{8R7Us@Jxwfm
za?7n`gIc+S@3?Xofde_6iiZL6!%R(P&O@=|w1x)?|O-aO6wrW36dN!tZ
zvxE+O3P-OL$kHt+Yh&3w^|;19N%~;T5N8UBoVYsFD@#VTm9QQjw{a
H0tfy-`Hi9&
literal 0
HcmV?d00001
From 14b2bb398cb27188edff05a15eda609c176e8879 Mon Sep 17 00:00:00 2001
From: Thomas Chazot
Date: Thu, 7 Dec 2023 14:54:42 +0100
Subject: [PATCH 08/20] fin code du tuto manque juste partie pif
---
.../src/Components/GraphContainer.tsx | 24 +++++
.../src/Components/PlayerList.tsx | 4 +-
.../src/Components/TutorialGraph.tsx | 90 ++++++++++++++++++-
cryptide_project/src/Pages/InGame.tsx | 2 +-
cryptide_project/src/Pages/Tutorial.tsx | 10 ++-
5 files changed, 122 insertions(+), 8 deletions(-)
diff --git a/cryptide_project/src/Components/GraphContainer.tsx b/cryptide_project/src/Components/GraphContainer.tsx
index fe8bf5b..8401c1d 100644
--- a/cryptide_project/src/Components/GraphContainer.tsx
+++ b/cryptide_project/src/Components/GraphContainer.tsx
@@ -709,6 +709,30 @@ const MyGraphComponent: React.FC = ({onNodeClick, handleS
}
}
}
+
+
+ const putCorrectBackground = () => {
+ if (personNetwork != null){
+ for(const person of personNetwork.getPersons()){
+ networkData.nodes.update({id: person.getId(), color: ColorToHexa(person.getColor())})
+ }
+ }
+ };
+
+/*
+ const putGreyBackgroud = () => {
+ if (stepTuto === 3){
+ const tabGrey = [0, 1, 2, 3, 5, 6, 7, 8, 9]
+ for (const i of tabGrey){
+ nodes.update({id: i, color: "#808080"})
+ }
+ console.log("CA MARCHE")
+ }
+ };
+*/
+
+
+ //setGreyForEveryone(() => myFunctionInsideEffect);
socket.on("put correct background", () =>{
diff --git a/cryptide_project/src/Components/PlayerList.tsx b/cryptide_project/src/Components/PlayerList.tsx
index 856d73d..6b44f8f 100644
--- a/cryptide_project/src/Components/PlayerList.tsx
+++ b/cryptide_project/src/Components/PlayerList.tsx
@@ -16,13 +16,15 @@ interface PlayerListProps {
setPlayerTouched: (newPlayerTouch: number) => void;
playerIndex: number
askedWrong: boolean
+ greyForEveryone: () => void
}
-const PlayerList: React.FC = ({ players, playerTouched, setPlayerTouched, playerIndex, askedWrong}) => {
+const PlayerList: React.FC = ({ players, playerTouched, setPlayerTouched, playerIndex, askedWrong, greyForEveryone}) => {
const theme = useTheme();
function askEveryone(){
if (!askedWrong){
+ greyForEveryone()
setPlayerTouched(players.length)
}
}
diff --git a/cryptide_project/src/Components/TutorialGraph.tsx b/cryptide_project/src/Components/TutorialGraph.tsx
index e2602c3..834cb94 100644
--- a/cryptide_project/src/Components/TutorialGraph.tsx
+++ b/cryptide_project/src/Components/TutorialGraph.tsx
@@ -34,6 +34,7 @@ interface TutorialGraphProps {
playerTouched: number
tutoStep: number
setTutoStep: (step: number) => void
+ setGreyForEveryone: (func: () => void) => void
}
let lastNodes: NodePerson[] = []
@@ -45,7 +46,7 @@ let stepTuto = -1
-const TutorialGraph: React.FC = ({showLast, setNetwork, setPlayerIndex, handleShowTurnBar, handleTurnBarTextChange, addToHistory, setPlayerTouched, playerTouched, tutoStep, setTutoStep}) => {
+const TutorialGraph: React.FC = ({showLast, setNetwork, setPlayerIndex, handleShowTurnBar, handleTurnBarTextChange, addToHistory, setPlayerTouched, playerTouched, tutoStep, setTutoStep, setGreyForEveryone}) => {
let cptTour: number = 0
//* Gestion du temps :
@@ -88,6 +89,9 @@ const TutorialGraph: React.FC = ({showLast, setNetwork, setP
useEffect(() => {
stepTuto = tutoStep
+ if(stepTuto===1){
+ handleShowTurnBar(true)
+ }
}, [tutoStep])
@@ -124,6 +128,7 @@ const TutorialGraph: React.FC = ({showLast, setNetwork, setP
const indices = JSONParser.JSONToIndices(jsonIndice)
console.log(indices)
+ console.log(personNetwork.getPersons())
setIndiceData(indices[0])
if (personNetwork == null){
@@ -134,6 +139,7 @@ const TutorialGraph: React.FC = ({showLast, setNetwork, setP
const nodes = new DataSet(graph.nodesPerson);
+
let n = graph.nodesPerson;
let e = graph.edges;
const graphState = { n, e };
@@ -179,6 +185,19 @@ const TutorialGraph: React.FC = ({showLast, setNetwork, setP
network.stabilize();
setNetwork(network)
+ const myFunctionInsideEffect = () => {
+ if (stepTuto === 3){
+ const tabGrey = [0, 1, 2, 3, 5, 6, 7, 8, 9]
+ for (const i of tabGrey){
+ nodes.update({id: i, color: "#808080"})
+ }
+ console.log("CA MARCHE")
+ }
+ };
+
+ setGreyForEveryone(() => myFunctionInsideEffect);
+
+
network.on("click", async (params) => {
if(params.nodes.length > 0){
@@ -198,12 +217,75 @@ const TutorialGraph: React.FC = ({showLast, setNetwork, setP
if(params.nodes.length > 0){
if (stepTuto === 0 && touchedPlayer === 1){
const node = nodes.get().find((n: NodePerson) => n.id === params.nodes[0])
- const pers = personNetwork.getPersons().find((p) => p.getId() === node?.id)
- if (node !== undefined && pers !== undefined && pers.getName() === "Violet"){
- networkData.nodes.update({id: params.nodes[0], label: node.label + positionToEmoji(1, true)})
+ if (node.id === 7){
+ nodes.update({id: node.id, label: node.label + positionToEmoji(1, true)})
+ handleShowTurnBar(false)
+ setPlayerIndex(1)
+ await delay(500)
+ const node2 = nodes.get().find((n: NodePerson) => n.id === params.nodes[0])
+ nodes.update({id: node.id, label: node2.label + positionToEmoji(2, false)})
+ await delay(500)
+ const node3 = nodes.get().find((n: NodePerson) => n.id === 8)
+ nodes.update({id: node3.id, label: node3.label + positionToEmoji(1, false)})
+ setPlayerIndex(2)
+ await delay(500)
+ const node4 = nodes.get().find((n: NodePerson) => n.id === 0)
+ nodes.update({id: node4.id, label: node4.label + positionToEmoji(1, true)})
+ setPlayerIndex(0)
setTutoStep(1)
}
}
+ else if(stepTuto === 1 && touchedPlayer === 2){
+ const node = nodes.get().find((n: NodePerson) => n.id === params.nodes[0])
+ if (node.id === 0){
+ nodes.update({id: node.id, label: node.label + positionToEmoji(2, false)})
+ handleTurnBarTextChange("Mauvais choix, posez un carré !")
+ const tabGrey = [7, 0, 4, 1, 8]
+ for (const id of tabGrey){
+ const node = nodes.get().find((n: NodePerson) => n.id === id)
+ nodes.update({id: node.id, color: "#808080"})
+ }
+ setTutoStep(2)
+ }
+ }
+ else if(stepTuto === 2){
+ const node = nodes.get().find((n: NodePerson) => n.id === params.nodes[0])
+ if (node.id === 9){
+ const tabColor = [7, 0, 4, 1, 8]
+ nodes.update({id: node.id, label: node.label + positionToEmoji(0, false)})
+ for(const id of tabColor){
+ const pers = personNetwork.getPersons().find((p: Person) => p.getId() === id)
+ if (pers !== undefined){
+ nodes.update({id: id, color: ColorToHexa(pers.getColor())})
+ }
+ }
+ handleShowTurnBar(false)
+ setPlayerIndex(1)
+ await delay(500)
+ const node2 = nodes.get().find((n: NodePerson) => n.id === 4)
+ nodes.update({id: node2.id, label: node2.label + positionToEmoji(2, true)})
+ setPlayerIndex(2)
+ await delay(500)
+ const node3 = nodes.get().find((n: NodePerson) => n.id === 3)
+ nodes.update({id: node3.id, label: node3.label + positionToEmoji(0, false)})
+ await delay(500)
+ const node4 = nodes.get().find((n: NodePerson) => n.id === 1)
+ nodes.update({id: node4.id, label: node4.label + positionToEmoji(2, false)})
+ setPlayerIndex(0)
+ handleTurnBarTextChange("A vous de jouer !")
+ handleShowTurnBar(true)
+ setTutoStep(3)
+ }
+ }
+ else if(stepTuto === 3 && touchedPlayer === 3){
+ const node = nodes.get().find((n: NodePerson) => n.id === params.nodes[0])
+ if (node.id === 4){
+ nodes.update({id: node.id, label: node.label + positionToEmoji(0, true)})
+ await delay(500)
+ const node2 = nodes.get().find((n: NodePerson) => n.id === 4)
+ nodes.update({id: node2.id, label: node2.label + positionToEmoji(1, true)})
+ }
+ }
}
else{
setPlayerTouched(-1)
diff --git a/cryptide_project/src/Pages/InGame.tsx b/cryptide_project/src/Pages/InGame.tsx
index 4acfc2f..d9c07a4 100644
--- a/cryptide_project/src/Pages/InGame.tsx
+++ b/cryptide_project/src/Pages/InGame.tsx
@@ -449,7 +449,7 @@ const InGame = ({locale, changeLocale}) => {
{ !IsSolo &&
}
diff --git a/cryptide_project/src/Pages/Tutorial.tsx b/cryptide_project/src/Pages/Tutorial.tsx
index 79e5eba..b7baaf0 100644
--- a/cryptide_project/src/Pages/Tutorial.tsx
+++ b/cryptide_project/src/Pages/Tutorial.tsx
@@ -57,6 +57,11 @@ const Tutorial = ({locale, changeLocale}) => {
const navigate = useNavigate()
+ const [greyForEveryone, setGreyForEveryone] = useState<() => void>(() => {});
+
+ const setGreyForEveryoneData = (func: () => void) => {
+ setGreyForEveryone(func)
+ }
const navigationType = useNavigationType()
cptNavigation++
@@ -238,7 +243,8 @@ const Tutorial = ({locale, changeLocale}) => {
playerTouched={playerTouched}
setNetwork={setNetworkData}
showLast={showLast}
- setPlayerIndex={setPlayerIndexData}/>
+ setPlayerIndex={setPlayerIndexData}
+ setGreyForEveryone={setGreyForEveryoneData}/>