339 lines
13 KiB
HTML
339 lines
13 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title></title>
|
|
<meta charset="utf-8">
|
|
<link rel="stylesheet" type="text/css" href="symbolon.css">
|
|
</head>
|
|
<body>
|
|
<div id="selector">
|
|
<select id="selector-1">
|
|
<option value="">Mind</option>
|
|
<option value="aries">Kos</option>
|
|
<option value="taurus">Bika</option>
|
|
<option value="gemini">Ikrek</option>
|
|
<option value="cancer">Rák</option>
|
|
<option value="leo">Oroszlán</option>
|
|
<option value="virgo">Szűz</option>
|
|
<option value="libra">Mérleg</option>
|
|
<option value="scorpio">Skorpió</option>
|
|
<option value="sagittarius">Nyilas</option>
|
|
<option value="capricorn">Bak</option>
|
|
<option value="aquarius">Vízöntő</option>
|
|
<option value="pisces">Halak</option>
|
|
</select>
|
|
<select id="selector-2">
|
|
<option value="">Mind</option>
|
|
<option value="aries">Kos</option>
|
|
<option value="taurus">Bika</option>
|
|
<option value="gemini">Ikrek</option>
|
|
<option value="cancer">Rák</option>
|
|
<option value="leo">Oroszlán</option>
|
|
<option value="virgo">Szűz</option>
|
|
<option value="libra">Mérleg</option>
|
|
<option value="scorpio">Skorpió</option>
|
|
<option value="sagittarius">Nyilas</option>
|
|
<option value="capricorn">Bak</option>
|
|
<option value="aquarius">Vízöntő</option>
|
|
<option value="pisces">Halak</option>
|
|
</select>
|
|
<button id="draw-one">Húzz egyet!</button>
|
|
<button id="draw-three">Húzz hármat!</button>
|
|
<hr>
|
|
</div>
|
|
<div id="cards"></div>
|
|
<div id="one-card" class="lightbox">
|
|
<div class="close-button">×</div>
|
|
<div class="content">
|
|
<h2 class="card-title"></h2>
|
|
<div class="image">
|
|
<img src="" alt="">
|
|
</div>
|
|
<div class="description">
|
|
<h3>Kulcsszavak</h3>
|
|
<div class="keywords"></div>
|
|
</div>
|
|
<div class="description">
|
|
<h3>Jegyek és bolygók</h3>
|
|
<div class="planets-signs"></div>
|
|
</div>
|
|
<div class="description">
|
|
<h3>A probléma</h3>
|
|
<div class="problem"></div>
|
|
</div>
|
|
<div class="description">
|
|
<h3>Az út</h3>
|
|
<div class="road"></div>
|
|
</div>
|
|
<div class="description">
|
|
<h3>A megoldás</h3>
|
|
<div class="goal"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="three-cards" class="lightbox">
|
|
<div class="close-button">×</div>
|
|
<div id="card-1" class="drawn content">
|
|
<h2 class="card-title"></h2>
|
|
<div class="image">
|
|
<img src="" alt="">
|
|
</div>
|
|
<div class="description">
|
|
<h3>Kulcsszavak</h3>
|
|
<div class="keywords"></div>
|
|
</div>
|
|
<div class="description">
|
|
<h3>Jegyek és bolygók</h3>
|
|
<div class="planets-signs"></div>
|
|
</div>
|
|
<div class="description">
|
|
<h3>A probléma</h3>
|
|
<div class="problem"></div>
|
|
</div>
|
|
</div>
|
|
<div id="card-2" class="drawn content">
|
|
<h2 class="card-title"></h2>
|
|
<div class="image">
|
|
<img src="" alt="">
|
|
</div>
|
|
<div class="description">
|
|
<h3>Kulcsszavak</h3>
|
|
<div class="keywords"></div>
|
|
</div>
|
|
<div class="description">
|
|
<h3>Jegyek és bolygók</h3>
|
|
<div class="planets-signs"></div>
|
|
</div>
|
|
<div class="description">
|
|
<h3>Az út</h3>
|
|
<div class="road"></div>
|
|
</div>
|
|
</div>
|
|
<div id="card-3" class="drawn content">
|
|
<h2 class="card-title"></h2>
|
|
<div class="image">
|
|
<img src="" alt="">
|
|
</div>
|
|
<div class="description">
|
|
<h3>Kulcsszavak</h3>
|
|
<div class="keywords"></div>
|
|
</div>
|
|
<div class="description">
|
|
<h3>Jegyek és bolygók</h3>
|
|
<div class="planets-signs"></div>
|
|
</div>
|
|
<div class="description">
|
|
<h3>A megoldás</h3>
|
|
<div class="goal"></div>
|
|
</div>
|
|
</div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
<script>
|
|
var cards_div = document.getElementById('cards');
|
|
var one_div = document.getElementById('one-card');
|
|
var three_div = document.getElementById('three-cards');
|
|
var card_count = 0;
|
|
var cardData = [];
|
|
|
|
function image_name(number, small) {
|
|
var name = String('00' + number).slice(-2) + '.jpg';
|
|
|
|
return (small ? 'small/' : 'images/') + name;
|
|
}
|
|
|
|
function update_card(id, cardNum, type) {
|
|
var main_div;
|
|
var card = cardData[cardNum];
|
|
|
|
if (id === null) {
|
|
one_div.style.display = 'block';
|
|
three_div.style.display = 'none';
|
|
main_div = one_div;
|
|
} else if ((id === 1) || (id === 2) || (id === 3)) {
|
|
one_div.style.display = 'none';
|
|
three_div.style.display = 'block';
|
|
main_div = document.getElementById('card-' + id);
|
|
}
|
|
|
|
var title_header = main_div.getElementsByClassName('card-title')[0];
|
|
title_header.textContent = card.name;
|
|
|
|
var image = main_div.querySelectorAll('.image > img')[0];
|
|
image.src = image_name(card.number);
|
|
|
|
var keywords_div = main_div.getElementsByClassName('keywords')[0];
|
|
keywords_div.textContent = card.keywords.join(', ');
|
|
|
|
var planets_div = main_div.getElementsByClassName('planets-signs')[0];
|
|
planets_div.innerHTML = '';
|
|
console.log(planets_div);
|
|
|
|
for (var idx = 0; idx < card.signs.length; idx++) {
|
|
var img = document.createElement('img');
|
|
img.src = 'signs/' + card.signs[idx] + '.svg';
|
|
img.title = img.alt = card.signs[idx];
|
|
img.classList.add('sign');
|
|
planets_div.appendChild(img);
|
|
}
|
|
|
|
planets_div.appendChild(document.createElement('br'));
|
|
|
|
for (var idx = 0; idx < card.planets.length; idx++) {
|
|
var img = document.createElement('img');
|
|
img.src = 'planets/' + card.planets[idx] + '.svg';
|
|
img.title = img.alt = card.planets[idx];
|
|
img.classList.add('planet');
|
|
planets_div.appendChild(img);
|
|
}
|
|
|
|
if ((type === 'all') || (type === 'problem')) {
|
|
var problem_div = main_div.getElementsByClassName('problem')[0];
|
|
problem_div.textContent = card.problem;
|
|
}
|
|
|
|
if ((type === 'all') || (type === 'road')) {
|
|
var road_div = main_div.getElementsByClassName('road')[0];
|
|
road_div.textContent = card.road;
|
|
}
|
|
|
|
if ((type === 'all') || (type === 'goal')) {
|
|
var goal_div = main_div.getElementsByClassName('goal')[0];
|
|
goal_div.textContent = card.goal;
|
|
}
|
|
}
|
|
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.responseType = 'json';
|
|
xhr.onload = function(e) {
|
|
cardData = e.target.response.sort(function(a, b) {return a.number - b.number;});
|
|
|
|
card_count = cardData.length;
|
|
|
|
for (var idx = 0; idx < cardData.length; idx++) {
|
|
var card = cardData[idx];
|
|
|
|
var img = document.createElement('img');
|
|
img.src = image_name(card.number, true);
|
|
img.title = img.alt = card.name;
|
|
img.dataset['num'] = card.number;
|
|
|
|
for (var num = 0; num < card.signs.length; num++) {
|
|
img.classList.add(card.signs[num]);
|
|
}
|
|
|
|
if (card.signs.length == 1) {
|
|
img.classList.add('big-arcana');
|
|
}
|
|
|
|
cards_div.appendChild(img);
|
|
img.onclick = function(evt) {
|
|
var cardNum = evt.target.dataset['num'] - 1;
|
|
evt.stopPropagation();
|
|
update_card(null, cardNum, 'all');
|
|
}
|
|
}
|
|
}
|
|
|
|
xhr.open('GET', 'symbolon.json');
|
|
xhr.send();
|
|
|
|
var lightboxes = document.getElementsByClassName('lightbox');
|
|
for (var idx = 0; idx < lightboxes.length; idx++) {
|
|
lightboxes[idx].onclick = function(evt) {evt.stopPropagation();};
|
|
}
|
|
|
|
document.onclick = function() {
|
|
one_div.style.display = 'none';
|
|
three_div.style.display = 'none';
|
|
}
|
|
|
|
var close_buttons = document.querySelectorAll('.close-button');
|
|
for (var idx = 0; idx < close_buttons.length; idx++) {
|
|
var close_button = close_buttons[idx];
|
|
|
|
close_button.onclick = function() {
|
|
one_div.style.display = 'none';
|
|
three_div.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
var one_button = document.getElementById('draw-one');
|
|
one_button.onclick = function(evt) {
|
|
var number = Math.round(Math.random() * card_count);
|
|
|
|
evt.stopPropagation();
|
|
update_card(null, number, 'all');
|
|
}
|
|
|
|
var three_button = document.getElementById('draw-three');
|
|
three_button.onclick = function(evt) {
|
|
var numbers = [];
|
|
|
|
evt.stopPropagation();
|
|
|
|
while (true) {
|
|
if (numbers.length === 3) {
|
|
break;
|
|
}
|
|
|
|
var num = Math.round(Math.random() * card_count);
|
|
|
|
if (numbers.indexOf(num) === -1) {
|
|
numbers.push(num);
|
|
}
|
|
}
|
|
|
|
update_card(1, numbers[0], 'problem');
|
|
update_card(2, numbers[1], 'road');
|
|
update_card(3, numbers[2], 'goal');
|
|
}
|
|
|
|
var selects = document.querySelectorAll('select');
|
|
for (var idx = 0; idx < selects.length; idx++) {
|
|
var select = selects[idx];
|
|
|
|
select.onchange = function() {
|
|
var classes = [];
|
|
var selector = '';
|
|
|
|
selects.forEach(function(select) {
|
|
var sign = select.value;
|
|
|
|
if (sign != '') {
|
|
classes.push(sign);
|
|
}
|
|
});
|
|
|
|
if ((classes.length == 2) && (classes[0] == classes[1])) {
|
|
classes = ['big-arcana', classes[0]];
|
|
}
|
|
|
|
// Show all cards first
|
|
cards_div.querySelectorAll('img')
|
|
.forEach(function(image) {
|
|
image.style.display = 'inline';
|
|
});
|
|
if (classes.length == 1) {
|
|
cards_div.querySelectorAll('img:not(.' + classes[0] + ')')
|
|
.forEach(function(image) {
|
|
image.style.display = 'none';
|
|
});
|
|
} else if (classes.length == 2) {
|
|
cards_div.querySelectorAll('img')
|
|
.forEach(function(image) {
|
|
if (!classes.reduce(
|
|
function(show_this, cls) {
|
|
return show_this && image.classList.contains(cls);
|
|
},
|
|
true)) {
|
|
image.style.display = 'none';
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|