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 { backInOut, circInOut } from 'svelte/easing';
3 import { tweened } from 'svelte/motion';
4
5 export let size = 100;
6 export let duration = 300;
7
8 const slide = tweened(0, {
9 easing: circInOut,
10 duration
11 });
12 const rotate = tweened(90, {
13 easing: backInOut,
14 duration
15 });
16
17 const animate = async () => {
18 const sleep = async (t: number) => await new Promise((r) => setTimeout(r, t));
19 rotate.set(0, { duration: 0 });
20 slide.set(0, { duration: 0 });
21 slide.set(1);
22 await sleep(duration);
23 rotate.set(90, { duration: 0 });
24 slide.set(0, { duration: 0 });
25 slide.set(1);
26 await sleep(duration);
27 rotate.set(90 * 2, { duration: 0 });
28 slide.set(0, { duration: 0 });
29 slide.set(1);
30 await sleep(duration);
31 rotate.set(90 * 3, { duration: 0 });
32 slide.set(0, { duration: 0 });
33 slide.set(1);
34 await sleep(duration);
35 rotate.set(90 * 5, { duration: duration * 3 });
36 };
37
38 setInterval(animate, duration * 7.5);
39 animate();
40</script>
41
42<div
43 style="--s: {size / 3}px; --s3: {size}px; --r: {$rotate}deg; --b: {size / 50}px"
44 class="size-[var(--s3)] rotate-[var(--r)]"
45>
46 <div class="relative h-[var(--s)] w-[var(--s3)] overflow-hidden">
47 <div style="--x: calc(-100% + {$slide} * 100%); --y: 0%" class="squarebox">
48 <div class="square bg-pink-300"></div>
49 </div>
50 <div style="--x: calc({$slide} * 100%); --y: 0%" class="squarebox">
51 <div class="square bg-pink-300"></div>
52 </div>
53 <div style="--x: calc(100% + {$slide} * 100%); --y: 0%" class="squarebox">
54 <div class="square bg-pink-300"></div>
55 </div>
56 <div style="--x: calc(200% + {$slide} * 100%); --y: 0%" class="squarebox">
57 <div class="square bg-pink-300"></div>
58 </div>
59 </div>
60 <div style="--x: 0%; --y: 0%" class="squarebox">
61 <div class="square bg-pink-300"></div>
62 </div>
63 <div style="--x: 100%; --y: 0%" class="squarebox">
64 <div class="square bg-white"></div>
65 </div>
66 <div style="--x: 200%; --y: 0%" class="squarebox">
67 <div class="square bg-pink-300"></div>
68 </div>
69 <div style="--x: 0%; --y: 0%" class="squarebox">
70 <div class="square bg-pink-300"></div>
71 </div>
72 <div style="--x: 0%; --y: 100%" class="squarebox">
73 <div class="square bg-pink-300"></div>
74 </div>
75 <div style="--x: 100%; --y: 100%" class="squarebox">
76 <div class="square bg-pink-300"></div>
77 </div>
78 <div style="--x: 200%; --y: 100%" class="squarebox">
79 <div class="square bg-pink-300"></div>
80 </div>
81</div>
82
83<style>
84 .squarebox {
85 position: absolute;
86 width: var(--s);
87 height: var(--s);
88 padding: var(--b);
89 transform: translate(var(--x), var(--y));
90 }
91 .square {
92 width: 100%;
93 height: 100%;
94 border-radius: calc(2 * var(--b));
95 }
96</style>