forked from glacials/whatsinstandard
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
230 lines (224 loc) · 11.8 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>What's in Standard?</title>
<meta charset="UTF-8">
<meta name="description" content="A Magic: The Gathering format describer" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/node_modules/npm-font-open-sans/open-sans.css" type="text/css" />
<link rel="stylesheet" href="/node_modules/keyrune/css/keyrune.min.css" type="text/css" />
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css" media="screen" />
<script src="https://kit.fontawesome.com/2b022a4ed7.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/style.css" media="screen" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#808080">
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#ffffff">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-2775839314260416",
enable_page_level_ads: true
});
</script>
</head>
<body data-spy="scroll" data-target="#nav" id="sets">
<div id="vue" class="container">
<a class="d-inline" name="sets" id="sets"></a>
<div class="d-flex">
<div class="w-100">
<div class="row bg-dark text-light mb-4">
<div class="col-md-12">
<div class="mt-3 mb-3">
<img id="site-icon" src="icon-original.svg" alt="What's in Standard? logo" class="d-none d-sm-inline"/>
<h1>What's in Standard?</h1>
<div class="d-flex">
<div class="dropdown">
<button class="btn btn-outline-light btn-sm dropdown-toggle" type="button" id="dropdownMenuButton"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Magic: The Gathering
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="https://standardpokemon.tk/" rel="noopener">Pokémon</a>
</div>
</div>
<div class="flex-fill text-right">
<button class="btn btn-outline-light btn-sm" v-on:click.prevent="toggleRecentlyDropped">
<template v-if="showRecentlyDropped">
Hide what just left
</template>
<template v-else>
Show what just left
</template>
</button>
</div>
</div>
</div>
</div>
</div>
<div v-if="false" class="col-md-5 text-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="row row-cols-1 row-cols-md-2">
<template v-if="showRecentlyDropped">
<div class="col-md-12">
<div class="list-group col-md-6 mb-5 mx-auto">
<div class="list-group-item p-3" v-for="set in last(rounds(dropped(sets)))" style="min-height: 5rem">
<div class="justify-content-between d-flex set-border" v-tippy :title="set.code">
<a class="w-100 text-muted" :href="`https://www.scryfall.com/sets/${set.code.toLowerCase()}?utm_source=whatsinstandard`">
{{ set.name }}
</a>
<set-image class="text-muted" :code="set.code"></set-image>
</div>
</div>
<div class="px-2 mx-3 text-right small text-danger block-comment">
left Standard {{ humanDate(last(rounds(dropped(sets)))[0].exitDate) }}
</div>
</div>
</div>
</template>
<div v-for="round in truncate(rounds(undropped(sets)))" class="col mb-4">
<div class="row row-cols-1 row-cols-sm-2 border mx-0 py-3 h-100">
<div class="col my-3" v-for="set in round">
<a class="text-center p-3 mb-4 card text-dark h-100 justify-content-between set-border" :class="{'bg-light': isReleased(set), 'text-muted': !isReleased(set)}" style="min-height: 5rem"
:href="set.code ? `https://www.scryfall.com/sets/${set.code.toLowerCase()}?utm_source=whatsinstandard` : ''">
<div class="w-100" v-if="set.code" :class="{'text-dark': isReleased(set), 'text-muted': !isReleased(set)}">
{{ set.unknown ? '???' : set.name || `"${set.codename}"` }}
</div>
<div class="w-100 text-dark" :class="{'lead': isReleased(set), 'text-muted': !isReleased(set)}" v-else>
{{ set.unknown ? '???' : set.name || `"${set.codename}"` }}
</div>
<h1><set-image :code="set.code" v-if="isReleased(set)"></set-image></h1>
<small class="font-italic" v-if="!isReleased(set)" v-tippy :title="humanDate(set.enterDate)">
releases {{ dateFrom(set.enterDate) | relative }}
</small>
</a>
</div>
<div class="px-2 mx-3 text-right small block-comment">
in Standard until {{ humanDate(round[0].exitDate) }}
<a v-if="round[0].code == 'KLD' || round[0].code == 'AKH' || round[0].code == 'XLN'" class="tip"
v-tippy="{html: '#why', interactive: true, theme: 'light'}"></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h3 class="pt-3" id="bans">Banned cards</h3>
<template v-if="bans.length === 0">
<i>No cards are banned from Standard right now.
</template>
<template v-else>
<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 mb-3">
<img :src="ban.cardImageUrl" class="card-img-top" :alt="`${ban.cardName} from ${ban.setCode}`" />
<div class="card-body">
<p class="card-text">{{ ban.reason }}</p>
<a :href="`https://scryfall.com/search?q=!“${ban.cardName}” set:${ban.setCode}&utm_source=whatsinstandard`"
class="btn btn-primary text-white my-1" rel="noopener">
View on Scryfall
</a>
<a :href="ban.announcementUrl" class="btn btn-secondary my-1">
View ban announcement
</a>
</div>
</div>
</div>
</div>
</template>
</div>
<div class="col-md-6">
<h2 class="pt-3" id="info">What <em>is</em> Standard?</h2>
<p>
<a
target="_blank"
href="https://magic.wizards.com/en/content/standard-formats-magic-gathering" rel="noopener">
<b>Standard</b>
</a>
is a rotating group of <i>Magic: The Gathering</i> sets. Most sets enter Standard when they're released and
drop out about twenty-one months later.
</p>
<p>
Generally Standard will grow until it would receive its ninth set, then instead it drops its oldest four sets
to receive it as a fifth set. There are exceptions to this. It's confusing.
</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), can optionally 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> of up to 15 more Standard cards, and apart from basic lands does not have more than four copies of any
one card
<a v-tippy class="tip"
title="Different prints of the same card count as the same card.">
</a>.
</p>
<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>
<div class="github my-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>
<div id="nav" class="nav nav-pills nav-fill fixed-bottom d-sm-none navbar-dark bg-dark" style="max-height: 60px">
<a class="nav-link nav-item rounded-0 pt-3 text-light" href="#sets">
<h5 class="fas fa-clone"></h5>
</a>
<a class="nav-link nav-item rounded-0 pt-3 text-light" href="#bans">
<h5 class="fas fa-ban"></h5>
</a>
<a class="nav-link nav-item rounded-0 pt-3 text-light" href="#info">
<h5 class="fas fa-info-circle"></h5>
</a>
</div>
</div>
</div>
</div>
<script src="/node_modules/jquery/dist/jquery.min.js"></script>
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/node_modules/moment/min/moment.min.js"></script>
<script src="/node_modules/underscore/underscore-min.js"></script>
<script src="/node_modules/vue/dist/vue.min.js"></script>
<script src="/node_modules/vue-tippy/dist/vue-tippy.min.js"></script>
<script src="/js/app.js"></script>
<script src="/js/service-worker.js"></script>
<script src="/js/tracking.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-2876079-7', 'auto');
ga('require', 'displayfeatures');
ga('send', 'pageview');
</script>
</body>
</html>