-
Notifications
You must be signed in to change notification settings - Fork 4
Expand file tree
/
Copy pathpersonalization.html
More file actions
256 lines (225 loc) · 22.4 KB
/
personalization.html
File metadata and controls
256 lines (225 loc) · 22.4 KB
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
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>ABOUT PERSONALIZATION - TETR.IO</title>
<link rel="stylesheet" type="text/css" href="res/style.css">
<meta charset="utf-8">
<meta name="author" content="TETR.IO's Frequently Asked Questions">
<meta name="description" content="Looking to personalize TETR.IO to a greater degree? Instructions on how to do just that are in this page!">
<meta property="og:image" content="https://repository-images.githubusercontent.com/430313654/7b437637-79c6-461a-8118-e6e921951c41">
<meta property="og:description" content="Looking to personalize TETR.IO to a greater degree? Instructions on how to do just that are in this page!">
<meta property="og:title" content="TETR.IO's Frequently Asked Questions">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:domain" value="tetrio.github.io">
<meta name="twitter:description" value="Looking to personalize TETR.IO to a greater degree? Instructions on how to do just that are in this page!">
<meta name="twitter:image" content="https://repository-images.githubusercontent.com/430313654/7b437637-79c6-461a-8118-e6e921951c41">
<meta name="twitter:url" value="https://tetrio.github.io/faq">
<style>
.dangerdanger {
background: repeating-linear-gradient(-45deg, #960E0E, #960E0E 10px, #750A0A 10px, #750A0A 20px);
text-align: center !important;
color: #FFF;
font-size: 1.1em;
}
.warnwarn {
background: repeating-linear-gradient(-45deg, #96580E, #96580E 10px, #75490A 10px, #75490A 20px);
text-align: center !important;
color: #FFF;
}
.vl h1, .vl h1, .vl h2 {
margin: 0;
}
.vl p {
margin: 0;
}
.typetag {
display: inline-block;
padding: 0.1em 0.3em;
border-radius: 3px;
box-shadow: 0px 2px 4px #0006;
background-color: #7782B1;
}
.typetag ~ span {
color: #7782B1;
}
.vl li b + span {
color: #7782B1;
}
.vl li b + span + span {
color: #F31E55;
font-weight: 900;
}
code {
font-family: 'PFW';
}
.warning {
background-color: #2A1B16;
color: #FFA904;
border-radius: 3px;
padding: 0.5em 1em;
}
.hint {
background-color: #162A1C;
color: #04FF5D;
border-radius: 3px;
padding: 0.5em 1em;
}
</style>
</head>
<body>
<header>
<a class="major_item pi_play" href="https://tetr.io/">PLAY</a>
<a class="major_item pi_ch" href="https://ch.tetr.io/">TETRA CHANNEL</a>
<a class="major_item pi_about active" href="https://tetr.io/about/">ABOUT</a>
<a class="major_item_r" target="_blank" title="Support TETR.IO or gift supporter status and get cool benefits!" href="https://l.tetr.io/support">ǹ</a>
<a class="major_item_r" target="_blank" title="View the TETR.IO issue tracker - report bugs and pitch ideas to improve TETR.IO" href="https://github.com/tetrio/issues">Ǻ</a>
<a class="major_item_r" target="_blank" title="Join the TETR.IO Discord - follow updates, give feedback and have fun" href="https://l.tetr.io/discord">ǻ</a>
<a class="major_item_r" target="_blank" title="Follow TETR.IO on Twitter - be the first to hear about updates" href="https://twitter.com/tetriogame">Ǽ</a>
<a class="major_item_r" target="_blank" title="Get TETR.IO Desktop" href="https://tetr.io/about/desktop">Ǿ</a>
</header>
<img id="major_logo" src="res/logo.png">
<div id="toc">
<h1>CONTENTS</h1>
<a href="#user-accounts">USER ACCOUNTS</a>
<a href="#register" class="indent">registration</a>
<a href="#login" class="indent2">logging into your account</a>
<a href="#passreset" class="indent3">resetting a password</a>
<a href="#registeranon" class="indent2">anonymous registration</a>
<a href="#pfp" class="indent">profile pictures</a>
<a href="#notnsfw" class="indent2">my profile picture isn't NSFW!</a>
<a href="#report" class="indent">reporting a TETR.IO user</a>
<a href="#appeal" class="indent2">appealing an ingame ban</a>
<a href="#supporter" class="indent">tiers of supporter</a>
<a href="#adding-resources">ADDING RESOURCES</a>
<a href="#custombg" class="indent">built-in background customization</a>
<a href="#bgtroubleshoot" class="indent2">background troubleshooting</a>
<a href="#customskins" class="indent">custom skins</a>
<a href="#stock-resources">STOCK RESOURCES</a>
<a href="#music" class="indent">music</a>
<a href="#fonts" class="indent">fonts</a>
<a href="#sfx" class="indent">sound effects</a>
<a href="#backgrounds" class="indent">backgrounds</a>
</div>
<span class="itemlist centeralign">
<a class="topitem" href=".">HOME</a>
<a class="pageitem current firstpageitem" href="">PERSONALIZATION</a>
<a class="pageitem" href="./mechanics.html">MECHANICS</a>
<a class="pageitem" href="./troubleshooting.html">TROUBLESHOOTING</a>
<a class="pageitem" href="./terminology.html">TERMINOLOGY</a>
</span>
<section id="#user-accounts">
<div class="gallery" style="float: right;"><img width="369" height="450" src="res/faq/personalization/register.png"><p class="description">Annotated instructions for registration.</p><hr><img width="369" height="332" src="res/faq/personalization/login.png"><p class="description">Annotated instructions for logging into one's account.</p><hr><img width="369" height="320" src="res/faq/personalization/registeranon.png"><p class="description">Annotated instructions for the registration of an "anonymous" account.</p></div>
<h1 id="profile-customization">User Accounts</h1>
<p>TETR.IO users are represented by ingame accounts, like in any other online service. <em>Registered</em> users can customize their ingame appearance through a variety of ways, both paid and unpaid. Here's some common missteps people fall in regarding customization/general usage:</p>
<h2 id="register">Registration<span class="shorthand">register</h2>
<p>Welcome to TETR.IO! While you can play with a far less involved <a class="lna" href="#registeranon">"anonymous" account</a>, a fully registered account is your only ticket into the Tetra League, saved 40 LINES and BLITZ records, access to a customizable profile card and userpage<span class="unemphasis">(such as <a class="lna" href="#pfp">profile pictures</a>)</span>, and more!</p>
<p><strong>To create a TETR.IO account</strong>, first, navigate to <a class="lna" href="https://tetr.io/">https://tetr.io/</a>. You will be greeted with the registration dialog immediately, provided you aren't already logged in(1). From here,</p>
<ol>
<li>Enter your chosen username(1.1) and click the JOIN button(1.2). </li>
<li><strong>If the username is taken, you will be prompted for its password(2)</strong>: in this case, back out and choose another username(2.1). </li>
<li>If the username is unoccupied, you will be prompted to either "STAY ANONYMOUS" or "REGISTER"(3). </li>
<li>After selecting REGISTER, you will be asked to supply an optional email, as well as the password you will lock your account with(4).</li>
</ol>
<p>Please note that you are only allowed one registered account as per the alt policy found at <a class="lna" href="https://tetr.io/about/rules/">https://tetr.io/about/rules/</a>! Choose your name wisely: future name changes are only available with the purchase of TETR.IO supporter.</p>
<h3 id="login">Logging Into Your Account<span class="shorthand">login</span></h3>
<p>Logging into your registered account is easy, if not slightly obscure. The registration form doubles as a login questionnaire, so, if you know your username and password, just follow these steps!</p>
<ol>
<li>When prompted to "ENTER A USERNAME TO JOIN"(1), enter in your registered account's username(1.1) and choose JOIN(1.2).</li>
<li>You'll see a section(2) asking for your password at this stage(2.1), enter that in and click LOGIN(2.2). That's it!</li>
</ol>
<h4 id="passreset">Resetting a Password<span class="shorthand">passreset</span></h4>
<p>If you've forgotten your password, click I FORGOT(2.3). You'll be brought to an extra question asking you for the email tied to this account(3). Ensure you enter your email <strong>exactly as you entered it while registering!</strong> Case sensitivity doesn't matter, but do try a couple different emails before throwing in the "i musta not entered an email" hat!</p>
<h3 id="registeranon">Anonymous Registration<span class="shorthand">registeranon</span></h3>
<p>While impeded by several limitations, "anonymous" accounts are integral to TETR.IO's original concept of being "about as easy to join as a standard .IO game". They're also normally exempt from <a class="lna" href="https://tetr.io/about/rules/#altpolicy">the alt policy</a>, so you could have an secondary anonymous account as a registered user for controller play, for instance. All you need to make one is a <em>single</em> click on the JOIN button, if you don't mind having a non-descriptive username. Anonymous accounts <em>can</em> have customized usernames however, provided the username isn't already used by a registered account:</p>
<ol>
<li>Simply enter a username(1.1) into the prompt you see while not logged into <a class="lna" href="https://tetr.io/">https://tetr.io/</a>(1), then click JOIN(1.2).</li>
<li><strong>If the username you chose is already in use,</strong> you'll be prompted for whoever owns that account's password(2). Please proceed to back out of this login attempt(2.1).</li>
<li>If the chosen username is free, simply click STAY ANONYMOUS to keep the username in an anonymous state(3)!</li>
</ol>
<h2 id="pfp">Profile Pictures<span class="shorthand">pfp</span></h2>
<p>Registered TETR.IO user accounts may set their profile pictures for free from the relevant account settings category. The attached image shows you how to access this category, available from the ingame CONFIG option:</p>
<img class="centeralign gallery" style="margin-top: 0em" width="678" height="579" src="res/faq/personalization/changepfp.png">
<h3 id="notnsfw">My Profile Picture Isn't NSFW!<span class="shorthand">notnsfw</span></h3>
<p>TETR.IO profile picture and banner uploads are automatically scrutinized, in accordance with <a class="lna" href="https://tetr.io/about/rules/#r8/">rule 8</a>, by an open source library, which in turn is powered by machine learning. The specific names of these projects are <code><a class="lna" href="https://github.com/infinitered/nsfwjs">NSFWJS</a></code> and <code><a class="lna" href="https://github.com/tensorflow/tensorflow">TensorFlow</a></code>, both of which are listed at the very top of <a class="lna" href="https://tetr.io/about/acknowledgements/">TETR.IO's open source acknowledgements</a>.</p>
<p style="width: 21em;" class="tip-blue"><img class="ii" src="res/faq/tip.png"> <em>Do note that TETR.IO uses a different version of <code>NSFWJS</code> than what is on the linked website.</em></p>
<p>This means, at times, the automated detection process can incur a false-positive and deny you your rights to upload your otherwise safe for work imagery. There are ways around this system, but to disclose them here would be to make that information more accessible to bad actors. <strong>Just try another image.</strong>
Also see:</p>
<figure>
<blockquote><p>Humans are amazing at visual identification. NSFW tries to error more on the side of things being dirty than clean. It's part of what makes failures on NSFW JS entertaining as well as practical.</p></blockquote>
<figcaption>— <a class="lna" href="https://nsfwjs.com/">https://nsfwjs.com/</a><figcaption>
</figure>
<h2 id="report">Reporting a TETR.IO User<span class="shorthand">report</span></h2>
<div class="gallery" style="float: right;"><img width="335" height="114" src="res/faq/personalization/report.png"><p class="description">A closeup of an example player card. The <em>"Report user"</em> button is accessed after selecting <em>"More options..."</em>.</p></div>
<p>If you would like to report any TETR.IO user for breaking <a class="lna" href="https://tetr.io/about/rules/">the TETR.IO Community Rules</a>, please use the ingame reporting systems instead of, say, public Discord channels!</p>
<p>As a registered user, simply click on a suspicious, rude, or otherwise problematic user's username or usercard, or, type said user's username into the ingame Tetra Channel's search bar, accessible by clicking the <em>third</em> menu option, to access their "profile card". Once this card is open, simply click the arrow, and then click the report icon to begin the guided process of including details. If you report while in a room, chat logs will be automatically included. </p>
<h3 id="appeal">Appealing an ingame ban<span class="shorthand">appeal</span></h3>
<p style="float: unset;width: 40%;" class="warning-red"><img class="ii" src="res/faq/warning.png"> <strong>DO NOT APPEAL BANS IN THE TETR.IO DISCORD!</strong><br>Your message will be ignored at best.</p>
<ul>
<li>To contact TETR.IO support regarding an issue with your account, visit <a class="lna" href="https://tetr.io/about/support/">https://tetr.io/about/support/</a> and follow the instructions.</li>
<li>For live technical help, feel free to ask in <a class="lna" href="https://discord.com/channels/673303546107658242/674421736162197515">the #tetrio channel</a>, where someone may be able to help you. <ul>
<li>Please only do this <strong>after</strong> skimming <a class="lna" href="../Home">the FAQ topics</a>, however!</li>
</ul>
</li>
<li>If you have an issue report or a feature request, use their respective channels in <a class="lna" href="https://l.tetr.io/discord">the Discord server</a>, or open an issue at <a class="lna" href="https://github.com/tetrio/issues/issues/new/choose">the TETR.IO Issue Tracker</a>.</li>
</ul>
<h2 id="supporter">Tiers of Supporter<span class="shorthand">supporter</span></h2>
<p><a class="lna" href="https://l.tetr.io">TETR.IO Supporter</a> tiers are determined by your amount of <strong>total</strong> support - including purchases for yourself, gifts you've sent to other players, and any Patreon support from the old supporter system. You can check this number by going to CONFIG > ACCOUNT.</p>
<p>The cutoffs for each supporter tier are as follows:</p>
<ul style="font-family: PFW">
<li style="color: #e0520d;">€0 | Tier 1</li>
<li style="color: #f07a13;">€20 | ★ (Tier 2)</li>
<li style="color: #faac38;">€80 | ★★ (Tier 3)</li>
<li style="color: #f8cf35;">€250 | ★★★ (Tier 4)</li>
</ul>
<p>Once you've achieved a supporter tier, you keep it forever. If your supporter expires, the supporter tier badge and name colour will be hidden, but will be reactivated if you purchase (or are gifted) more supporter. Furthermore, your name will be permanently listed in the game's credits when you reach 200€ of total support. Unlike other supporter benefits, this will remain even if your supporter expires.</p>
</section>
<section id="adding-resources">
<h1>Adding Resources</h1>
<p>Looking to add your own backgrounds/skins to the game? Here's how to do it!</p>
<h2 id="custombg">Built-in Background Customization<span class="shorthand">custombg</span></h2>
<p style="width: 40%;" class="tip-blue"><img class="ii" src="res/faq/tip.png"> Other image hosting sites such as <a class="lna tiplink" href="https://imgur.com/upload">Imgur</a> work too, of course, but for years now, catbox.moe has been largely unintrusive for this purpose.</p>
<p><strong>Q:</strong> How do I set a custom background?</p>
<p><strong>A:</strong> Assuming you have a local file on your computer you'd like to use, just upload that file to <strong><a class="lna" href="https://catbox.moe/">catbox.moe</a></strong>. As of writing, it's free for use and simply works with TETR.IO's CORS header-requirements. </p>
<h3 id="bgtroubleshoot">Background Troubleshooting<span class="bgtroubleshoot"></span></h3>
<p>If your image is already hosted on the net<em>(Catbox included)</em>, and you have a <em>(nonfunctional ingame)</em> link to use with TETR.IO's ingame background option, consider debugging that link with <a class="lna" href="https://you.have.fail/ed/at/tetrio/backgrounds/">this interactive checker</a>.</p>
<p>If this site is showing that the link <em>should work</em>, please proceed to hard-reload the game with <strong>CTRL+F5</strong> <em>(yes, even on the desktop client)</em>. After this point, navigate into a SOLO 40 LINES match to confirm the background loading.</p>
<img class="centeralign gallery" src="res/faq/personalization/backgroundinfo.png" />
<h2 id="customskins">Custom Skins<span class="shorthand">customskins</span></h2>
<p style="width: 40%;" class="warning-red"><img class="ii" src="res/faq/warning.png"> <strong>YOU WAIVE YOUR RIGHT TO REPORT TETR.IO ISSUES WITH EXTERNAL ADDONS INSTALLED!</strong> Issue reports with addons such as TETR.IO PLUS installed, <u>even if not caused by the interference of external addons</u>, will be considered invalid and promptly removed. In extreme cases, platform bans on Discord and Github will be considered if you fail to understand these terms even after repeated removal.</p>
<p>TETR.IO doesn't officially support custom skins, but there are addons that implement custom skins with the leeway of being manually installed on the user's system. One such addon is called TETR.IO PLUS, and there's more information at <a class= "lna" href="https://gitlab.com/UniQMG/tetrio-plus/-/wikis/home">the open source TETR.IO PLUS GitLab wiki</a>.</p>
<p>Once you have the addon installed, you may find this list of unaffiliated sites hosting graphics pertaining to the use of TETR.IO PLUS useful:</p>
<ul>
<li><a class="lna" href="https://you.have.fail/ed/at/tetrioplus/">you.have.fail/ed/at/tetrioplus</a> repository of skins</li>
<li><a class="lna" href="https://tetrio.team2xh.net/?t=skins">Curated gallery on Tenchi's site</a></li>
<li><a class="lna" href="https://docs.google.com/spreadsheets/d/1xO8DTORacMmSJAQicpJscob7WUkOVuaNH0wzkR_X194/edit#gid=1212216734">Jstris Customization Database</a></li>
</ul>
<figcaption>As all outlined in <a class="lna" href="https://gitlab.com/UniQMG/tetrio-plus/-/wikis/finding-content">this TETR.IO PLUS wiki page dedicated to finding content</a>.</figcaption>
<p style="width: 90%;float: unset;" class="tip-blue centeralign"><img class="ii" src="res/faq/tip.png"> Interested in influencing TETR.IO's future? Feel free to comment on <a class="lna tiplink" href="https://github.com/tetrio/issues/issues/359">this pinned TETR.IO Github issue</a> with opinions for the future of ingame customization!</p>
</section>
<section id="stock-resources">
<h1>Stock Resources</h1>
<p>Looking to get a copy of TETR.IO's default assets? Here's some sources!</p>
<h2 id="music">Music<span class="shorthand">music</span></h2>
<p>TETR.IO's soundtrack is currently entirely provided by various musicians under the royalty free <a class="lna" href="https://www.hurtrecord.com/"><em>HURT RECORD</em> label</a>—that is to say, each soundtrack <em>should</em> be stream-safe, provided you show the onscreen watermark centered near the bottom, displaying the currently playing song during the very start of gameplay. <em>Refer to <a class="lna" href="https://www.hurtrecord.com/about/terms.html">HURT RECORD's terms of service</a> for specific terms of use.</em></p>
<p>Interested in listening to or downloading the soundtrack for personal use? There's <a class="lna" href="https://www.youtube.com/playlist?list=PLaFmyK0hSlVD_a98eL1BcGMOTblz8kQ0h">a YouTube mirror here</a> as well as <a class="lna" href="https://docs.google.com/spreadsheets/d/1R_tpfLo_qUfNG2vQG3uqQ5fbjT01VefZVgB7RH2lOzM/edit">an up-to-date Google Sheets list here</a>, <em>both provided by EricICX.</em></p>
<h2 id="fonts">Fonts<span class="shorthand">fonts</span></h2>
<div class="gallery" style="float: right;"><img width="378" height="375" src="res/faq/personalization/fonts.png">Authored by osk, here's a small sheet illustrating TETR.IO's fonts.</div>
<p>Here's a list of all of TETR.IO's fonts, as well as where you can download them and install them. Just right click these files in the File Explorer to do that.</p>
<ul>
<li>HUN-din: <a class="lna" href="https://tetr.io/res/font/hun2.ttf?v=9">https://tetr.io/res/font/hun2.ttf?v=9</a></li>
<li>ProFontWindows: <a class="lna" href="https://tetr.io/res/font/pfw.ttf">https://tetr.io/res/font/pfw.ttf</a></li>
<li>Config: <a class="lna" href="https://tetr.io/res/font/cr.ttf">https://tetr.io/res/font/cr.ttf</a></li>
<li>Franklin Gothic already comes with Windows, though you're specifically looking for Franklin Gothic Medium.</li>
</ul>
<h2 id="sound-effects">Sound Effects<span class="shorthand">sound-effects</span></h2>
<p>All of TETR.IO's sound effects are stored in a single "sound effect atlas" found <a class="lna" href="https://tetr.io/sfx/tetrio.ogg">here</a>. There's an issue with this file though; all sound effects are split only by time and not by file names, so it's likely this file isn't the one you want. If you would like a copy of all of the TETR.IO sounds split up, <em>albeit with an ever so slightly lower quality,</em> please download <a class="lna" href="https://cdn.discordapp.com/attachments/673303546564968566/919778936475508776/tetrio-sound-effects.zip">this <code>.zip</code> file</a>, sourced from <a class="lna" href="https://you.have.fail/ed/" title="UniQMG's homepage">UniQMG</a>'s <a class="lna" href="https://gitlab.com/-/snippets/2032731">"sound effects extractor"</a>.</p>
<h2 id="backgrounds">Backgrounds<span class="shorthand">backgrounds</span></h2>
<p>The backgrounds, similar to TETR.IO's music, is all royalty free and hails from <a class="lna" href="https://unsplash.com/">Unsplash</a>. You can likely get extremely similar photographs for free here and use them as your background in TETR.IO itself, if the stock ones are getting tiresome.</p>
<p>If you just wanted to download the default backgrounds, check out <a class="lna" href="https://docs.google.com/spreadsheets/d/1-uSNuUEFBQz6vCHOxR4gWRshWM5KQ4ZvH0xWjtMz4Yg/edit">this Google Sheets list, created by @booyah.net on Discord</a>, which covers backgrounds from three phases of TETR.IO's lifespan so far!</p>
</section>
<div style="margin-left: 12em;" class="disclaimer-footer">
© 2019—2025 osk.<br>
© 2021—2025 ZaptorZap, Zudo, deep4amthoughts.<br>
TETR.IO, the TETR.IO Logo, Tetra League, osk, and the osk Logo are trademarks of osk.<br>
All other trademarks are the property of their respective owners, trademark fair use doctrines apply.</div>
</body></html>