iiaky.github.io/CharacterSelect.js at master · iiaky/iiaky.github.io · 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
class CharacterSelect {
    constructor( {onComplete}) {
        this.onComplete = onComplete;
    }

    createElement() {
        this.element = document.createElement("div");
        this.element.classList.add("wrapper");
        this.element.innerHTML = (`
            <h3>Select your character!</h3>

            <div class = character-select>
                <div class = "character-wrapper">
                    <div class = "character" id = "average-cute-blob">
                        <img src = "${'images/characters/average cute blob.png'}"/>
                    </div>
                    <p>average cute blob</p>
                    <div class="desc">
                        <p>◦ your average cute blob</p>
                        <p>◦ very squish, +10 squish points</p>
                    </div>
                </div>

                <div class = "character-wrapper">
                    <div class = "character" id = "plant-blob">
                        <img src = "${'images/characters/plant blob.png'}"/>
                    </div>
                    <p>plant blob</p>
                    <div class="desc">
                        <p>◦ eats sun</p>
                        <p>◦ wash before consumption</p>
                    </div>
                </div>

                <div class = "character-wrapper">
                    <div class = "character" id = "bread-blob">
                        <img src = "${'images/characters/bread blob.png'}"/>
                    </div>
                    <p>bread blob</p>
                    <div class="desc">
                        <p>◦ average milk bread enjoyer</p>
                        <p>◦ nom nom :3</p>
                    </div>
                </div>
            </div>
        `)
    }

    done() {
        this.element.remove();
        this.onComplete();
    }

    checkSelect() {
        const characters = document.querySelectorAll(".character");
        characters.forEach( element => element.addEventListener("click", event => {
            utils.user.src = event.target.getAttribute('src');
            this.done();
        }, { once: true }))
    }

    init(container) {
        this.createElement();
        container.appendChild(this.element);
        this.checkSelect();
    }

}