repl.it
@ThomasS1/

Name that tune

HTML, CSS, JS

No description

fork
loading
Files
  • index.html
  • archive
  • songs
  • exampleLeaderboard.js
  • script.js
  • style.css
index.html
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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html>
<head>
    <title>Name That Tune - @ThomasS1 - Repl Music Jam!</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/alasql/0.4.11/alasql.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tone/13.8.17/Tone.min.js"></script>
    <script src="script.js"></script>
    <script src="songs/tunes.js"></script>
    <script src="exampleLeaderboard.js"></script>

    <section id="onLoad">
    <div id="top">
        <h1 class="centered" style="padding-top: 5vh; font-size: 5vh;">NAME THAT TUNE</h1>
        <p class="centered" style="padding-top: 3vh; font-size: 2vh;">Scroll down for instructions.</p>
        <button class="centered" id="play" style="margin-top: 3.5vh; padding: 0.5vh" onClick="play()"><b>PLAY</b></button>
    </div>
    </section>

    <section id="playing" class="hidden">
    <div id="top">
        <h1 class="centered" style="padding-top: 5vh; font-size: 5vh;">NAME THAT TUNE</h1>
        <p class="centered" style="padding-top: 3vh; font-size: 2vh;">How many notes?</p>
        <div class="row">
            <div class="half">
                <p class="centered" id="notes" style="width: 6vh; padding: 1vh; border-radius: 50%; margin-top: 2vh; font-size: 3vh; background-color: white; color: steelblue; float: right; margin-right: 1vh">2</p>
            </div>
            <div class="half">
                <button id="addNote" class="centered" onClick="addNote()"><b>+ ADD NOTE</b></button>
            </div>
        </div>

        <p id="points" class="centered" style="padding-top: 2vh; font-size: 2vh;">Points available: 1000</p>

        <button class="centered" id="playTune" style="padding: 0.5vh; margin-top: 2vh;" onClick="playTune()"><b>PLAY TUNE</b></button>

        <input id="song" type="text" class="centered" placeholder="Enter song name..." style="margin-top: 5vh; width: 300px;"/>
        
        <input id="artist" type="text" class="centered" placeholder="Enter artist name..." style="margin-top: 1vh; width: 300px;"/>

        <button class="centered" id="submit" style="margin-top: 1.5vh; padding: 0.5vh;" onClick="submit()"><b>SUBMIT</b></button>

        <button class="hidden centered" id="next" style="margin-top: 1.5vh; padding: 0.5vh;" onClick="next()"><b>NEXT</b></button>

        <div id="score" class="centered">
            <p>SCORE: <span id="pointsScored">0</span> / <span id="pointsAvailable">0</span></p>
            <p style="margin-top: 1vh;">GLOBAL HIGHSCORE: coming soon...</p>
        </div>

        <button class="centered" id="saveScore" style="margin-top: 5vh; padding: 0.5vh; display: none" onClick="saveScore()"><b>SAVE SCORE TO LEADERBOARD</b></button>

    </div>
    </section>

    <section id="saveToLeaderboard" class="hidden">
    <div id="top">
        <h1 class="centered" style="padding-top: 5vh; font-size: 5vh;">NAME THAT TUNE</h1>
        <p class="centered" style="margin-top: 5vh">Well done! You scored <span id="insertScore"></span> points out of <span id="insertScoreAvailable"></span> available points. That's an accuracy of <span id="insertAccuracy"></span>%.</p>
        <p class="centered">Only your actual score will be saved.</p>
        <input style="margin-top: 5vh; width: 300px;" class="centered" id="nameForLeaderboard" type="text" placeholder="Enter name for leaderboard..."/>
        <button class="centered" onclick="saveToDatabase()" style="margin-top: 5vh; padding: 1vh;">SAVE TO LEADERBOARD</button>

        <div id="leaderboard" class="centered" style="margin-top: 5vh">
            <div class="row" id="leaderboardButtons">
                <button id="today" class="leaderboardButton third" onClick="fillLeaderboard(86400000)">TODAY</button>
                <button id="week" class="leaderboardButton third" onClick="fillLeaderboard(604800000)">WEEK</button>
                <button id="allTime" class="leaderboardButton third" onClick="fillLeaderboard(9999999999999)">ALL TIME</button>
            </div>

            <ol id="innerLeaderboard">
                <div class="row" id="1">
                    <div class="leftLeaderboard">
                        <p class="leftText" style="color: gold;"><p>
                    </div>
                    <div class="rightLeaderboard">
                        <p class="rightText" style="color: gold;"><p>
                    </div>
                </div>

                <div class="row" id="2">
                    <div class="leftLeaderboard">
                        <p class="leftText" style="color: silver;"><p>
                    </div>
                    <div class="rightLeaderboard">
                        <p class="rightText" style="color: silver;"><p>
                    </div>
                </div>

                <div class="row" id="3">
                    <div class="leftLeaderboard">
                        <p class="leftText" style="color: brown;"><p>
                    </div>
                    <div class="rightLeaderboard">
                        <p class="rightText" style="color: brown;"><p>
                    </div>
                </div>

                <div class="row" id="4">
                    <div class="leftLeaderboard">
                        <p class="leftText"><p>
                    </div>
                    <div class="rightLeaderboard">
                        <p class="rightText"><p>
                    </div>
                </div>

                <div class="row" id="5">
                    <div class="leftLeaderboard">
                        <p class="leftText"><p>
                    </div>
                    <div class="rightLeaderboard">
                        <p class="rightText"><p>
                    </div>
                </div>
            <ol>

        </div>

    </div>
    </section>

    <div id="instructions-title">
        <h2>INSTRUCTIONS</h2>
    </div>
    <div id="instructions">
        <p id="instructions-text">Welcome to Name That Tune. This website, made by <a href="https://repl.it/@ThomasS1">@ThomasS1</a> for repl.it's <a href="https://repl.it/jam">music game jam</a>, is named after the popular American TV show. I hope you like it - if you do, please upvote it here.</p>
        <p id="instructions-text" style="padding-top: 0vh">The aim of the game is to guess the song from as few notes as possible. You start with just two notes, but can add more if you're not sure. You get more points from less notes though! You can play as many rounds as you like, and your score is saved online if you enter a username and password.</p>
    </div>

    <div id="tunes-title">
        <h2>TUNES</h2>
    </div>
    <div id="tunes">
        <p id="tunes-text">
            There are currently <span id="tunesNumber"></span> different tunes to guess. You can see them all <a href="tunes.js">here</a>. Got ideas for more? Send a reply here with your ideas!
        </p>
    </div>

    <div id="feedback-title">
        <h2>FEEDBACK</h2>
    </div>
    <div id="feedback">
        <p id="feedback-text">
            Got feedback on the game? Got ideas for improvments? I'd love to hear - send your comments here and perhaps even leave an upvote. Thanks!
        </p>
    </div>

</body>
</html>
result
console