Handle decreasing deck and opponent's hand

This commit is contained in:
Sasha 2018-05-26 21:26:12 +02:00
parent cda5efce1f
commit 3b4e3be37f
5 changed files with 126 additions and 35 deletions

View file

@ -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;
}
}

View file

@ -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;
}

View file

@ -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();
}

View file

@ -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>

View file

@ -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;
}