Rewrite the Symbolon page
This commit is contained in:
338
symbolon/symbolon.html
Normal file
338
symbolon/symbolon.html
Normal file
@@ -0,0 +1,338 @@
|
||||
<!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="sagittraius">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="sagittraius">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>
|
||||
Reference in New Issue
Block a user