-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
159 lines (126 loc) · 5.32 KB
/
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
155
156
157
158
159
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chess Stats Tracker</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">
</head>
<body>
<div id="stats" class="d-none">
</div>
<section id="main" class="container d-none mt-3">
<h1>Chess Stats Tracker</h1>
<form class="pt-3">
<div class="row mb-3">
<label class="col-sm-2 col-form-label" for="name">Username</label>
<div class="col-sm-10">
<input class="form-control" id="name" type="text" placeholder="Chess.com username">
</div>
</div>
<div class="row mb-3">
<label class="col-sm-2 col-form-label" for="format">Format</label>
<div class="col-sm-10">
<select class="form-select" name="format" id="format">
<option value="global">Global Elo</option>
<option value="session">Session</option>
</select>
</div>
</div>
<div class="row mb-3">
<label class="col-sm-2 col-form-label" for="type">Type</label>
<div class="col-sm-10">
<select class="form-select" name="type" id="type">
<option value="bullet">Bullet</option>
<option value="blitz">Blitz</option>
<option value="rapid">Rapid</option>
</select>
</div>
</div>
<div class="row mb-3">
<label class="col-sm-2 col-form-label" for="return">Return</label>
<div class="col-sm-10">
<div>
<input type="radio" id="plain" name="return" value="plain" checked>
<label for="plain">Plain Text</label>
</div>
<div>
<input type="radio" id="json" name="return" value="json">
<label for="json">JSON format</label>
</div>
</div>
</div>
<div class="row justify-content-end">
<div class="col-sm-10">
<button class="btn btn-primary" id="popout">Pop-out in new window</button>
<button class="btn btn-secondary" id="copy">Copy link</button>
</div>
</div>
</form>
<div>
<h2>Preview</h2>
<span id="previsualization"></span>
</div>
<a href="#" id="btn_help">How use it ?</a>
</section>
<section id="help" class="container d-none mt-3">
<h3>What is Chess Stats Tracker ?</h3>
<p>
Chess Stats Tracker is a tool that allow you to get your stats on Chess.com.
You can use it for example to display your stats on your stream.
</p>
<p>
Enter your Chess.com name, select bullet, blitz or rapid and 'Global' if you want your stats from the beginning or Session if you want to see your stats of your session.
If your launch the page at 1 PM, each game ending after 1 PM will count to your session stats
</p>
<h3>I am a streamer. How could I use this tool ?</h3>
<p>
This tool is built for you. Fill in the form and use the "Copy Link" button.
Then go to your streaming software.<br>
I will take OBS Studio as example.<br>
Scenes > Sources -> Add -> Browser <br>
Paste the URL.<br>
Custom CSS is important. The default configuration on OBS is :
<code>body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }</code>
<br>
<code>background-color: rgba(0, 0, 0, 0);</code> means the background will be transparent.
By default text color is black.You may let it black or change it to white by adding
<code>color:white;</code>
The configuration for CSS may look like :
<pre><code>body {
background-color: rgba(0, 0, 0, 0);
margin: 0px auto;
overflow: hidden;
color: white;
font-size: 48px;
}</code></pre>
In your software the render will be something like
<pre>3177 : 915 / 257 / 334</pre>
Using CSS classes "elo", "win" , "draw" and "loss" you can customize as you wish.
You can try this configuration.
<pre><code>body {
background-color: rgba(0, 0, 0, 0);
margin: 0px auto;
overflow: hidden;
color: white;
font-size: 48px;
}
.win {
color : green;
}
.draw {
color : gray;
}
.loss {
color : red;
}
</code></pre>
<p>
The render will be something like :
3177 : <span style="color: green;">915</span> / <span style="color: grey;">257</span> / <span style="color: red;">334</span>
</p>
</section>
<script src="script.js"></script>
</body>
</html>