readhame
5 years ago
parent
e7d2fb25a8
commit
91bb8ccc89
@ -0,0 +1,10 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="dataSourceStorageLocal">
|
||||
<data-source name="hyperset" uuid="f3ad65b0-7e35-4de2-b55e-7ccc655bac2b">
|
||||
<database-info product="" version="" jdbc-version="" driver-name="" driver-version="" dbms="SQLITE" exact-version="0" />
|
||||
<auth-required>false</auth-required>
|
||||
<schema-mapping />
|
||||
</data-source>
|
||||
</component>
|
||||
</project>
|
||||
@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="DataSourceManagerImpl" format="xml" multifile-model="true">
|
||||
<data-source source="LOCAL" name="hyperset" uuid="f3ad65b0-7e35-4de2-b55e-7ccc655bac2b">
|
||||
<driver-ref>sqlite.xerial</driver-ref>
|
||||
<synchronize>true</synchronize>
|
||||
<jdbc-driver>org.sqlite.JDBC</jdbc-driver>
|
||||
<jdbc-url>jdbc:sqlite:C:\wamp64\www\HyperSet\bdd\hyperset.db</jdbc-url>
|
||||
</data-source>
|
||||
</component>
|
||||
</project>
|
||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
|
After Width: | Height: | Size: 176 KiB |
@ -0,0 +1,6 @@
|
||||
PRAGMA foreign_keys=OFF;
|
||||
BEGIN TRANSACTION;
|
||||
CREATE TABLE HighScore ( id int PRIMARY KEY, pseudo varchar2(50) NOT NULL, score int NOT NULL);
|
||||
INSERT INTO HighScore VALUES(2,'Jack',80);
|
||||
INSERT INTO HighScore VALUES(1,'redko',100);
|
||||
COMMIT;
|
||||
Binary file not shown.
@ -0,0 +1,51 @@
|
||||
<?php
|
||||
|
||||
class Autoload
|
||||
{
|
||||
private static $_instance = null;
|
||||
|
||||
public static function charger()
|
||||
{
|
||||
if(null !== self::$_instance) {
|
||||
throw new RuntimeException(sprintf('%s is already started', __CLASS__));
|
||||
}
|
||||
|
||||
self::$_instance = new self();
|
||||
|
||||
|
||||
if(!spl_autoload_register(array(self::$_instance, '_autoload'), false)) {
|
||||
throw RuntimeException(sprintf('%s : Could not start the autoload', __CLASS__));
|
||||
}
|
||||
}
|
||||
|
||||
public static function shutDown()
|
||||
{
|
||||
if(null !== self::$_instance) {
|
||||
|
||||
if(!spl_autoload_unregister(array(self::$_instance, '_autoload'))) {
|
||||
throw new RuntimeException('Could not stop the autoload');
|
||||
}
|
||||
|
||||
self::$_instance = null;
|
||||
}
|
||||
}
|
||||
|
||||
private static function _autoload($class)
|
||||
{
|
||||
global $rep;
|
||||
$filename = $class.'.php';
|
||||
$dir =array('modeles/','./','config/','controllers/','metiers/','DAL/');
|
||||
foreach ($dir as $d){
|
||||
$file=$rep.$d.$filename;
|
||||
//echo $file;
|
||||
if (file_exists($file))
|
||||
{
|
||||
include $file;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
?>
|
||||
@ -0,0 +1,21 @@
|
||||
<?php
|
||||
|
||||
//gen
|
||||
$rep=__DIR__.'/../';
|
||||
|
||||
/*
|
||||
$bdd["dsn"] = "mysql:host=localhost;dbname=blogphp";
|
||||
$bdd["username"] = "root";
|
||||
$bdd["password"] = "";
|
||||
|
||||
$layout['head'] = 'vues/includes/head.php';
|
||||
$layout['footer'] = 'vues/includes/footer.php';
|
||||
|
||||
$vues['homePage'] = 'vues/homePage.php';
|
||||
$vues['error'] = 'vues/error.php';
|
||||
$vues['score'] = 'vues/score.php';
|
||||
*/
|
||||
$vues['homePage'] = 'vues/homePage.php';
|
||||
$vues['jeu'] = '../set.html';
|
||||
|
||||
?>
|
||||
@ -0,0 +1,89 @@
|
||||
<?php
|
||||
|
||||
|
||||
class Controlleur
|
||||
{
|
||||
public function __construct() {
|
||||
global $rep,$vues;
|
||||
|
||||
try{
|
||||
$action=$_REQUEST['action'];
|
||||
switch($action){
|
||||
case NULL:
|
||||
$this->homePage();
|
||||
break;
|
||||
case "deal":
|
||||
$this->game();
|
||||
break;
|
||||
case "VoirScore":
|
||||
$this->afficherScore();
|
||||
break;
|
||||
case "Option":
|
||||
$this->optionDeJeu();
|
||||
break;
|
||||
default:
|
||||
$dVueEreur[] = "Erreur d'appel php";
|
||||
require ($rep.$vues['error']);
|
||||
break;
|
||||
}
|
||||
|
||||
} catch (PDOException $e)
|
||||
{
|
||||
echo $e->getMessage();
|
||||
$dVueEreur[] = "Erreur inattendue PDO!!! ";
|
||||
require ($rep.$vues['error']);
|
||||
|
||||
}
|
||||
catch (Exception $e2)
|
||||
{
|
||||
$dVueEreur[] = "Erreur inattendue!!! ";
|
||||
require ($rep.$vues['error']);
|
||||
}
|
||||
}
|
||||
|
||||
public function homePage(){
|
||||
global $vues, $rep;
|
||||
|
||||
require($rep . $vues['homePage']);
|
||||
}
|
||||
|
||||
public function game(){
|
||||
global $vues, $rep;
|
||||
|
||||
|
||||
if (isset($_GET['action']) && $_GET['action'] == 'deal') {
|
||||
|
||||
$_SESSION['deck'] = new Deck($_GET['action']);
|
||||
$_SESSION['game'] = new Game($_SESSION['deck']);
|
||||
$game = $_SESSION['game'];
|
||||
echo json_encode($game->start());
|
||||
}else if (isset($_GET['action']) && $_GET['action'] == 'submit'){
|
||||
$deck = $_SESSION['deck'];
|
||||
echo json_encode($deck->threeMore());
|
||||
}
|
||||
require ($rep.$vues['jeu']);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
public function afficherScore()
|
||||
{
|
||||
global $vues, $rep;
|
||||
$listPlayer = new ModelPlayer();
|
||||
try {
|
||||
|
||||
//$listP = $listPlayer->getScores();
|
||||
|
||||
} catch (Exception $e)
|
||||
{
|
||||
$listP = array("error" => $e->getMessage());
|
||||
}
|
||||
|
||||
require($rep . $vues['score']);
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="vues/css/style-page.css">
|
||||
<title>Set</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<H1>HyperSet</H1>
|
||||
|
||||
<div class="menu box">
|
||||
<a href="#" class="logo">HyperSet</a>
|
||||
<a href="set.html">Jouer</a>
|
||||
<a href="index.html?action=VoirScore">Voir Les Scores</a>
|
||||
<a href="vues/settings.php">Options</a>
|
||||
<a href="#">Règles</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,18 @@
|
||||
<?php
|
||||
|
||||
class Card {
|
||||
public $shape;
|
||||
public $color;
|
||||
public $fill;
|
||||
public $number;
|
||||
public $id;
|
||||
|
||||
public function __construct(CardAttributes $attributes, Deck $deck) {
|
||||
|
||||
foreach ($attributes as $attribute => $value) {
|
||||
$this->{$attribute} = $value;
|
||||
}
|
||||
|
||||
$deck->cards[] = $this;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
<?php
|
||||
|
||||
class CardAttributes {
|
||||
public $color;
|
||||
public $shape;
|
||||
public $fill;
|
||||
public $number;
|
||||
public $id;
|
||||
|
||||
function __construct($color, $shape, $fill, $number, $id) {
|
||||
$this->color = $color;
|
||||
$this->shape = $shape;
|
||||
$this->fill = $fill;
|
||||
$this->number = $number;
|
||||
$this->id = $id;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,69 @@
|
||||
<?php
|
||||
|
||||
include_once "cardAttributes.php";
|
||||
include_once "card.php";
|
||||
include_once "functions.php";
|
||||
|
||||
class Deck {
|
||||
|
||||
public $cards = array();
|
||||
|
||||
public function __construct($changes) {
|
||||
$this->createDeck($changes);
|
||||
}
|
||||
|
||||
private function createDeck($changes)
|
||||
{
|
||||
$colors = [];
|
||||
|
||||
if ($changes === 'deal') {
|
||||
$colors = array('green', 'red', 'purple');
|
||||
}elseif ($changes === 'deal1') {
|
||||
$colors = array('yellow', 'blue', 'gray');
|
||||
}
|
||||
|
||||
|
||||
|
||||
$shapes = array('oval', 'diamond', 'wave');
|
||||
$fills = array('filled', 'shaded', 'empty');
|
||||
$numbers = array(1, 2, 3);
|
||||
|
||||
$index = 1;
|
||||
|
||||
foreach ($colors as $color) {
|
||||
foreach ($shapes as $shape) {
|
||||
foreach ($fills as $fill) {
|
||||
foreach ($numbers as $number) {
|
||||
$cardAttributes = new CardAttributes($color, $shape, $fill, $number, $index);
|
||||
$card = new Card($cardAttributes, $this);
|
||||
$index++;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
public function removeSet($cards) {
|
||||
|
||||
}
|
||||
|
||||
private function shuffle() {
|
||||
shuffle($this->cards);
|
||||
}
|
||||
|
||||
|
||||
|
||||
public function deal() {
|
||||
// shuffle the deck
|
||||
$this->shuffle();
|
||||
|
||||
// remove 12 cards from the top and return them
|
||||
$dealtCards = array_chop($this->cards, 12);
|
||||
return $dealtCards;
|
||||
}
|
||||
|
||||
public function threeMore() {
|
||||
return array_chop($this->cards, 3);
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
<?php
|
||||
function array_chop(&$arr, $num)
|
||||
{
|
||||
$ret = array_slice($arr, 0, $num);
|
||||
$arr = array_slice($arr, $num);
|
||||
return $ret;
|
||||
}
|
||||
@ -0,0 +1,18 @@
|
||||
<?php
|
||||
|
||||
class Game {
|
||||
|
||||
private $players;
|
||||
private $deck;
|
||||
|
||||
public function __construct(Deck $deck) {
|
||||
$this->deck = $deck;
|
||||
}
|
||||
|
||||
public function start() {
|
||||
|
||||
// call the deck's deal function and return the cards dealt
|
||||
return $this->deck->deal();
|
||||
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
<?php
|
||||
|
||||
class Player {
|
||||
|
||||
private $score;
|
||||
|
||||
public function findSet() {
|
||||
// to do
|
||||
}
|
||||
|
||||
private function incrementScore($points) {
|
||||
$this->score += $points;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="initial-scale=1">
|
||||
<title>Set</title>
|
||||
<link rel="stylesheet" href="vues/css/style.css" />
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="custom-select ">
|
||||
<h2 id="daltoSettings">RÉGLAGES COULEURS 0</h2>
|
||||
<select id="color-selector">
|
||||
<option class="text" id="normal" value="normal" onclick="changeColorMode()">Normale</option>
|
||||
<option class="text" id="Daltonien" value="Daltonien" onclick="changeColorMode()">Daltonien</option>
|
||||
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<h1>(TEST) Set</h1>
|
||||
<p>Find sets.</p>
|
||||
<p>Sets found: <span data-display="score" class="score">0</span></p>
|
||||
<div class="game-board" data-display="game-board"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="vues/js/Settings.js"></script>
|
||||
<script src="vues/js/set.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,24 @@
|
||||
<?php
|
||||
|
||||
include "metiers/deck.php";
|
||||
include "metiers/game.php";
|
||||
|
||||
session_start();
|
||||
|
||||
$deck;
|
||||
|
||||
if (isset($_GET['action']) && $_GET['action'] == 'deal') {
|
||||
$_SESSION['deck'] = new Deck($_GET['action']);
|
||||
$_SESSION['game'] = new Game($_SESSION['deck']);
|
||||
$game = $_SESSION['game'];
|
||||
echo json_encode($game->start());
|
||||
} else if (isset($_GET['action']) && $_GET['action'] == 'deal1') {
|
||||
$_SESSION['deck'] = new Deck($_GET['action']);
|
||||
$_SESSION['game'] = new Game($_SESSION['deck']);
|
||||
$game = $_SESSION['game'];
|
||||
echo json_encode($game->start());
|
||||
|
||||
}else if (isset($_GET['action']) && $_GET['action'] == 'submit'){
|
||||
$deck = $_SESSION['deck'];
|
||||
echo json_encode($deck->threeMore());
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
<?php
|
||||
@ -0,0 +1,123 @@
|
||||
html,body{
|
||||
position: relative;
|
||||
font-size: 1rem;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.menu{
|
||||
height: 400px;
|
||||
background-color: #2c3e50;
|
||||
width: 500px;
|
||||
margin-left: 38% ;
|
||||
margin-right: 35%;
|
||||
|
||||
}
|
||||
|
||||
.menu a{
|
||||
color: #ffffff;
|
||||
font-family: sans-serif;
|
||||
display: block;
|
||||
font-size: 40px;
|
||||
margin: 20%;
|
||||
margin-bottom: 0%;
|
||||
margin-top: 3%;
|
||||
|
||||
|
||||
}
|
||||
|
||||
/*.menu a:hover{
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
}*/
|
||||
|
||||
.logo{
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.box{
|
||||
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
|
||||
}
|
||||
|
||||
|
||||
h1{
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
font-family: Palatino;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
.popup-header {
|
||||
margin-top: 1%;
|
||||
margin-right: 3%;
|
||||
color: #393939;
|
||||
border-bottom-color: #393939;
|
||||
border-bottom: 10px ;
|
||||
}
|
||||
|
||||
.settings-title{
|
||||
margin-top: 2%;
|
||||
margin-left: 3%;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.hr-settings{
|
||||
margin-left: 3%;
|
||||
width: 97%;
|
||||
height: 4px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.hr-settings-lang{
|
||||
margin-left: 15%;
|
||||
margin-top: 2%;
|
||||
width: 70%;
|
||||
height: 3px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.text-settings{
|
||||
color: white;
|
||||
display: inline-block;
|
||||
font-size: 25px;
|
||||
margin-top: 16%;
|
||||
}
|
||||
|
||||
.text-dalt-settings{
|
||||
color: white;
|
||||
display: inline-block;
|
||||
font-size: 25px;
|
||||
margin-top: 14%;
|
||||
}
|
||||
|
||||
.custom-select {
|
||||
width: 70%;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.custom-select:after {
|
||||
content: '<>';
|
||||
font: 17px "Consolas", monospace;
|
||||
color: #393939;
|
||||
-webkit-transform: rotate(90deg);
|
||||
-moz-transform: rotate(90deg);
|
||||
-ms-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
right: 11px;
|
||||
margin-top: 14%;
|
||||
padding: 0 0 2px;
|
||||
border-bottom: 1px solid #999;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
@ -0,0 +1,100 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.submit {
|
||||
margin-top: 2em;
|
||||
font-size: 16px;
|
||||
padding: 1em 3em;
|
||||
background: #BADA55;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.submit:disabled {
|
||||
background: #C5DA83;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 1080px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.card {
|
||||
display: inline-block;
|
||||
width: 245px;
|
||||
margin-right: 5px;
|
||||
height: 200px;
|
||||
border: 2px solid #ccc;
|
||||
}
|
||||
.card:hover {
|
||||
border-color: #e2e2e2;
|
||||
}
|
||||
|
||||
.selected {
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.game-board {
|
||||
width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.shape {
|
||||
display: inline-block;
|
||||
width: 70px;
|
||||
height: 200px;
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
-webkit-mask-position: 15px;
|
||||
}
|
||||
|
||||
.diamond {
|
||||
clip-path: polygon(50% 15%, 100% 50%, 50% 85%, 0% 50%);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.wave {
|
||||
/*clip-path: polygon(5% 34%, 5% 20%, 79% 21%, 66% 61%, 98% 60%, 97% 73%, 19% 74%, 37% 34%);*/
|
||||
-moz-transform: skew(-30deg, 0deg);
|
||||
-webkit-transform: skew(-30deg, 0deg);
|
||||
-o-transform: skew(-30deg, 0deg);
|
||||
-ms-transform: skew(-30deg, 0deg);
|
||||
transform: skew(-30deg, 0deg);
|
||||
}
|
||||
|
||||
|
||||
.oval {
|
||||
clip-path: ellipse(40% 30% at 50% 50%);}
|
||||
|
||||
.green {
|
||||
background: green;
|
||||
}
|
||||
|
||||
|
||||
.yellow {
|
||||
background: yellow;
|
||||
}
|
||||
.gray {
|
||||
background: gray;
|
||||
}
|
||||
.blue {
|
||||
background: blue;
|
||||
}
|
||||
.red {
|
||||
background: red;
|
||||
}
|
||||
.purple {
|
||||
background: violet;
|
||||
}
|
||||
|
||||
/*solution pour avoir l'image en rainure ou vide a voir dans le css*/
|
||||
@ -0,0 +1,38 @@
|
||||
var color = 'normal';
|
||||
var nb = 0;
|
||||
|
||||
function changeColorMode() {
|
||||
let selectColor = document.getElementById('color-selector');
|
||||
selectColor.addEventListener('change', function() {
|
||||
var index = selectColor.selectedIndex;
|
||||
// Rapporter cette donnée au <p>
|
||||
if (index != null){
|
||||
nb= index;
|
||||
}
|
||||
|
||||
})
|
||||
/* if(color !== selectColor.value){
|
||||
color = selectColor.value;
|
||||
}*/
|
||||
return nb;
|
||||
|
||||
}
|
||||
|
||||
|
||||
console.log(nb);
|
||||
/*var nb = 0;
|
||||
|
||||
let selectColor = document.getElementById('color-selector');
|
||||
|
||||
selectColor.addEventListener('change', function() {
|
||||
var index = selectColor.selectedIndex;
|
||||
// Rapporter cette donnée au <p>
|
||||
if (index != null){
|
||||
nb= index;
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
*/
|
||||
@ -0,0 +1,228 @@
|
||||
var colorr = changeColorMode();
|
||||
|
||||
|
||||
var Game = {
|
||||
cards: [],
|
||||
selected: [],
|
||||
score: 0,
|
||||
$board: $('[data-display="game-board"]'),
|
||||
$score: $('[data-display="score"]'),
|
||||
|
||||
|
||||
|
||||
deal: function() {
|
||||
var self = this;
|
||||
if (colorr === 0 || colorr === null) {
|
||||
// ajax request to get initial set of cards
|
||||
var dealRequest = $.ajax({
|
||||
url: 'set.php?action=deal',
|
||||
type: 'GET',
|
||||
dataType: 'json',
|
||||
success: function(data) {
|
||||
self.cards = data;
|
||||
self.displayCards.call(self);
|
||||
self.setCardListeners();
|
||||
self.setPageListeners();
|
||||
}
|
||||
});
|
||||
}else if (colorr === 1){
|
||||
var dealRequest1 = $.ajax({
|
||||
url: 'set.php?action=deal1',
|
||||
type: 'GET',
|
||||
dataType: 'json',
|
||||
success: function(data) {
|
||||
self.cards = data;
|
||||
self.displayCards.call(self);
|
||||
self.setCardListeners();
|
||||
self.setPageListeners();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
},
|
||||
|
||||
displayCards: function() {
|
||||
var self = this;
|
||||
|
||||
$.each(this.cards, function(index, card){
|
||||
var cardNode = $('<div>');
|
||||
cardNode.addClass('card');
|
||||
$(cardNode).data({
|
||||
'id': card.id,
|
||||
'shape': card.shape,
|
||||
'color': card.color,
|
||||
'number': card.number
|
||||
});
|
||||
|
||||
var shapeNode = $('<span>');
|
||||
shapeNode.addClass('shape ' + card.color + ' ' + card.shape + ' ' + card.fill);
|
||||
|
||||
|
||||
for (var i = 0; i < card.number; i++) {
|
||||
cardNode.append(shapeNode.clone());
|
||||
}
|
||||
self.$board.append(cardNode);
|
||||
|
||||
// display 4 cards per row
|
||||
if ((index+1) % 4 === 0) {
|
||||
self.$board.append($('<div>'));
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
setCardListeners: function() {
|
||||
var self = this;
|
||||
|
||||
// what happens when a card is clicked:
|
||||
this.$board.on('click', '.card', function(e) {
|
||||
e.stopImmediatePropagation();
|
||||
var card = e.currentTarget;
|
||||
|
||||
// if card is new, add it, otherwise remove it
|
||||
var ids = $.map(self.selected, function(el) { return $(el).data("id");});
|
||||
if (ids.indexOf($(card).data('id')) >= 0) {
|
||||
self.deselectCard(card);
|
||||
} else {
|
||||
self.selectCard(card);
|
||||
}
|
||||
|
||||
if (self.selected.length === 3) {
|
||||
self.silentSubmission();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
setPageListeners: function() {
|
||||
var self = this;
|
||||
|
||||
// if the user clicks on the page outside the game board, clear selected
|
||||
$(document).on('click', function() {
|
||||
self.clearSelections.call(self);
|
||||
});
|
||||
},
|
||||
|
||||
selectCard: function(card) {
|
||||
$(card).addClass('selected');
|
||||
this.selected.push(card);
|
||||
|
||||
if (this.selected.length > 3) {
|
||||
var removed = this.selected.shift();
|
||||
$(removed).removeClass('selected');
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
deselectCard: function(card) {
|
||||
var self = this;
|
||||
var index = self.selected.indexOf(card);
|
||||
if (index > -1) {
|
||||
self.selected.splice(index, 1);
|
||||
}
|
||||
$(card).removeClass('selected');
|
||||
},
|
||||
|
||||
clearSelections: function() {
|
||||
$.each(this.selected, function(index, card) {
|
||||
$(card).removeClass('selected');
|
||||
});
|
||||
this.selected = [];
|
||||
},
|
||||
|
||||
validateSet: function() {
|
||||
var self = this;
|
||||
|
||||
var colors = $.map(self.selected, function(el) { return $(el).data("color");});
|
||||
var shapes = $.map(self.selected, function(el) { return $(el).data("shape"); });
|
||||
var numbers = $.map(self.selected, function(el) { return $(el).data("number"); });
|
||||
|
||||
|
||||
return (self.isSet(colors) && self.isSet(shapes) && self.isSet(numbers));
|
||||
},
|
||||
|
||||
isSet: function(arr) {
|
||||
// a set means the attributes are either all the same or all different
|
||||
var reduced = $.unique(arr);
|
||||
return (reduced.length === 1 || reduced.length === 3);
|
||||
},
|
||||
|
||||
silentSubmission: function() {
|
||||
var valid = this.validateSet();
|
||||
if (valid) {
|
||||
this.submitSet();
|
||||
}
|
||||
},
|
||||
|
||||
submitSet: function() {
|
||||
var self = this;
|
||||
var ids = $.map(self.selected, function(el) { return $(el).data("id");});
|
||||
|
||||
// ajax request to get initial set of cards
|
||||
var newCardRequest = $.ajax({
|
||||
url: 'set.php?action=submit',
|
||||
type: 'GET',
|
||||
dataType: 'json',
|
||||
success: function(data) {
|
||||
self.clearCards(ids);
|
||||
// to do - implement game complete check on server
|
||||
if (!data.gameComplete) {
|
||||
self.updateCards(data);
|
||||
self.increaseScore();
|
||||
} else {
|
||||
self.gameWon();
|
||||
}
|
||||
},
|
||||
error: function() {
|
||||
console.log(arguments);
|
||||
}
|
||||
});
|
||||
|
||||
this.clearSelections();
|
||||
},
|
||||
|
||||
clearCards: function(ids) {
|
||||
// remove submitted cards game's card array and clear the board
|
||||
var self = this;
|
||||
this.selected = [];
|
||||
this.$board.empty();
|
||||
var cardIds = $.map(self.cards, function(card) { return card.id; });
|
||||
$.each(ids, function(idx, id) {
|
||||
var location = cardIds.indexOf(id);
|
||||
if (location > -1) {
|
||||
cardIds.splice(location, 1);
|
||||
self.cards.splice(location, 1);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
updateCards: function(newCards) {
|
||||
this.cards = this.cards.concat(newCards);
|
||||
this.displayCards();
|
||||
},
|
||||
|
||||
increaseScore: function() {
|
||||
this.$score.html(++this.score);
|
||||
},
|
||||
|
||||
startRound: function() {
|
||||
// todo
|
||||
// reset timer to 30 seconds
|
||||
},
|
||||
|
||||
gameWon: function() {
|
||||
alert("you won!");
|
||||
},
|
||||
|
||||
gameLost: function() {
|
||||
alert("you lost :(");
|
||||
}
|
||||
|
||||
|
||||
|
||||
};
|
||||
|
||||
|
||||
$(document).ready(Game.deal());
|
||||
|
||||
@ -0,0 +1,33 @@
|
||||
<link rel="stylesheet" media="screen" href="css/style.css">
|
||||
|
||||
|
||||
<div class="popup-content">
|
||||
<div class="popup-header">
|
||||
<h1 class="settings-title text" id="settings">PARAMÈTRES</h1>
|
||||
<hr class="hr-settings">
|
||||
</div>
|
||||
<div class="custom-select">
|
||||
<h2 class="text-settings text" id="langTitle">LANGUE</h2>
|
||||
<select id="lang-selector">
|
||||
<option value="fr" onclick="changeLangToFR()">Français</option>
|
||||
<option value="en" onclick="changeLangToEN()">English</option>
|
||||
</select>
|
||||
</div>
|
||||
<hr class="hr-settings-lang">
|
||||
<div class="custom-select ">
|
||||
<h2 id="daltoSettings">RÉGLAGES COULEURS 0</h2>
|
||||
<select id="color-selector">
|
||||
<option class="text" id="normal" value="normal" onclick="changeColorMode()">Normale</option>
|
||||
<option class="text" id="Daltonien" value="Daltonien" onclick="changeColorMode()">Daltonien</option>
|
||||
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<hr class="hr-settings-color">
|
||||
<a href="../set.html">Jouer</a>
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Loading…
Reference in new issue