smiley/script.js at main · leannebiju/smiley · 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
115
116
117
118
119
120
121
122
123
124
document.addEventListener("DOMContentLoaded", () => { loadSVG("neutral.svg");});

let isSmiling = false;

function loadSVG(filename, callback)
{
    fetch(filename)
        .then(response => response.text())
        .then(svgData =>
        {
            document.getElementById("svgContainer").innerHTML = svgData;
            if (callback) callback();
        })
        .catch(error => console.error("Error loading SVG:", error));
}

function animateSmile()
{
    let svg = document.querySelector("#svgContainer svg");
    let mouth = svg.querySelector("#Rectangle\\ 3");

    if (!mouth) {
        console.error("Mouth not found!");
        return;
    }

    let originalX = parseInt(mouth.getAttribute("x")) || 40;
    let originalY = parseInt(mouth.getAttribute("y")) || 70;

    let steps = [
        () => mouth.setAttribute("width", "30"),
        () => {
            mouth.setAttribute("width", "20");
            mouth.setAttribute("x", originalX + 10);
        },
        () => {
            let leftPixel = document.createElementNS("http://www.w3.org/2000/svg", "rect");
            leftPixel.setAttribute("width", "10");
            leftPixel.setAttribute("height", "10");
            leftPixel.setAttribute("fill", "black");
            leftPixel.setAttribute("x", originalX);
            leftPixel.setAttribute("y", originalY);
            leftPixel.setAttribute("id", "leftCorner");
            svg.appendChild(leftPixel);
        },
        () => {
            let rightPixel = document.createElementNS("http://www.w3.org/2000/svg", "rect");
            rightPixel.setAttribute("width", "10");
            rightPixel.setAttribute("height", "10");
            rightPixel.setAttribute("fill", "black");
            rightPixel.setAttribute("x", originalX + 30);
            rightPixel.setAttribute("y", originalY);
            rightPixel.setAttribute("id", "rightCorner");
            svg.appendChild(rightPixel);
        },
        () => mouth.setAttribute("y", originalY + 5)
    ];

    let stepIndex = 0;

    function nextStep() {
        if (stepIndex < steps.length) {
            steps[stepIndex]();
            stepIndex++;
            setTimeout(nextStep, 200);
        }
    }

    nextStep();
}

function animateNeutral() {
    let svg = document.querySelector("#svgContainer svg");
    let mouth = svg.querySelector("#Rectangle\\ 3");
    let leftPixel = svg.querySelector("#leftCorner");
    let rightPixel = svg.querySelector("#rightCorner");

    if (!mouth) {
        console.error("Mouth not found!");
        return;
    }

    let originalX = 40;
    let originalY = 70;

    let steps = [
        () => mouth.setAttribute("y", originalY - 5),
        () => {
            if (rightPixel) rightPixel.remove();
            if (leftPixel) leftPixel.remove();
        },
        () => {
            mouth.setAttribute("width", "20");
            mouth.setAttribute("x", originalX + 10);
        },
        () => {
            mouth.setAttribute("width", "40");
            mouth.setAttribute("x", originalX);
        }
    ];

    let stepIndex = 0;

    function nextStep() {
        if (stepIndex < steps.length) {
            steps[stepIndex]();
            stepIndex++;
            setTimeout(nextStep, 200);
        }
    }

    nextStep();
}

function toggleSmile() {
    if (isSmiling) {
        animateNeutral();
        document.getElementById("toggleButton").textContent = "Make Me Smile!";
    } else {
        animateSmile();
        document.getElementById("toggleButton").textContent = "Make Me Neutral!";
    }
    isSmiling = !isSmiling;
}