Welcome to CODEBOX! (Copy 1423) (Copy 1429)

✨ Tawan Thirawee

<!DOCTYPE html>
<html>

<body>
    <style>
        @font-face {
            font-family: "PixelSplitter";
            src: url("//db.onlinewebfonts.com/t/03d72a0482b2bc12a4f8ab59354fd4af.eot");
            src: url("//db.onlinewebfonts.com/t/03d72a0482b2bc12a4f8ab59354fd4af.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/03d72a0482b2bc12a4f8ab59354fd4af.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/03d72a0482b2bc12a4f8ab59354fd4af.woff") format("woff"), url("//db.onlinewebfonts.com/t/03d72a0482b2bc12a4f8ab59354fd4af.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/03d72a0482b2bc12a4f8ab59354fd4af.svg#PixelSplitter") format("svg");
        }
        
        *,
        *:before,
        *:after {
            box-sizing: border-box;
        }
        
        body {
            padding: 1rem;
            margin-bottom: 0px;
            max-height: 100%;
            border: 0.5rem dashed;
            background-image: url(https://wallpaperaccess.com/full/2825710.gif);
            background-size: auto;
            color: #FFF;
            text-align: center;
            font-family: "PixelSplitter", -apple-system, BlinkMacSystemFont, "PixelSplitter", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "PixelSplitter", Helvetica, Arial, sans-serif;
        }
        
        h1 {
            margin: 0;
            font-weight: 400;
            font-family: "PixelSplitter", sans-serif;
        }
        
        p {
            font-family: "PixelSplitter", sans-serif;
            font-weight: 300;
            margin: 0 0 1.5rem;
        }
        
        .t svg {
            display: block;
        }
        
        .t use {
            transition: 0.5s;
        }
        
        .t:not(.revealed) use {
            fill: #FFF;
        }
        
        use {
            stroke: #020C6A;
        }
        
        .revealed use {
            stroke: transparent;
        }
        
        .board {
            max-width: 75vh;
            margin: 0 auto;
            display: grid;
            grid-gap: 0.5rem;
            grid-template-columns: repeat(4, 1fr);
            grid-auto-rows: 1fr;
        }
        
        .t {
            border: 7px dashed;
            width: 150px;
            height: 200px;
            color: #FFF;
            display: flex;
            align-items: center;
            background: rgb(0, 34, 51);
        }
        
        .revealed {
            background: #FF9393;
            border-color: #FFF;
        }
        
        .t .bt-1 {
            transform: translate(0, 0);
        }
        
        .t .bt-2 {
            transform: translate(0, 0) scale(-1, 1) rotate(90deg);
        }
        
        .t .st-1 {
            transform: translate(25px, 75px) scale(0.5, 0.5) rotate(-90deg);
        }
        
        .t .mt {
            transform: translate(100px, 49.5px) scale(0.7142, 0.7142) rotate(45deg);
        }
        
        .t .st-2 {
            transform: translate(100px, 50px) scale(0.5, 0.5) rotate(-180deg);
        }
        
        .tcat.revealed svg {
            transform: translate(0, 8px);
        }
        
        .tcat.revealed .bt-1 {
            transform: translate(12.5px, 10px);
            fill: #3d3d3d;
        }
        
        .tcat.revealed .bt-2 {
            transform: translate(-8.5px, 130px) scale(-1, 1) rotate(135deg);
            fill: #666;
        }
        
        .tcat.revealed .st-1 {
            transform: translate(25px, 0px) scale(0.5, 0.5) rotate(180deg);
        }
        
        .tcat.revealed .st-2 {
            transform: translate(-25px, -50px) scale(0.5, 0.5) rotate(0deg);
        }
        
        .tcat.revealed .st-1,
        .tcat.revealed .st-2 {
            fill: #ffe6c5;
        }
        
        .tcat.revealed .mt {
            transform: translate(12.5px, 12.5px) scale(-0.7142, 0.7142) rotate(0deg);
        }
        
        .tcat.revealed .mt,
        .tcat.revealed .rh {
            fill: #ccc;
        }
        
        .tcat.revealed .sq {
            transform: translate(-75px, -50px);
            fill: #303030;
        }
        
        .tcat.revealed .rh {
            transform: translate(133px, 200px) scale(1, -1) rotate(45deg);
        }
        
        .tsquirrel.revealed svg {
            transform: translate(0, 12px);
        }
        
        .tsquirrel.revealed .bt-1 {
            transform: translate(12.5px, -12.5px);
            fill: #6b3010;
        }
        
        .tsquirrel.revealed .bt-2 {
            transform: translate(-8.5px, 108.5px) scale(-1, 1) rotate(135deg);
            fill: #7f381c;
        }
        
        .tsquirrel.revealed .st-1 {
            transform: translate(12.5px, 87.5px) scale(0.5, 0.5) rotate(180deg);
        }
        
        .tsquirrel.revealed .st-2 {
            transform: translate(97.5px, 108.5px) scale(0.5, 0.5) rotate(135deg);
        }
        
        .tsquirrel.revealed .mt {
            transform: translate(12.5px, -35px) scale(0.7142, 0.7142) rotate(45deg);
        }
        
        .tsquirrel.revealed .sq {
            transform: translate(22.5px, -16.5px);
            fill: #e6e6e6;
        }
        
        .tsquirrel.revealed .rh {
            transform: translate(172.5px, 33.25px) scale(1, 1) rotate(90deg);
            fill: #7f381c;
        }
        
        .tsquirrel.revealed .st-1,
        .tsquirrel.revealed .st-2,
        .tsquirrel.revealed .mt {
            fill: #8c6239;
        }
        
        .theart.revealed .bt-1 {
            transform: translate(-25px, 50px) rotate(-90deg);
            fill: #d4145a;
        }
        
        .theart.revealed .bt-2 {
            transform: translate(25px, 50px) scale(-1, 1) rotate(90deg);
            fill: #c1272d;
        }
        
        .theart.revealed .st-1 {
            transform: translate(50px, 25px) scale(0.5, 0.5) rotate(-90deg);
            fill: #9e005d;
        }
        
        .theart.revealed .st-2 {
            transform: translate(25px, 50px) scale(0.5, 0.5) rotate(0deg);
            fill: #d91119;
        }
        
        .theart.revealed .mt {
            transform: translate(-25px, 50px) scale(0.7142, 0.7142) rotate(-45deg);
            fill: #ed1c24;
        }
        
        .theart.revealed .sq {
            transform: translate(-25px, 50px);
            fill: #c5282e;
        }
        
        .theart.revealed .rh {
            transform: translate(50px, 125px) scale(1, -1) rotate(0deg);
            fill: #d4145a;
        }
        
        .trocket.revealed .bt-1 {
            transform: translate(75px, 75px) rotate(-180deg);
            fill: #ed1c24;
        }
        
        .trocket.revealed .bt-2 {
            transform: translate(75px, 75px) scale(-1, 1) rotate(180deg);
            fill: #c1272d;
        }
        
        .trocket.revealed .st-1 {
            transform: translate(-37.5px, 62.5px) scale(0.5, 0.5) rotate(-90deg);
            fill: #fbb03b;
        }
        
        .trocket.revealed .st-2 {
            transform: translate(37.5px, 37.5px) scale(0.5, 0.5) rotate(90deg);
            fill: #bdccd4;
        }
        
        .trocket.revealed .mt {
            transform: translate(125px, 25px) scale(-0.7142, 0.7142) rotate(-135deg);
            fill: #e6e6e6;
        }
        
        .trocket.revealed .sq {
            transform: translate(-37.5px, 12.5px);
            fill: #4d4d4d;
        }
        
        .trocket.revealed .rh {
            transform: translate(137px, 137px) scale(1, -1) rotate(90deg);
            fill: #fbb03b;
        }
        
        .tbird.revealed .bt-1 {
            transform: translate(72.5px, -25px) rotate(45deg);
            fill: #d5abd8;
        }
        
        .tbird.revealed .bt-2 {
            transform: translate(72.5px, 45.5px) scale(1, 1) rotate(-135deg);
            fill: #d889db;
        }
        
        .tbird.revealed .st-1 {
            transform: translate(1.5px, 45.5px) scale(0.5, 0.5) rotate(-45deg);
            fill: #e6e6e6;
        }
        
        .tbird.revealed .st-2 {
            transform: translate(2px, -25px) scale(0.5, 0.5) rotate(45deg);
            fill: #fbb03b;
        }
        
        .tbird.revealed .mt {
            transform: translate(2px, -26px) scale(0.7142, 0.7142) rotate(0deg);
            fill: #d29e98;
        }
        
        .tbird.revealed .sq {
            transform: translate(36.5px, -25px) rotate(45deg);
            fill: #e6e6e6;
        }
        
        .tbird.revealed .rh {
            transform: translate(107px, 10px) scale(1, 1) rotate(45deg);
            fill: #f2b1b7;
        }
        
        .thome.revealed .bt-1 {
            transform: translate(25px, 66.5px) rotate(-90deg);
            fill: #d54d1d;
        }
        
        .thome.revealed .bt-2 {
            transform: translate(0px, 116.5px) scale(1, 1) rotate(-90deg);
            fill: #f8cc88;
        }
        
        .thome.revealed .st-1 {
            transform: translate(100px, 66.5px) scale(0.5, 0.5) rotate(90deg);
            fill: #fbe098;
        }
        
        .thome.revealed .st-2 {
            transform: translate(100px, 116.5px) scale(0.5, 0.5) rotate(180deg);
            fill: #f8cc88;
        }
        
        .thome.revealed .mt {
            transform: translate(50px, 66.5px) scale(-0.7142, 0.7142) rotate(-45deg);
            fill: #fbe098;
        }
        
        .thome.revealed .sq {
            transform: translate(25px, -75px) rotate(45deg);
            fill: #e6e6e6;
        }
        
        .thome.revealed .rh {
            transform: translate(61px, 137px) scale(1, -1) rotate(45deg);
            fill: #e9624e;
        }
        
        .tlotus.revealed .bt-1 {
            transform: translate(50px, 85.5px) rotate(135deg);
            fill: #cddc39;
        }
        
        .tlotus.revealed .bt-2 {
            transform: translate(121.5px, 14.5px) scale(1, 1) rotate(45deg);
            fill: #8bc34a;
        }
        
        .tlotus.revealed .st-1 {
            transform: translate(50px, 50px) scale(0.5, 0.5) rotate(135deg);
            fill: #d889db;
        }
        
        .tlotus.revealed .mt {
            transform: translate(86px, 50px) scale(0.7142, 0.7142) rotate(90deg);
            fill: #4caf50;
        }
        
        .tlotus.revealed .st-2 {
            transform: translate(50px, 50px) scale(-0.5, 0.5) rotate(135deg);
            fill: #f2b1b7;
        }
        
        .tlotus.revealed .sq {
            transform: translate(-25px, -25px);
            fill: #de5e87;
        }
        
        .tlotus.revealed .rh {
            transform: translate(121px, 14.5px) rotate(45deg);
            fill: #009688;
        }
        
        .tboat.revealed .bt-1 {
            transform: translate(50px, 12.5px) rotate(45deg);
            fill: #eee;
        }
        
        .tboat.revealed .bt-2 {
            transform: translate(50px, 0) scale(1, 1) rotate(0deg);
            fill: #ddd;
        }
        
        .tboat.revealed .st-1 {
            transform: translate(50px, 100px) scale(0.5, 0.5) rotate(-90deg);
            fill: #ededed;
        }
        
        .tboat.revealed .mt {
            transform: translate(100px, 100px) scale(0.7142, 0.7142) rotate(90deg);
            fill: #795548;
        }
        
        .tboat.revealed .st-2 {
            transform: translate(85px, 0px) scale(0.5, 0.5) rotate(135deg);
            fill: #d27373;
        }
        
        .tboat.revealed .sq {
            transform: translate(25px, 25px);
            fill: #c7c4c4;
        }
        
        .tboat.revealed .rh {
            transform: translate(64px, 29.5px) rotate(45deg);
            fill: #593f35;
        }
        
        .t {
            transition: opacity 0.75s 0.75s, background 0.5s;
            cursor: pointer;
            opacity: 1;
        }
        
        .hidden {
            transition-delay: 1.5s;
            animation-name: fade;
            animation-duration: 1.5s;
            cursor: auto;
            background-color: #9AFF93;
        }
        
        @keyframes fade {
            from {
                background-color: #FF9393;
            }
            to {
                background-color: #9AFF93;
            }
        }
        
        .stack {
            display: inline-block;
            font-size: 30px;
        }
        
        .times {
            display: inline-block;
            font-size: 20px;
            padding-left: 35%;
        }
        
        .data {
            text-align: left;
        }
        
        .swal-button {
            font-family: "PixelSplitter", sans-serif;
        }
    </style>

<h1>Open The Card!!!</h1>
    <p>Click cards and find matching tangrams</p>
    <div class="board" id="tangramgrid"></div>
    <svg style="display:none;" viewBox="0 0 100 100">
  <defs>
    <polygon id="tangram1" points="0 0, 50 50, 0 100" />
    <polygon id="tangram2" points="50 50, 75 25, 100 50, 75 75" />
    <polygon id="tangram3" points="0 100, 25 75, 75 75, 50 100"/>
  </defs>
	</svg>
    <div class="data">
        <div class="stack"><span class="moves" id="moves">0</span> Moves</div>
        <div class="times"><span id="tens">0</span> second(s)</div>
    </div>

function startTimer() {
            tens++;
            appendTens.innerHTML = tens;
        }

const classes = [
            'tcat',
            'tsquirrel',
            'theart',
            'trocket',
            'tbird',
            'thome',
            'tlotus',
            'tboat'
        ];

checkMatch() {
                count++;
                document.getElementById('moves').innerHTML = count
                return this.revealed.length === 2 && this.revealed[0].getAttribute('data-class') === this.revealed[1].getAttribute('data-class')
            }
            addCardListeners(el) {

el.addEventListener('mouseenter', (e) => {

if (el.classList.contains('revealed')) {
                        return
                    }
                    if (this.revealed.length < 2) {
                        return
                    }

Array.prototype.slice.call(this.revealed).forEach((item) => {
                        item.classList.remove('revealed')
                    })
                    this.revealed = []
                })

el.addEventListener('click', (e) => {

if (count == 0 && trigger == 0) {
                        Interval = setInterval(startTimer, 1000);
                        trigger++;
                    }
                    if (el.classList.contains('revealed')) {
                        return
                    }

el.classList.add('revealed');
                    this.revealed.push(el)
                    if (this.checkMatch()) {
                        Array.prototype.slice.call(this.revealed).forEach((item) => {
                            item.classList.add('hidden')
                            this.revealed = []
                        })
                        check++;
                    }
                    if (check == 8) {
                        clearInterval(Interval);
                        swal({
                            title: "Good job!",
                            text: "You click " + count + " time(s)" + "\nYour time was " + tens + " second(s)",
                            button: "Restart!"
                        }).then(function() {
                            tens = 0;
                            count = 0;
                            check = 0;
                            document.getElementById('moves').innerHTML = count;
                            document.getElementById("tens").innerHTML = 0;
                            memory = new MemoryGame(document.getElementById("tangramgrid"));
                        });
                    }

}, false);

};

}
        let memory = new MemoryGame(document.getElementById("tangramgrid"));
    </script>
</body>

</html>