Danicker.github.io/leaderboards-content.html at main · Danicker/Danicker.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
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
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="general-style.css">
        <link rel="stylesheet" href="leaderboards.css">
    </head>
    <body>

        <!-- LOADING PAGE -->
        <div id="loading-page">
            <div>
                <div id="loading-text">LOADING...</div>
                <div id="loading-bar-container">
                    <div id="loading-bar"></div>
                </div>
            </div>
        </div>

        <!-- MAIN PAGE -->
        <div id="main-page">

            <h1>Custom Leaderboards</h1>

            <!-- Selectors -->
            <h3>Leaderboard type</h3>
            <div id="leaderboard-type-selector-container"></div>

            <div id="single-category-div">
                <h3>Category</h3>
                <div id="selection-container"></div>
            </div>

            <div id="multi-category-div" hidden="true">
                <h3>Category Group</h3>
                <div id="multi-category-div-inner">
                    <div>
                        <h4>Games</h4>
                        <div id="checkboxes-games" class="checkbox-column"></div>
                    </div>
                    <div>
                        <h4>Scope</h4>
                        <div id="checkboxes-scope" class="checkbox-column"></div>
                    </div>
                    <div>
                        <h4>Main Categories</h4>
                        <div id="checkboxes-categories-main" class="checkbox-column"></div>
                    </div>
                    <div>
                        <h4>Glitched Categories</h4>
                        <div id="checkboxes-categories-glitched" class="checkbox-column"></div>
                    </div>
                    <div hidden>
                        <h4>Multi WHG Categories</h4>
                        <div id="checkboxes-categories-multi" class="checkbox-column"></div>
                    </div>
                    <div hidden>
                        <h4>Category Extensions</h4>
                        <div id="checkboxes-categories-ext" class="checkbox-column"></div>
                    </div>
                </div>
            </div>

            <div id="other-options-div">
                <h3>Other Options</h3>
                <div id="other-options-div-inner">

                    <div>
                        <h4>Verification Status</h4>
                        <div id="checkboxes-status" class="checkbox-column"></div>
                    </div>

                    <div>
                        <h4>Date Achieved</h4>
                        <input type="date" id="date-start">
                        <span>to</span>
                        <br>
                        <input type="date" id="date-end">
                        <span>(inclusive)</span>
                        <br>
                    </div>
                </div>
            </div>

            <br>
            <button id="go-button">Generate</button>
            <button id="share-button">Copy Link</button>
            <button id="refresh-button">Refresh</button>
            <br>

            <!-- Graphics -->
            <div id="graphics-div">
                <h2>Graphics</h2>
                <div id="graphics-container">
                    <canvas id="graphics-canvas" width="0" height="0"></canvas>
                </div>
                <br>
            </div>

            <!-- Table -->
            <div id="leaderboard-div">
                <h2>Leaderboard</h2>
                <div id="table-container"></div>
                <br>
            </div>

            <!-- Info -->
            <h2>How to use</h2>
            This search tool uses data from <a target="_blank" href="https://speedrun.com">speedrun.com</a> to generate custom leaderboards according to various parameters which you can control. There are four leaderboard types:
            <ul>
                <li><b>Normal Leaderboard:</b> Sorts runs by lowest time, if multiple categories are selected then still sorts by lowest time, including each players' personal best for each category.</li>
                <li><b>Sum of Best:</b> Sorts by the sum of a player's best times for a set of categories. Note that transition times between levels in TWHG1 and TWHG2 are factored into the calculations of these sums.</li>
                <li><b>Medal Counts:</b> Sorts by WRs, 2nds and 3rds achieved by each player in a given set of categories. Note that 4ths, 5ths, etc. are also considered in the rankings but not displayed. Note that some columns may add up to more than the number of categories due to WR ties.</li>
                <li><b>Recent Runs:</b> Sorts runs by most recent. Obsolete runs are included. Useful for seeing the history of a particular category or set of categories</li>
            </ul>
            Leaderboards can be generated for a single category or set of categories:
            <ul>
                <li><b>Single Category:</b> Allows you to select a single category by specifying the game, level (if applicable), category and subcategories (if applicable).</li>
                <li><b>Multiple Categories:</b> Allows you to select a set of categories. You can include level runs, full-game runs or both. Note that glitchless leaderboards are considered to fall under the "glitched" category where no specific leaderboard for glitched runs exists. Similarly, TWHG1 runs are considered to be "Any%" and "100%", TWHG2 runs are considered "Any%" while TWHG2.1 runs are considered "100%". The reason for these allocations is to align with multiwhg categories.</li>
            </ul>
            Other options include:
            <ul>
                <li><b>Verification Status:</b> Unlike my previous leaderboard designs, you can now view runs that have not been verified. This is useful if you want to see what the leaderboard will look like once all pending runs are verified. To do this, simply tick the "unverified" box. Be warned that unverified runs are frequently illegitimate or inaccurate so leaderboards generated this way are not reliable. Also, there is the option to include rejected runs... if you have some reason to do so.</li>
                <li><b>Date Range:</b> You have the option to set a date range. Only runs within the date range will be considered when the leaderboard is generated. This is useful for seeing what a leaderboard looked like at some point in the past, or analysing the community activity within a certain window of time.</li>
            </ul>
            Buttons:
            <ul>
                <li>Click the <b>Generate</b> button to generate the leaderboard.</li>
                <li>Click the <b>Copy Link</b> button to copy a link to your leaderboard. This link contains all the information about your search parameters and can be shared with others.</li>
                <li>Click the <b>Refresh</b> button to refresh the leaderboard with the current parameters. Refresh the page if you wish to revert to the leaderboard contained in the url. Click "Custom Leaderboards" in the side navigation if you wish to completely reset the leaderboard to default parameters.</li>
            </ul>
            <p>Any bugs or suggestions please contact Danicker on discord.</p>
            <br>
            <p><note>The speedrun.com API documentation can be found <a target="_blank" href="https://github.com/speedruncomorg/api">here</a>.</note></p>
            <br>
        </div>

        <script src="leaderboards.js"></script>
    </body>
</html>