forked from glacials/whatsinstandard
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
267 lines (243 loc) · 12.2 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
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
257
258
259
260
261
262
263
264
265
266
267
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-143834429-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-143834429-1');
</script>
<title>What's in Standard? Pokémon Edition</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="A Pokémon TCG format describer" />
<link rel="stylesheet" href="css/style.css" media="screen" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16x16.png">
<link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon">
</head>
<!-- ############
# BODY #
############ -->
<body>
<div class="container">
<!-- HEADER -->
<header class="grid-header">
<img id="site-icon" src="/img/icon-original.svg" alt="What's in Standard? logo" />
<h1>What's in Standard?</h1>
<div>
<small class="text-muted">for</small>
<span>Pokémon TCG</span>
<small class="text-muted"> / </small>
<a href="http://whatsinstandard.com/" class="text-muted" rel="noopener">Magic: The Gathering</a>
<small class="text-muted"> / </small>
<a href="http://standardhearth.com/" class="text-muted" rel="noopener">Hearthstone</a>
</div>
</header>
<hr />
<!-- MAIN CONTENT -->
<main class="grid-main">
<!-- Set Lists -->
<section id="set-display" class="grid-set-section">
<!-- All information in this section is added with scripts.js -->
</section>
<!-- COMMENTING OUT FOR NOW WHILE UNDER DEVELOPMENT
<section v-cloak class="col-md-5" id="set-list">
<div class="recently-dropped-toggle-container">
<button id="recently-dropped-toggler" href="#" class="btn btn-sm btn-block btn-outline-secondary mb-3"
v-on:click.prevent="toggleRecentlyDropped">
<span v-if="!showRecentlyDropped">show previous round of exits</span>
<span v-else>hide previous round of exits</span>
</button>
</div>
<div id="recently-dropped" v-if="showRecentlyDropped">
<div class="card mb-4" v-for="sets in recent(rounds(dropped(sets)))">
<div class="card-header">
<div>Sets that exited Standard {{ sets[0].exit_date | relative }}</div>
<small>On {{ sets[0].exit_date | absolute }}</small>
</div>
<ul class="list-group list-group-flush">
<li v-for="set in sets"
class="list-group-item text-muted d-flex justify-content-between align-items-center">
<a :href="`https://www.scryfall.com/sets/${set.code.toLowerCase()}?utm_source=whatsinstandard`"
target="_blank" rel="noopener">
{{ set.name }}
</a>
<set-image :code="set.code"></set-image>
</li>
</ul>
</div>
</div>
<div class="card border bg-white border-primary mb-4 shadow">
<div class="card-header bg-primary text-light">
<a href="https://www.scryfall.com/search?q=format:standard&utm_source=whatsinstandard" target="_blank"
rel="noopener">
All Sets in Standard
</a>
</div>
<div class="card-body">
<div class="round card bg-transparent text-dark" v-for="sets in rounds(standard(sets))">
<ul class="list-group list-group-flush text-dark">
<li class="list-group-item bg-transparent d-flex justify-content-between align-items-center"
v-bind:class="{ 'text-black-50 bg-light font-italic': !isReleased(set) }" v-for="set in sets">
<a :href="`https://www.scryfall.com/sets/${set.code.toLowerCase()}?utm_source=whatsinstandard`"
target="_blank" rel="noopener">
{{ set.name }}
</a>
<set-image :code="set.code"></set-image>
</li>
</ul>
<div class="card-footer py-2" v-if="sets[0].exit_date">
<div class="text-warning">
<small>Exiting Standard {{ sets[0].exit_date | relative }}</small>
</div>
<small>On {{ sets[0].exit_date | absolute }}</small>
</div>
<div class="card-footer py-2 text-dark text-right" v-else>
<small>Exiting Standard {{ sets[0].rough_exit_date }}</small>
<a v-if="sets[0].code == 'KLD' || sets[0].code == 'AKH' || sets[0].code == 'XLN'" class="tip"
v-tippy="{html: '#why', interactive: true, theme: 'light'}"></a>
<div id="why" style="display: none" v-tippy-html
v-if="sets[0].code == 'KLD' || sets[0].code == 'AKH' || sets[0].code == 'XLN'">
<div style="max-width: 50em">
In 2014 <i>Wizards</i> experimented with a drastic change that shrunk blocks, killed Core sets, and
shortened average set lifetime in Standard.<sup><a target="_blank"
href="https://magic.wizards.com/en/articles/archive/mm/metamorphosis" rel="noopener">2</a></sup>
The change was reverted in 2017,<sup><a target="_blank"
href="https://magic.wizards.com/en/articles/archive/making-magic/metamorphosis-2-0-2017-06-12"
rel="noopener">3</a></sup> but the aftershock still affects Standard in the sets it left behind.
These sets
will drop in unintuitive ways, ending in Q4 2019.
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card mb-4" v-bind:class="{ 'bg-warning': sets[0].exit_date }"
v-for="sets in rounds(unreleased(sets))">
<div class="card-header">
Upcoming Sets
</div>
<ul class="list-group list-group-flush text-dark">
<li class="list-group-item text-muted" v-for="set in sets">
<div class="d-flex justify-content-between align-items-center">
<a v-if="set.code !== null"
:href="`https://www.scryfall.com/sets/${set.code.toLowerCase()}?utm_source=whatsinstandard`"
target="_blank" rel="noopener">
{{ set.name }}
</a>
<span v-if="set.code === null">{{ set.name }}</span>
<set-image v-if="set.code !== null" :code="set.code"></set-image>
</div>
<small v-if="!isReleased(set) && set.enter_date != null">
<div>Entering Standard {{ set.enter_date | relative }}</div>
<div>(on release: {{ set.enter_date | absolute }})</div>
</small>
</li>
</ul>
</div>
END OF COMMENT -->
</section>
<!-- General Blurb -->
<section class="grid-text-section">
<h2>What <em>is</em> Standard?</h2>
<p>
<a target="_blank" href="https://www.poke-spot.com/tcg-formats-explained/" rel="noopener"><b>Standard</b></a>
is a rotating group of <i>Pokémon TCG</i> sets. Sets enter Standard when they're released and drop out roughly
2 years later.
There are 4 main releases each year, usually in February, May, August, and November. In addition, some other
smaller sets are also released throughout the year.
</p>
<p>
Each year, usually in Q2, there will be an <a target="_blank"
href="https://www.pokemon.com/uk/pokemon-news/2020-season-pokemon-tcg-format-rotation/"
rel="noopener">announcement</a> from The Pokémon Company outlining what will be
allowable in the next 'Season', defined by competitive play and the official Pokémon TCG Championship Series.
Although the new season starts on 1 July, the rotation doesn't happen until August, just prior to the World
Championships.
</p>
<p>
A <b>Standard card</b> is a card printed or reprinted into a set currently in Standard.
<!--<a v-tippy class="tip" title="e.g. As long as Naturalize has a reprint currently in Standard, all previous prints of Naturalize
are also considered Standard.">-->
</a>
</p>
<p>
A <b>Standard deck</b> contains only Standard cards (60 of them), and unlike many other TCG's, <b><i>does
not</i></b> have a sideboard
<!--<a v-tippy class="tip" title='A sideboard is an optional second pool of cards past the main deck that cannot be used during games,
but whose cards can be swapped with those from the main deck between games. It is generally used to keep
counters to specific deck archetypes available without needing to classify any change as an official deck
edit.'>
</a>-->, and apart from basic energy does not have more than four copies of any
one card (unless explicitly stated on the card, or later in FAQs)
<!--<a v-tippy class="tip" title="Different prints of the same card count as the same card.">-->
</a>.
</p>
<!-- COMMENTED OUT WHILE IN DEVELOPMENT
<h3 class="mt-5">Related sets and formats</h3>
<p>
<a target="_blank" href="https://magic.wizards.com/en/game-info/gameplay/formats/brawl"
rel="noopener"><b>Brawl</b></a>
is a format based on Standard—all rotations listed here apply to Brawl—but Brawl has a separate banlist</a>.
</p>
<p>
Not all sets enter Standard upon release. For example, Masters sets and Commander sets do not enter Standard.
</p>
<h3 class="mt-5">Banned cards</h3>
<p>Despite being in Standard sets, these cards are explicitly not allowed in Standard decks.</p>
<div class="row" v-cloak>
<div v-for="ban in bans" class="col-sm-12 col-md-12 col-lg-6">
<div class="card">
<img :src="ban.card_image_url" class="card-img-top" :alt="`Image of ${ban.card_name}`" />
<div class="card-body">
<h5 class="card-title">
<set-image :code="ban.set_code"></set-image>
{{ ban.card_name }}
</h5>
<p class="card-text">{{ ban.reason }}</p>
<a :href="`https://scryfall.com/search?q=!“${ban.card_name}” set:${ban.set_code}&utm_source=whatsinstandard`"
class="btn btn-primary text-white my-1" rel="noopener">
View on Scryfall
</a>
<a :href="ban.announcement_url" class="btn btn-secondary my-1">
View ban announcement
</a>
</div>
</div>
</div>
</div>
-->
<div>
<h2>Help us get better</h2>
<p>Although newly launched, and thus under constant development, if you have any feeback or suggestions for improvement please get in touch.</p>
<p><i class="fa fa-twitter"></i>@mccallum_jon</p>
</div>
</section>
</div>
</main>
<!-- FOOTER -->
<footer class="grid-footer">
<!-- COMMENTING OUT WHILE UNDER DEV
<div class="github mt-4">
<a v-tippy class="btn" href="https://twitter.com/whatsinstandard" title="We tweet when Standard changes!">
<img class="m-1" src="img/twitter.svg" alt="Twitter logo" height='60' width='60' />
</a>
<a v-tippy class="btn" href="https://github.com/glacials/whatsinstandard" title="We're open source!">
<img class="m-1" src="img/github.png" alt="GitHub logo" height='35' width='35' />
</a>
</div>
-->
</footer>
<!-- MAKE IT DO STUFF -->
<script src="js/scripts.js"></script>
<!-- THE END -->
</body>
</html>