VictorM
/
platoo
1
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity
platoo/views/platoo.ejs

401 lines
19 KiB
Plaintext
Executable File
Raw Permalink Blame History

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/platoo.css" />
<title>Platoo</title>
<style type="text/css" id="cssJS"></style>
<style type="text/css" id="cssJSchat"></style>
</head>
<body>
<section class="drag">
<div class="boxes">
<% var i =0%>
<% while(i < objBoxes.length){%>
<%var diese=objBoxes[i].diese%>
<div class="box <%= objBoxes[i].display %>" id="box-<%= objBoxes[i].diese %>" diese="box-<%= objBoxes[i].diese %>" num="box-<%= objBoxes[i].num %>" nstart="<%= objBoxes[i].noeud_start %>" nstop="<%= objBoxes[i].noeud_stop %>">
<img src="/images/pions/<%= objBoxes[i].svg %>" class="pion-onbox tp-<%= objBoxes[i].nom %>" alt="pion_<%= objBoxes[i].nom %>" style="
<% if(objBoxes[i].directed==1){%>
-webkit-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);
<%}%>
"/>
</div>
<%i=i+1;%>
<%}%>
</div>
<section class="boards">
<% for(var i = 0; i < objBoards.length; i++){%>
<% var dispBoard = 'inactif';%>
<% var j=0;%>
<%while(j < objBoards[i].boards.length && dispBoard=='inactif'){%>
<%dispBoard = objBoards[i].boards[j].display%>
<% j += 1;%>
<%}%>
<div class="board-content <%= dispBoard %>" id="board-<%= objBoards[i].diese %>" diese="board-<%= objBoards[i].diese %>">
<div class="board">
<%for(var j = 0; j < objBoards[i].boards.length; j++){%>
<img src="/images/boards/<%= objBoards[i].boards[j].svg %>" class="board-svg board_<%= objBoards[i].boards[j].nom %> <%= objBoards[i].boards[j].display %>" alt="board_<%= objBoards[i].boards[j].nom %>" style="-webkit-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);" num="board-<%= objBoards[i].boards[j].num %>" nstart="<%= objBoards[i].boards[j].noeud_start %>" nstop="<%= objBoards[i].boards[j].noeud_stop %>"/>
<%}%>
<%for(var j = 0; j < objBoards[i].pions.length; j++){%>
<img src="/images/pions/<%= objBoards[i].pions[j].svg %>" class="pion-onboard tp-<%= objBoards[i].pions[j].nom %> <%= objBoards[i].pions[j].display %>" alt="pion_<%= objBoards[i].pions[j].nom %>" diese="pion-<%= objBoards[i].pions[j].diese %>" style="
top:<%= objBoards[i].pions[j].y %>%;left:<%= objBoards[i].pions[j].x %>%;max-height:<%= objBoards[i].pions[j].height %>%;
<% if(objBoards[i].pions[j].directed==1){%>
-webkit-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);
<%}%>
" id="pion-<%= objBoards[i].pions[j].num %>" nstart="<%= objBoards[i].pions[j].noeud_start %>" nstop="<%= objBoards[i].pions[j].noeud_stop %>"/>
<%}%>
</div>
<div class="board-action">
<img src="/images/boutons/fleche.svg" class="bouton-board fleche" alt="fleche" style="-webkit-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);"/>
<img src="/images/boutons/turnup.svg" class="bouton-board bouton-turnup" alt="turn up"/>
<img src="/images/boutons/turnright.svg" class="bouton-board bouton-turnright" alt="turn right"/>
<img src="/images/boutons/turnleft.svg" class="bouton-board bouton-turnleft" alt="turn left"/>
</div>
</div>
<%}%>
</section>
<div class="bacs">
<% for(var i = 0; i < objBacs.length; i++){%>
<% var dispBac = 'inactif';%>
<% var j=0;%>
<%while(j < objBacs[i].bacs.length && dispBac=='inactif'){%>
<%dispBac = objBacs[i].bacs[j].display%>
<% j += 1;%>
<%}%>
<div class="bac <%= dispBac %>" id="bac-<%= objBacs[i].diese %>" diese="bac-<%= objBacs[i].diese %>">
<p class="labelBac">
<%var defInput="";%>
<%for(var j = 0; j < objBacs[i].bacs.length; j++){%>
<span class="<%= objBacs[i].bacs[j].display %>" num="bac-<%= objBacs[i].bacs[j].num %>" nstart="<%= objBacs[i].bacs[j].noeud_start %>" nstop="<%= objBacs[i].bacs[j].noeud_stop %>"><%= objBacs[i].bacs[j].label %></span>
<%if(objBacs[i].bacs[j].display=="actif"){%>
<%defInput=objBacs[i].bacs[j].label;%>
<%}%>
<%}%>
<img src="/images/boutons/edit.svg" class="edit-bac" alt="edit"/>
</p>
<form action="#" class="inputLabelBac" onsubmit="return false;">
<input type="text" name="Label" size="10" maxlength="10" value="<%= defInput %>"/>
</form>
<div class="bacBordure">
<%for(var j = 0; j<objBacs[i].groupes.length; j++){%>
<div class="groupe-onbac tp-<%= objBacs[i].groupes[j].nom %> <%= objBacs[i].groupes[j].display %>" diese="groupe-<%= objBacs[i].groupes[j].diese %>" id="groupe-<%= objBacs[i].groupes[j].num %>" nstart="<%= objBacs[i].groupes[j].noeud_start %>" nstop="<%= objBacs[i].groupes[j].noeud_stop %>">
<img src="/images/pions/<%= objBacs[i].groupes[j].svg %>" class="pion-onbac tp-<%= objBacs[i].groupes[j].nom %>" alt="pion_<%= objBacs[i].groupes[j].nom %>" style="
<% if(objBacs[i].groupes[j].directed==1){%>
-webkit-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);
<%}%>
"/>
<p class="nb-pions-onbac"><%= objBacs[i].groupes[j].N %></p>
<form action="#" class="inputN" onsubmit="return false;">
<input type="text" name="N" size="3" maxlength="3" value="<%= objBacs[i].groupes[j].N %>"/>
</form>
<div class="boutons-groupe">
<img src="/images/boutons/del.svg" class="del-groupe" alt="del"/>
<img src="/images/boutons/edit.svg" class="edit-groupe" alt="edit"/>
</div>
</div>
<%}%>
</div>
</div>
<%}%>
<% for(var i = 0; i < NTrashs; i++){%>
<div class="trash">
</div>
<%}%>
</div>
</section>
<nav class="barre-choix">
<div class="bouton-barre" id="BB-bacs">
<input type="button" value="bacs" id="bouton-bacs" name="bouton-bacs"/>
</div>
<div class="bouton-barre" id="BB-boxes">
<input type="button" value="boxes" id="bouton-boxes" name="bouton-boxes"/>
</div>
<div class="bouton-barre" id="BB-chat">
<input type="button" value="chat" id="bouton-chat" name="bouton-chat"/>
</div>
<div class="bouton-barre" id="BB-menu">
<input type="button" value="menu" id="bouton-menu" name="bouton-menu"/>
</div>
<div class="bouton-barre" id="BB-chat4">
<input type="button" value="chat" id="bouton-chat4" name="bouton-chat4"/>
</div>
<div class="bouton-barre" id="BB-arbre">
<input type="button" value="arbre" id="bouton-arbre" name="bouton-arbre"/>
</div>
<!--<div class="bouton-barre" id="BB-bacs2">
<input type="button" value="bacs" id="bouton-bacs2" name="bouton-bacs2"/>
</div>
<div class="bouton-barre" id="BB-boxes3">
<input type="button" value="boxes" id="bouton-boxes3" name="bouton-boxes3"/>
</div>
<div class="bouton-barre" id="BB-chat2">
<input type="button" value="chat" id="bouton-chat2" name="bouton-chat2"/>
</div>
<div class="bouton-barre" id="BB-menu4">
<input type="button" value="menu" id="bouton-menu4" name="bouton-menu4"/>
</div>
<div class="bouton-barre" id="BB-bacs3">
<input type="button" value="bacs" id="bouton-bacs3" name="bouton-bacs3"/>
</div>
<div class="bouton-barre" id="BB-boxes4">
<input type="button" value="boxes" id="bouton-boxes4" name="bouton-boxes4"/>
</div>
<div class="bouton-barre" id="BB-chat3">
<input type="button" value="chat" id="bouton-chat3" name="bouton-chat3"/>
</div>
<div class="bouton-barre" id="BB-bacs4">
<input type="button" value="bacs" id="bouton-bacs4" name="bouton-bacs4"/>
</div>-->
</nav>
<section class="menu">
<div class="menu-rang1">
<div class="GpeOption">
<a href="/accueil" class="button-menu" id="Btn-home" title="accueil" name="Btn-home"><img class="img-menu" id="home" src="/images/boutons/home.svg" alt="accueil"></a>
<a href="<%=wiki%>" class="button-menu" id="Btn-wiki" title="wikipedia" name="Btn-wiki"><img class="img-menu" id="wiki" src="/images/boutons/wiki.svg" alt="wiki"></a>
<button id="Btn-info" name="Btn-info" value="About" title="About" class="button-menu"><img class="img-menu" id="erase" src="/images/boutons/info.svg" alt="About"></button>
</div>
<div class="GpeOption">
<button id="Btn-erase" name="Btn-erase" value="Enlever tous les pions" title="Enlever tous les pions" class="button-menu"><img class="img-menu" id="erase" src="/images/boutons/erase.svg" alt="Enlever tous les pions"></button>
<button id="Btn-raz" name="Btn-raz" value="Remise à zéro" title="Remise à zéro" class="button-menu"><img class="img-menu" id="raz" src="/images/boutons/raz.svg" alt="Remise à zéro"></button>
<button id="Btn-delete" name="Btn-delete" value="Supprimer la page" title="Supprimer la page" class="button-menu"><img class="img-menu" id="delete" src="/images/boutons/delete.svg" alt="Supprimer la page"></button>
</div>
<div class="GpeOption">
<button id="Btn-couppre" name="Btn-couppre" value="Afficher le coup précédent" title="Afficher le coup précédent" class="button-menu"><img class="img-menu" id="coupPre" src="/images/boutons/couppre.svg" alt="Afficher le coup précédent"></button>
</div>
<div class="GpeOption">
<button id="Btn-addmenu" name="Btn-addmenu" value="Ajouter des éléments" title="Ajouter des éléments" class="button-menu">
<img class="img-menu" id="addmenu" src="/images/boutons/Btnadd.svg" alt="Ajouter des éléments">
</button>
<button id="Btn-delete_element" name="Btn-delete_element" value="Mode suppression" title="Mode suppression" class="button-menu"><img class="img-menu" id="delete_element" src="/images/boutons/modedel.svg" alt="Mode suppression"></button>
<button id="Btn-annuler_delete_element" name="Btn-annuler_delete_element" value="Revenir en mode jeu" title="Revenir en mode jeu" class="button-menu">
<img class="img-menu" id="annuler_delete_element" src="/images/boutons/modejeu.svg" alt="Revenir en mode jeu">
</button>
</div>
<div class="GpeOption">
<button id="Btn-changerjoueur" name="Btn-changerjoueur" value="Changer de joueur" title="Changer de joueur" class="button-menu">
<img class="img-menu" id="changerjoueur" src="/images/boutons/joueur.svg" alt="Changer de joueur">
<p class="img-menu"><%= Joueurs[0].nom%></p>
</button>
</div>
<%R=Math.floor((Math.random() * 256));
G=Math.floor((Math.random() * 256));
B=Math.floor((Math.random() * 256));
Rs=R.toString(16).length==2 ? R.toString(16) : (R.toString(16).length==1 ? "0"+R.toString(16) : "00");
Gs=G.toString(16).length==2 ? G.toString(16) : (G.toString(16).length==1 ? "0"+G.toString(16) : "00");
Bs=B.toString(16).length==2 ? B.toString(16) : (B.toString(16).length==1 ? "0"+B.toString(16) : "00");
col="#"+Rs+Gs+Bs;
if((G+R+B)>382){
colT="#000000";
}else{
colT="#ffffff";
}%>
<div class="GpeOption">
<button id="Btn-chatmenu" name="Btn-chatmenu" value="Paramètres du chat" title="Paramètres du chat" class="button-menu">
<img class="img-menu" id="chatmenu" src="/images/boutons/chat.svg" alt="Paramètres du chat">
<p class="img-menu"><span style="background-color:<%=col%>;color:<%=colT%>;">Anonyme</span></p>
</button>
</div>
</div>
<div class="menu-rang2">
<div class="sous-menu" id="info2">
<p>
Copyright (c) 2016-2020 Victor Moinard
<br/>
This website is licensed under a
<a rel="license" href="https://www.gnu.org/licenses/gpl-3.0-standalone.html">
GNU General Public License v3.0 or later
</a>.
</p>
</div>
<div class="sous-menu" id="erase2">
<p>Voulez vous enlever tous les pions ?</p>
<button id="conf-erase">confirmer</button>
<button id="ann-erase">annuler</button>
</div>
<div class="sous-menu" id="raz2">
<p>Voulez vous remettre le jeu à zéro ?</p>
<button id="conf-raz">confirmer</button>
<button id="ann-raz">annuler</button>
</div>
<div class="sous-menu" id="delete2">
<p>Voulez vous supprimer la page ?</p>
<button id="conf-delete">confirmer</button>
<button id="ann-delete">annuler</button>
</div>
<div class="sous-menu" id="add2">
<form>
<select name="add_box_type" id="add_box_type">
<% for(var i=0;i< Boxes.length;i++){%>
<option value="<%= Boxes[i].nom %>"><%= Boxes[i].nom %></option>
<%}%>
</select>
<input type="button" value="ajouter une boite" id="add_box" name="add_box"/>
</form>
<form>
<select name="add_board_type" id="add_board_type">
<% for(var i=0;i< Boards.length;i++){%>
<option value="<%= Boards[i].nom %>"><%= Boards[i].nom %></option>
<%}%>
</select>
<input type="button" value="ajouter un plateau" id="add_board" name="add_board"/>
</form>
<input type="button" value="ajouter un bac" id="add_bac" name="add_bac"/>
<input type="button" value="ajouter une poubelle" id="add_trash" name="add_trash"/>
<input type="button" value="annuler" id="ann-add2" name="ann-add2"/>
</div>
<div class="sous-menu" id="changerjoueur2">
<form id="player">
<% for(var i=0;i<Joueurs.length;i++){%>
<input type="radio" value="<%= Joueurs[i].id%>" name="player" <%if(i===0){%>checked<%}%>/><span><%= Joueurs[i].nom%></span><br/>
<%}%>
</form>
<input type="button" value="annuler" id="ann-changerjoueur2" name="ann-changerjoueur2"/>
</div>
<div class="sous-menu" id="menuchat2">
<form action="#" id="formMenuchat2" onsubmit="return false;">
<span>Nom :</span>
<input type="text" value="Anonyme" id="auteurChat" name="nomChat"/>
<input type="color" value="<%=col%>" id="couleurChat" name="CouleurChat"/>
<input type="submit" value="ok" id="ann-menuchat2" name="ann-menuchat2"/>
</form>
</div>
</div>
</section>
<section class="chat">
<form action="#" id="formChat" onsubmit="return false;">
<input type="text" value="" maxlength="200" id="texteChat" name="texteChat"/>
<input type="submit" value="Envoyer" id="envoyerChat" name="envoyerChat" style="display:none;"/>
</form>
<div id="texte-chat">
<% for(var i=0;i<Chat.length;i++){%>
<%
R=parseInt(Chat[i].couleur.substr(1,2),16);
G=parseInt(Chat[i].couleur.substr(3,2),16);
B=parseInt(Chat[i].couleur.substr(5,2),16);
if((G+R+B)>382){
colT="#000000";
}else{
colT="#ffffff";
}%>
<%heure=/\d{1,2}:\d{2}(?=:)/;
Chat[i].time = heure.exec(Chat[i].time);%>
<div class="message-chat" id="chat-<%=Chat[i].id%>" style="background-color:<%=Chat[i].couleur%>;color:<%=colT%>;">
<div id="head-chat">
<span class="auteur-chat"><%=Chat[i].auteur%> :</span>
<span class="date-chat"><%=Chat[i].time%></span>
<div style="clear: both;"></div>
</div>
<p class="texte-chat">
<%=Chat[i].message%>
<br/>
<br/>
</p>
</div>
<%}%>
</div>
</section>
<section class="arbre">
<svg id="arbre-svg" width="<%=(SaveYmax+2)*20%>px" height="<%=(SaveXmax+2)*25%>px">
<%for(var i=1;i<Save.length; i++){%>
<line y1="<%=(Save[i].x+1)/(SaveXmax+2)*100%>%" x1="<%=(Save[i].y+1)/(SaveYmax+2)*100%>%" y2="<%=(Save[i].xpre+1)/(SaveXmax+2)*100%>%" x2="<%=(Save[i].ypre+1)/(SaveYmax+2)*100%>%" style="stroke:rgb(0,0,0);stroke-width:2" id="lien-<%=Save[i].noeud_precedent%>-<%=Save[i].noeud_suivant%>"/>
<%}%>
<%for(var i=0;i<Save.length; i++){%>
<%if(Save[i].noeud_suivant==noeud_courant){%>
<%var classN='noeudCourant';%>
<%}else{%>
<%var classN='noeudAutre';%>
<%}%>
<circle class="noeud <%=classN%>" cy="<%=(Save[i].x+1)/(SaveXmax+2)*100%>%" cx="<%=(Save[i].y+1)/(SaveYmax+2)*100%>%" id="noeud-<%=Save[i].noeud_suivant%>"/>
<%}%>
</svg>
</section>
<!--<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" type="text/javascript"></script>
<!--<script src="/js/jquery.min.js" type="text/javascript"></script>-->
<!--<script src="/js/jquery-3.5.1.min.js" type="text/javascript"></script>
<script src="/js/jquery-ui.js" type="text/javascript"></script>-->
<script src="/socket.io/socket.io.js"></script>
<script>
var action_clic_onboardStr = '<%= action_clic_onboardStr %>' ;
var action_scroll_onboardStr = '<%= action_scroll_onboardStr %>' ;
var clickable_boardStr = '<%= clickable_boardStr %>' ;
var click_board_create_type = '<%= click_board_create_type %>' ;
var click_board_move_type = '<%= click_board_move_type %>' ;
var click_board_move_bac = <%= click_board_move_bac %> ;
var tabPionListe = [
<% for(var i = 0; i < tabPionListe.length; i++){%>
'<%= tabPionListe[i] %>' <%if(i < tabPionListe.length){%>,<%}%>
<%}%>
] ;
var tabPionChange = [
<% for(var i = 0; i < tabPionChange.length; i++){%>
'<%= tabPionChange[i] %>' <%if(i < tabPionChange.length){%>,<%}%>
<%}%>
] ;
var tabPionMove = [<%= tabPionMove %>] ;
var tabPionTaille = [<%= tabPionTaille %>] ;
var tabPionSvg = [
<% for(var i = 0; i < tabPionSvg.length; i++){%>
'<%= tabPionSvg[i] %>' <%if(i < tabPionSvg.length){%>,<%}%>
<%}%>
] ;
var Save = [
<% for(var i = 0; i < Save.length; i++){%>
{noeud_precedent : <%= Save[i].noeud_precedent %>,
noeud_suivant : <%= Save[i].noeud_suivant %>,
date : '<%= Save[i].date %>',
auteur : '<%= Save[i].auteur %>',
couleur : '<%= Save[i].couleur %>',
label_joueur : '<%= Save[i].label_joueur %>',
x:<%= Save[i].x %>,
y:<%= Save[i].y %>
} <%if(i < Save.length-1){%>,<%}%>
<%}%>
] ;
</script>
<script>
var nomPlatoo = '<%= nomPlatoo %>' ;
var noeudCourant = <%= noeud_courant %>;
var noeudAff = [noeudCourant];
var noeuds_suivants=[];
var noeuds_precedents=[];
for(var i=0; i< Save.length;i++){
noeuds_suivants.push(Save[i].noeud_suivant)
noeuds_precedents.push(Save[i].noeud_precedent)
}
var new_noeud=0;
while((noeudAff.indexOf(0)==-1) && (noeuds_suivants.indexOf(noeudAff[noeudAff.length-1])!=-1)){
new_noeud=noeuds_precedents[noeuds_suivants.indexOf(noeudAff[noeudAff.length-1])];
noeudAff.push(new_noeud);
}
if(noeudAff[noeudAff.length-1]==0){
noeudAff.pop();
}
</script>
<script src="/js/platoo.js" type="text/javascript"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink