readhame
5 years ago
parent
6b1acdf2cb
commit
516332ef0e
@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="VcsDirectoryMappings">
|
||||||
|
<mapping directory="$PROJECT_DIR$/.." vcs="Git" />
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
@ -1,18 +0,0 @@
|
|||||||
<?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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
<?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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,79 +0,0 @@
|
|||||||
* {
|
|
||||||
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 {
|
|
||||||
-webkit-mask-image: url('../images/diamond.png');
|
|
||||||
}
|
|
||||||
.wave {
|
|
||||||
-webkit-mask-image: url('../images/wave.png');
|
|
||||||
}
|
|
||||||
.oval {
|
|
||||||
-webkit-mask-image: url('../images/oval.png');
|
|
||||||
}
|
|
||||||
|
|
||||||
.green {
|
|
||||||
background: green;
|
|
||||||
}
|
|
||||||
.red {
|
|
||||||
background: red;;
|
|
||||||
}
|
|
||||||
.purple {
|
|
||||||
background: violet;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*solution pour avoir l'image en rainure ou vide a voir dans le css*/
|
|
||||||
@ -1,62 +0,0 @@
|
|||||||
<?php
|
|
||||||
|
|
||||||
include_once "cardAttributes.php";
|
|
||||||
include_once "card.php";
|
|
||||||
include_once "functions.php";
|
|
||||||
|
|
||||||
class Deck {
|
|
||||||
|
|
||||||
public $cards = array();
|
|
||||||
|
|
||||||
public function __construct() {
|
|
||||||
$this->createDeck();
|
|
||||||
}
|
|
||||||
|
|
||||||
private function createDeck() {
|
|
||||||
// need one card of each combo of color/shape/fill/number
|
|
||||||
$colors = array('green', 'red', 'purple');
|
|
||||||
$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);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
<?php
|
|
||||||
function array_chop(&$arr, $num)
|
|
||||||
{
|
|
||||||
$ret = array_slice($arr, 0, $num);
|
|
||||||
$arr = array_slice($arr, $num);
|
|
||||||
return $ret;
|
|
||||||
}
|
|
||||||
@ -1,18 +0,0 @@
|
|||||||
<?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();
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
Before Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 2.0 KiB |
@ -1,21 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="initial-scale=1">
|
|
||||||
<title>Set</title>
|
|
||||||
<link rel="stylesheet" href="css/style.css" />
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<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>
|
|
||||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
|
||||||
<script src="set.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
<?php
|
|
||||||
|
|
||||||
class Player {
|
|
||||||
|
|
||||||
private $score;
|
|
||||||
|
|
||||||
public function findSet() {
|
|
||||||
// to do
|
|
||||||
}
|
|
||||||
|
|
||||||
private function incrementScore($points) {
|
|
||||||
$this->score += $points;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,202 +0,0 @@
|
|||||||
var Game = {
|
|
||||||
cards: [],
|
|
||||||
selected: [],
|
|
||||||
score: 0,
|
|
||||||
$board: $('[data-display="game-board"]'),
|
|
||||||
$score: $('[data-display="score"]'),
|
|
||||||
|
|
||||||
deal: function() {
|
|
||||||
var self = this;
|
|
||||||
|
|
||||||
// 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();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
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());
|
|
||||||
@ -1,18 +0,0 @@
|
|||||||
<?php
|
|
||||||
|
|
||||||
include "deck.php";
|
|
||||||
include "game.php";
|
|
||||||
|
|
||||||
session_start();
|
|
||||||
|
|
||||||
$deck;
|
|
||||||
|
|
||||||
if (isset($_GET['action']) && $_GET['action'] == 'deal') {
|
|
||||||
$_SESSION['deck'] = new Deck();
|
|
||||||
$_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());
|
|
||||||
}
|
|
||||||
Loading…
Reference in new issue