bloppbot.github.io/index.html at main · bloppbot/bloppbot.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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AD Inhouse League | BloppBOT</title>

    <!-- Open Graph -->
    <meta property="og:title" content="AD Inhouse League">
    <meta property="og:description" content="TrueSkill-rated Ability Draft inhouse matches. Managed by BloppBOT.">
    <meta property="og:type" content="website">
    <meta name="theme-color" content="#39ff14">

    <!-- Favicon -->
    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90' fill='%2339ff14'>⚔</text></svg>">

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Rajdhani:wght@500;600;700&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Background Effects -->
    <div class="cyber-bg"></div>
    <div class="particles"></div>
    <div class="grid-floor"></div>
    <div class="scanlines"></div>
    <div class="matrix-container" id="matrix"></div>

    <nav class="navbar">
        <div class="nav-brand">
            <span class="logo">⚔️</span>
            <span class="brand-text">AD Inhouse</span>
        </div>
        <div class="nav-links">
            <a href="#leaderboard" class="nav-link active">Leaderboard</a>
            <a href="#matches" class="nav-link">Matches</a>
            <a href="#stats" class="nav-link">Stats</a>
        </div>
        <div class="nav-info">
            <span class="powered-by">Powered by BloppBOT</span>
        </div>
    </nav>

    <main class="container">
        <section id="hero" class="hero">
            <h1>AD Inhouse League</h1>
            <p class="subtitle">TrueSkill-rated Ability Draft matches</p>
            <div class="hero-stats">
                <div class="stat-card">
                    <span class="stat-value" id="total-players">0</span>
                    <span class="stat-label">Players</span>
                </div>
                <div class="stat-card">
                    <span class="stat-value" id="total-matches">0</span>
                    <span class="stat-label">Matches</span>
                </div>
                <div class="stat-card">
                    <span class="stat-value" id="last-updated">-</span>
                    <span class="stat-label">Last Updated</span>
                </div>
            </div>
        </section>

        <section id="leaderboard" class="section">
            <h2>🏆 Leaderboard</h2>
            <div class="table-container">
                <table class="leaderboard-table">
                    <thead>
                        <tr>
                            <th>Rank</th>
                            <th>Player</th>
                            <th>Rating</th>
                            <th>Games</th>
                            <th>W-L</th>
                            <th>Winrate</th>
                        </tr>
                    </thead>
                    <tbody id="leaderboard-body">
                        <tr>
                            <td colspan="6" class="no-data">No games played yet</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>

        <section id="matches" class="section">
            <h2>📋 Recent Matches</h2>
            <div class="matches-list" id="matches-list">
                <div class="no-data">No matches recorded yet</div>
            </div>
        </section>

        <section id="stats" class="section">
            <h2>📊 League Stats</h2>
            <div class="stats-grid">
                <div class="stat-box">
                    <h3>Highest Rated</h3>
                    <div id="highest-rated" class="stat-content">-</div>
                </div>
                <div class="stat-box">
                    <h3>Most Games</h3>
                    <div id="most-games" class="stat-content">-</div>
                </div>
                <div class="stat-box">
                    <h3>Best Winrate</h3>
                    <div id="best-winrate" class="stat-content">-</div>
                </div>
                <div class="stat-box">
                    <h3>Current Streak</h3>
                    <div id="current-streak" class="stat-content">-</div>
                </div>
            </div>
        </section>
    </main>

    <footer class="footer">
        <p>AD Inhouse League • Managed by <a href="https://github.com/bloppbot">BloppBOT</a></p>
        <p class="footer-sub">TrueSkill rating system • Data from blopp's Discord</p>
    </footer>

    <script src="data.js"></script>
    <script src="app.js"></script>
    <script>
        // Matrix Rain Effect
        function createMatrixRain() {
            const container = document.getElementById('matrix');
            const chars = 'アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン0123456789';
            const columns = Math.floor(window.innerWidth / 20);

            for (let i = 0; i < columns; i++) {
                const column = document.createElement('div');
                column.className = 'matrix-column';
                column.style.left = (i * 20) + 'px';
                column.style.animationDuration = (Math.random() * 10 + 8) + 's';
                column.style.animationDelay = (Math.random() * 5) + 's';

                let text = '';
                const length = Math.floor(Math.random() * 20 + 10);
                for (let j = 0; j < length; j++) {
                    text += chars[Math.floor(Math.random() * chars.length)];
                }
                column.textContent = text;
                container.appendChild(column);
            }
        }

        // Smooth scroll for nav links
        document.querySelectorAll('.nav-link').forEach(link => {
            link.addEventListener('click', (e) => {
                document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active'));
                link.classList.add('active');
            });
        });

        // Init
        createMatrixRain();
    </script>
</body>
</html>