mirror of
https://github.com/kmitresse/Cards-Rush.git
synced 2026-05-13 17:11:49 +00:00
feat: devweb - Make translations on lobby page and refacto websocket in js file
This commit is contained in:
kmitresse
@@ -1,24 +1,30 @@
|
||||
<%@ page import="uppa.project.web.translation.Translator" %>
|
||||
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
||||
<%@taglib prefix="layout" tagdir="/WEB-INF/tags/layouts" %>
|
||||
<%@taglib prefix="component" tagdir="/WEB-INF/tags/components" %>
|
||||
<% Translator translator = (Translator) request.getSession().getAttribute("translator"); %>
|
||||
|
||||
|
||||
<layout:base>
|
||||
<layout:base title="${translator.translate('lobby_title')}">
|
||||
<jsp:attribute name="head">
|
||||
<script defer type="module" src="${pageContext.request.contextPath}/static/js/websockets/connected-users-websocket.js"></script>
|
||||
</jsp:attribute>
|
||||
<jsp:body>
|
||||
<component:hero>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<component:card title="Menu principal">
|
||||
<component:card title="${translator.translate('lobby_title')}">
|
||||
<ul>
|
||||
<li><a href="${pageContext.request.contextPath}/new">Nouvelle partie</a></li>
|
||||
<li><a href="${pageContext.request.contextPath}/rules">Règles du jeu</a></li>
|
||||
<li><a href="${pageContext.request.contextPath}/new">${translator.translate('lobby_new_game')}</a></li>
|
||||
<li><a href="${pageContext.request.contextPath}/rules">${translator.translate('lobby_rules')}</a></li>
|
||||
</ul>
|
||||
</component:card>
|
||||
</div>
|
||||
<div class="column">
|
||||
<component:card title="Utilisateurs connectés">
|
||||
<component:card title="${translator.translate('lobby_title')}">
|
||||
<component:connected-user-list/>
|
||||
</component:card>
|
||||
</div>
|
||||
</div>
|
||||
</component:hero>
|
||||
</jsp:body>
|
||||
</layout:base>
|
||||
|
||||
@@ -2,81 +2,20 @@
|
||||
<%@tag description="component/connected-user-list" pageEncoding="UTF-8" %>
|
||||
|
||||
<%@tag import="com.google.gson.Gson" %>
|
||||
<%@ tag import="uppa.project.web.translation.Translator" %>
|
||||
|
||||
<%@taglib prefix="component" tagdir="/WEB-INF/tags/components" %>
|
||||
|
||||
<% Translator translator = (Translator) request.getSession().getAttribute("translator"); %>
|
||||
<input type="hidden" id="user_id" value="${user.getId()}">
|
||||
<table id="connected-user-list" class="table is-fullwidth">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nom d'utilisateur</th>
|
||||
<th>Nombre de parties jouées</th>
|
||||
<th>Nombre de victoires</th>
|
||||
<th>Score moyen</th>
|
||||
<th>${translator.translate('lobby_connected_users_username')}</th>
|
||||
<th>${translator.translate('lobby_connected_users_played_games')}</th>
|
||||
<th>${translator.translate('lobby_connected_users_wins')}</th>
|
||||
<th>${translator.translate('lobby_connected_users_average_score')}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
|
||||
<script defer type="module">
|
||||
import WebsocketToolkit from "${pageContext.request.contextPath}/static/js/WebsocketToolkit.js";
|
||||
|
||||
let users = [];
|
||||
function updateUsers() {
|
||||
const table = document.querySelector('#connected-user-list tbody');
|
||||
|
||||
// Clear the table
|
||||
table.innerHTML = '';
|
||||
|
||||
// Add the users to the table
|
||||
users.forEach(user => {
|
||||
const tr = document.createElement('tr');
|
||||
const tdUsername = document.createElement('td');
|
||||
tdUsername.dataset.id = user.id;
|
||||
tdUsername.textContent = user.username;
|
||||
const tdNbGames = document.createElement('td');
|
||||
tdNbGames.dataset.id = user.id;
|
||||
tdNbGames.textContent = user.nbPlayedGames;
|
||||
const tdNbWin = document.createElement('td');
|
||||
tdNbWin.dataset.id = user.id;
|
||||
tdNbWin.textContent = user.nbWin + " (" + user.winRate + "%)";
|
||||
const tdScoreRate = document.createElement('td');
|
||||
tdScoreRate.dataset.id = user.id;
|
||||
tdScoreRate.textContent = user.scoreRate + "%";
|
||||
|
||||
|
||||
tr.appendChild(tdUsername);
|
||||
tr.appendChild(tdNbGames);
|
||||
tr.appendChild(tdNbWin);
|
||||
tr.appendChild(tdScoreRate);
|
||||
table.appendChild(tr);
|
||||
});
|
||||
}
|
||||
|
||||
// Create a new WebSocket
|
||||
const url = new URL(window.location.href);
|
||||
url.pathname = "${pageContext.request.contextPath}/ws/users/${user.id}";
|
||||
url.protocol = "ws:"
|
||||
|
||||
const ws = new WebsocketToolkit(url);
|
||||
ws.onOpen(() => console.log("Connected to the server"));
|
||||
ws.onMessage("init", (data) => {
|
||||
users = data;
|
||||
updateUsers();
|
||||
});
|
||||
ws.onMessage("addUser", (data) => {
|
||||
users.push(data);
|
||||
updateUsers();
|
||||
});
|
||||
ws.onMessage("removeUser", (data) => {
|
||||
users = users.filter(user => user.id !== data.id);
|
||||
updateUsers();
|
||||
});
|
||||
ws.onMessage("invite", (data) => {
|
||||
const {from, to, game_id} = data;
|
||||
if (confirm(from.username + " vous a invité à rejoindre sa partie")) {
|
||||
window.location.href = "${pageContext.request.contextPath}/game?id=" + game_id;
|
||||
}
|
||||
})
|
||||
ws.onError((error) => console.error(error));
|
||||
ws.onClose(() => console.log("Disconnected from the server"));
|
||||
</script>
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label" for="email">${translator.translate('user_username')}</label>
|
||||
<label class="label" for="email">${translator.translate('user_email')}</label>
|
||||
<div class="control has-icons-left">
|
||||
<input id="old-email" name="oldEmail" type="hidden" value="${user.email}" class="input is-fullwidth" required>
|
||||
<input id="email" name="email" type="email" value="${user.email}" class="input is-fullwidth" required>
|
||||
|
||||
@@ -298,5 +298,37 @@
|
||||
"back" : {
|
||||
"EN": "Back",
|
||||
"FR": "Retour"
|
||||
},
|
||||
"lobby_title" : {
|
||||
"EN": "Main Menu",
|
||||
"FR": "Menu Principal"
|
||||
},
|
||||
"lobby_connected_users" : {
|
||||
"EN": "Connected users",
|
||||
"FR": "Utilisateurs connectés"
|
||||
},
|
||||
"lobby_new_game": {
|
||||
"EN": "New game",
|
||||
"FR": "Nouvelle partie"
|
||||
},
|
||||
"lobby_rules": {
|
||||
"EN": "Rules",
|
||||
"FR": "Règles du jeu"
|
||||
},
|
||||
"lobby_connected_users_username" : {
|
||||
"EN": "Username",
|
||||
"FR": "Nom d'utilisateur"
|
||||
},
|
||||
"lobby_connected_users_played_games" : {
|
||||
"EN": "Played games",
|
||||
"FR": "Parties jouées"
|
||||
},
|
||||
"lobby_connected_users_wins" : {
|
||||
"EN": "Wins",
|
||||
"FR": "Victoires"
|
||||
},
|
||||
"lobby_connected_users_average_score" : {
|
||||
"EN": "Average score",
|
||||
"FR": "Score moyen"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -36,7 +36,7 @@ export function onSuccess(title, message) {
|
||||
|
||||
const notificationTitle = document.createElement("p");
|
||||
notificationTitle.classList.add("title", "is-6");
|
||||
notificationTitle.innerHTML = "Succès";
|
||||
notificationTitle.innerHTML = title;
|
||||
|
||||
const notificationIcon = document.createElement("span");
|
||||
notificationIcon.classList.add("icon");
|
||||
|
||||
@@ -0,0 +1,75 @@
|
||||
import WebsocketToolkit from "../WebsocketToolkit.js";
|
||||
|
||||
let users = [];
|
||||
const languageSelector = document.getElementById('language-select');
|
||||
function updateUsers() {
|
||||
const table = document.querySelector('#connected-user-list tbody');
|
||||
|
||||
// Clear the table
|
||||
table.innerHTML = '';
|
||||
|
||||
// Add the users to the table
|
||||
users.forEach(user => {
|
||||
const tr = document.createElement('tr');
|
||||
const tdUsername = document.createElement('td');
|
||||
tdUsername.dataset.id = user.id;
|
||||
tdUsername.textContent = user.username;
|
||||
const tdNbGames = document.createElement('td');
|
||||
tdNbGames.dataset.id = user.id;
|
||||
tdNbGames.textContent = user.nbPlayedGames;
|
||||
const tdNbWin = document.createElement('td');
|
||||
tdNbWin.dataset.id = user.id;
|
||||
tdNbWin.textContent = user.nbWin + " (" + user.winRate + "%)";
|
||||
const tdScoreRate = document.createElement('td');
|
||||
tdScoreRate.dataset.id = user.id;
|
||||
tdScoreRate.textContent = user.scoreRate + "%";
|
||||
|
||||
|
||||
tr.appendChild(tdUsername);
|
||||
tr.appendChild(tdNbGames);
|
||||
tr.appendChild(tdNbWin);
|
||||
tr.appendChild(tdScoreRate);
|
||||
table.appendChild(tr);
|
||||
});
|
||||
}
|
||||
|
||||
// Get the user id
|
||||
const user = document.querySelector("#user_id")
|
||||
|
||||
// Create a new WebSocket
|
||||
const url = new URL(window.location.href);
|
||||
const contextPath = url.pathname.substring(0, url.pathname.indexOf("/", 1) + 1)
|
||||
console.log(url.pathname)
|
||||
console.log(contextPath)
|
||||
url.pathname = contextPath + "ws/users/"+user.value;
|
||||
console.log(url.pathname)
|
||||
url.protocol = "ws:"
|
||||
|
||||
const ws = new WebsocketToolkit(url);
|
||||
ws.onOpen(() => console.log("Connected to the server"));
|
||||
ws.onMessage("init", (data) => {
|
||||
users = data;
|
||||
updateUsers();
|
||||
});
|
||||
ws.onMessage("addUser", (data) => {
|
||||
users.push(data);
|
||||
updateUsers();
|
||||
});
|
||||
ws.onMessage("removeUser", (data) => {
|
||||
users = users.filter(user => user.id !== data.id);
|
||||
updateUsers();
|
||||
});
|
||||
ws.onMessage("invite", (data) => {
|
||||
const {from, to, game_id} = data;
|
||||
let inviteMsg ;
|
||||
if (languageSelector.value === "EN") {
|
||||
inviteMsg = from.username + " invited you to join his game";
|
||||
} else {
|
||||
inviteMsg = from.username + " vous a invité à rejoindre sa partie";
|
||||
}
|
||||
if (confirm(from.username + inviteMsg)) {
|
||||
window.location.href = contextPath+"game?id=" + game_id;
|
||||
}
|
||||
})
|
||||
ws.onError((error) => console.error(error));
|
||||
ws.onClose(() => console.log("Disconnected from the server"));
|
||||
Reference in New Issue
Block a user