sans/script.js at main · Dipwr/sans · 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
let snd = new Audio("media/audio/slash.wav");
let snd2 = new Audio("media/audio/select-short.wav");

const images = [
    "media/images/slash/frame_0_delay-0.13s.png", "media/images/slash/frame_1_delay-0.13s.png",
    "media/images/slash/frame_2_delay-0.13s.png", "media/images/slash/frame_3_delay-0.13s.png",
    "media/images/slash/frame_4_delay-0.13s.png", "media/images/slash/frame_5_delay-0.13s.png",
    "media/images/slash/frame_6_delay-0.13s.png"
];

//on click animation code found on: https://stackoverflow.com/questions/4847996/css-animation-onclick
function titleAni() {
    let element = document.getElementById("titleImage")
    element.classList.remove('titleAni'); // reset animation
    void element.offsetWidth; // trigger reflow
    element.classList.add('titleAni'); // start animation
}

//Frame by frame animation code modified from https://www.geeksforgeeks.org/how-to-create-frame-by-frame-animation-using-css-and-javascript/
let x = 0;
let id;
function startAnimation() {
    x = 0;
    titleAni()
    clearInterval(id);
    id = setInterval("Animate()", 130);
    document.getElementById("slash").style.display = "block";
    snd.play();
}

function Animate() {
    if (images.length != x){
        document.getElementById("slash").src = images[x]
        x++;
    }else{
        document.getElementById("slash").style.display = "none";
        clearInterval(id);
    }
}


function buttonClick(href) {
    snd2.onended = function() {
        window.location.href = href;
    };
    snd2.play();
}

function convertMonth(month){
    switch (month) {
        case '01':
            return "Jan";
        case '02':
            return "Feb";
        case '03':
            return "Mar";
        case '04':
            return "Apr";
        case '05':
            return "May";
        case '06':
            return "June";
        case '07':
            return "July";
        case '08':
            return "Aug";
        case '09':
            return "Sept";
        case '10':
            return "Oct";
        case '11':
            return "Nov";
        case '12':
            return "Dec";
    }
}

function convertDate(date) {
    let year = date.slice(0,4);
    let month = convertMonth(date.slice(5,7));
    let day = date.slice(8,10)
    let time = date.slice(11,19)

    return month + ' ' + day + ' ' + time + " (UCT) " + year;
}

//api request using fetch from: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
async function getData() {
    const url = "https://api.github.com/repos/Dipwr/sans/commits/main";
    try {
      const response = await fetch(url);
      if (!response.ok) {
        throw new Error(`Response status: ${response.status}`);
      }

      const json = await response.json();
      document.getElementById("modified").innerHTML = "Last modified: " + convertDate(json.commit.author.date);
    } catch (error) {
      console.error(error.message);
    }


}

getData()