initial commit
vilmibm
commit
2995f40d62
|
|
@ -0,0 +1,100 @@
|
|||
function cardDB() {
|
||||
return {
|
||||
// Major arcana
|
||||
"the fool": {
|
||||
"arcana": "major",
|
||||
"index": 1
|
||||
},
|
||||
"the magician": {
|
||||
"arcana": "major",
|
||||
"index": 2
|
||||
},
|
||||
"the high priestess": {
|
||||
"arcana": "major",
|
||||
"index": 3
|
||||
},
|
||||
"the empress": {
|
||||
"arcana": "major",
|
||||
"index": 4
|
||||
},
|
||||
"the emperor": {
|
||||
"arcana": "major",
|
||||
"index": 5
|
||||
},
|
||||
"the hierophant": {
|
||||
"arcana": "major",
|
||||
"index": 6
|
||||
},
|
||||
"the lovers": {
|
||||
"arcana": "major",
|
||||
"index": 7
|
||||
},
|
||||
"the chariot": {
|
||||
"arcana": "major",
|
||||
"index": 8
|
||||
},
|
||||
"justice": {
|
||||
"arcana": "major",
|
||||
"index": 9
|
||||
},
|
||||
"the hermit": {
|
||||
"arcana": "major",
|
||||
"index": 10
|
||||
},
|
||||
"wheel of fortune": {
|
||||
"arcana": "major",
|
||||
"index": 11
|
||||
},
|
||||
"strength": {
|
||||
"arcana": "major",
|
||||
"index": 12
|
||||
},
|
||||
"death": {
|
||||
"arcana": "major",
|
||||
"index": 13
|
||||
},
|
||||
"temperance": {
|
||||
"arcana": "major",
|
||||
"index": 14
|
||||
},
|
||||
"the devil": {
|
||||
"arcana": "major",
|
||||
"index": 15
|
||||
},
|
||||
"the tower": {
|
||||
"arcana": "major",
|
||||
"index": 16
|
||||
},
|
||||
"the star": {
|
||||
"arcana": "major",
|
||||
"index": 17
|
||||
},
|
||||
"the moon": {
|
||||
"arcana": "major",
|
||||
"index": 18
|
||||
},
|
||||
"the sun": {
|
||||
"arcana": "major",
|
||||
"index": 19
|
||||
},
|
||||
"judgement": {
|
||||
"arcana": "major",
|
||||
"index": 20
|
||||
},
|
||||
"the world": {
|
||||
"arcana": "major",
|
||||
"index": 21
|
||||
},
|
||||
|
||||
// Minor arcana
|
||||
"ace of cups": {
|
||||
"arcana": "minor",
|
||||
"index": 1,
|
||||
"suit": "cups"
|
||||
},
|
||||
|
||||
// TODO
|
||||
}
|
||||
}
|
||||
|
||||
export default cardDB;
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>tarot</title>
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>hermetic</h1>
|
||||
|
||||
<button id="reset">reset</button>
|
||||
<br>
|
||||
<div id="deck"></div>
|
||||
<div id="info" style="height: 325px; width: 500px;"></div>
|
||||
<div id="table"></div>
|
||||
|
||||
<div class="blueprint card">
|
||||
<pre></pre>
|
||||
<span></span>
|
||||
</div>
|
||||
|
||||
<script type="module" src="main.js"></script>
|
||||
<style>
|
||||
.blueprint {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
import Tarot from './tarot.js'
|
||||
|
||||
window.tarot = new Tarot();
|
||||
window.tarot.render();
|
||||
|
|
@ -0,0 +1,171 @@
|
|||
import cardDB from './cards.js';
|
||||
|
||||
// TODO reset state button
|
||||
|
||||
class Tarot {
|
||||
constructor() {
|
||||
this.cardDB = cardDB();
|
||||
this.deck = new CardPile();
|
||||
for (const cardName in this.cardDB) {
|
||||
this.deck.add(cardName);
|
||||
}
|
||||
this.table = new CardPile();
|
||||
|
||||
const deckElem = document.querySelector("#deck");
|
||||
const tableElem = document.querySelector("#table");
|
||||
const infoElem = document.querySelector("#info");
|
||||
const resetElem = document.querySelector("#reset");
|
||||
|
||||
// TODO bring those top level functions in as methods
|
||||
this.renderers = [
|
||||
new Renderer(
|
||||
deckElem,
|
||||
deckRender(this.deck)),
|
||||
|
||||
new Renderer(
|
||||
tableElem,
|
||||
tableRender(this, this.table)),
|
||||
|
||||
new Renderer(
|
||||
infoElem,
|
||||
infoRender(tableElem, deckElem))
|
||||
];
|
||||
|
||||
// handlers
|
||||
// TODO make it feel similar to the renderers? or just have a general way to list out events
|
||||
// that should trigger a render
|
||||
tableElem.addEventListener("mouseenter", this.render.bind(this));
|
||||
tableElem.addEventListener("mouseleave", this.render.bind(this));
|
||||
deckElem.addEventListener("click", this.drawCard.bind(this));
|
||||
resetElem.addEventListener("click", this.reset.bind(this));
|
||||
}
|
||||
|
||||
reset() {
|
||||
let card = this.table.drawRandom();
|
||||
while (card != null) {
|
||||
this.deck.add(card);
|
||||
card = this.table.drawRandom();
|
||||
}
|
||||
|
||||
this.render();
|
||||
}
|
||||
|
||||
drawCard() {
|
||||
let cardName = this.deck.drawRandom();
|
||||
if (cardName === null) {
|
||||
this.render();
|
||||
return;
|
||||
}
|
||||
|
||||
this.table.add(cardName);
|
||||
this.render();
|
||||
}
|
||||
|
||||
render() {
|
||||
for (const renderer of this.renderers) {
|
||||
renderer.render();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function infoRender(tableElem) {
|
||||
return function(elem) {
|
||||
const cardElem = tableElem.querySelector(".card:hover");
|
||||
if (cardElem == null) {
|
||||
elem.innerHTML = "";
|
||||
return
|
||||
}
|
||||
elem.innerHTML = cardElem.querySelector("span").innerHTML;
|
||||
}
|
||||
}
|
||||
|
||||
function tableRender(tarot, table) {
|
||||
return function(elem) {
|
||||
const cardsOut = elem.querySelectorAll('.card');
|
||||
for (let cardElem of cardsOut) {
|
||||
if (!table.has(cardElem.getAttribute('data-cardName'))) {
|
||||
cardElem.remove();
|
||||
}
|
||||
}
|
||||
|
||||
for (let cardName of table.cards) {
|
||||
const found = elem.querySelector(`[data-cardName="${cardName}"]`);
|
||||
if (found != null) {
|
||||
continue;
|
||||
}
|
||||
|
||||
let bp = document.querySelector(".card.blueprint");
|
||||
let cardElem = bp.cloneNode(true);
|
||||
cardElem.classList.remove("blueprint");
|
||||
cardElem.setAttribute("data-cardName", cardName)
|
||||
cardElem.setAttribute("style", "float:left; width: 150px; height: 250px; border: 1px solid pink;");
|
||||
cardElem.querySelector("span").innerHTML = cardName;
|
||||
cardElem.addEventListener("mouseenter", tarot.render.bind(tarot));
|
||||
elem.append(cardElem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function deckRender(deck) {
|
||||
return function(elem) {
|
||||
const width = deck.size;
|
||||
elem.setAttribute("style", `float:left; height: 250px; width: 150px; border-left: 1px solid white; border-top: 1px solid white; border-bottom: ${width}px solid white; border-right: ${width}px solid white`);
|
||||
}
|
||||
}
|
||||
|
||||
function deckClick(deckElem, deck) {
|
||||
return function() {
|
||||
console.log(deckElem, deck);
|
||||
}
|
||||
}
|
||||
|
||||
class Renderer {
|
||||
constructor(element, renderFn) {
|
||||
this.element = element;
|
||||
this.renderFn = renderFn;
|
||||
}
|
||||
|
||||
render() {
|
||||
this.renderFn(this.element);
|
||||
}
|
||||
}
|
||||
|
||||
class CardPile {
|
||||
constructor() {
|
||||
this.cards = new Set();
|
||||
}
|
||||
|
||||
add(cardName) {
|
||||
this.cards.add(cardName);
|
||||
}
|
||||
|
||||
has(cardName) {
|
||||
return this.cards.has(cardName);
|
||||
}
|
||||
|
||||
get size() {
|
||||
return this.cards.size;
|
||||
}
|
||||
|
||||
drawRandom() {
|
||||
const size = this.cards.size
|
||||
if (size === 0) {
|
||||
return null;
|
||||
}
|
||||
const index = Math.floor(Math.random() * Math.floor(size));
|
||||
let i = 0;
|
||||
let cardName = "";
|
||||
for (let card of this.cards) {
|
||||
if (i === index) {
|
||||
cardName = card;
|
||||
break
|
||||
}
|
||||
i++;
|
||||
}
|
||||
this.cards.delete(cardName);
|
||||
|
||||
return cardName;
|
||||
}
|
||||
}
|
||||
|
||||
export default Tarot;
|
||||
Loading…
Reference in New Issue