Replace card names by pictures in a sprite

This commit is contained in:
Sasha 2018-05-20 19:15:06 +02:00
parent dc49f4eb0e
commit 57f93ca116
5 changed files with 121 additions and 37 deletions

BIN
www/cards.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 701 KiB

View file

@ -1,52 +1,126 @@
#game h2 {
clear: both;
}
#game ul {
padding: 0;
}
#game .card {
background: #fff;
display: inline-block;
border-radius: 0.5em;
border: 1px solid #555;
width: 5em;
height: 8em;
max-height: 10%;
float: left;
margin: 0.5em;
background: url("/cards.jpg") no-repeat;
background-size: 400% 1200%;
display: inline-block;
border-radius: 0.5em;
border: 1px solid #555;
width: 4.5em;
height: 7em;
max-height: 10%;
float: left;
margin: 0.5em;
}
#game .card.value0 {
background-position-x: 0%;
}
#game .card.value1 {
background-position-x: 33.3%;
}
#game .card.value2 {
background-position-x: 66.7%;
}
#game .card.value3 {
background-position-x: 100%;
}
#game .card.month0 {
background-position-y: 0%;
}
#game .card.month1 {
background-position-y: 9.1%;
}
#game .card.month2 {
background-position-y: 18.2%;
}
#game .card.month3 {
background-position-y: 27.3%;
}
#game .card.month4 {
background-position-y: 36.4%;
}
#game .card.month5 {
background-position-y: 45.5%;
}
#game .card.month6 {
background-position-y: 54.5%;
}
#game .card.month7 {
background-position-y: 63.6%;
}
#game .card.month8 {
background-position-y: 72.7%;
}
#game .card.month9 {
background-position-y: 81.8%;
}
#game .card.month10 {
background-position-y: 90.9%;
}
#game .card.month11 {
background-position-y: 100%;
}
#turned.hidden {
display: none;
display: none;
}
#river li.card.candidate, #hand.yourTurn li.card {
cursor: pointer;
cursor: pointer;
}
#river li.card.candidate {
box-shadow: 0 0 0.5em 0.1em #fc0;
box-shadow: 0 0 0.5em 0.1em #fc0;
}
#hand li.card.selected {
margin-top: -1em;
margin-top: -1em;
}
#opponent, #own {
position: absolute;
right: 0;
position: absolute;
left: 0;
right: 0;
}
#opponent {
top: 0;
top: 0;
}
#own {
bottom: 0;
bottom: 0;
}
#game ul {
display: inline-block;
margin-left: 3em;
padding: 0;
float: right;
}
#opponent .card, #own .card {
margin-left: -2em;
margin-left: -3em;
}
#game #hand {
margin-left: 0;
float: left;
}
#hand .card {
margin-left: 0.5em;
}

View file

@ -21,10 +21,12 @@ function Game(modules) {
{name: 'hand', cards: o.game.players[modules.session.getKey()].hand}
].forEach(setCardSet);
if(status.step == "Turned") {
turned.textContent = o.game.step.contents;
modules.dom.clear(turned);
var card = new Card(o.game.step.contents);
turned.appendChild(card.dom);
turned.classList.remove("hidden");
if(status.playing) {
selected = o.game.step.contents;
selected = card.name;
showCandidates(modules.hanafuda.Card[selected], true);
}
} else {
@ -107,9 +109,13 @@ function Game(modules) {
function Card(name) {
this.value = modules.hanafuda.Card[name];
this.name = name;
this.dom = document.createElement('li');
this.dom.className = "card";
this.dom.textContent = 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());
}

View file

@ -112,6 +112,7 @@ function Hanafuda(modules) {
Flower: Flower,
Family: Family,
Card: Card,
getValue: getValue,
sameMonth: sameMonth
};
@ -120,6 +121,11 @@ function Hanafuda(modules) {
return [0,1,2,3].map(function(i) {return Card[CardNames[first + i]];});
}
function getValue(card) {
var first = 4 * card.flower;
return card.id - first;
}
/*
data Flower =
Pine

View file

@ -37,24 +37,22 @@
</div>
<div id="game">
<ul id="status"></ul>
<h2>River</h2>
<ul id="river"></ul>
<span id="turned" class="card hidden"></span>
<h2>Hand</h2>
<ul id="hand"></ul>
<ul id="turned" class="hidden"></ul>
<div id="opponent">
<span class="score"></span>
<ul class="kasu"></ul>
<ul class="tane"></ul>
<ul class="tan"></ul>
<ul class="hikari"></ul>
<span class="score"></span>
</div>
<div id="own">
<span class="score"></span>
<ul id="hand"></ul>
<ul class="kasu"></ul>
<ul class="tane"></ul>
<ul class="tan"></ul>
<ul class="hikari"></ul>
<span class="score"></span>
</div>
</div>
<p id="debug"></p>