|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
<head lang="fr">
|
|
|
<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/Resp1.css">
|
|
|
<link rel="stylesheet" href="css/Resp2.css">
|
|
|
<link rel="stylesheet" href="css/Resp3.css">
|
|
|
<link rel="stylesheet" href="css/PageDaccueil.css">
|
|
|
<link rel="stylesheet" href="css/PartieGame.css">
|
|
|
<link rel="stylesheet" href="css/pickr.min.css">
|
|
|
|
|
|
<script type="text/javascript" src="js/main.js"></script>
|
|
|
<script type="text/javascript" src="js/menu.js"></script>
|
|
|
<script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script>
|
|
|
</head>
|
|
|
<body onload="ChoisirPseudo()">
|
|
|
|
|
|
|
|
|
|
|
|
<div id="pageAccueil">
|
|
|
<div class="logo">
|
|
|
<a onclick="journuit()">
|
|
|
<img src="imgs/swishjour.png" id="imglogo">
|
|
|
</a>
|
|
|
</div>
|
|
|
|
|
|
<div class="containerparam">
|
|
|
<div id="infosec">
|
|
|
<div class="inner">
|
|
|
<ul class="activity">
|
|
|
<li id="listeinfobtn">
|
|
|
<a id="info" href="#popup1">i</a>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
<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 id="containpseudo">
|
|
|
<a onclick="lancerpartie()">
|
|
|
<div id="contourbuttonvalider">
|
|
|
<div class="bouttonvalider">
|
|
|
<h1 id="textjouer">JOUER</h1>
|
|
|
</div>
|
|
|
</div>
|
|
|
</a>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div id="popup1" class="overlay">
|
|
|
<div class="popup">
|
|
|
<h2>Les Règles :</h2>
|
|
|
<a class="close" href="#">×</a>
|
|
|
<div class="content">
|
|
|
Swish : Jeu de 60 cartes composé chacun de billes et de cerceaux, de 4 couleurs
|
|
|
différentes possibles. 16 cartes sont posés 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">Les Paramètres</h2>
|
|
|
<a class="close" onclick="SettingClose()" href="#">×</a>
|
|
|
<div class="content">
|
|
|
<div id="forme" class="Mode_Setting">
|
|
|
<div id="ShapeSettings">
|
|
|
<a class="ShapeContener" onclick="SelectShape('Rond')">
|
|
|
<div id="setRond" class="settingRond settingShape"></div>
|
|
|
</a>
|
|
|
<a class="ShapeContener" onclick="SelectShape('Carre')">
|
|
|
<div id="setCarre" class="settingCarre settingShape"></div>
|
|
|
</a>
|
|
|
<a class="ShapeContener" onclick="SelectShape('Triangle')">
|
|
|
<div id="setTriangle" class="settingTriangle settingShape"></div>
|
|
|
</a>
|
|
|
<a class="ShapeContener" onclick="SelectShape('Croix')">
|
|
|
<div id="setCroix" class="settingCroix settingShape"></div>
|
|
|
</a>
|
|
|
<a class="ShapeContener" onclick="SelectShape('Losange')">
|
|
|
<div id="setLosange" class="settingLosange settingShape"></div>
|
|
|
</a>
|
|
|
<a class="ShapeContener" onclick="SelectShape('Penta')">
|
|
|
<div id="setPenta" class="settingPenta settingShape"></div>
|
|
|
</a>
|
|
|
<a class="ShapeContener" onclick="SelectShape('Hexa')">
|
|
|
<div id="setHexa" class="settingHexa settingShape"></div>
|
|
|
</a>
|
|
|
<a class="ShapeContener" onclick="SelectShape('Hocto')">
|
|
|
<div id="setHocto" class="settingHocto settingShape"></div>
|
|
|
</a>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
<div id="couleurs" class="Mode_Setting">
|
|
|
<br><br><br>
|
|
|
<div id="pickrcontner">
|
|
|
<div class="color-picker"></div>
|
|
|
<div class="color-picker2"></div>
|
|
|
<div class="color-picker3"></div>
|
|
|
<div class="color-picker4"></div>
|
|
|
<div class="color-picker5"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
</div>
|
|
|
<div id="BottomSetings">
|
|
|
<div id="SettingBefore" onclick="settingPrec()">
|
|
|
|
|
|
</div>
|
|
|
<h2 id="testSettings">Les couleurs</h2>
|
|
|
<div id="SettingAfter" onclick="settingSuiv()">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<!-- COLOR PICKER-->
|
|
|
<script>
|
|
|
let pannel = document.getElementById("pannel");
|
|
|
// Simple example, see optional options for more configuration.
|
|
|
var couleur1 = varColorToHex('--colorbase');
|
|
|
var couleur2 = varColorToHex('--colorcarre');
|
|
|
var couleur3 = varColorToHex('--colorone');
|
|
|
var couleur4 = varColorToHex('--colortwo');
|
|
|
var couleur5 = varColorToHex('--colorthree');
|
|
|
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
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
//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('--colorbase', 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('--colorcarre', 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('--colorone', 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('--colortwo', 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);
|
|
|
});
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!--
|
|
|
<div id="containpseudo">
|
|
|
<div id="pseudoenter">
|
|
|
<div id="fondinput">
|
|
|
<input onkeypress="ajouterplayer(event)" maxlength="12" id="inputpseudo">
|
|
|
</div>
|
|
|
</div>
|
|
|
<a onclick="EnvoyerNouveauNom()">
|
|
|
<div id="contourbuttonvalider">
|
|
|
<div class="bouttonvalider" >
|
|
|
<h1 id="textjouer">JOUER</h1>
|
|
|
</div>
|
|
|
</div>
|
|
|
</a>
|
|
|
<div id="buttonadd">
|
|
|
<a onclick="addplayer()">
|
|
|
<h2 id="textplus">+</h2>
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div id="containplayers">
|
|
|
</div>
|
|
|
-->
|
|
|
|
|
|
<div id="ContainBottom">
|
|
|
<!-- Forme : rond-->
|
|
|
<div class="containform">
|
|
|
<div class="anneau">
|
|
|
<div class="rondinterieur inté"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="containform">
|
|
|
<div class="rond"></div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<!-- Forme : carré-->
|
|
|
<div class="containform">
|
|
|
<div class="carre">
|
|
|
<div class="carreinterieur inté"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="containform">
|
|
|
<div class="pcarre"></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 class="menuhaut">
|
|
|
<div id="Redistribution">
|
|
|
<a onclick="redistribuer()" id="relancerbtn">
|
|
|
<div id="contourbuttonvalider">
|
|
|
<div class="bouttonvalider">
|
|
|
<h1 id="textjouer2">RELANCER</h1>
|
|
|
</div>
|
|
|
</div>
|
|
|
</a>
|
|
|
</div>
|
|
|
<div id="Redistribution2">
|
|
|
<a id="relancerbtn" onclick="testPourJeuClassique()">
|
|
|
<div id="contourbuttonvalider">
|
|
|
<div class="bouttonvalider2">
|
|
|
<h1 id="btnvalider2">VALIDER</h1>
|
|
|
</div>
|
|
|
</div>
|
|
|
</a>
|
|
|
</div>
|
|
|
<div id="Redistribution3">
|
|
|
<a id="relancerbtn" onclick="chercheCombi2()">
|
|
|
<div id="contourbuttonvalider">
|
|
|
<div class="bouttonvalider2">
|
|
|
<h1 id="btnvalider3">CHERCHER</h1>
|
|
|
</div>
|
|
|
</div>
|
|
|
</a>
|
|
|
</div>
|
|
|
<div class="logop2">
|
|
|
<a onclick="journuit()">
|
|
|
<img src="imgs/swishjour.png" id="imglogo2">
|
|
|
</a>
|
|
|
</div>
|
|
|
<a class="retourstp" onclick="retour()">
|
|
|
<div class="buttonretour">
|
|
|
<h1 class="txt">X</h1>
|
|
|
</div>
|
|
|
</a>
|
|
|
</div>
|
|
|
|
|
|
<div id="containcards" class="containcards">
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</body>
|
|
|
</html>
|
|
|
|
|
|
|
|
|
|
