clxxiii.dev
Two teams try and fill in any horizontal, vertical, or diagonal line on a bingo board by playing maps on osu!
osu.bingo
osu
1<script lang="ts">
2 import { Clock, Star } from 'lucide-svelte';
3 import MapStat from './MapStat.svelte';
4 import { fly } from 'svelte/transition';
5 import { browser } from '$app/environment';
6
7 export let map: Bingo.Card.FullMap;
8
9 const seconds = (time: number) => {
10 const seconds = time % 60;
11 return seconds > 9 ? seconds : `0${seconds}`;
12 };
13
14 const timeString = `${Math.floor(map.stats.length / 60)}:${seconds(map.stats.length)}`;
15
16 let showCopy: boolean;
17 const copy = () => {
18 showCopy = true;
19 setTimeout(() => (showCopy = false), 1);
20
21 const id = `${map.id}`;
22
23 if (browser) {
24 navigator.clipboard.writeText(id);
25 }
26 };
27</script>
28
29<div class="top grid bg-zinc-900">
30 <img
31 class="col-start-1 col-end-2 row-start-1 row-end-1 rounded-l-lg"
32 src={map.square_url}
33 alt=""
34 />
35 <div
36 class="flex -translate-x-2 flex-col justify-center rounded-l-lg bg-zinc-900 pl-2 font-rounded"
37 >
38 <div class="text-xl font-extrabold">{map.title}</div>
39 <div class="font-bold">by {map.artist}</div>
40 <div>[{map.difficulty_name}]</div>
41 <div class="pt-2 text-xs">
42 <MapStat>{map.stats.star_rating} <Star class="inline" size={14} /></MapStat>
43 <MapStat>{timeString} <Clock class="inline" size={14} /></MapStat>
44 <MapStat>{map.stats.bpm} BPM</MapStat>
45 <MapStat>CS{map.stats.cs}</MapStat>
46 <MapStat>AR{map.stats.ar}</MapStat>
47 <MapStat>OD{map.stats.od}</MapStat>
48 </div>
49 </div>
50 <div
51 class="col-start-1 col-end-3 row-start-3 row-end-4 mt-2 flex w-full justify-around bg-zinc-700 p-2"
52 >
53 <button
54 on:click={copy}
55 class="relative block w-40 rounded bg-pink-800 text-center font-rounded font-bold transition hover:bg-pink-700 active:bg-pink-900"
56 >
57 {#if showCopy}
58 <div
59 out:fly={{ y: -20, duration: 500 }}
60 class="text-s absolute w-full text-center text-green-400"
61 >
62 Copied
63 </div>
64 {/if}
65 Copy Map ID
66 </button>
67 <a
68 class="block w-40 rounded bg-pink-800 text-center font-rounded font-bold transition hover:bg-pink-700 active:bg-pink-900"
69 target="_blank"
70 rel="noopener noreferrer"
71 href="https://osu.ppy.sh/b/{map.id}">Open on osu!web</a
72 >
73 </div>
74</div>
75
76<style>
77 div.top {
78 grid-template-columns: fit-content(120px) 1fr;
79 grid-template-rows: fit-content(120px) 1fr;
80 }
81</style>