|
|
|
@ -9,7 +9,7 @@ function rand_in_range(from, to) { |
|
|
|
|
|
|
|
function shuffle_cards() { |
|
|
|
|
|
|
|
const cards = document.querySelectorAll('.card') |
|
|
|
const cards = document.querySelectorAll('.card__container') |
|
|
|
const card_ids = Array.from(cards).map(card => card.getAttribute('data-id')) |
|
|
|
let shown_cards = JSON.parse(localStorage.getItem('shown_cards')) || []; |
|
|
|
let cards_not_shown = card_ids.filter(id => !shown_cards.includes(id)); |
|
|
|
@ -21,10 +21,10 @@ function shuffle_cards() { |
|
|
|
const random_id = cards_not_shown[Math.floor(Math.random() * cards_not_shown.length)]; |
|
|
|
|
|
|
|
cards.forEach((card) => { |
|
|
|
if (card.getAttribute('data-id') == random_id) { |
|
|
|
card.classList.add('active') |
|
|
|
if (card.getAttribute('data-id') == random_id) { |
|
|
|
card.style.zIndex = '1' |
|
|
|
card.style.transform = `none` |
|
|
|
card.style.transform = '' |
|
|
|
card.classList.add('active') |
|
|
|
} else { |
|
|
|
card.classList.remove('active') |
|
|
|
card.style.zIndex = 'auto' |
|
|
|
@ -74,6 +74,13 @@ document.querySelectorAll('[data-share-title]').forEach((share_btn) => { |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
document.querySelectorAll('.card__stack a').forEach((card_link) => { |
|
|
|
card_link.addEventListener('click', (e) => { |
|
|
|
e.preventDefault() |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
// Open all external links in ny tab
|
|
|
|
for (const link of document.links) { |
|
|
|
if (link.hostname.replace(/^www\./i, "") != window.location.hostname.replace(/^www\./i, "") && (link.protocol == 'https:' || link.protocol == 'http:')) |
|
|
|
@ -82,7 +89,7 @@ for (const link of document.links) { |
|
|
|
|
|
|
|
|
|
|
|
const input_range = document.getElementsByClassName('reveal')[0] |
|
|
|
const max_value = 200 |
|
|
|
const max_value = 180 |
|
|
|
const speed = 12 |
|
|
|
|
|
|
|
var curr_value |
|
|
|
@ -103,7 +110,7 @@ function unlockEndHandler() { |
|
|
|
|
|
|
|
if (curr_value >= this.max) { |
|
|
|
|
|
|
|
const card = document.querySelector('.card.active') |
|
|
|
const card = document.querySelector('.card__container.active') |
|
|
|
window.location.href = card.parentNode.getAttribute('href') |
|
|
|
|
|
|
|
// reset
|
|
|
|
@ -118,7 +125,8 @@ function unlockEndHandler() { |
|
|
|
function animateHandler() { |
|
|
|
|
|
|
|
input_range.value = curr_value; |
|
|
|
input_range.closest('.reveal__container').style.setProperty('--opacity', 1 - (input_range.value/input_range.max)); |
|
|
|
input_range.closest('.reveal__container').style.setProperty('--opacity', 1 - (input_range.value/input_range.max)); |
|
|
|
updateRotation(input_range.value) |
|
|
|
|
|
|
|
// continue?
|
|
|
|
if (curr_value > -1) { |
|
|
|
@ -135,7 +143,35 @@ if (input_range) { |
|
|
|
input_range.addEventListener('mouseup', unlockEndHandler, false) |
|
|
|
input_range.addEventListener('touchend', unlockEndHandler, false) |
|
|
|
|
|
|
|
input_range.addEventListener("input", (e) => { |
|
|
|
input_range.addEventListener("input", (e) => { |
|
|
|
e.currentTarget.closest('.reveal__container').style.setProperty('--opacity', 1 - (e.currentTarget.value/e.currentTarget.max)) |
|
|
|
|
|
|
|
updateRotation(e.currentTarget.value) |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
function updateRotation(angle) { |
|
|
|
document.documentElement.style.setProperty('--flip-deg', angle + 'deg') |
|
|
|
|
|
|
|
document.documentElement.style.setProperty('--flip-scale', calculateScaleFactor(angle)) |
|
|
|
|
|
|
|
document.documentElement.style.setProperty('--flip-rotate', calculateRotateFactor(angle) + 'deg') |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
const random_salt = Math.random() |
|
|
|
|
|
|
|
function calculateScaleFactor(angle) { |
|
|
|
const radians = angle * (Math.PI / 180) |
|
|
|
return 1 + (0.1 * Math.sin(radians)) |
|
|
|
|
|
|
|
// return 1 + (0.2 * (angle / 180))
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function calculateRotateFactor(angle) { |
|
|
|
const radians = angle * (Math.PI / 180) |
|
|
|
return (4 * Math.sin(radians)) + (random_salt * 2) |
|
|
|
|
|
|
|
} |
