97 lines
2.5 KiB
Svelte
97 lines
2.5 KiB
Svelte
<script lang="ts">
|
|
const years: { [k: number]: string } = {
|
|
2008: "bg-fuchsia-500 text-black",
|
|
2009: "bg-rose-400 text-black",
|
|
2010: "bg-red-600",
|
|
2011: "bg-orange-500 text-black",
|
|
2012: "bg-yellow-500 text-black",
|
|
2013: "bg-lime-500 text-black",
|
|
2014: "bg-emerald-600 text-black",
|
|
2015: "bg-cyan-600 text-black",
|
|
2016: "bg-blue-600",
|
|
2017: "bg-indigo-600",
|
|
2018: "bg-violet-400 text-black",
|
|
2019: "bg-purple-600",
|
|
2020: "bg-slate-600",
|
|
}
|
|
|
|
export let data
|
|
|
|
const revivals = data.revivals
|
|
// Sort by non-defunct revivals first, then by rating
|
|
.sort((a, b) => (a.defunct ? 1 : 0) - (b.defunct ? 1 : 0))
|
|
.sort((a, b) => (b?.rating?.overall || 0) - (a?.rating?.overall || 0))
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<meta
|
|
name="description"
|
|
content="An index of many of the currently playable revivals." />
|
|
<title>Revival Index • Revival Archive</title>
|
|
</svelte:head>
|
|
|
|
<h1>Revival Index</h1>
|
|
|
|
{#if revivals.length > 0}
|
|
<div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
|
{#each revivals as revival}
|
|
<a
|
|
href="/revival/{revival.path}"
|
|
class="txt bg-#1f1c1d @light:bg-white rounded-2
|
|
@light:text-black box-border flex flex-col p-5 text-white
|
|
{revival?.rating ? 'card transition hover:shadow-xl' : 'pointer-events-none'}">
|
|
<div class:opacity-50={revival.defunct} class="flex">
|
|
<div>
|
|
<div class="flex flex-wrap">
|
|
<h2 class="m-0 mb-1 me-3">{revival.name}</h2>
|
|
{#if revival.defunct}
|
|
<p class="mb-a mt-0 text-sm text-red-500">
|
|
[defunct]
|
|
</p>
|
|
{/if}
|
|
</div>
|
|
<div class="flex flex-wrap text-white">
|
|
{#each revival.clients || [] as year}
|
|
<span
|
|
class="{years[year]}
|
|
my-1 me-2 rounded-full px-2 py-0.5 text-sm">
|
|
{year}
|
|
</span>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
|
|
{#if revival.logo}
|
|
<img
|
|
src="/logos/{revival.logo}"
|
|
class="logo my-a ms-a h-14"
|
|
alt="{revival.name} Logo" />
|
|
{/if}
|
|
</div>
|
|
|
|
<div class:opacity-50={revival.defunct} class="mb-30">
|
|
{@html revival.overview || ""}
|
|
</div>
|
|
|
|
{#if revival.rating}
|
|
<div
|
|
class:opacity-50={revival.defunct}
|
|
class="mt-a ms-a flex">
|
|
<span class="me-2">Rating:</span>
|
|
<Stars rating={revival.rating.overall} />
|
|
</div>
|
|
{/if}
|
|
</a>
|
|
{/each}
|
|
</div>
|
|
{:else}
|
|
<h2 class="font-300 mt-35vh text-center tracking-wide">
|
|
No revivals yet. Watch this space!
|
|
</h2>
|
|
{/if}
|
|
|
|
<style lang="stylus">
|
|
.card:hover
|
|
transform translateY(-0.3rem)
|
|
</style>
|