NT | 31 Mei 2020

Nieuwsoverzicht | 31 Mei 2020

by Evanlynn

HTML

<div style="position: relative; width: 940px; height: 550px; background: url(https://i.imgur.com/4EnuG28.jpg);">
<img src="https://i.imgur.com/RDlNrqz.png" style="position: absolute; pointer-events: none; z-index: 101;">
<div class="text_box" style="position: absolute; overflow: auto; width: 302px; height: 52px; left: 595px; top: 111px; text-align: justify; color: #8f6bb4; z-index: 102;">
<span style="display: block; margin-bottom: 4px;">Hee!</span>
Alweer een weekje is voorbij gevlogen. Looks in de memory game zijn van Aether, Amarynthia, Couture, Daynty, Gray, Literacity, Paris, SeventhHeaven, Tamimount en Yvie.
</div>
<div class="text_box" style="position: absolute; overflow: auto; width: 332px; height: 279px; left: 529px; top: 207px; text-align: justify; padding-right: 5px; box-sizing: border-box; color: #492b69; z-index: 102;">
Na problemen met de spammer  zijn er wat updates uitgevoerd. Admins kunnen nu alle plekken waar berichten kunnen worden geplaatst limiteren en niet alleen het forum. Daarnaast kregen we nog een extra update erbij: je kunt nu namelijk in je garderobe en in de winkel sorteren op sets. Meer informatie over deze update kun je vinden in de mail die je op 28 mei in je mailbox hebt ontvangen.<br><br>

Offline mogen we vanaf morgen wat meer in het openbare leven, coronamaatregelen worden weer wat versoepeld. Zo mogen terrassen weer open, eveneens als de horeca, bioscopen en musea, hoewel deze wel nog een limiet hebben van 30 bezoekers. De kans is ook groot dat je morgen weer vroeg onderweg bent naar school, want de scholen mogen ook weer open.<br><br>


Mocht je je nou vervelen, hieronder staat een overzichtje van alle content die afgelopen week op Virtual Popstar is verschenen. Je kunt daar nog even rustig naar kijken of je kunt hier links een spelletje memory doen.<br><br>

<b>ARTIKELEN |</b><br>
<a href="https://virtualpopstar.com/home/dailynews?x=read&id=6040" target="_blank">Ok, boomer</a> <i>door God</i><br>
<a...

CSS

.text_box {
  font-family: Arial, sans-serif;
  font-size: 11px;
}

.memoryContainer * {
  box-sizing: border-box;
}

.memoryContainer {
    position: relative;
    overflow: hidden;
    width: 413px;
    height: 452px;
    left: 79px;
    top: 49px;
}

.game-info-container {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  margin-top: -15px;
}

.game-info {
  font-family: 'Arial', sans-serif;
  color: #fff;
  font-size: 20px;
}

.game-container {
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-gap: 10px;
  margin: 50px;
  justify-content: center;
  perspective: 500px;
}

.card {
  position: relative;
  height: 60px;
  width: 90px;
}

.card:hover {
  cursor: pointer;
}

.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 12px;
  transition: transform 500ms ease-in-out;
  backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
}

.card.visible .card-back {
  transform: rotateY(-180deg);
  -webkit-backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
}

.card.visible .card-front {
  transform: rotateY(0);
}

.card.matched .card-value {
  animation: dance 1s linear 1 500ms;
}

.overlay-text {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  justify-content: center;
  align-items: center;
  z-index: 100;
  color: #8f6bb4;
  font-family: 'Patrick Hand SC', cursive;
  line-height: 60px;
  cursor: pointer;
}

.overlay-text-small {
  font-size: 20px;
  line-height: 20px;
  text-align: center;
  padding: 0px 50px;
  font-family: Arial, sans-serif;
  animation: overlay-grow-small 500ms forwards;
}

.overlay-text.visible {
  display: flex;
  flex-direction: column;
  animation: overlay-grow 500ms forwards;
}

@keyframes overlay-grow {
  from {
    background-color: rgba(255, 255, 255, 0);
    font-size: 0;
  }
  to {
    background-color: rgba(255,...

JavaScript

class Memory {
    constructor(totalTime, cards) {
        this.cardsArray = cards;
        this.totalTime = totalTime;
        this.timeRemaining = totalTime;
        this.timer = document.getElementById('time-remaining')
        this.ticker = document.getElementById('flips');
    }

    startGame() {
        this.totalClicks = 0;
        this.timeRemaining = this.totalTime;
        this.cardToCheck = null;
        this.matchedCards = [];
        this.busy = true;
        setTimeout(() => {
            this.shuffleCards(this.cardsArray);
            this.countdown = this.startCountdown();
            this.busy = false;
        }, 500);
        this.hideCards();
        this.timer.innerText = this.timeRemaining;
        this.ticker.innerText = this.totalClicks;
    }
    startCountdown() {
        return setInterval(() => {
            this.timeRemaining--;
            this.timer.innerText = this.timeRemaining;
            if(this.timeRemaining === 0)
                this.gameOver();
        }, 1000);
    }
    gameOver() {
        clearInterval(this.countdown);
        document.getElementById('game-over-text').classList.add('visible');
    }
    victory() {
        clearInterval(this.countdown);
        document.getElementById('victory-text').classList.add('visible');
    }
    hideCards() {
        this.cardsArray.forEach(card => {
            card.classList.remove('visible');
            card.classList.remove('matched');
        });
    }
    flipCard(card) {
        if(this.canFlipCard(card)) {
            this.totalClicks++;
            this.ticker.innerText = this.totalClicks;
            card.classList.add('visible');

            if(this.cardToCheck) {
                this.checkForCardMatch(card);
            } else {
                this.cardToCheck = card;
            }
        }
    }
    checkForCardMatch(card) {
        if(this.getCardType(card) === this.getCardType(this.cardToCheck))
            this.cardMatch(card, this.cardToCheck);
        else 
...