diff --git a/www/dom.js b/www/dom.js index 228a4df..59371ab 100644 --- a/www/dom.js +++ b/www/dom.js @@ -1,7 +1,7 @@ function Dom() { - return { - clear: clear - } + return { + clear: clear + } function clear(elem) { while(elem.firstChild) { diff --git a/www/game.css b/www/game.css index 4e8c73f..4038c4f 100644 --- a/www/game.css +++ b/www/game.css @@ -1,3 +1,24 @@ +#game > div { + position: absolute; + left: 0; + right: 0; +} + +#them { + top: 0; + bottom: 75%; +} + +#table { + top: 25%; + bottom: 25%; +} + +#you { + top: 75%; + bottom: 0; +} + #game .card { background: url("/cards.jpg") no-repeat; background-size: 400% 1200%; @@ -79,7 +100,7 @@ display: none; } -#river li.card.candidate, #hand.yourTurn li.card { +#river li.card.candidate, #you .hand.yourTurn li.card { cursor: pointer; } @@ -87,24 +108,10 @@ box-shadow: 0 0 0.5em 0.1em #fc0; } -#hand li.card.selected { +#you .hand li.card.selected { margin-top: -1em; } -#opponent, #own { - position: absolute; - left: 0; - right: 0; -} - -#opponent { - top: 0; -} - -#own { - bottom: 0; -} - #game ul { display: inline-block; margin-left: 3em; @@ -112,15 +119,15 @@ float: right; } -#opponent .card, #own .card { +#them .card, #you .card { margin-left: -3em; } -#game #hand { +#game #you .hand { margin-left: 0; float: left; } -#hand .card { +#you .hand .card { margin-left: 0.5em; } diff --git a/www/game.js b/www/game.js index 545ee22..51edcde 100644 --- a/www/game.js +++ b/www/game.js @@ -1,14 +1,20 @@ function Game(modules) { - var turned = document.getElementById('turned'); + var turned = document.getElementById("turned"); var status = { - dom: document.getElementById('status'), + dom: document.getElementById("status"), playing: false, step: null, - month: null + month: null, }; var sets = { - river: cardSet('river'), - hand: cardSet('hand'), + river: { + card: null, + dom: document.getElementById("river") + }, + hand: { + card: null, + dom: document.getElementById("you").getElementsByClassName("hand")[0] + } }; var selected = null; @@ -17,18 +23,11 @@ function Game(modules) { setStatus(o.game); setCaptures(o.game); [ - {name: 'river', cards: o.game.river}, - {name: 'hand', cards: o.game.players[modules.session.getKey()].hand} - ].forEach(setCardSet); + ['river', o.game.river, RiverCard], + ['hand', o.game.players[modules.session.getKey()].hand, HandCard] + ].forEach(function(args) {setCardSet.apply(null, args)}); if(status.step == "Turned") { - modules.dom.clear(turned); - var card = new Card(o.game.step.contents); - turned.appendChild(card.dom); - turned.classList.remove("hidden"); - if(status.playing) { - selected = card.name; - showCandidates(modules.hanafuda.Card[selected], true); - } + setTurned(o.game.step.contents); } else { turned.classList.add("hidden"); } @@ -46,13 +45,6 @@ function Game(modules) { }); } - function cardSet(id) { - return { - card: null, - dom: document.getElementById(id) - }; - } - function matchingInRiver(card) { return modules.fun.mapFilter( modules.fun.of(sets.river.card), @@ -80,28 +72,43 @@ function Game(modules) { function setCaptures(game) { for(var key in game.players) { - var elem = document.getElementById(modules.session.is(key) ? "own" : "opponent"); + var elem = document.getElementById(modules.session.is(key) ? "you" : "them"); elem.getElementsByClassName('score')[0].textContent = game.scores[key] + " pts"; - Array.prototype.forEach.call(elem.getElementsByTagName('ul'), modules.dom.clear); + var byClass = {} + Object.values(modules.hanafuda.Family).forEach(function(family) { + byClass[family.class] = elem.getElementsByClassName(family.class)[0]; + modules.dom.clear(byClass[family.class]); + }); game.players[key].meld.forEach(function(cardName) { var card = new Card(cardName); - elem.getElementsByClassName(card.value.family.class)[0].appendChild(card.dom); + byClass[card.value.family.class].appendChild(card.dom); }); } } - function setCardSet(conf) { - var set = sets[conf.name]; - var constructor = conf.name == "river" ? RiverCard : HandCard; - modules.dom.clear(set.dom); + function setCardSet(setName, cardNames, constructor) { + constructor = constructor || Card; + var set = sets[setName]; set.card = {}; - conf.cards.forEach(function(cardName) { + modules.dom.clear(set.dom); + cardNames.forEach(function(cardName) { var card = new constructor(cardName); set.card[cardName] = card; set.dom.appendChild(card.dom); }); } + function setTurned(cardName) { + var card = new Card(cardName); + modules.dom.clear(turned); + turned.appendChild(card.dom); + turned.classList.remove("hidden"); + if(status.playing) { + selected = cardName; + showCandidates(modules.hanafuda.Card[selected], true); + } + } + function showCandidates(card, yes) { matchingInRiver(card).forEach(function(riverCard) {riverCard.setCandidate(yes);}); } diff --git a/www/index.html b/www/index.html index 87b5aae..90e8135 100644 --- a/www/index.html +++ b/www/index.html @@ -36,18 +36,21 @@
- - - -
+
+
            -
            -
              +
              + +
                +
                  +
                  +
                  +