practise/lights-out.html at master · Samir70/practise · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lights Out with Vue and GSAP</title>
    <script src="resources/VueSource/vue.min.js"></script>
    <script src="resources/GSAP-minified/gsap.min.js"></script>
    <link rel="stylesheet" href="lights-out.css">
</head>

<body>
    <h1>Lights Out</h1>
    <h2>Click the lights to turn them on/off. But think it through!</h2>
    <p>The lights above, below, left and right of the one you click will also change</p>
    <div id="gameBoard">
        <div v-for="row in lights">
            <button v-for='light in row' v-bind:class='"test "+light.lightClass' v-on:click='lightClicked(light.id)'>
                {{light.lightStatus}}
            </button>
        </div>
        <p v-if="showCongrats">WELL DONE! YOU HAVE TURNED OFF ALL THE LIGHTS!!!!!</p>
        <button v-on:click="resetPos">Reset to start position</button>
        <p>To work on a randomly chosen challenge, just refresh!</p>
    </div>
    <script>
        const challenges = [
            // easy
            "0000000100011100010000000", "0000000100011000001100010", "0000000110011110111100110",
            "0000011011000001000111011", "0000010101101011010100000", "0000010001011100000011011",
            "0100011000001000001100010", "0101011111011101111101010", "0101011011000001101101010",
            "0111010001101011000101110", "0111010101110111010101110", "0000000000101010000000000",
            "0010001110000000111000100", "1100000100000100000100001", "0000000010011110111010000",
            // medium
            "1010100000101010000010101", "0101010001000001000101010", "0010000000101010000000100",
            "1111111111000001111111111", "0010000100110110010000100", "0000100010001000100010000",
            "1010110101000001010110101", "1111110001011101000111111", "0100010100010100010100010",
            "0011101011101011101011100", "0000000000101011000111011", "1111101110011101111111111",
            "0010000100000000010000100", "0000001010001000010000100", "0000000000110110000000000",
            // hard
            "0000001110011100111000000", "0000000101000001010000000", "0000100001000010000000000",
            "0000001010000000101000000", "0010001010101010101000100", "1000101010001000000000000",
            "1000101010000000101010001", "1111111111110111111111111", "1101111011110110111001110",
            "0011001000001000001001100", "0001000110001000110001000", "1000100000001000000000000",
            "0000000000001000000001010", "1000000000000000000000001", "0000010001000000000000000",
            "0000000010000000000000000", "0000000000001000000000000", "0000000000000000000011011"
        ];
        var startPos = Math.floor(Math.random() * challenges.length);
        var lightArray = challenges[startPos].split('').map(x => x === '1' ? true : false);
        const convertLights = (arr) => arr.map((x, i) => x ?
            { lightStatus: 'ON', lightClass: 'light key' + i + ' lightOn', id: i }
            : { lightStatus: 'OFF', lightClass: 'light key' + i + ' lightOff', id: i }
        );
        // chunk will assume an array of length 25 for a 5x5 board
        const chunkLights = (arr) => {
            var temp = [], copy = [...arr];
            while (copy.length > 0) { temp.push(copy.splice(0, 5)) }
            return temp;
        }
        var lights = chunkLights(convertLights(lightArray));
        var lightsOut = new Vue({
            el: "#gameBoard",
            data: { lights, showCongrats: false },
            methods: {
                lightClicked: function (id) {
                    const lightsToChange = [
                        // itself, above, below, left and right
                        id,
                        id > 4 && id - 5,
                        id < 20 && id + 5,
                        (id % 5 !== 0) && id - 1,
                        (id % 5 !== 4) && id + 1
                    ].filter(x => x !== false);
                    var message = 'You clicked ' + id + ' and I changed buttons ' + lightsToChange;
                    console.log(message);
                    for (var i of lightsToChange) {
                        gsap.from('.key' + i, { duration: 0.5, rotate: 90 })
                        lightArray[i] = !lightArray[i];
                    };
                    this.lights = chunkLights(convertLights(lightArray));
                    if (!lightArray.includes(true)) {
                        this.showCongrats = true;
                        gsap.to('.light', {
                            duration: 1,
                            margin: "5px", opacity: 0.5,
                            ease: "bounce",
                            onComplete: function () { gsap.to('.light', { duration: 0.5, margin: "0px", opacity: 1, ease: "bounce" }) }
                        })
                    } else {
                        this.showCongrats = false;
                    }
                },
                resetPos: function () {
                    // directly setting the value of lightArray didn't seem to have any effect
                    var t = challenges[startPos].split('').map(x => x === '1' ? true : false);
                    for (var i = 0; i < 25; i++) { lightArray[i] = t[i] }
                    this.lights = chunkLights(convertLights(lightArray));
                }
            }
        })
    </script>
    <script>
        gsap.from('.light', {
            duration: 1.5,
            scale: 0.1, rotate: 360,
            x: 50, y: 50,
            stagger: { amount: 0.5, grid: "auto", from: "center" },
            ease: "bounce"
        })
    </script>
</body>

</html>