{ tabs.querySelector(".vibebp_tab_titles > label").classList.add('active'); tabs.querySelector('.'+document.querySelector(".vibebp_tab_titles > label").getAttribute('for')).classList.add('show'); tabs.querySelectorAll(".vibebp_tab_titles > label").forEach(function(el){ el.addEventListener('click',function(){ tabs.querySelector(".vibebp_tab_titles > label.active").classList.remove('active'); el.classList.add('active'); tabs.querySelector('.vibebp_tab_content.show').classList.remove('show'); tabs.querySelector('.'+el.getAttribute('for')).classList.add('show'); }) }); }); //SCRATCH CARD START document.querySelectorAll(".scratcardContainer>canvas.scratchcard").forEach((scratchcard)=>{ let scratchcardCanvas = scratchcard.getContext('2d'); let img = new Image(); let brushRadius = 20; let imageObject = pathNameGetFromImage(scratchcard.getAttribute('front-image')); img.loc = imageObject.path; img.filename = imageObject.name; img.src = img.loc + img.filename; img.onload = function(){ console.log('image laoded'); scratchcardCanvas.drawImage(img, 0, 0, scratchcard.width, scratchcard.height); scratchcard.style.display = "block"; } function detectLeftButton(event) { if ('buttons' in event) { return event.buttons === 1; } else if ('which' in event) { return event.which === 1; } else { return event.button === 1; } } function getBrushPos(xRef, yRef) { var scratchcardRect = scratchcard.getBoundingClientRect(); return { x: Math.floor((xRef-scratchcardRect.left)/(scratchcardRect.right-scratchcardRect.left)*scratchcard.width), y: Math.floor((yRef-scratchcardRect.top)/(scratchcardRect.bottom-scratchcardRect.top)*scratchcard.height) }; } function drawDot(mouseX,mouseY){ scratchcardCanvas.beginPath(); scratchcardCanvas.arc(mouseX, mouseY, brushRadius, 0, 2*Math.PI, true); scratchcardCanvas.fillStyle = '#000'; scratchcardCanvas.globalCompositeOperation = "destination-out"; scratchcardCanvas.fill(); } scratchcard.addEventListener("mousemove", function(e) { var brushPos = getBrushPos(e.clientX, e.clientY); var leftBut = detectLeftButton(e); if (leftBut == 1) { drawDot(brushPos.x, brushPos.y); } }, false); scratchcard.addEventListener("touchmove", function(e) { e.preventDefault(); var touch = e.targetTouches[0]; if (touch) { var brushPos = getBrushPos(touch.pageX, touch.pageY); drawDot(brushPos.x, brushPos.y); } }, false); }); function pathNameGetFromImage(str){ const regex = /[^/\\&\?]+\.\w{3,4}(?=([\?&].*$|$))/g; let m; let ImageObj = { 'path':'', 'name':'' } while ((m = regex.exec(str)) !== null) { if (m.index === regex.lastIndex) { regex.lastIndex++; } m.forEach((match, groupIndex) => { if(groupIndex == 0 && match.length){ ImageObj.path = str.split(match)[0]; ImageObj.name = match; } }); } return ImageObj; } //SCRATCH CARD END //Image Revealer Start document.querySelectorAll('.cocoen').forEach(function(element){ new Cocoen(element); }); //Image Revealer End //Memory Game Start class MemoryGame { constructor(jsCard) { this.solved = false; this.duration = 1000; this.cardsContainer = jsCard; this.cards = Array.from(this.cardsContainer.children); } shuffleCards() { this.cards.forEach(card => { const randomNumber = Math.floor(Math.random() * this.cards.length) + 1; card.classList.remove('has-match'); setTimeout(() => { card.style.order = `${randomNumber}`; }, 400); }) } checkAllCards() { if (!this.cards.every(card => card.classList.contains('has-match'))) { return; }else{ if(!this.solved){ this.cardsContainer.insertAdjacentHTML("afterend", ""); } this.solved = true; let reloadButton = this.cardsContainer.parentElement.children[1]; let $this = this; $this.cardsContainer.style.opacity = 0.5; reloadButton.style.display = "block"; reloadButton.addEventListener('click',function(){ $this.shuffleCards(); reloadButton.style.display = "none"; $this.cardsContainer.style.opacity = 1; }); } if(!this.solved){ setTimeout(() => { this.shuffleCards(); }, this.duration); } } stopEvent() { this.cardsContainer.classList.add('no-event'); setTimeout(() => { this.cardsContainer.classList.remove('no-event'); }, this.duration); } checkIfMatched(firstCard, secondCard) { if (firstCard.dataset.card === secondCard.dataset.card) { firstCard.classList.remove('flipped'); secondCard.classList.remove('flipped'); firstCard.classList.add('has-match'); secondCard.classList.add('has-match'); this.checkAllCards(); } else { setTimeout(() => { firstCard.classList.remove('flipped'); secondCard.classList.remove('flipped'); }, this.duration); } } flip(selectedCard) { selectedCard.classList.add('flipped'); const flippedCards = this.cards.filter(card => card.classList.contains('flipped')); if (flippedCards.length === 2) { this.stopEvent(); this.checkIfMatched(flippedCards[0], flippedCards[1]); } } } document.querySelectorAll('.memorygame__cards.js-cards').forEach((jsCard)=>{ const memorygame = new MemoryGame(jsCard); memorygame.cards.forEach(card => { card.addEventListener('click', memorygame.flip.bind(memorygame, card)); }); }) //Memory Game End //CardStack start { var clickeventtype = 'click'; (function() { let types = ['yuda','krisna','wangi','wira','utari','cinta','eka','dian','iman','iskandar','kasih','buana','mawar']; types.map((type)=>{ document.querySelectorAll(`.cardstack_${type}`).forEach((elm)=>{ if(elm){ let stackElm = null; switch (type) { case 'yuda': case 'krisna': case 'wangi': case 'wira': case 'utari': stackElm = new Stack(elm); break; case 'cinta': stackElm = new Stack(elm, { perspective: 1400, perspectiveOrigin: '200% -100%', visible: 6, infinite: false, onEndStack: function(instance) { setTimeout(function() { instance.restart(); }, 300); } }); break; case 'eka': stackElm = new Stack(elm, { cardstackItemsAnimation : { duration: 800, type: dynamics.spring } }); break; case 'dian': stackElm = new Stack(elm, { cardstackItemsAnimationDelay : 100, cardstackItemsAnimation : { duration: 800, type: dynamics.spring, }, visible: 1, perspectiveOrigin: '50% 50%' }); break; case 'iman': stackElm = new Stack(elm, { cardstackItemsAnimation : { duration: 800, type: dynamics.spring }, cardstackItemsPreAnimation : { accept : { elastic: true, animationProperties: {translateX : 100, translateY : 10, rotateZ: 5}, animationSettings: { duration: 100, type: dynamics.easeIn } }, reject : { elastic: true, animationProperties: {translateX : -100, translateY : 10, rotateZ: -5}, animationSettings: { duration: 100, type: dynamics.easeIn } } } }); break; case 'iskandar': stackElm = new Stack(elm, { cardstackItemsAnimation : { duration: 800, type: dynamics.spring }, perspectiveOrigin : '50% 130%', visible: 5, cardstackItemsPreAnimation : { accept : { elastic: true, animationProperties: {translateX : 150, translateY : -10}, animationSettings: { duration: 200, type: dynamics.easeOut } } } }); break; case 'kasih': stackElm = new Stack(elm, { cardstackItemsAnimation : { duration: 1300, type: dynamics.spring, friction: 420, }, visible: 4, perspectiveOrigin : '50% 50%', cardstackItemsPreAnimation : { accept : { elastic: true, animationProperties: {translateX : 250}, animationSettings: { duration: 400, type: dynamics.easeIn } }, reject : { elastic: true, animationProperties: {translateX : -250}, animationSettings: { duration: 400, type: dynamics.easeIn } } } }); break; case 'buana': stackElm = new Stack(elm, { perspectiveOrigin : '-50% -50%' }); break; case 'mawar': stackElm = new Stack(elm, { perspective : 1500, perspectiveOrigin : '-150% 50%', visible: 4, cardstackItemsAnimation : { duration: 1300, type: dynamics.spring }, cardstackItemsPreAnimation : { accept : { elastic: true, animationProperties: {translateX : 100}, animationSettings: { duration: 200, type: dynamics.easeIn } }, reject : { elastic: true, animationProperties: {translateX : -100}, animationSettings: { duration: 200, type: dynamics.easeIn } } } }); break; default: stackElm = new Stack(elm); break; } if(stackElm){ elm.addEventListener(clickeventtype, function() { stackElm.accept(); }); } } }) }); })(); } //CardStack end },500); },false); Para termos uma noção de o quanto este modulo foi útil para você" >

Chegou a hora de avaliar o conteúdo do módulo: A importância de ser superavitário