Replace card names by pictures in a sprite
This commit is contained in:
parent
dc49f4eb0e
commit
57f93ca116
5 changed files with 121 additions and 37 deletions
BIN
www/cards.jpg
Normal file
BIN
www/cards.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 701 KiB |
126
www/game.css
126
www/game.css
|
@ -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;
|
||||
}
|
||||
|
|
16
www/game.js
16
www/game.js
|
@ -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());
|
||||
}
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue