Timer mode 3x3 et 3x4

master
readhame 5 years ago
parent 5445b508b1
commit 92e8e1c042

@ -146,6 +146,8 @@
<workItem from="1595932149409" duration="12275000" />
<workItem from="1596024979816" duration="5516000" />
<workItem from="1596107383639" duration="8696000" />
<workItem from="1596194794026" duration="1862000" />
<workItem from="1596457928722" duration="7449000" />
</task>
<servers />
</component>
@ -189,10 +191,10 @@
<screen x="0" y="0" width="1920" height="1040" />
</state>
<state width="623" height="498" key="SwitcherDM/0.0.1920.1040@0.0.1920.1040" timestamp="1595243925469" />
<state x="1136" y="344" key="com.intellij.ide.util.TipDialog" timestamp="1596107413413">
<state x="1136" y="344" key="com.intellij.ide.util.TipDialog" timestamp="1596457952056">
<screen x="0" y="0" width="1920" height="1040" />
</state>
<state x="1136" y="344" key="com.intellij.ide.util.TipDialog/0.0.1920.1040@0.0.1920.1040" timestamp="1596107413413" />
<state x="1136" y="344" key="com.intellij.ide.util.TipDialog/0.0.1920.1040@0.0.1920.1040" timestamp="1596457952056" />
<state x="701" y="162" key="refactoring.ChangeSignatureDialog" timestamp="1593090265720">
<screen x="0" y="0" width="1920" height="1040" />
</state>

@ -74,7 +74,7 @@ if (isset($_GET['action']) && $_GET['action'] == 'deal') {
$_SESSION['deckHS4'] = new Deck($_GET['action']);
$_SESSION['gameHS4'] = new Game($_SESSION['deckHS4']);
$game = $_SESSION['gameHS4'];
echo json_encode($game->start(40));
echo json_encode($game->start(54));
}

@ -423,4 +423,50 @@ input:checked + .slider .on {
.back-btn img:hover{
-webkit-transform: rotate(0) scale(1.2);
transform: rotate(0) scale(1.2);
}
}
#progressBar {
width: 90%;
margin: 10px auto;
height: 22px;
background-color: Blue;
}
#progressBar div {
height: 100%;
text-align: right;
padding: 0 10px;
line-height: 22px; /* same as #progressBar height if we want text middle aligned */
width: 0;
background-color: LightBlue;
box-sizing: border-box;
}
#progressBar div {
box-sizing: border-box;
}
.count{
font : oblique 20px Arial, Helvetica, sans-serif;
color: #6495ED;
}
#progressBar0 {
width: 90%;
margin: 10px auto;
height: 22px;
background-color: Blue;
}
#progressBar0 div {
height: 100%;
text-align: right;
padding: 0 10px;
line-height: 22px; /* same as #progressBar height if we want text middle aligned */
width: 0;
background-color: LightBlue;
box-sizing: border-box;
}
#progressBar0 div {
box-sizing: border-box;
}

@ -85,6 +85,10 @@
<div class=" back-btn small-btn">
<img class="small-btn" id="previousBtn0" onclick="goSelectMode0()" src="vues/images/previous.png">
</div>
<p id="countdown0" class = 'count' >5 : 00</p>
<div id="progressBar0">
<div></div>
</div>
<p>Nombre de carte = 3; Nombre de critères = 3</p>
<p>Sets found: <span data-display="score0" class="score">0</span></p>
<p>Number of Sets: <span data-display="nbSets0" class="nbSets"></span></p>
@ -99,6 +103,10 @@
<div class=" back-btn small-btn">
<img class="small-btn" id="previousBtn1" onclick="goSelectMode()" src="vues/images/previous.png">
</div>
<p id="countdown" class = 'count' >10 : 00</p>
<div id="progressBar">
<div></div>
</div>
<p>Nombre de carte = 3; Nombre de critères = 4</p>
<p>Sets found: <span data-display="score" class="score">0</span></p>
<p>Number of Sets: <span data-display="nbSets" class="nbSets"></span></p>
@ -165,6 +173,7 @@
<div id='gameHS' class="wrapper" style="display: none;">
<h1>HyperSet 3x4 OK</h1>
<div class=" back-btn small-btn">
<img class="small-btn" onclick="goSelectModeHyperSet()" src="vues/images/previous.png">
</div>

@ -124,6 +124,9 @@ function showGame(){
document.getElementById('selectModeSet').style.display='none';
Game.deal();
}
function showGame1(){
@ -224,15 +227,15 @@ function goSelect(){
function goSelect1(){
document.getElementById('selectMode').style.display='block';
document.getElementById('selectModeHyperSet').style.display='none';
document.getElementById('selectMode').style.display='home';
}
function goSelectMode(){
document.getElementById('selectModeSet').style.display='block';
document.getElementById('game').style.display='none';
document.getElementById('carte').innerHTML = "";
window.location.reload();
}
function goSelectMode1(){
document.getElementById('selectModeSet').style.display='block';
@ -259,9 +262,7 @@ function goSelectMode4(){
}
function goSelectMode0(){
document.getElementById('selectModeSet').style.display='block';
document.getElementById('game0').style.display='none';
document.getElementById('carte0').innerHTML = "";
window.location.reload();
}
@ -297,4 +298,4 @@ function goSelectModeHyperSet4(){
document.getElementById('gameHS4').style.display='none';
document.getElementById('selectModeHyperSet').style.display='block';
document.getElementById('carteHS4').innerHTML = "";
}
}

@ -129,6 +129,44 @@ var Game = {
self.existingSet();
self.displayCards.call(self);
self.setCardListeners();
function progress(timeleft, timetotal, $element) {
var progressBarWidth = timeleft * $element.width() / timetotal;
$element.find('div').animate({ width: progressBarWidth }, timeleft == timetotal ? 0 : 1000, "linear");
if(timeleft > 0) {
setTimeout(function() {
progress(timeleft - 1, timetotal, $element);
}, 1000);
}
}
progress(601, 601, $('#progressBar'));
const startingMinutes = 10;
let time = startingMinutes *60;
const countdownEl = document.getElementById('countdown');
setInterval(updateCountDown,1000);
function updateCountDown() {
const minutes = Math.floor(time / 60);
let seconds = time % 60;
seconds = seconds < 10 ? '0' + seconds : seconds;
if(time > 0 ) {
countdownEl.innerHTML = minutes + ' : ' + seconds;
}
if(time === -1 ){
countdownEl.innerHTML = ' TIME OVER !';
}
if( time === -2){
window.location.reload();
}
time--;
}
}
});
},
@ -254,6 +292,43 @@ var Game = {
self.displayCards0.call(self);
self.existingSet0();
self.setCardListeners0();
function progress(timeleft, timetotal, $element) {
var progressBarWidth = timeleft * $element.width() / timetotal;
$element.find('div').animate({ width: progressBarWidth }, timeleft == timetotal ? 0 : 1000, "linear");
if(timeleft > 0) {
setTimeout(function() {
progress(timeleft - 1, timetotal, $element);
}, 1000);
}
}
progress(301, 301, $('#progressBar0'));
const startingMinutes = 5;
let time = startingMinutes *60;
const countdownEl = document.getElementById('countdown0');
setInterval(updateCountDown,1000);
function updateCountDown() {
const minutes = Math.floor(time / 60);
let seconds = time % 60;
seconds = seconds < 10 ? '0' + seconds : seconds;
if(time > 0 ) {
countdownEl.innerHTML = minutes + ' : ' + seconds;
}
if(time === -1 ){
countdownEl.innerHTML = ' TIME OVER !';
}
if( time === -2){
window.location.reload();
}
time--;
}
}
});
@ -415,7 +490,7 @@ var Game = {
return false;
}
this.$score.html(this.score);
$.each(self.cards, function(index, card){
var cardNode = $('<div>', {
class: "card"
@ -445,6 +520,7 @@ var Game = {
});
},
displayCards1: function() {
@ -453,7 +529,7 @@ var Game = {
return false;
}
this.$score1.html(this.score1);
$.each(self.cards1, function(index, card){
var cardNode = $('<div>', {
class: "card"
@ -491,6 +567,7 @@ var Game = {
if (self.cards2.length == 0) {
return false;
}
this.$score2.html(this.score2);
$.each(self.cards2, function(index, card){
var cardNode = $('<div>', {
@ -527,7 +604,7 @@ var Game = {
if (self.cards3.length == 0) {
return false;
}
this.$score3.html(this.score3);
$.each(self.cards3, function(index, card){
var cardNode = $('<div>', {
class: "card"
@ -566,7 +643,7 @@ var Game = {
return false;
}
this.$score4.html(this.score4);
$.each(self.cards4, function(index, card){
var cardNode = $('<div>', {
class: "card"
@ -607,7 +684,7 @@ var Game = {
if (self.cards0.length == 0) {
return false;
}
this.$score0.html(this.score0);
$.each(self.cards0, function(index, card){
var cardNode = $('<div>', {
@ -644,7 +721,7 @@ var Game = {
if (self.cardsHS.length == 0) {
return false;
}
this.$scoreHS.html(this.scoreHS);
$.each(self.cardsHS, function(index, card){
var cardNode = $('<div>', {
@ -675,6 +752,8 @@ var Game = {
});
},
@ -683,7 +762,7 @@ var Game = {
if (self.cardsHS0.length == 0) {
return false;
}
this.$scoreHS0.html(this.scoreHS0);
$.each(self.cardsHS0, function(index, card){
var cardNode = $('<div>', {
@ -722,7 +801,7 @@ var Game = {
return false;
}
this.$scoreHS1.html(this.scoreHS1);
$.each(self.cardsHS1, function(index, card){
var cardNode = $('<div>', {
class: "card"
@ -759,7 +838,7 @@ var Game = {
if (self.cardsHS2.length == 0) {
return false;
}
this.$scoreHS2.html(this.scoreHS2);
$.each(self.cardsHS2, function(index, card){
var cardNode = $('<div>', {
@ -798,6 +877,8 @@ var Game = {
return false;
}
this.$scoreHS3.html(this.scoreHS3);
$.each(self.cardsHS3, function(index, card){
var cardNode = $('<div>', {
class: "card"
@ -836,6 +917,7 @@ var Game = {
if (self.cardsHS4.length == 0) {
return false;
}
this.$scoreHS4.html(this.scoreHS4);
$.each(self.cardsHS4, function(index, card){
var cardNode = $('<div>', {

Loading…
Cancel
Save