tealsummernights

purrs AND wags tail??

  • she/it

30-something, gray-ace, lesbian, polyam, t4t. trans cat/puppygirl ΘΔ


likes art, games, and garfield. also petplay and hypnokink? (and many more)


introverted and requires alone time.
will cry otherwise.
but also needs constant attention?
will cry otherwise?


hrt: august 8th, 2023
name change: february 20th, 2024


i belong to @Xyl-faedust 💖


profile pic by @motherfucker-receiver


18+ only


art, blog, microblog, etc.
tealsummernights.nekoweb.org/
please praise me
pleasepraise.me/mae
website league
bubsy.org/mae

rebane2001
@rebane2001
Equestria Girls (California Gurls Parody) - [ ! ] Click "start!" below first
[ ! ] Click "start!" below first
Equestria Girls (California Gurls Parody)
00:00
Score:
0
1
2
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
start!
thank u for playing!
Rank:
E
D
C
B
A
S
hit play in:
5
4
3
2
1
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
1
2
3
4
5
6
1
2
3
4
5
1
2
1
2
3
4
5
6
7
1
2
3
4
1
2
3
4
5
1
2
3
4
5
6
7
1
2
1
2
3
4
5
6
1
2
3
4
5
6
1
2
3
4
1
2
3
4
1
2
3
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
6
7
1
2
3
4
5
6
7
1
2
3
4
5
6
1
2
3
4
5
1
2
1
2
3
4
5
6
1
2
3
4
5
1
2
3
4
5
6
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
1
2
3
4
1
2
3
4
5
6
1
2
3
4
5
6
1
2
3
4
5
1
2
3
4
5
6
1
2
3
1
2
3
4
5
6
1
2
3
4
5
6
1
2
3
4
5
1
2
3
4
5
6
1
2
3
4
5
6
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
1
2
3
info & credits

This is an osu! clone I wrote in inline HTML and CSS!

The original osu! map was made by ztrot, but I tweaked it a little because this chost doesn't support sliders.

I got the score storage idea from this chost by Corncycle, and the score display is based off of this chost by cefqrn.

Song is from My Little Pony: Friendship is Magic.


You must log in to comment.

in reply to @rebane2001's post:

You can read the raw markup I submitted with JSON.parse(document.querySelector("#trpc-dehydrated-state").innerText).queries.map(e=>e?.state?.data?.post).find(e=>e).blocks.at(-1).markdown.content!

The bulk of the character limit (96%) went to adding the hitcircles (~760 bytes each), so that's where I could save characters the most by being clever. Every byte in a hitcircle is the equivalent of 248 bytes in the final markup.

Here's an example of a hitnote (with whitespace added for clarity):

<details>
    <summary style=list-style:none>
        <div style="
            position:absolute;
            border-radius:100px;
            animation:2s steps(2,jump-none) 89.62s slideupleft;
            left:119px;
            top:184px;
            width:100px;
            height:100px;
            background:#825;
            transform:scale(0);
            cursor:pointer
        ">3
            <div style="
                position:absolute;
                animation:2s linear 90.12s 1 reverse none running slideupleft;
                width:200px;
                height:200px;
                pointer-events:none;
                bottom:50px;
                left:50px
            ">
                <div style="
                    translate:-100px 100px;
                    border-radius:200px;
                    border:4px solid #825;
                    width:100%;
                    height:100%
                "></div>
            </div>
        </div>
    </summary>
    <div style="
        position:absolute;
        border-radius:100px;
        animation:1s steps(2,jump-none) -0.5s slideupleft;
        width:100px;
        height:100px;
        background-color:#FFFA;
        transform:scale(0);
        left:119px;
        top:184px
    "></div>
    <div style=height:1px></div>
</details>

The loose "3" is the current combo number, the nested divs are used for the approaching circle animation, and the 1px high div is what keeps track of the score.

I left out the style tag quotes where possible and I experimented a lot with what CSS I could get away with, looking at MDN to see which way of doing things would be the most compact. I do think there is opportunity to save more bytes here by carefully looking at the specs, but I wanted to finish this project in less than a day.

I did give up some savings for cross-browser compatibility though, eg I could've replaced steps(2,jump-none) with steps(2) and some clever size/position adjustments, but it would've caused some weird artifacts in Firefox.

I didn't need to save too many bytes elsewhere, but I did do some stuff, eg the number counter doesn't work past 299 because it helped save bytes.

I didn't use any existing minifiers or preprocessors, I just manually wrote the html as compact as I could and then put it through a quick python script that generated the hitnotes and removed whitespace.