gergelypolonkai-web-jekyll/content/symbolon/index.html

341 lines
13 KiB
HTML
Raw Normal View History

2018-08-13 10:41:39 +00:00
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="date" content="2015-01-12T12:34Z">
<meta name="save_as" content="symbolon/index.html">
2018-08-13 10:41:39 +00:00
<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>
2019-02-10 09:18:33 +00:00
<option value="sagittarius">Nyilas</option>
2018-08-13 10:41:39 +00:00
<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>
2019-02-10 09:18:33 +00:00
<option value="sagittarius">Nyilas</option>
2018-08-13 10:41:39 +00:00
<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">&times;</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">&times;</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>