Handle decreasing deck and opponent's hand
This commit is contained in:
parent
cda5efce1f
commit
3b4e3be37f
5 changed files with 126 additions and 35 deletions
21
www/dom.js
21
www/dom.js
|
@ -1,6 +1,7 @@
|
|||
function Dom() {
|
||||
return {
|
||||
clear: clear
|
||||
clear: clear,
|
||||
make: make
|
||||
}
|
||||
|
||||
function clear(elem) {
|
||||
|
@ -8,4 +9,22 @@ function Dom() {
|
|||
elem.removeChild(elem.firstChild);
|
||||
}
|
||||
}
|
||||
|
||||
function make(tag, properties) {
|
||||
var e = document.createElement(tag);
|
||||
for(key in properties) {
|
||||
var value = properties[key];
|
||||
switch(key) {
|
||||
case "class":
|
||||
e.className = Array.isArray(value) ? value.join(' ') : value;
|
||||
break;;
|
||||
case "onClick":
|
||||
e.addEventListener("click", value);
|
||||
break;;
|
||||
default:
|
||||
e[key] = value;
|
||||
}
|
||||
}
|
||||
return e;
|
||||
}
|
||||
}
|
||||
|
|
52
www/game.css
52
www/game.css
|
@ -96,8 +96,48 @@
|
|||
background-position-y: 91.7%;
|
||||
}
|
||||
|
||||
#turned.hidden {
|
||||
display: none;
|
||||
#game #rest {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#rest.init, #rest.count24 {
|
||||
box-shadow: 2px 3px 0 0 #555, 4px 6px 0 0 #555, 6px 9px 0 0 #555;
|
||||
}
|
||||
|
||||
#rest.count22 {
|
||||
box-shadow: 2px 3px 0 0 #555, 4px 6px 0 0 #555, 5.5px 8.3px 0 0 #555;
|
||||
}
|
||||
|
||||
#rest.count20 {
|
||||
box-shadow: 2px 3px 0 0 #555, 4px 6px 0 0 #555, 5px 7.5px 0 0 #555;
|
||||
}
|
||||
|
||||
#rest.count18 {
|
||||
box-shadow: 2px 3px 0 0 #555, 4px 6px 0 0 #555, 4.5px 6.8px 0 0 #555;
|
||||
}
|
||||
|
||||
#rest.count16 {
|
||||
box-shadow: 2px 3px 0 0 #555, 4px 6px 0 0 #555;
|
||||
}
|
||||
|
||||
#rest.count14 {
|
||||
box-shadow: 2px 3px 0 0 #555, 3.5px 5.3px 0 0 #555;
|
||||
}
|
||||
|
||||
#rest.count12 {
|
||||
box-shadow: 2px 3px 0 0 #555, 3px 4.5px 0 0 #555;
|
||||
}
|
||||
|
||||
#rest.count10 {
|
||||
box-shadow: 2px 3px 0 0 #555, 2.5px 3.8px 0 0 #555;
|
||||
}
|
||||
|
||||
#rest.count8 {
|
||||
box-shadow: 2px 3px 0 0 #555;
|
||||
}
|
||||
|
||||
#game #turned {
|
||||
margin: -0.1em 0 0 -4.75em;
|
||||
}
|
||||
|
||||
#river li.card.candidate, #you .hand.yourTurn li.card {
|
||||
|
@ -122,6 +162,10 @@
|
|||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
#game ul#deck {
|
||||
float: left;
|
||||
}
|
||||
|
||||
#game ul#river {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
|
@ -136,11 +180,11 @@
|
|||
margin-left: -3.5em;
|
||||
}
|
||||
|
||||
#game #you .hand {
|
||||
#game .hand {
|
||||
margin-left: 0;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#you .hand .card {
|
||||
#game .hand .card {
|
||||
margin: 0.5em 0.1em;
|
||||
}
|
||||
|
|
81
www/game.js
81
www/game.js
|
@ -1,35 +1,45 @@
|
|||
function Game(modules) {
|
||||
var turned = document.getElementById("turned");
|
||||
var deck = document.getElementById("deck");
|
||||
var rest = document.getElementById("rest");
|
||||
var status = {
|
||||
dom: document.getElementById("status"),
|
||||
playing: false,
|
||||
step: null,
|
||||
month: null,
|
||||
played: 0
|
||||
};
|
||||
var sets = {
|
||||
river: {
|
||||
card: null,
|
||||
dom: document.getElementById("river")
|
||||
},
|
||||
hand: {
|
||||
yourHand: {
|
||||
card: null,
|
||||
dom: document.getElementById("you").getElementsByClassName("hand")[0]
|
||||
},
|
||||
theirHand: {
|
||||
dom: document.getElementById("them").getElementsByClassName("hand")[0]
|
||||
}
|
||||
};
|
||||
var selected = null;
|
||||
|
||||
modules.messaging.addEventListener(["Game"], function(o) {
|
||||
status.step = o.game.step.tag;
|
||||
setStatus(o.game);
|
||||
setCaptures(o.game);
|
||||
[
|
||||
['river', o.game.river, RiverCard],
|
||||
['hand', o.game.players[modules.session.getKey()].hand, HandCard]
|
||||
['yourHand', o.game.players[modules.session.getKey()].hand, HandCard]
|
||||
].forEach(function(args) {setCardSet.apply(null, args)});
|
||||
setTheirCards(o.game.oyake);
|
||||
if(status.step == "Turned") {
|
||||
setTurned(o.game.step.contents);
|
||||
} else {
|
||||
turned.classList.add("hidden");
|
||||
if(status.step == "ToPlay" && o.game.playing == o.game.oyake) {
|
||||
rest.className = ["card", "count" + (24 - status.played)].join(' ');
|
||||
}
|
||||
if(deck.lastChild.id != "rest") {
|
||||
deck.removeChild(deck.lastChild);
|
||||
}
|
||||
}
|
||||
if(status.playing && status.step == "Scored") {
|
||||
play({koiKoi: confirm(
|
||||
|
@ -54,20 +64,28 @@ function Game(modules) {
|
|||
|
||||
function setStatus(game) {
|
||||
modules.dom.clear(status.dom);
|
||||
status.month = game.month;
|
||||
var month = document.createElement('li');
|
||||
month.textContent = "This month's flower is the " + status.month;
|
||||
status.dom.appendChild(month);
|
||||
var playing = document.createElement('li');
|
||||
status.step = game.step.tag;
|
||||
if(game.month != status.month) {
|
||||
status.month = game.month;
|
||||
status.played = 0;
|
||||
} else {
|
||||
if(status.step == "ToPlay") {
|
||||
status.played++;
|
||||
}
|
||||
}
|
||||
status.dom.appendChild(
|
||||
modules.dom.make('li', {textContent: "This month's flower is the " + status.month})
|
||||
);
|
||||
var turn = null;
|
||||
status.playing = modules.session.is(game.playing);
|
||||
if(status.playing) {
|
||||
sets.hand.dom.classList.toggle("yourTurn", status.step == "ToPlay");
|
||||
playing.textContent = "Your turn";
|
||||
sets.yourHand.dom.classList.toggle("yourTurn", status.step == "ToPlay");
|
||||
turn = "Your turn";
|
||||
} else {
|
||||
sets.hand.dom.classList.remove("yourTurn");
|
||||
playing.textContent = modules.room.name(game.playing) + " is playing";
|
||||
sets.yourHand.dom.classList.remove("yourTurn");
|
||||
turn = modules.room.name(game.playing) + " is playing";
|
||||
}
|
||||
status.dom.appendChild(playing);
|
||||
status.dom.appendChild(modules.dom.make('li', {textContent: turn}));
|
||||
}
|
||||
|
||||
function setCaptures(game) {
|
||||
|
@ -98,11 +116,20 @@ function Game(modules) {
|
|||
});
|
||||
}
|
||||
|
||||
function setTheirCards(oyake) {
|
||||
var turnsTheyPlayed = Math.floor(
|
||||
(status.played + (modules.session.is(oyake) ? 0 : 1)) / 2
|
||||
);
|
||||
modules.dom.clear(sets.theirHand.dom);
|
||||
for(var i = 0; i < 8 - turnsTheyPlayed; i++) {
|
||||
sets.theirHand.dom.appendChild(modules.dom.make('li', {class: "card"}));
|
||||
}
|
||||
}
|
||||
|
||||
function setTurned(cardName) {
|
||||
var card = new Card(cardName);
|
||||
modules.dom.clear(turned);
|
||||
turned.appendChild(card.dom);
|
||||
turned.classList.remove("hidden");
|
||||
card.dom.id = "turned";
|
||||
deck.appendChild(card.dom);
|
||||
if(status.playing) {
|
||||
selected = cardName;
|
||||
showCandidates(modules.hanafuda.Card[selected], true);
|
||||
|
@ -116,14 +143,14 @@ function Game(modules) {
|
|||
function Card(name) {
|
||||
this.value = modules.hanafuda.Card[name];
|
||||
this.name = name;
|
||||
var domElem = document.createElement('li');
|
||||
this.dom = domElem;
|
||||
[
|
||||
"card",
|
||||
"value" + modules.hanafuda.getValue(this.value),
|
||||
"month" + this.value.flower
|
||||
].forEach(function(c) {domElem.classList.add(c);});
|
||||
this.dom.addEventListener('click', this.onClick());
|
||||
this.dom = modules.dom.make('li', {
|
||||
class: [
|
||||
"card",
|
||||
"value" + modules.hanafuda.getValue(this.value),
|
||||
"month" + this.value.flower
|
||||
],
|
||||
onClick: this.onClick()
|
||||
});
|
||||
}
|
||||
|
||||
Card.prototype.onClick = function() {return function() {};};
|
||||
|
@ -160,7 +187,7 @@ function Game(modules) {
|
|||
var card = this;
|
||||
return function() {
|
||||
if(selected != undefined) {
|
||||
sets.hand.card[selected].setSelected(false);
|
||||
sets.yourHand.card[selected].setSelected(false);
|
||||
} else {
|
||||
card.play();
|
||||
}
|
||||
|
|
|
@ -45,7 +45,9 @@
|
|||
<span class="score"></span>
|
||||
</div>
|
||||
<div id="table">
|
||||
<ul id="turned" class="hidden"></ul>
|
||||
<ul id="deck">
|
||||
<li class="card init" id="rest"></li>
|
||||
</ul>
|
||||
<ul id="river"></ul>
|
||||
<ul id="status"></ul>
|
||||
</div>
|
||||
|
|
|
@ -4,8 +4,7 @@ function Room(modules) {
|
|||
this.key = key;
|
||||
this.name = name;
|
||||
this.alone = alone;
|
||||
this.dom = document.createElement('li');
|
||||
this.dom.textContent = name;
|
||||
this.dom = modules.dom.make('li', {textContent: name});
|
||||
this.position = null;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue