|
|
<?php
|
|
|
session_start();
|
|
|
require("ConnexionBDD.php");
|
|
|
?>
|
|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
<head lang="fr">
|
|
|
<meta charset="utf-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
<title>SwishGame</title>
|
|
|
<link rel="stylesheet" href="css/base.css">
|
|
|
<link rel="stylesheet" href="css/tablet.css">
|
|
|
<link rel="stylesheet" href="css/desktops.css">
|
|
|
<link rel="stylesheet" href="css/PageDaccueil.css">
|
|
|
<link rel="stylesheet" href="css/PartieGame.css">
|
|
|
<link rel="stylesheet" href="css/pickr.min.css">
|
|
|
<link rel="stylesheet" href="css/formes.css">
|
|
|
<link rel="stylesheet" href="css/Resp3.css">
|
|
|
<link rel="stylesheet" href="css/phone.css">
|
|
|
|
|
|
<script type="text/javascript" src="js/main.js"></script>
|
|
|
<script type="text/javascript" src="js/menu.js"></script>
|
|
|
<script type="text/javascript" src="js/jquery.js"></script>
|
|
|
<script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script>
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css"/>
|
|
|
|
|
|
|
|
|
</head>
|
|
|
<body onload="settingOpen()">
|
|
|
|
|
|
<div id="HighscorePage">
|
|
|
<form onsubmit="recuphighscore()" method='post' name="formHS" >
|
|
|
|
|
|
<p class="nominput"> Nom :</p> <input id="nom" type='text' size='30' name='nom' value='' onkeypress="verifInput(this.id,'ajouterHS');"/><br/>
|
|
|
<input id="score" type='text' size='30' name='score' value='' />
|
|
|
<input id="modeJeu" type='text' size='30' name='modeJeu' value='' /><br/>
|
|
|
|
|
|
|
|
|
<input class="boutonajouterHS" disabled="disabled" id="ajouterHS" name='ajouter' onclick="reloadAfterHS();"
|
|
|
type='submit' value='Ajouter'/>
|
|
|
|
|
|
</form>
|
|
|
</div>
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
document.getElementById("score").disabled = true;
|
|
|
document.getElementById("modeJeu").disabled = true;
|
|
|
|
|
|
function verifInput(id, idSubmit) {
|
|
|
if(document.getElementById(id).value != "") {
|
|
|
document.getElementById(idSubmit).disabled = "";
|
|
|
}
|
|
|
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<div id="pageAccueil">
|
|
|
|
|
|
<div class="menuhaut menu">
|
|
|
<div class="divmenu">
|
|
|
<div id="infosec">
|
|
|
<div class="inner">
|
|
|
<ul class="activity">
|
|
|
<li id="listeinfobtn">
|
|
|
<a id="info" href="#popup1">i</a>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="divmenu">
|
|
|
<div id="infosec2">
|
|
|
<div class="inner">
|
|
|
<ul class="activity">
|
|
|
<li id="listeinfobtn">
|
|
|
<a id="info" onclick="settingOpen()" href="#popup2">⚙</a>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="divmenu">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="divmenu">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="divmenu">
|
|
|
|
|
|
</div>
|
|
|
<div class="divmenu">
|
|
|
|
|
|
</div>
|
|
|
<div class="divmenu">
|
|
|
|
|
|
</div>
|
|
|
<div class="divmenu">
|
|
|
|
|
|
</div>
|
|
|
<div class="divmenu">
|
|
|
<div id="infosec">
|
|
|
<div class="inner">
|
|
|
<ul class="activity">
|
|
|
<div id="infosec">
|
|
|
<a onclick="functionLange()">
|
|
|
<img src="imgs/flags/flag-france.png" id="flag_top2">
|
|
|
</a>
|
|
|
</div>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="logo">
|
|
|
<a onclick="journuit()">
|
|
|
<img src="imgs/swishjour.png" id="imglogo">
|
|
|
</a>
|
|
|
</div>
|
|
|
|
|
|
<div id="popup1" class="overlay">
|
|
|
<div class="popup">
|
|
|
<h2 id="lesRegles">Les Règles :</h2>
|
|
|
<a class="close" href="#">×</a>
|
|
|
<div class="content" id="textRules">
|
|
|
Swish : Jeu de 60 cartes composé chacun de billes et de cerceaux, de 4 couleurs différentes possibles.
|
|
|
16 cartes sont posées sur une table et le joueur doit faire superposer des cartes de manière que chaque bille soit dans
|
|
|
le cerceau de même couleur d’une autre carte.
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div id="popup2" class="overlay">
|
|
|
<div class="popup2">
|
|
|
<h2 id="SettingName">Paramètres</h2>
|
|
|
<a class="close" onclick="SettingClose()" href="#">×</a>
|
|
|
<div class="content">
|
|
|
<div id="couleurs" class="Mode_Setting">
|
|
|
<br>
|
|
|
<div id="pickrcontner">
|
|
|
<div class="containform3">
|
|
|
<div class="containexte">
|
|
|
<a class="containinte cb round"></a>
|
|
|
<div class="color-picker"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="containform3">
|
|
|
<a onclick="disableCache('carre')" id="cachecarre" class="cache cn carre"></a>
|
|
|
<div class="containexte">
|
|
|
<a onclick="ableCache('carre')" class="containinte cb carre"></a>
|
|
|
<div class="color-picker2"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="containform3">
|
|
|
<a onclick="disableCache('triangle')" id="cachetriangle" class="cache cn triangle"></a>
|
|
|
<div class="containexte">
|
|
|
<a onclick="ableCache('triangle')" class="containinte cb castriangle triangle"></a>
|
|
|
<div class="color-picker3"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="containform3">
|
|
|
<a onclick="disableCache('croix')" id="cachecroix" class="cache cn croix"></a>
|
|
|
<div class="containexte">
|
|
|
<a onclick="ableCache('croix')" class="containinte cb croixinte"></a>
|
|
|
<div class="color-picker4"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="containform3">
|
|
|
<a onclick="disableCache('losange')" id="cachelosange" class="cache cn losange"></a>
|
|
|
<div class="containexte">
|
|
|
<a onclick="ableCache('losange')" class="containinte cb losange"></a>
|
|
|
<div class="color-picker5"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="containform3">
|
|
|
<a onclick="disableCache('penta')" id="cachepenta" class="cache cn penta"></a>
|
|
|
<div class="containexte">
|
|
|
<a onclick="ableCache('penta')" class="containinte cb caspenta penta"></a>
|
|
|
<div class="color-picker6"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="containform3">
|
|
|
<a onclick="disableCache('hexa')" id="cachehexa" class="cache cn hexa"></a>
|
|
|
<div class="containexte">
|
|
|
<a onclick="ableCache('hexa')" class="containinte cb hexa"></a>
|
|
|
<div class="color-picker7"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="containform3">
|
|
|
<a onclick="disableCache('hocto')" id="cachehocto" class="cache cn hocto"></a>
|
|
|
<div class="containexte">
|
|
|
<a onclick="ableCache('hocto')" class="containinte cb hocto"></a>
|
|
|
<div class="color-picker8"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div id="formSize">
|
|
|
<div class="slider-container">
|
|
|
<span class="bar"><span class="fill"></span></span>
|
|
|
<input onchange="updateValue(this.value)" id="slider" type="range" class="slider" min="1" max="100" value="50">
|
|
|
<script>
|
|
|
var $slider = $("#slider");
|
|
|
var $fill = $(".bar .fill");
|
|
|
|
|
|
function setBar() {
|
|
|
$fill.css("width", $slider.val() + "%");
|
|
|
valRange = $slider.val();
|
|
|
changeContour(valRange);
|
|
|
}
|
|
|
|
|
|
$slider.on("input", setBar);
|
|
|
|
|
|
setBar();
|
|
|
</script>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- COLOR PICKER-->
|
|
|
<script>
|
|
|
let pannel = document.getElementById("pannel");
|
|
|
// Simple example, see optional options for more configuration.
|
|
|
var couleur1 = varColorToHex('--colorseven');
|
|
|
var couleur2 = varColorToHex('--coloreight');
|
|
|
var couleur3 = varColorToHex('--colornine');
|
|
|
var couleur4 = varColorToHex('--colorten');
|
|
|
var couleur5 = varColorToHex('--colorthree');
|
|
|
var couleur6 = varColorToHex('--colorfour');
|
|
|
var couleur7 = varColorToHex('--colorfive');
|
|
|
var couleur8 = varColorToHex('--colorsix');
|
|
|
|
|
|
const pickr = Pickr.create({
|
|
|
el: '.color-picker',
|
|
|
theme: 'classic', // or 'monolith', or 'nano'
|
|
|
default: couleur1,
|
|
|
|
|
|
swatches: [
|
|
|
'#df0024',
|
|
|
'#f3c300',
|
|
|
'#00ab9f',
|
|
|
'#2e6db4',
|
|
|
'#1bff7e',
|
|
|
'#fe1b00',
|
|
|
'#7f00ff',
|
|
|
'#29F073',
|
|
|
'#E6792F',
|
|
|
'#E6DA27',
|
|
|
'#E8695A',
|
|
|
'#2E294E',
|
|
|
'#64A6BD',
|
|
|
'#659157'
|
|
|
],
|
|
|
|
|
|
components: {
|
|
|
// Main components
|
|
|
preview: true,
|
|
|
opacity: false,
|
|
|
hue: true,
|
|
|
// Input / output Options
|
|
|
interaction: {
|
|
|
hex: false,
|
|
|
rgba: false,
|
|
|
hsla: false,
|
|
|
hsva: false,
|
|
|
cmyk: false,
|
|
|
input: true,
|
|
|
clear: false,
|
|
|
save: true
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
const pickr2 = Pickr.create({
|
|
|
el: '.color-picker2',
|
|
|
theme: 'classic', // or 'monolith', or 'nano'
|
|
|
default: couleur2,
|
|
|
|
|
|
swatches: [
|
|
|
'#df0024',
|
|
|
'#f3c300',
|
|
|
'#00ab9f',
|
|
|
'#2e6db4',
|
|
|
'#1bff7e',
|
|
|
'#fe1b00',
|
|
|
'#7f00ff',
|
|
|
'#29F073',
|
|
|
'#E6792F',
|
|
|
'#E6DA27',
|
|
|
'#E8695A',
|
|
|
'#2E294E',
|
|
|
'#64A6BD',
|
|
|
'#659157'
|
|
|
],
|
|
|
|
|
|
components: {
|
|
|
// Main components
|
|
|
preview: true,
|
|
|
opacity: false,
|
|
|
hue: true,
|
|
|
// Input / output Options
|
|
|
interaction: {
|
|
|
hex: false,
|
|
|
rgba: false,
|
|
|
hsla: false,
|
|
|
hsva: false,
|
|
|
cmyk: false,
|
|
|
input: true,
|
|
|
clear: false,
|
|
|
save: true
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
const pickr3 = Pickr.create({
|
|
|
el: '.color-picker3',
|
|
|
theme: 'classic', // or 'monolith', or 'nano'
|
|
|
default: couleur3,
|
|
|
|
|
|
swatches: [
|
|
|
'#df0024',
|
|
|
'#f3c300',
|
|
|
'#00ab9f',
|
|
|
'#2e6db4',
|
|
|
'#1bff7e',
|
|
|
'#fe1b00',
|
|
|
'#7f00ff',
|
|
|
'#29F073',
|
|
|
'#E6792F',
|
|
|
'#E6DA27',
|
|
|
'#E8695A',
|
|
|
'#2E294E',
|
|
|
'#64A6BD',
|
|
|
'#659157'
|
|
|
],
|
|
|
|
|
|
components: {
|
|
|
// Main components
|
|
|
preview: true,
|
|
|
opacity: false,
|
|
|
hue: true,
|
|
|
// Input / output Options
|
|
|
interaction: {
|
|
|
hex: false,
|
|
|
rgba: false,
|
|
|
hsla: false,
|
|
|
hsva: false,
|
|
|
cmyk: false,
|
|
|
input: true,
|
|
|
clear: false,
|
|
|
save: true
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
const pickr4 = Pickr.create({
|
|
|
el: '.color-picker4',
|
|
|
theme: 'classic', // or 'monolith', or 'nano'
|
|
|
default: couleur4,
|
|
|
|
|
|
swatches: [
|
|
|
'#df0024',
|
|
|
'#f3c300',
|
|
|
'#00ab9f',
|
|
|
'#2e6db4',
|
|
|
'#1bff7e',
|
|
|
'#fe1b00',
|
|
|
'#7f00ff',
|
|
|
'#29F073',
|
|
|
'#E6792F',
|
|
|
'#E6DA27',
|
|
|
'#E8695A',
|
|
|
'#2E294E',
|
|
|
'#64A6BD',
|
|
|
'#659157'
|
|
|
],
|
|
|
|
|
|
components: {
|
|
|
// Main components
|
|
|
preview: true,
|
|
|
opacity: false,
|
|
|
hue: true,
|
|
|
// Input / output Options
|
|
|
interaction: {
|
|
|
hex: false,
|
|
|
rgba: false,
|
|
|
hsla: false,
|
|
|
hsva: false,
|
|
|
cmyk: false,
|
|
|
input: true,
|
|
|
clear: false,
|
|
|
save: true
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
const pickr5 = Pickr.create({
|
|
|
el: '.color-picker5',
|
|
|
theme: 'classic', // or 'monolith', or 'nano'
|
|
|
default: couleur5,
|
|
|
|
|
|
swatches: [
|
|
|
'#df0024',
|
|
|
'#f3c300',
|
|
|
'#00ab9f',
|
|
|
'#2e6db4',
|
|
|
'#1bff7e',
|
|
|
'#fe1b00',
|
|
|
'#7f00ff',
|
|
|
'#29F073',
|
|
|
'#E6792F',
|
|
|
'#E6DA27',
|
|
|
'#E8695A',
|
|
|
'#2E294E',
|
|
|
'#64A6BD',
|
|
|
'#659157'
|
|
|
],
|
|
|
|
|
|
components: {
|
|
|
// Main components
|
|
|
preview: true,
|
|
|
opacity: false,
|
|
|
hue: true,
|
|
|
// Input / output Options
|
|
|
interaction: {
|
|
|
hex: false,
|
|
|
rgba: false,
|
|
|
hsla: false,
|
|
|
hsva: false,
|
|
|
cmyk: false,
|
|
|
input: true,
|
|
|
clear: false,
|
|
|
save: true
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
const pickr6 = Pickr.create({
|
|
|
el: '.color-picker6',
|
|
|
theme: 'classic', // or 'monolith', or 'nano'
|
|
|
default: couleur6,
|
|
|
|
|
|
swatches: [
|
|
|
'#df0024',
|
|
|
'#f3c300',
|
|
|
'#00ab9f',
|
|
|
'#2e6db4',
|
|
|
'#1bff7e',
|
|
|
'#fe1b00',
|
|
|
'#7f00ff',
|
|
|
'#29F073',
|
|
|
'#E6792F',
|
|
|
'#E6DA27',
|
|
|
'#E8695A',
|
|
|
'#2E294E',
|
|
|
'#64A6BD',
|
|
|
'#659157'
|
|
|
],
|
|
|
|
|
|
components: {
|
|
|
// Main components
|
|
|
preview: true,
|
|
|
opacity: false,
|
|
|
hue: true,
|
|
|
// Input / output Options
|
|
|
interaction: {
|
|
|
hex: false,
|
|
|
rgba: false,
|
|
|
hsla: false,
|
|
|
hsva: false,
|
|
|
cmyk: false,
|
|
|
input: true,
|
|
|
clear: false,
|
|
|
save: true
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
const pickr7 = Pickr.create({
|
|
|
el: '.color-picker7',
|
|
|
theme: 'classic', // or 'monolith', or 'nano'
|
|
|
default: couleur7,
|
|
|
|
|
|
swatches: [
|
|
|
'#df0024',
|
|
|
'#f3c300',
|
|
|
'#00ab9f',
|
|
|
'#2e6db4',
|
|
|
'#1bff7e',
|
|
|
'#fe1b00',
|
|
|
'#7f00ff',
|
|
|
'#29F073',
|
|
|
'#E6792F',
|
|
|
'#E6DA27',
|
|
|
'#E8695A',
|
|
|
'#2E294E',
|
|
|
'#64A6BD',
|
|
|
'#659157'
|
|
|
],
|
|
|
|
|
|
components: {
|
|
|
// Main components
|
|
|
preview: true,
|
|
|
opacity: false,
|
|
|
hue: true,
|
|
|
// Input / output Options
|
|
|
interaction: {
|
|
|
hex: false,
|
|
|
rgba: false,
|
|
|
hsla: false,
|
|
|
hsva: false,
|
|
|
cmyk: false,
|
|
|
input: true,
|
|
|
clear: false,
|
|
|
save: true
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
const pickr8 = Pickr.create({
|
|
|
el: '.color-picker8',
|
|
|
theme: 'classic', // or 'monolith', or 'nano'
|
|
|
default: couleur8,
|
|
|
|
|
|
swatches: [
|
|
|
'#df0024',
|
|
|
'#f3c300',
|
|
|
'#00ab9f',
|
|
|
'#2e6db4',
|
|
|
'#1bff7e',
|
|
|
'#fe1b00',
|
|
|
'#7f00ff',
|
|
|
'#29F073',
|
|
|
'#E6792F',
|
|
|
'#E6DA27',
|
|
|
'#E8695A',
|
|
|
'#2E294E',
|
|
|
'#64A6BD',
|
|
|
'#659157'
|
|
|
],
|
|
|
|
|
|
components: {
|
|
|
// Main components
|
|
|
preview: true,
|
|
|
opacity: false,
|
|
|
hue: true,
|
|
|
// Input / output Options
|
|
|
interaction: {
|
|
|
hex: false,
|
|
|
rgba: false,
|
|
|
hsla: false,
|
|
|
hsva: false,
|
|
|
cmyk: false,
|
|
|
input: true,
|
|
|
clear: false,
|
|
|
save: true
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//changement de couleur
|
|
|
pickr.on('change', (...args) => {
|
|
|
let color = args[0].toRGBA();
|
|
|
console.log(color);
|
|
|
let newcouleur = `rgba(${color[0]},${color[1]},${color[2]},${color[3]}`
|
|
|
document.documentElement.style.setProperty('--colorseven', newcouleur);
|
|
|
});
|
|
|
pickr2.on('change', (...args) => {
|
|
|
let color = args[0].toRGBA();
|
|
|
console.log(color);
|
|
|
let newcouleur = `rgba(${color[0]},${color[1]},${color[2]},${color[3]}`
|
|
|
document.documentElement.style.setProperty('--coloreight', newcouleur);
|
|
|
for(const form in FormeSelect){
|
|
|
if(FormeSelect[form] == "carre"){
|
|
|
var positionForm = FormeSelect.indexOf(FormeSelect[form]);
|
|
|
var couleurChange = '--'+ListeCouleur[positionForm];
|
|
|
document.documentElement.style.setProperty(couleurChange, newcouleur);
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
pickr3.on('change', (...args) => {
|
|
|
let color = args[0].toRGBA();
|
|
|
console.log(color);
|
|
|
let newcouleur = `rgba(${color[0]},${color[1]},${color[2]},${color[3]}`
|
|
|
document.documentElement.style.setProperty('--colornine', newcouleur);
|
|
|
for(const form in FormeSelect){
|
|
|
if(FormeSelect[form] == "triangle"){
|
|
|
var positionForm = FormeSelect.indexOf(FormeSelect[form]);
|
|
|
var couleurChange = '--'+ListeCouleur[positionForm];
|
|
|
document.documentElement.style.setProperty(couleurChange, newcouleur);
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
pickr4.on('change', (...args) => {
|
|
|
let color = args[0].toRGBA();
|
|
|
console.log(color);
|
|
|
let newcouleur = `rgba(${color[0]},${color[1]},${color[2]},${color[3]}`
|
|
|
document.documentElement.style.setProperty('--colorten', newcouleur);
|
|
|
for(const form in FormeSelect){
|
|
|
if(FormeSelect[form] == "croix"){
|
|
|
var positionForm = FormeSelect.indexOf(FormeSelect[form]);
|
|
|
var couleurChange = '--'+ListeCouleur[positionForm];
|
|
|
document.documentElement.style.setProperty(couleurChange, newcouleur);
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
pickr5.on('change', (...args) => {
|
|
|
let color = args[0].toRGBA();
|
|
|
console.log(color);
|
|
|
let newcouleur = `rgba(${color[0]},${color[1]},${color[2]},${color[3]}`
|
|
|
document.documentElement.style.setProperty('--colorthree', newcouleur);
|
|
|
for(const form in FormeSelect){
|
|
|
if(FormeSelect[form] == "losange"){
|
|
|
var positionForm = FormeSelect.indexOf(FormeSelect[form]);
|
|
|
var couleurChange = '--'+ListeCouleur[positionForm];
|
|
|
document.documentElement.style.setProperty(couleurChange, newcouleur);
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
pickr6.on('change', (...args) => {
|
|
|
let color = args[0].toRGBA();
|
|
|
console.log(color);
|
|
|
let newcouleur = `rgba(${color[0]},${color[1]},${color[2]},${color[3]}`
|
|
|
document.documentElement.style.setProperty('--colorfour', newcouleur);
|
|
|
for(const form in FormeSelect){
|
|
|
if(FormeSelect[form] == "penta"){
|
|
|
var positionForm = FormeSelect.indexOf(FormeSelect[form]);
|
|
|
var couleurChange = '--'+ListeCouleur[positionForm];
|
|
|
document.documentElement.style.setProperty(couleurChange, newcouleur);
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
pickr7.on('change', (...args) => {
|
|
|
let color = args[0].toRGBA();
|
|
|
console.log(color);
|
|
|
let newcouleur = `rgba(${color[0]},${color[1]},${color[2]},${color[3]}`
|
|
|
document.documentElement.style.setProperty('--colorfive', newcouleur);
|
|
|
for(const form in FormeSelect){
|
|
|
if(FormeSelect[form] == "hexa"){
|
|
|
var positionForm = FormeSelect.indexOf(FormeSelect[form]);
|
|
|
var couleurChange = '--'+ListeCouleur[positionForm];
|
|
|
document.documentElement.style.setProperty(couleurChange, newcouleur);
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
pickr8.on('change', (...args) => {
|
|
|
let color = args[0].toRGBA();
|
|
|
console.log(color);
|
|
|
let newcouleur = `rgba(${color[0]},${color[1]},${color[2]},${color[3]}`
|
|
|
document.documentElement.style.setProperty('--colorsix', newcouleur);
|
|
|
for(const form in FormeSelect){
|
|
|
if(FormeSelect[form] == "hocto"){
|
|
|
var positionForm = FormeSelect.indexOf(FormeSelect[form]);
|
|
|
var couleurChange = '--'+ListeCouleur[positionForm];
|
|
|
document.documentElement.style.setProperty(couleurChange, newcouleur);
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div id="containpseudo">
|
|
|
<a onclick="lancerpartie()">
|
|
|
<div id="contourbuttonvalider">
|
|
|
<div class="bouttonvalider violet">
|
|
|
<h1 id="textjouerr">JOUER</h1>
|
|
|
</div>
|
|
|
</div>
|
|
|
</a>
|
|
|
</div>
|
|
|
|
|
|
<div id="choosemode">
|
|
|
<div id="conteneurmode">
|
|
|
<a onclick="modePrec()">
|
|
|
<div id="modeprec">
|
|
|
<div id="triangleprec">
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</a>
|
|
|
|
|
|
<div id="textdumode">
|
|
|
<h1 id="textmode">Match à Point</h1>
|
|
|
</div>
|
|
|
<a onclick="modeSuiv()">
|
|
|
<div id="modesuiv">
|
|
|
<div id="trianglesuiv">
|
|
|
</div>
|
|
|
</div>
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div id="choosedimension">
|
|
|
<div id="conteneurmode">
|
|
|
<a onclick="dimensionPrec()">
|
|
|
<div id="modeprec">
|
|
|
<div id="triangleprec">
|
|
|
</div>
|
|
|
</div>
|
|
|
</a>
|
|
|
|
|
|
<div id="textdumode">
|
|
|
<h1 id="textdimension">4 * 3</h1>
|
|
|
</div>
|
|
|
<a onclick="dimensionSuiv()">
|
|
|
<div id="modesuiv">
|
|
|
<div id="trianglesuiv">
|
|
|
</div>
|
|
|
</div>
|
|
|
</a>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div id="multiParams">
|
|
|
<div id="buttonMulti">
|
|
|
<div class="bouttonvalider2 violet">
|
|
|
<h1 id="textmulticreer">Créer</h1>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div id="buttonMulti2">
|
|
|
<div class="bouttonvalider2 violet">
|
|
|
<h1 id="textmultirejoindre">Rejoindre</h1>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div id="conteneurJoin">
|
|
|
<input type="input" class="form__field" placeholder="ID Partie" name="name" id='idinput_multi'/>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div id="containplayers">
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div id="containBottom">
|
|
|
<div id="table_HS_Timer">
|
|
|
<h1 class="titreScore" id="classementtxtTimer" >Classement - Timer</h1>
|
|
|
<div id="containScore">
|
|
|
<?php
|
|
|
$db = new MyDB();
|
|
|
$requete2 = "SELECT * FROM HIGHSCORE WHERE modeJeu='1' ORDER BY score DESC LIMIT 10";
|
|
|
$resultat2 = $db -> query($requete2);
|
|
|
$row = array();
|
|
|
$i = 0;
|
|
|
|
|
|
while ($ligne2 = $resultat2 -> fetchArray() ) {
|
|
|
$i++;
|
|
|
$pos = "nopodium";
|
|
|
$isLast = "";
|
|
|
if($i == 1){
|
|
|
$pos = "first";
|
|
|
}else if($i == 2){
|
|
|
$pos = "second";
|
|
|
}else if($i == 3){
|
|
|
$pos = "third";
|
|
|
}
|
|
|
|
|
|
if($i > 5){
|
|
|
$isLast = "last";
|
|
|
}
|
|
|
?>
|
|
|
|
|
|
<div class="case-score <?php echo $pos; echo " ".$isLast?>" data-description="Score obtenu le ...">
|
|
|
<div class="score-description">
|
|
|
<div class="score-position"><?php echo $i; ?></div>
|
|
|
<div class="score-pseudo"><?php echo $ligne2['nomjoueur']; ?></div>
|
|
|
<div class="score-points"><?php echo $ligne2['score']; ?></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<?php
|
|
|
} ?>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div id="containBottom">
|
|
|
<div id="table_HS_Match">
|
|
|
<h1 class="titreScore" id="classementtxtMatch">Classement - Match à Point</h1>
|
|
|
<div id="containScore">
|
|
|
<?php
|
|
|
$db = new MyDB();
|
|
|
$requete2 = "SELECT * FROM HIGHSCORE WHERE modeJeu='0' ORDER BY score DESC LIMIT 10";
|
|
|
$resultat2 = $db -> query($requete2);
|
|
|
$row = array();
|
|
|
$i = 0;
|
|
|
|
|
|
while ($ligne2 = $resultat2 -> fetchArray() ) {
|
|
|
$i++;
|
|
|
$pos = "nopodium";
|
|
|
$isLast = "";
|
|
|
if($i == 1){
|
|
|
$pos = "first";
|
|
|
}else if($i == 2){
|
|
|
$pos = "second";
|
|
|
}else if($i == 3){
|
|
|
$pos = "third";
|
|
|
}
|
|
|
|
|
|
if($i > 5){
|
|
|
$isLast = "last";
|
|
|
}
|
|
|
?>
|
|
|
|
|
|
<div class="case-score <?php echo $pos; echo " ".$isLast?>" data-description="Score obtenu le ...">
|
|
|
<div class="score-description">
|
|
|
<div class="score-position"><?php echo $i; ?></div>
|
|
|
<div class="score-pseudo"><?php echo $ligne2['nomjoueur']; ?></div>
|
|
|
<div class="score-points"><?php echo $ligne2['score']; ?></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<?php
|
|
|
} ?>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="mounts">
|
|
|
<img src="imgs/lightcloud.png" id="cloud">
|
|
|
<img src="imgs/mount1.png" id="mount1">
|
|
|
<img src="imgs/mount2.png" id="mount2">
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div id="pageGame">
|
|
|
|
|
|
|
|
|
<div id="popup2" class="overlay">
|
|
|
<div class="popup2">
|
|
|
<h2 id="SettingName">Paramètres</h2>
|
|
|
<a class="close" onclick="SettingClose()" href="#">×</a>
|
|
|
<div class="content">
|
|
|
<div id="couleurs" class="Mode_Setting">
|
|
|
<br>
|
|
|
<div id="pickrcontner">
|
|
|
<div class="containform3">
|
|
|
<div class="containexte">
|
|
|
<a class="containinte cb round"></a>
|
|
|
<div class="color-picker"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="containform3">
|
|
|
<a onclick="disableCache('carre')" id="cachecarre" class="cache cn carre"></a>
|
|
|
<div class="containexte">
|
|
|
<a onclick="ableCache('carre')" class="containinte cb carre"></a>
|
|
|
<div class="color-picker2"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="containform3">
|
|
|
<a onclick="disableCache('triangle')" id="cachetriangle" class="cache cn triangle"></a>
|
|
|
<div class="containexte">
|
|
|
<a onclick="ableCache('triangle')" class="containinte cb castriangle triangle"></a>
|
|
|
<div class="color-picker3"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="containform3">
|
|
|
<a onclick="disableCache('croix')" id="cachecroix" class="cache cn croix"></a>
|
|
|
<div class="containexte">
|
|
|
<a onclick="ableCache('croix')" class="containinte cb croixinte"></a>
|
|
|
<div class="color-picker4"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="containform3">
|
|
|
<a onclick="disableCache('losange')" id="cachelosange" class="cache cn losange"></a>
|
|
|
<div class="containexte">
|
|
|
<a onclick="ableCache('losange')" class="containinte cb losange"></a>
|
|
|
<div class="color-picker5"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="containform3">
|
|
|
<a onclick="disableCache('penta')" id="cachepenta" class="cache cn penta"></a>
|
|
|
<div class="containexte">
|
|
|
<a onclick="ableCache('penta')" class="containinte cb caspenta penta"></a>
|
|
|
<div class="color-picker6"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="containform3">
|
|
|
<a onclick="disableCache('hexa')" id="cachehexa" class="cache cn hexa"></a>
|
|
|
<div class="containexte">
|
|
|
<a onclick="ableCache('hexa')" class="containinte cb hexa"></a>
|
|
|
<div class="color-picker7"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="containform3">
|
|
|
<a onclick="disableCache('hocto')" id="cachehocto" class="cache cn hocto"></a>
|
|
|
<div class="containexte">
|
|
|
<a onclick="ableCache('hocto')" class="containinte cb hocto"></a>
|
|
|
<div class="color-picker8"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div id="formSize">
|
|
|
<div class="slider-container">
|
|
|
<span class="bar"><span class="fill"></span></span>
|
|
|
<input onchange="updateValue(this.value)" id="slider" type="range" class="slider" min="1" max="100" value="50">
|
|
|
<script>
|
|
|
var $slider = $("#slider");
|
|
|
var $fill = $(".bar .fill");
|
|
|
|
|
|
function setBar() {
|
|
|
$fill.css("width", $slider.val() + "%");
|
|
|
valRange = $slider.val();
|
|
|
changeContour(valRange);
|
|
|
}
|
|
|
|
|
|
$slider.on("input", setBar);
|
|
|
|
|
|
setBar();
|
|
|
</script>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="menuhaut menu">
|
|
|
<div class="divmenu">
|
|
|
<a class="bouttonMenuHaut" onclick="settingOpen()" href="#popup2">
|
|
|
<div class="containButtonForm">
|
|
|
<i class="fas fa-paint-brush logoboutton"></i>
|
|
|
</div>
|
|
|
</a>
|
|
|
</div>
|
|
|
<div class="divmenu"></div>
|
|
|
|
|
|
<div class="divmenu">
|
|
|
<a onclick="retour()" class="bouttonMenuHaut">
|
|
|
<div class="containButtonForm">
|
|
|
<i class="fa fa-arrow-left logoboutton"></i>
|
|
|
</div>
|
|
|
</a>
|
|
|
</div>
|
|
|
|
|
|
<div class="divmenu">
|
|
|
<p id="affPoints">Score : 0</p>
|
|
|
</div>
|
|
|
|
|
|
<div class="divmenu logop2">
|
|
|
<a onclick="journuit()">
|
|
|
<img src="imgs/swishjour.png" id="imglogo2">
|
|
|
</a>
|
|
|
</div>
|
|
|
<div class="divmenu">
|
|
|
<a onclick="redistribuerPlateau()" class="bouttonMenuHaut">
|
|
|
<div class="containButtonForm">
|
|
|
<i class="fa fa-redo logoboutton"></i>
|
|
|
</div>
|
|
|
</a>
|
|
|
</div>
|
|
|
<div class="divmenu">
|
|
|
<a class="bouttonMenuHaut" onclick="testPertinent()">
|
|
|
<div class="containButtonForm">
|
|
|
<i class="fas fa-search logoboutton"></i>
|
|
|
</div>
|
|
|
</a>
|
|
|
</div>
|
|
|
<div class="divmenu">
|
|
|
<a onclick="testerLesCartes()" id="relancerbtn" class="bouttonMenuHaut">
|
|
|
<div class="containButtonForm">
|
|
|
<i class="fa fa-check logoboutton"></i>
|
|
|
</div>
|
|
|
</a>
|
|
|
</div>
|
|
|
<div class="divmenu">
|
|
|
<div class="inner">
|
|
|
<ul class="activity">
|
|
|
<div id="infosec">
|
|
|
<a onclick="functionLange()">
|
|
|
<img src="imgs/flags/flag-france.png" id="flag_top">
|
|
|
</a>
|
|
|
</div>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div id="progressbar">
|
|
|
<div id="indicateur"></div>
|
|
|
</div>
|
|
|
|
|
|
<div id="containcards" class="containcards">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
<p id="affSolution"></p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div id="idGameMulti">
|
|
|
|
|
|
|
|
|
<div id="ActualiserID">
|
|
|
<p> </p>
|
|
|
</div>
|
|
|
<script>
|
|
|
$(document).ready(function(){
|
|
|
setInterval(function(){
|
|
|
if(selectionMode==4 && document.getElementById("pageAccueil").style.visibility == "hidden") {
|
|
|
$("#ActualiserID").load('ActualiserIDPartie.php');
|
|
|
}
|
|
|
}, 500);
|
|
|
});
|
|
|
</script>
|
|
|
</div>
|
|
|
<script type="text/javascript">
|
|
|
function Actualisation(){
|
|
|
//lecture dans la base
|
|
|
tabcomplet=[];
|
|
|
var jar = [];
|
|
|
const xhr = new XMLHttpRequest();
|
|
|
xhr.open("POST","test.php");
|
|
|
xhr.onload=function (){
|
|
|
jar=this.response;
|
|
|
|
|
|
var chainetable=jar;
|
|
|
var j=0;
|
|
|
for (let i = 0; i < 16; i++) {
|
|
|
var v = chainetable.substr(j, 23);
|
|
|
//console.log(v);
|
|
|
tabcomplet.push(v.replaceAll(',',''));
|
|
|
j=j+24;
|
|
|
}
|
|
|
tab2=tabcomplet;
|
|
|
/*
|
|
|
if(tabcomplet[0].length!=0){
|
|
|
if(tabcomplet[1].length!=0){
|
|
|
ConvertInttoCarte(tabcomplet)
|
|
|
}
|
|
|
}
|
|
|
console.log("Tableau :"+tabcomplet);
|
|
|
//ConvertInttoCarte(tabcomplet);*/
|
|
|
};
|
|
|
xhr.send();
|
|
|
//console.log("Longeur tabcomplet : "+tabcomplet.length);
|
|
|
if(tab2[0].length!=0){
|
|
|
if(tab2[1].length!=0){
|
|
|
listeactuelle=[];
|
|
|
for (var i = 0; i < deckPartie.length; i++) {
|
|
|
var ajt = deckPartie[i].getMatrice[0] + deckPartie[i].getMatrice[1]+deckPartie[i].getMatrice[2];
|
|
|
listeactuelle.push(ajt.replaceAll(',',''));
|
|
|
}
|
|
|
//if(TableauPareil(tab2,listeactuelle)==false){
|
|
|
//console.log(tab2);
|
|
|
//console.log(listeactuelle);
|
|
|
ConvertInttoCarte(tab2);
|
|
|
//}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
t = setInterval(Actualisation,550);
|
|
|
</script>
|
|
|
<script>
|
|
|
$(document).ready(function(){
|
|
|
$(document).on('click','#textmulticreer',function() {
|
|
|
$("#ActualiserID").load('SupprimerEtCreerPartie.php')
|
|
|
console.log("appel SuppEtCreerPartie")
|
|
|
lancerGameMulti();
|
|
|
});
|
|
|
});
|
|
|
</script>
|
|
|
<script>
|
|
|
$(document).ready(function(){
|
|
|
$(document).on('click','#textmultirejoindre',function() {
|
|
|
lancerpartie();
|
|
|
var input = document.getElementById("idinput_multi").value;
|
|
|
$(document).ready(function(){
|
|
|
var idpartie = input;
|
|
|
|
|
|
$.ajax({
|
|
|
data: {
|
|
|
idpartie:idpartie
|
|
|
},
|
|
|
type: "post",
|
|
|
url: "envoyeridpartie.php",
|
|
|
success: function(data){
|
|
|
console.log("Id partie : "+idpartie);
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
rejoindreGameMulti();
|
|
|
});
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
</html>
|
|
|
|
|
|
|
|
|
|
