starnakin/42_ft_transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

game: add: online

Browse Source
This commit is contained in:
Namonay 2024-04-08 20:18:25 +02:00
parent bceb26790d
commit 9f5ca1430d
5 changed files with 202 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/static/js/api/game/AGame.js
View File

@ -1,6 +1,7 @@
import { AExchangeable } from "../AExchangable.js";
import { APlayer } from "./APlayer.js";
import { Client } from "../Client.js"
import { sleep } from "../../utils/sleep.js";
export class AGame extends AExchangeable
{
@ -96,10 +97,15 @@ export class AGame extends AExchangeable
*/
send(data)
{
if (this._socket === undefined || this._socket.readyState === WebSocket.OPEN)
return;
console.log(this._socket)
if (this._socket === undefined || this._socket.readyState !== WebSocket.OPEN)
{
console.log("bozo pas confirme")
return ;
}
console.log("j'essaye de send")
this._socket.send(data);
console.log("j'ai passer le send")
}
async join()

242
frontend/static/js/api/game/tictactoe/TicTacToeGame.js
View File

@ -1,142 +1,167 @@
import { client } from "../../../index.js";
import { AGame } from "../AGame.js";
class TicTacToe
{
constructor(height, width, gap, rectsize, canvas, blitz = false)
constructor(height, width, gap, rectsize, canvas, game_id)
{
this.height = height;
this.width = width;
this.gap = gap;
this.rectsize = rectsize;
this.game = [[],[],[],[],[],[],[],[],[]];
this.map = [[],[],[],[],[],[],[],[],[]];
for (let i = 0; i < 9; i++)
for (let j = 0; j < 9; j++)
this.game[i].push(-1);
this.map[i].push(-1);
this.game_id = game_id;
this.game = new AGame(client, game_id, this.onReceive.bind(this), this.uninit.bind(this), "tictactoe")
this.canvas = canvas
this.context = this.canvas.getContext("2d");
this.blitz = blitz;
this.sign = "cross";
this.outline = false;
this.sign = "x";
this.turn;
}
init()
async init()
{
console.log(this.game_id);
await this.game.join();
this.canvas.addEventListener("mousedown", (event, morpion = this) => this.onClick(event, morpion));
}
uninit()
async uninit()
{
this.canvas.removeEventListener("mousedown", (event, morpion = this) => this.onClick(event, morpion));
}
async onReceive(messageData)
{
console.log(messageData)
if (messageData.detail == "x" || messageData.detail == "o")
{
this.sign = messageData.detail;
this.turn = messageData.detail == "x";
}
else if (messageData.detail == "game_start")
this.game.started = true;
else
{
this.map[messageData.targetMorpion][messageData.targetCase] = (this.sign == "x") ? 1 : 0;
this.printSign(messageData.targetMorpion, messageData.targetCase, (this.sign == "x") ? "o" : "x")
}
}
onClick(event, morpion)
{
let x = event.offsetX;
let y = event.offsetY;
let targetMorpion, targetCase;
function checkCase(targetMorpion, targetCase)
{
console.log("TargetMorpion :" + targetMorpion + " targetCase :" + targetCase);
return (morpion.game[targetMorpion][targetCase] == -1);
}
function incorrectCase()
{
console.log("bozo");
}
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)
{
if (x <= morpion.gap || x >= morpion.gap + morpion.rectsize * 9)
return -1;
if (x <= morpion.gap + morpion.rectsize * 3)
return 0;
if (x >= morpion.gap + morpion.rectsize * 3 && x <= morpion.gap + morpion.rectsize * 6)
return 1;
if (x >= morpion.gap + morpion.rectsize * 6)
return 2;
targetMorpion = morpion.findPlace(x, this) + morpion.findPlace(y, this) * 3;
if (morpion.findPlace(x, this) < 0 || morpion.findPlace(y, this) < 0)
return -1;
}
targetCase = morpion.findSquare(x, this.rectsize * 3 * morpion.findPlace(x, this) + this.gap, this) + morpion.findSquare(y, this.rectsize * 3 * morpion. findPlace(y, this) + this.gap, this) * 3;
function findSquare(x, gap, morpion)
if (morpion.checkCase(targetMorpion, targetCase))
{
if (x <= gap + morpion.rectsize)
return 0;
if (x >= gap + morpion.rectsize && x <= gap + morpion.rectsize * 2)
return 1;
if (x >= gap + morpion.rectsize * 2)
return 2;
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();
morpion.sendCase(targetMorpion, targetCase);
morpion.setOutline();
}
else
incorrectCase();
morpion.incorrectCase();
}
checkCase(targetMorpion, targetCase)
{
console.log("TargetMorpion :" + targetMorpion + " targetCase :" + targetCase);
return (this.map[targetMorpion][targetCase] == -1 && this.turn == true);
}
incorrectCase()
{
console.log("bozo");
}
sendCase(targetMorpion, targetCase)
{
this.map[targetMorpion][targetCase] = (this.sign == "x") ? 0 : 1; // soit pas un bozo relis
this.printSign(targetMorpion, targetCase, this.sign);
console.log(this.game.send, targetMorpion, targetCase)
this.game.send(JSON.stringify({"targetMorpion" : targetMorpion, "targetCase" : targetCase}));
console.log(this.turn);
this.turn = !this.turn;
}
printSign(targetMorpion, targetCase, sign)
{
let targetX = (this.gap + targetMorpion % 3 * this.rectsize * 3) + (targetCase % 3 * this.rectsize);
let targetY = (this.gap + Math.floor(targetMorpion / 3) * this.rectsize * 3) + (Math.floor(targetCase / 3) * this.rectsize);
if (sign == "x")
{
this.context.beginPath();
this.context.strokeStyle = "green";
this.context.moveTo(targetX + 15, targetY + 15);
this.context.lineTo(targetX + 45, targetY + 45);
this.context.moveTo(targetX + 45, targetY + 15);
this.context.lineTo(targetX + 15, targetY + 45);
this.context.stroke();
this.context.closePath();
}
else
{
this.context.beginPath();
this.context.strokeStyle = "red";
targetX += this.rectsize / 2;
targetY += this.rectsize / 2;
this.context.arc(targetX, targetY, 20, 0, 2 * Math.PI);
this.context.stroke();
this.context.closePath();
}
if (sign != this.sign)
this.turn = true;
}
findPlace(x, morpion)
{
if (x <= this.gap || x >= this.gap + this.rectsize * 9)
return -1;
if (x <= this.gap + this.rectsize * 3)
return 0;
if (x >= this.gap + this.rectsize * 3 && x <= this.gap + this.rectsize * 6)
return 1;
if (x >= this.gap + this.rectsize * 6)
return 2;
return -1;
}
findSquare(x, gap, morpion)
{
if (x <= gap + this.rectsize)
return 0;
if (x >= gap + this.rectsize && x <= gap + this.rectsize * 2)
return 1;
if (x >= gap + this.rectsize * 2)
return 2;
return -1;
}
setOutline()
{
if (this.turn)
{
this.context.beginPath();
this.context.strokeStyle = (this.sign == "x") ? "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();
}
}
DrawSuperMorpion()
@ -202,10 +227,10 @@ class TicTacToe
setOutline()
{
if (this.outline)
if (this.turn)
{
this.context.beginPath();
this.context.strokeStyle = (this.sign == "cross") ? "green" : "red";
this.context.strokeStyle = (this.sign == "x") ? "green" : "red";
this.context.roundRect(0, 0, this.canvas.width, this.canvas.height, 25);
this.context.stroke();
this.context.closePath();
@ -218,7 +243,6 @@ class TicTacToe
this.context.stroke();
this.context.closePath();
}
this.outline = !this.outline;
}
}

5
frontend/static/js/views/TicTacToeOnlineView.js
View File

@ -9,15 +9,16 @@ export class TicTacToeOnlineView extends AbstractView
super(params, lang.get('ticTacToeTitle'));
this.params = params;
this.titleKey = titleKey;
this.game_id = params.id;
this.height = 660;
this.width = 660;
}
async postInit()
{
this.Morpion = new TicTacToe(this.height, this.width, 60, 60, document.getElementById("Morpion"));
this.Morpion = new TicTacToe(this.height, this.width, 60, 60, document.getElementById("Morpion"), this.game_id);
this.Morpion.DrawSuperMorpion();
this.Morpion.init();
await this.Morpion.init();
this.Morpion.setOutline();
}

14
games/consumers.py
View File

@ -33,11 +33,23 @@ class TicTacToeWebSocket(WebsocketConsumer):
self.game_id = int(self.scope['url_route']['kwargs']['game_id'])
self.game: PongGame = game_manager.get(self.game_id, "pong")
self.game: TicTacToeGame = game_manager.get(self.game_id, "tictactoe")
self.member = self.game.join(self.user.pk, self)
self.member.send("x" if self.game._everbody_is_here() else "o")
if (self.game._everbody_is_here()):
self.game.broadcast("game_start")
def receive(self, text_data=None, bytes_data=None):
print(text_data)
self.game.broadcast("", json.loads(text_data), [self.member])
pass
def disconnect(self, event):
self.member.socket = None
class PongWebSocket(WebsocketConsumer):
def __init__(self, *args, **kwargs):

44
games/objects/tictactoe/TicTacToeGame.py
View File

@ -1,5 +1,47 @@
from ..AGame import AGame
from channels.generic.websocket import WebsocketConsumer
from .TicTacToePlayer import TicTacToePlayer
from .TicTacToeSpectator import TicTacToeSpectator
class TicTacToeGame(AGame):
pass
def __init__(self, game_id: int, game_manager):
super().__init__("tictactoe", game_id, game_manager)
def _everbody_is_here(self):
return len(self.players) == len(self.get_players_connected())
def _player_join(self, user_id: int, socket: WebsocketConsumer):
if (self.model.started):
return None
player = self.get_player_by_user_id(user_id)
if (player is None):
return None
# check if player is already connected
if (player.is_connected()):
player.disconnect(1001)
player.socket = socket
return player
def _spectator_join(self, user_id: int, socket: WebsocketConsumer):
spectator:TicTacToeSpectator = TicTacToeSpectator(user_id, socket, self)
self.spectators.append(spectator)
return spectator
def join(self, user_id: int, socket: WebsocketConsumer) -> TicTacToeSpectator | TicTacToePlayer:
member: TicTacToePlayer = self._player_join(user_id, socket)
if (member is None):
member: TicTacToeSpectator = self._spectator_join(user_id, socket)
return member