diff --git a/frontend/static/js/api/game/TicTacToeGame.js b/frontend/static/js/api/game/TicTacToeGame.js
index 08ddb78..fa2c771 100644
--- a/frontend/static/js/api/game/TicTacToeGame.js
+++ b/frontend/static/js/api/game/TicTacToeGame.js
@@ -15,6 +15,8 @@ class TicTacToe
this.canvas = canvas
this.context = this.canvas.getContext("2d");
this.blitz = blitz;
+ this.sign = "cross";
+ this.outline = false;
}
init()
@@ -24,7 +26,7 @@ class TicTacToe
uninit()
{
- this.canvas.addEventListener("mousedown", (event, morpion = this) => this.onClick(event, morpion));
+ this.canvas.removeEventListener("mousedown", (event, morpion = this) => this.onClick(event, morpion));
}
onClick(event, morpion)
@@ -47,6 +49,34 @@ class TicTacToe
function sendCase(targetMorpion, targetCase)
{
// send to backend (stp camille code bien)
+ morpion.game[targetMorpion][targetCase] = (morpion.sign == "cross") ? 0 : 1;
+ }
+
+ function printSign(targetMorpion, targetCase)
+ {
+ let targetX = (morpion.gap + targetMorpion % 3 * morpion.rectsize * 3) + (targetCase % 3 * morpion.rectsize);
+ let targetY = (morpion.gap + Math.floor(targetMorpion / 3) * morpion.rectsize * 3) + (Math.floor(targetCase / 3) * morpion.rectsize);
+ if (morpion.sign == "cross")
+ {
+ morpion.context.beginPath();
+ morpion.context.strokeStyle = "green";
+ morpion.context.moveTo(targetX + 15, targetY + 15);
+ morpion.context.lineTo(targetX + 45, targetY + 45);
+ morpion.context.moveTo(targetX + 45, targetY + 15);
+ morpion.context.lineTo(targetX + 15, targetY + 45);
+ morpion.context.stroke();
+ morpion.context.closePath();
+ }
+ else
+ {
+ morpion.context.beginPath();
+ morpion.context.strokeStyle = "red";
+ targetX += morpion.rectsize / 2;
+ targetY += morpion.rectsize / 2;
+ morpion.context.arc(targetX, targetY, 20, 0, 2 * Math.PI);
+ morpion.context.stroke();
+ morpion.context.closePath();
+ }
}
function findPlace(x, morpion)
@@ -73,13 +103,38 @@ class TicTacToe
return -1;
}
+ function setOutline()
+ {
+ if (morpion.outline)
+ {
+ morpion.context.beginPath();
+ morpion.context.strokeStyle = (morpion.sign == "cross") ? "green" : "red";
+ morpion.context.roundRect(0, 0, morpion.canvas.width, morpion.canvas.height, 25);
+ morpion.context.stroke();
+ morpion.context.closePath();
+ }
+ else
+ {
+ morpion.context.beginPath();
+ morpion.context.strokeStyle = "#1a1a1d";
+ morpion.context.roundRect(0, 0, morpion.canvas.width, morpion.canvas.height, 25);
+ morpion.context.stroke();
+ morpion.context.closePath();
+ }
+ morpion.outline = !morpion.outline;
+ }
+
targetMorpion = findPlace(x, this) + findPlace(y, this) * 3;
if (findPlace(x, this) < 0 || findPlace(y, this) < 0)
return -1;
targetCase = findSquare(x, this.rectsize * 3 * findPlace(x, this) + this.gap, this) + findSquare(y, this.rectsize * 3 * findPlace(y, this) + this.gap, this) * 3;
if (checkCase(targetMorpion, targetCase))
+ {
sendCase(targetMorpion, targetCase);
+ printSign(targetMorpion, targetCase);
+ setOutline();
+ }
else
incorrectCase();
}
@@ -145,13 +200,25 @@ class TicTacToe
}
- SetOutline(color)
+ setOutline()
{
- this.context.beginPath();
- this.context.strokeStyle = color;
- this.context.roundRect(0, 0, this.canvas.width, this.canvas.height, 25);
- this.context.stroke();
- this.context.closePath();
+ if (this.outline)
+ {
+ this.context.beginPath();
+ this.context.strokeStyle = (this.sign == "cross") ? "green" : "red";
+ this.context.roundRect(0, 0, this.canvas.width, this.canvas.height, 25);
+ this.context.stroke();
+ this.context.closePath();
+ }
+ else
+ {
+ this.context.beginPath();
+ this.context.strokeStyle = "#1a1a1d";
+ this.context.roundRect(0, 0, this.canvas.width, this.canvas.height, 25);
+ this.context.stroke();
+ this.context.closePath();
+ }
+ this.outline = !this.outline;
}
}
diff --git a/frontend/static/js/lang/cr.json b/frontend/static/js/lang/cr.json
index b73e472..495e4d5 100644
--- a/frontend/static/js/lang/cr.json
+++ b/frontend/static/js/lang/cr.json
@@ -62,7 +62,7 @@
"settingsAvatarDelete": "Décrampté",
"settingsAvatarSaved": "Avatar crampté.",
"settingsAvatarDeleted": "Avatar décrampté.",
- "settingsAvatarDeleteError": "Un cramptérreur s'est produite.",
+ "settingsAvatarDeleteError": "Une cramptérreur s'est produite.",
"settingsAvatarTooLarge": "L'image est trop crampté",
"settingsTitle": "Paramètres de crampté",
"settingsUsername": "Nom d'crampté",
diff --git a/frontend/static/js/views/TicTacToeOnlineView.js b/frontend/static/js/views/TicTacToeOnlineView.js
index 9c4c00d..0b736b3 100644
--- a/frontend/static/js/views/TicTacToeOnlineView.js
+++ b/frontend/static/js/views/TicTacToeOnlineView.js
@@ -17,8 +17,8 @@ export default class extends AbstractView
{
this.Morpion = new TicTacToe(this.height, this.width, 60, 60, document.getElementById("Morpion"));
this.Morpion.DrawSuperMorpion();
- this.Morpion.SetOutline("#43d166");
this.Morpion.init();
+ this.Morpion.setOutline();
}
async leavePage()
@@ -38,7 +38,6 @@ export default class extends AbstractView
Work in progress bozo
- 
`;