crossword/topplayers.html at main · jmahin/crossword · 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
<!DOCTYPE html>
<html lang="en">
<html>

    <head>
        <title>Learn a language with crosswords!</title>
        <link rel="stylesheet" type="text/css" href="styles/style.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Space+Grotesk">
        <script defer src="scripts/scripts.js"></script>
    </head>
<body>

    <section class="layout">
        <div class="sidebar">
            <h1>Crxssword</h1>
            <a href="index.html">Home</a><br>
            <a href="login.html">Login</a><br>
            <a href="signup.html">Sign Up</a><br>
            <a href="topplayers.html">Top Player List</a>

            <!-- Add Javascript f(x) to re-open sidebar -->
            <!-- When sidebar is collapsed, need to reduce width of contents within content -->
            <p align="center">
                <button onclick="hideSide()"> Click to hide the sidebar!</button>
            </p>
        </div>
        <div class="content">

            <!-- Use javascript (insertRow(tableRef. rows. length);) to add row to table. Need an API endpoint for this.

            Need to use player initials instead of full name. Use splice to remove all but first index.

            Need to sort top users by recent activity (weekly?) and points. Where points are equal, devolve to first
            initial.

            If there is no recent data, should I add a message indicating that the
            list is currently unavailable OR use an out of date list? (last month data) -->
<h1>Top Players</h1>

<p>How do you stack up against other players?</p>
            <center>
                <table>
                    <thead>
                        <tr>
                            <th>User</th>
                            <th>Points</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>M.J.</td>
                            <td>5000</td>
                        </tr>
                        <tr>
                            <td>N.R.</td>
                            <td>4900</td>
                        </tr>
                        <tr>
                            <td>L.C.</td>
                            <td>3000</td>
                        </tr>
                        <tr>
                            <td>N.H.</td>
                            <td>2000</td>
                        </tr>
                    </tbody>
                </table>

            </center>


        </div>
    </section>

</body>

</html>