Move file tournament; chat can see who is online

frontend/static/js/views/tournament/TournamentCreateView.js

@@ -0,0 +1,52 @@
+import {client, navigateTo} from "../../index.js";
+import { clear, fill_errors } from "../../utils/formUtils.js";
+import AbstractAuthentifiedView from "../abstracts/AbstractAuthentifiedView.js";
+
+export default class extends AbstractAuthentifiedView
+{
+    constructor(params)
+	{
+        super(params, "Create tournament");
+		this.id = params.id;
+    }
+
+	async create()
+	{
+		let name = document.getElementById("name-input").value;
+		let nb_players = document.getElementById("nb_players-input").value;
+		let nb_players_by_game = document.getElementById("nb_players_by_game-input").value
+
+		let response_data = await client.tournaments.createTournament(nb_players, nb_players_by_game, name);
+
+		if (response_data === null)
+			return;
+
+		let id = response_data["id"] 
+		if (id !== undefined)
+		{
+			navigateTo(`/tournaments/${id}`);
+			return;
+		}
+
+		clear("innerHTML", ["name", "nb_players", "nb_players_by_game"]);
+		fill_errors(response_data, "innerHTML");
+	}
+
+	async postInit()
+	{
+		document.getElementById("create-button").onclick = this.create;
+	}
+
+	async getHtml()
+	{
+		return `
+			<input type="text" id="name-input" placeholder="Tournament name">
+			<span id="name"></span>
+			<input type="number" id="nb_players-input" placeholder="Number of players in tournament">
+			<span id="nb_players"></span>
+			<input type="number" id="nb_players_by_game-input" placeholder="Number of players by game">
+			<span id="nb_players_by_game"></span>
+			<input type="button" id="create-button" value="Create tournament">
+		`
+	}
+}

frontend/static/js/views/tournament/TournamentPageView.js

@@ -0,0 +1,98 @@
+import {client, navigateTo} from "../../index.js";
+import AbstractAuthentifiedView from "../abstracts/AbstractAuthentifiedView.js";
+
+export default class extends AbstractAuthentifiedView
+{
+    constructor(params)
+	{
+        super(params, "Tournament");
+		this.id = params.id;
+    }
+
+	pressButton()
+	{
+		this.tournament.toggle_participation();
+	}
+
+	async receive(data)
+	{
+		if (data.detail === "nb_participants" || data.detail === "update_participants")
+			document.getElementById("nb_participants").innerText = `${data.nb_participants} / ${this.tournament.nb_players}`
+		if (data.detail === "go_to")
+			navigateTo(data.url);
+		if (data.detail === "is_participant")
+			this.updateParticipating(data.is_participant)
+		if (data.detail === "error")
+			document.getElementById("display").innerText = data.error_message
+		}
+
+	async updateParticipating(state)
+	{
+		document.getElementById("button").value = state ? `Leave ${this.tournament.name}` : `Join ${this.tournament.name}`;
+		document.getElementById("display").innerText = state ? "You are a particpant" : "You are not a participant";
+	}
+
+	async ondisconnect(event)
+	{
+	}
+
+	async postInit()
+	{
+		this.tournament = await client.tournaments.getTournament(this.id);
+
+		if (this.tournament === null)
+			return 404;
+
+		this.tournament.join(this.receive.bind(this), this.ondisconnect.bind(this));
+
+		let button = document.getElementById("button")
+		
+		button.onclick = this.pressButton.bind(this);
+
+		document.getElementById("name").innerText = this.tournament.name;
+		document.getElementById("nb_players").innerText = this.tournament.nb_players;
+		document.getElementById("nb_players_by_game").innerText = this.tournament.nb_players_by_game;
+		document.getElementById("level").innerText = this.tournament.level;
+		document.getElementById("state").innerText = this.tournament.state;
+
+		if (this.tournament.state === "waiting")
+			button.disabled = false;
+	}
+
+	async getHtml()
+	{
+		return `
+			<table>
+				<thead>
+					<tr>
+						<th id="name">Loading...</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<td>Number of players</td>
+						<td id="nb_players">Loading...</td>
+					</tr>
+					<tr>
+						<td>Number of players by game</td>
+						<td id="nb_players_by_game">Loading...</td>
+					</tr>
+					<tr>
+						<td>Number of round</td>
+						<td id="level">Loading...</td>
+					</tr>
+					<tr>
+						<td>Number of player</td>
+						<td id="nb_participants">Loading...</td>
+					</tr>
+					<tr>
+						<td>status</td>
+						<td id="state">Loading...</td>
+					</tr>
+				</tbody>
+			</table>
+			<input type="button" id="button" value="Join tournament" disabled>
+			<span id="display"></span>
+			`
+	}
+}

frontend/static/js/views/tournament/TournamentsListView.js

@@ -0,0 +1,133 @@
+import {client} from "../../index.js";
+import AbstractAuthentifiedView from "../abstracts/AbstractAuthentifiedView.js";
+
+export default class extends AbstractAuthentifiedView
+{
+    constructor(params)
+	{
+        super(params, "Tournament");
+		this.id = params.id;
+    }
+
+	async external_search()
+	{
+		let state = document.getElementById("state-select").value;
+		this.tournaments = await client.tournaments.search(state);
+	}
+
+	add_nb_player_by_game_selector()
+	{
+		let nb_players_by_game_list = new Set()
+		this.tournaments.forEach(tournament => {
+			nb_players_by_game_list.add(tournament.nb_players_by_game);
+		});
+
+		let select = document.getElementById("nb-players-by-game-select");
+
+		let new_children = []
+
+		const opt = document.createElement("option");
+		opt.value = "all";
+		opt.text = "All";
+
+		new_children.push(opt);
+
+		nb_players_by_game_list.forEach(nb_players_by_game => {
+			const opt = document.createElement("option");
+			opt.value = nb_players_by_game;
+			opt.text = nb_players_by_game;
+			new_children.push(opt);
+		})
+		select.replaceChildren(...new_children);
+	}
+
+	internal_search()
+	{
+		let nb_players_by_game = document.getElementById("nb-players-by-game-select").value;
+
+		this.display_tournaments = [];
+		this.tournaments.forEach(tournament => {
+			if (nb_players_by_game === "all" || nb_players_by_game == tournament.nb_players_by_game)
+				this.display_tournaments.push(tournament);
+		});
+	}
+
+	display_result()
+	{
+		const tournaments_list = document.getElementById("tournaments-list");
+
+		const new_children = []
+		
+		this.display_tournaments.forEach(tournament => {
+
+			let tr = document.createElement("tr");
+
+			// name	
+			let td = document.createElement("td");
+			td.innerText = tournament.name;
+			tr.appendChild(td);
+
+			// state
+			td = document.createElement("td");
+			td.innerText = tournament.state;
+			tr.appendChild(td);
+
+			// nb_players
+			td = document.createElement("td");
+			td.innerText = tournament.nb_players;
+			tr.appendChild(td);
+
+			// nb_players_by_game
+			td = document.createElement("td");
+			td.innerText = tournament.nb_players_by_game;
+			tr.appendChild(td);
+
+			new_children.push(tr);
+		});
+		tournaments_list.replaceChildren(...new_children);
+	}
+
+	async update_query()
+	{
+		this.internal_search();
+		this.display_result();
+	}
+
+	async update_search()
+	{
+		await this.external_search();
+		this.add_nb_player_by_game_selector();
+		this.update_query();
+	}
+
+	async postInit()
+	{
+		await this.update_search()
+		document.getElementById("state-select").onchange = this.update_search.bind(this);
+		document.getElementById("nb-players-by-game-select").onchange = this.update_query.bind(this);
+	}
+
+	async getHtml()
+	{
+		return `
+			<select id="state-select">
+				<option value="waiting">Waiting</option>
+				<option value="started">Started</option>
+				<option value="finished">Finished</option>
+				<option value="all">All</option>
+			</select>
+			<select id="nb-players-by-game-select">
+			</select>
+			<table>
+				<thead>
+					<td>Name</td>
+					<td>Status</td>
+					<td>Max numbers of players</td>
+					<td>Max numbers of players by game</td>
+				</thead>
+				<tbody id="tournaments-list">
+				</tbody>
+			</table>
+		`
+	}
+}