<!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>