CSS osu!

Also posted on WPD

I made a simple version of the circle clicking game osu! with HTML and CSS. I was mostly finished with it around December 4. You can find it on @YourAlterEgo's profile. It's on the desktop site only. If you're using a laptop, using a mouse is recommended.

To play it, you click the circles when the ring (approach circle) gets close to the circle. The right time to click is around the time the ring turns white or when it almost reaches the circle. You can click earlier or later if you want. If the anthem starts at the same time you click the play button, it should somewhat sync with the song (it's not perfect).

Play here on @YourAlterEgo's profile (Desktop only)

If the anthem autoplays or the game lags, try it here:

https://reddreamer.nekoweb.org/cssosu/

The above site is a static web hosting site like Neocities or GitHub Pages.

Click here if you want to vote on polls asking whether you played and liked the game. They're in a comment because you can't have <details> and polls in the same post.

Comment what you think. If it glitches out or doesn't work, comment what went wrong and what browser you're using. If the anthem doesn't play, try closing other rDrama tabs that have audio playing.

Assets

rDrama version (Copy and paste it into your bio and profile CSS if you want)

• Bio Markdown
• CSS (rDrama version)
• Set this as your anthem

Non-rDrama version

I tried making a .zip, but Furryfox (Firefox) kept calling it a virus

https://files.catbox.moe/imovff.zip

• CSS (cssosu.css) (Mirror, name it cssosu.css)
• HTML (name it anything ending with .html)
• Song: lucky-nightcore.mp3 (Mirror, name it lucky-nightcore.mp3)
• Cursor: cursor.png (Mirror, name it cursor.png)
• Logo (used as an icon): cssosulogo.png (Mirror, name it cssosulogo.png)
• Background: background.jpg (Mirror, name it background.jpg)
• Background source: https://www.flickr.com/photos/adobetutorialz/4556724799/ (Median filter used to remove the patterns)

The song is a nightcore (sped-up) version of Lucky Twice - Lucky. I got it straight from an osu map (.osz file) with the same song and edited it to start shortly before the chorus.

Questions

If you have other questions, ask in the comments, and I might answer.

1. What is osu!?

It's a free-to-play weeb rhythm game where you click circles while listening to music. This is the game's website. You can try an unoffcial web demo like I did if you don't want to download it. On the actual game and the web version, you can use Z and X to click, which is easier than clicking with the mouse. They also have sliders and spinners, which aren't present in this CSS version.

2. What is CSS?

Cascading Style Sheets, a language used for styling webpages. You can use it to change the color of text, add shadows and glows, change the page's layout, add background images, add simple animations, and so on.

3. Is there an indicator for early and late hits?

No. I tried to track early hits by adding another <details> element that would be animated to toggle its visibility (and therefore clickability). There would be 2 <details> elements you could click, and clicking the one that appears earlier would mean you hit early. However, this caused issues with the circles not responding to clicks, so I gave up on it.

4. How does it work?

CSS animations, animation delays, CSS counters, and lots of <details> and <summary> elements

This uses a lot of <details> and <summary> elements. To make the circles and play button interactive on click, they needed to be interactive HTML elements. <details> and <summary> elements (normally used for showing more text on click, like a spoiler button) are allowed in rDrama bios (unlike checkboxes), so they were perfect for this. The <summary> is the actual clickable part, so that is the element that is styled into a circle or play button.

The following is what details and summary normally look like.

Try clicking me. This clickable text is the summary element inside the details element.

Hello! This is the hidden text!

<details>
<summary>Try clicking me. This clickable text is the <em>summary</em> element inside the <em>details</em> element.</summary>
Hello! :marseywave2: This is the hidden text!
</details>

The game screen is a <blockquote>. It has a play button at the start (<details> and <summary> elements), and there are 72 blockquotes containing other elements after the play button, one for each of the 72 circles. The bio looks something like the following.

<blockquote>
<details><summary></summary></details>
> <details><summary></summary></details><h2>a</h2><p>a</p>
> <details><summary></summary></details><h2>a</h2><p>a</p>
...
> <details><summary></summary></details><h2>a</h2><p>a</p>
#
> <details><summary></summary></details><h2>a</h2><p>a</p>
...
> <details><summary></summary></details><h2>a</h2><p>a</p>
</blockquote>

In HTML, it would be this.

<blockquote>
	<details><summary></summary></details>
	<blockquote><details><summary></summary></details><h2>a</h2><p>a</p></blockquote>
	<blockquote><details><summary></summary></details><h2>a</h2><p>a</p></blockquote>
	...
	<blockquote><details><summary></summary></details><h2>a</h2><p>a</p></blockquote>
	<h1></h1>
	<blockquote><details><summary></summary></details><h2>a</h2><p>a</p></blockquote>
	...
	<blockquote><details><summary></summary></details><h2>a</h2><p>a</p></blockquote>
</blockquote>

The blockquotes are absolutely positioned and placed around the screen. Inside the blockquotes are the circles (<details> and <summary> elements), the rings/approach circles (<p>), and miss indicators (<h2>). There are also a few <h1> elements between the blockquotes used to mark the start of each section with different colored circles.

<blockquote>
	<details>
		<summary></summary>
	</details>
	<h2>a</h2>
	<p>a</p>
</blockquote>

You might notice the <p> and <h2> elements have "a" written inside them. This is simply because rDrama did not allow empty <p> and <h2> elements.

The approach circles (rings), circles, and miss indicators were all animated with CSS animations. Because osu! has set timings, it's easy to simply add an animation delay to determine when circles should appear. For example, circle 1 fades in 1.13 second after you click the play button, and circle 72 appears 32.73s seconds in.

#profile--bio blockquote > blockquote:nth-of-type(1) {
	animation-delay: 1.13s;
}

The circles, rings/approach circles, and miss indicators inherit the timing from the containing blockquote.

#profile--bio blockquote > blockquote p,
#profile--bio blockquote > blockquote details,
#profile--bio blockquote > blockquote h2 {
	animation-delay:inherit !important;
}

The play button consists of <details> and <summary> elements. When you click the play button, the open attribute gets added to the <details> element, and the play button gets hidden. The game only starts playing the animations for the other elements when the play button has the open attribute. The CSS uses the sibling selector to use the play button to target the other elements.

#profile--bio details[open] ~ blockquote details {
	animation:1.5s fadecircle ease-out;
	animation-fill-mode:forwards;
}

The above means that the circle (the second details) should have an animation named "fadecircle" only after the play button (the first details) has been clicked. The details[open] means that the details element has the "open" attribute. This looks like <details open> or <details open=""> in the HTML. The ~ is a sibling selector. If you write details ~ blockquote, it targets all blockquotes that are siblings of a details element (having the same parent element) and come after it in the HTML.

The circles need to be clickable for a limited amount of time. The visibility attribute both can be animated and affects interactivity. A circle's visibility is toggled through a CSS animation to make it clickable only when it's on screen.

@keyframes fadecircle {
	0% {
		visibility:hidden;
		opacity:0;
	}
	10% {
		visibility:visible;
		opacity:1;
	}
	90% {
		opacity:1;
		visibility:visible;
	}
	100% {
		visibility:hidden;
		opacity:0;
	}
}

When you click on a circle, it hides both the approach circle and the miss indicator. The miss indicator only appears after the circle fades out, meaning that if you click the circle, the miss indicator will never appear. Clicking the circle also makes the circle play a different animation to fade out as a white glow. Like with the play button, the open attribute is used to determine whether a circle was hit.

Hide approach circle after the circle (the second details) has been hit ([open])

#profile--bio details[open] ~ blockquote details[open] ~ p {
	display:none;
}

Play a different animation after the circle has been hit

#profile--bio > blockquote > blockquote > details[open] summary {
	background:none;
	animation:0.15s hitcircle linear;
	animation-fill-mode:forwards;
	border-width:6px;
}

The numbers on the circles and the hit counter were made using the CSS counter feature. The CSS counter feature allows us to count elements matching a certain selector and display the current count using the content attribute. For example, you can make a counter to count the number of circles and display the current count on each circle. That way, the 1st circle will be labelled 1, the 2nd circle will be labelled 2, and so on.

The first rule initializes 3 different counters to zero. The second adds 1 to two of the counters at every one of the 72 blockquotes inside the game. The third displays the current count of the counter circlenumbers on the circles.

#profile--bio {
	counter-reset:circlenumbers hitcircles totalcircles;
}

#profile--bio blockquote > blockquote {
	...
	counter-increment:circlenumbers totalcircles;
	...
}

#profile--bio > blockquote > blockquote > details > summary::before{
	content:counter(circlenumbers);
	...
}

There are different sections with different colors, and the circles in each section are numbered up starting from 1. To determine when each section starts, there are <h1> elements between the blockquotes. This allows us to use the sibling selector to target the blockquotes after each nth <h1> and change the circles' colors. The counter on the circles is also reset to 1 at each <h1>.

#profile--bio h1 {
	counter-set:circlenumbers 0;
	...
}

The default circle color is red. The circles in the first section use that color. The rules below override the colors of the circles after the first <h1> and the second <h1> with pink and purple respectively.

#profile--bio h1:first-of-type ~ blockquote summary {
	background-color:var(--pink-transparent);
}

#profile--bio h1:nth-of-type(2) ~ blockquote summary {
	background-color:var(--purple-transparent);
}

The hit counter counts the number of circles with the open attribute and is placed on the ::after pseudoelement attached to the outer container blockquote (the game screen). The element displaying this counter needs to be placed after all of the circles in order to count them all, and this meets the requirement.

#profile--bio > blockquote > blockquote details[open] {
	counter-increment:hitcircles;
}

#profile--bio > blockquote::after {
	content:"Total circles: " counter(totalcircles) " | Circles clicked: " counter(hitcircles);
	...
}

The timer was made using ::before and ::after pseudoelements with an animated content property. I found out this was possible from @iheartrdrama's former WPD CSS!

#profile--bio > blockquote details[open] ~ h1:nth-of-type(4)::before {
	content:"0:00";
	left:20px;
	animation:36s timer linear, 0.25s timerFade;
	animation-delay:0s, 36s;
	animation-fill-mode:forwards;
}

The other timer uses the same animation but in a reverse direction.

animation:36s timer linear, 0.25s timerFade;
animation-direction:reverse, normal;

Animation

@keyframes timer {
	0% {
		content:"0:00";
	}
	2.78% {
		content:"0:01";
	}
	...
	97.22% {
		content:"0:35";
	}
	100% {
		content:"0:36";
	}
}

Thanks for reading if you read this post, and thanks for playing if you played the game.

Cirno is a gangster!!! Look at her go!

Now we need ZUN to develop Gensokyo Theft Auto.

Your contribution has been removed because it tactlessly generalises gender.

Movie sonic haters when they get told a character that acts immature and underdeveloped is supposed to be immature and underdeveloped: pic.twitter.com/GRsXSVR31f

— NikkiDoStuff | 16+ (@NikkiDoStuff) December 27, 2024

The Last Hope of Hollywood
Sonic Movie 4
🙏🙏🙏🙏https://t.co/96GndQneFB

— PLAYSTATION💎VISION (@PlayStation9412) December 28, 2024

So I asked my mom today about if I can get the sonic movie 3 toys for my birthday, and she said no. Because she thinks that I own way too much sonic merch :(

And that’s extremely unfair, cause it’s for my birthday and I should be allowed to get anything I want 😭 pic.twitter.com/PN7nNC2YQt

— 𝒜𝓃𝑔𝑒𝓁 ♡ (@SazelWells) August 22, 2024

sonic 3 was so butt i'm sorry y'all must be hyped cause shadow was in it but literally nothing made since and everything about it felt cringe as heck it was hard to sit through. wade ripple was in it for 45 seconds so 10/10 movie

— [email protected] (@C0mmieB) December 26, 2024

WAVE 2 SONIC MOVIE 3 MINI FIGURES ARE ALL RERELEASES!!! https://t.co/PvDLH1vd8F pic.twitter.com/54fOHRGRBY

— normie 𓆏🦔 (@KellytoyDK) November 4, 2024

pic.twitter.com/RaeC5WLiUR

— Serf (@TheRoyalSerf) December 28, 2024

Vivek literally got rich by doing a rug pull on the stock market using his mom’s medical certificates to push a fake drug.

Vivek and his entire family are leeches on our country. They should be DEPORTED back to India. https://t.co/0n2hI0ckrE

— Right Wing Cope (@RightWingCope) December 27, 2024

https://old.reddit.com/r/Economics/comments/1hmkk6a/comment/m3v1hvj/?context=8

https://old.reddit.com/r/europe/comments/1hm73ss/comment/m3skvuo/?context=8

https://old.reddit.com/r/Economics/comments/1hmkk6a/comment/m3uzkav/?context=8

Spliting off the mainstream subreddit to listen to a youtuber demanding more strong women in the punch harder manga is insane.

Client confessed love for me and then ended their life

Tragic, tragic, heartbreaking loss. Won't go into any details to protect client privacy, but it's hard to swallow. Would be so grateful for any resources, groups, or advice as I grieve.

I've canceled most of my sessions for the week, but have kept a few. My backlogged notes for other clients are creating some anxiety. What a rollercoaster.

The most captivating client I've worked with to date, and they continue to be so even in their death. Grateful to have known them.

Update: Unbelievably thankful for the outpouring of support. It's been incredibly helpful to read and utilize ❤️ Very unfortunately I just got news of a second client passing. Two in the same week. This one was not by suicide.

Edit:

Erotic Countertransference

Looking for personal experiences navigating romantic/erotic countertransference (especially that in response to erotic transference)... I'm seeking supervision and being mindful about how I'm showing up with this client, but I'd love if anyone would be open to sharing more about their own experiences with this, and what the ultimate outcome was for you. Interestingly, this client has expressed their own attraction to me, and we're working through it/making use of it in our work together. They are not aware of my feelings beyond the genuine care I have for them. My framework leans relational psychodynamic for reference.

MERRY CHRISTMAS

Especially to white women, without whom we would have almost no drama please let the white women in your life know that you love and appreciate them

Previous White Woman Wednesdays

The Trump 2024 Edition

Christmas Edition

We're back Edition

Greek Towelboy Edition

Trad Wife Edition

Pumpkin S pice Edition

Red Scare Edition

Anglo-Saxon Edition

Dirndl Edition

9/11 Edition

The Original

Drama being added

I was told that making your own write up, even biased will make a post more of an effortpost compared to just copy pasting dramatic comments before the link

FDS never existed, and even if it did it was mostly male incels pretending to be women part 1

https://old.reddit.com/r/SubredditDrama/comments/1hlxfxu/why_are_young_women_so_lacking_in_compassion_for/m3pwshs/?context=8

Part 2

https://old.reddit.com/r/SubredditDrama/comments/1hlxfxu/why_are_young_women_so_lacking_in_compassion_for/m3q03ax/?context=8

Part 3

https://old.reddit.com/r/SubredditDrama/comments/1hlxfxu/why_are_young_women_so_lacking_in_compassion_for/m3q13v1/?context=8

Toxic masculinity and not gender wars and astroturfed hate is the reason of men failing

https://old.reddit.com/r/SubredditDrama/comments/1hlxfxu/why_are_young_women_so_lacking_in_compassion_for/m3q1vfe/?context=8

Men can't say women bad, but women can say men bad

https://old.reddit.com/r/SubredditDrama/comments/1hlxfxu/why_are_young_women_so_lacking_in_compassion_for/m3pul6p/?context=8

I don't understand why mayo moids are crying, mayo moids can't have issue + plus lots of self flagellation over being mayo moids

https://old.reddit.com/r/SubredditDrama/comments/1hlxfxu/why_are_young_women_so_lacking_in_compassion_for/m3ptblt/?context=8

Equality to an oppressor feels like prosecution?

https://old.reddit.com/r/SubredditDrama/comments/1hlxfxu/why_are_young_women_so_lacking_in_compassion_for/m3puvr1/?context=8

Straight white men can have issues, for example if they are poor or ugly...

No they can't mayo, I tell you this as a mayo!

https://old.reddit.com/r/SubredditDrama/comments/1hlxfxu/why_are_young_women_so_lacking_in_compassion_for/m3q38sx/?context=8

You know, that with posts like these, you only giving ammo to chuds and make it easier for them to attract young men?

https://old.reddit.com/r/SubredditDrama/comments/1hlxfxu/why_are_young_women_so_lacking_in_compassion_for/m3pyx7l/?context=8

if a man feels like shit because gendered issues are brought to light, they need to work through that themselves instead of expecting women to sugar coat everything for them.

https://old.reddit.com/r/SubredditDrama/comments/1hlxfxu/why_are_young_women_so_lacking_in_compassion_for/m3q03rc/?context=8

White men do not deserve compassion because majority of them voted for trump. Cool, but white women did too. That's different

https://old.reddit.com/r/SubredditDrama/comments/1hlxfxu/why_are_young_women_so_lacking_in_compassion_for/m3q03rc/?context=8

Moids are the destroyers of the universe copypasta

https://old.reddit.com/r/SubredditDrama/comments/1hlxfxu/why_are_young_women_so_lacking_in_compassion_for/m3q8wbd/?context=8

That pretty much sums it up.

This was eye-opening.

— Elon Musk (@elonmusk) December 27, 2024

How will things shake out for our African friend? He's nervous posting like crazy

Post he is responding to

So basically the right split into two factions, tech right and right right, and the tech right is like "hey we need h-1b visa people to do the jobs," and the right right was like "no you need to hire americans," and the tech right is like "but you guys are r-slurred," and the… pic.twitter.com/KatlmN6BuX

— Autism Capital 🧩 (@AutismCapital) December 26, 2024

I had first returned to India with the idea of improving it, but after 11 years, I realized that India was a sinking ship, with worsening and increasingly shameless corruption, degraded people, and a society that was falling apart. I had never met an honest bureaucrat or politician. I applied to emigrate to Canada and my application was approved in a record three weeks.

I now advise East Asian and Western corporations on investing in India. Most of what I tell them sounds to them exaggerated, unrealistic, and unbelievable. After much dance, drama, and a great deal of lost money, they begin to believe what I tell them. However, this learning is never institutionalized because of a refusal to understand India. This is a form of political correctness, a poison eating away the innards of Western values.

When I was a child growing up in India, I learned that "might makes right." Power was often abused, with those in control acting as if they had a God-given right to exploit and dominate others. The display of authority could be so extreme that questioning it or expecting those in power to do their duty might lead to retribution. Those in authority seemed to believe that their positions were not for serving others but for personal gain.

People who showed respect appeared to have meekly accepted a lower, subservient position. Kind people had to hide their compassion, for being nice was seen as a weakness.

In India, I have rarely seen someone in authority take the initiative to solve a problem he was responsible for. When I was at university, an underaged boy who worked in the kitchen was r*ped and sodomized by the janitors. I reported the matter, but not only did no one in authority do what was right — something well within their power — the authorities and fellow students threatened me with severe consequences if I pursued the matter further. Devoid of empathy, they also made fun of the boy and me.

Yes, there is an element of sadism here. There is some degree of pleasure that Indians take in the pain suffered by others. The attitude of the authorities was like that of the high-placed Delhi bureaucrat who told me that his Black Label whiskey tastes so much better because he knows that most Indians can't afford to drink it.

This confuses Westerners. If they had power, even if they were corrupt, in a situation where there was nothing to gain or lose — no bribes to receive since both parties were poor, and no risk of offending someone well-connected — they would do the right thing and book the alleged male feminist. These Indians would do nothing, not even lift a finger, unless there was a reward: money or s*x. Their apathy was bottomless.

Doing your job may be seen as effeminate by those above you. If you can shirk your responsibilities, you're considered macho. In that culture, there is rarely any pride or honor in doing what is right. If you call a plumber for repairs, he will see it as beneath him to leave without creating a mess. He may deliberately do a shoddy job, even if doing it well wouldn't take more time. A complex web of arrogance, egotism, servility, casteism, tribalism, and magical thinking drives this behavior. He shows his contempt for you and gets the better of you by leaving a mess. His customer, as the other side of the same coin, might well look down on and exploit someone who did his job well.

If you do a bad job, does that mean you do not get called back? That doesn't matter to people who have no standards to begin with and who do not think ahead. There is little positive feedback to those who want to do better, be fair, or make better products.

Fairness, justice, trust, empathy, and impartiality are alien to many Indians. They have a hard time telling the difference between right and wrong. They are indifferent even when no cost is associated with being fair. Moreover, if they could do good without any personal cost, they would still prefer not to, because that can be seen as a sign of weakness.

Indians are indoctrinated to be submissive. The indoctrination is so profound that Indians address those even slightly above them in authority as "sir." They tend to be servile, sycophantic, and ingratiating. This should not be mistaken for respect, because respect is foreign to Indians. When they call you "sir," it reflects their view of you only as the stronger figure in the interaction, consistent with their view that might makes right. They will demean you the moment you are in a weaker position.

You are either higher or lower — therefore, you are either abuser or abused. Equality is impossible. A visitor learns very quickly that saying "please" and "thank you" is seen as a sign of weakness and is reserved for those who wish to demean themselves.

Indians cannot maintain the institutions established by the British. These institutions have been hollowed out and corrupted, becoming predatory. The constitution and laws hold little value. The only forces driving these institutions are bribes and connections. Whether you approach the highest political leaders or the pettiest bureaucrats, they openly and unashamedly demand bribes.

Mixed feelings, but after seeing a very disturbing video of IDF soldiers raping a captive on CCTV then a jewish chad coming on israel's live Morning TV saying it's good thing they r*ped him.... Maybe Putin is right.

George Soros we need you to be a good Jew and get those rats over in israel to stand the heck down. Vermin.

Typical israeli rats.

Death to israel. Death to every idf soldier.

Free Palestine from River to Sea. All the land goes back. No land for the jew. You wanna play hardball? Russia supporting Iran now. Only a matter of time before Iran gets a nuke. Send the rats back to heck.

Except for these dudes (and other cool people who live in israel but love the palestines) they cool

The left can't comprehend what it's seeing. The MAGA base, unlike the compliant left, negotiates openly with the richest donors and backers. This is too much democracy for them. Too much transparency. They think it's some huge drama when really it's healthy discourse.

— Cernovich (@Cernovich) December 26, 2024

Yes, openly, honestly and thoroughly.

That's how real exploration happens.

Many things to contemplate and how they dovetail together.

The truth is the truth.

— Truth Shero (@TruthShero) December 27, 2024

They do not know what actual dialogue and dissent looks like because - as communists - to them lockstep uniformity is a sign of power.

— Rob Smith (@robsmithonline) December 26, 2024

Exactly. The MAGA base isn’t a mindless echo chamber—it’s a marketplace of ideas where even billionaires get pushback. The left isn’t used to seeing this because their side runs on rigid top-down messaging. Real democracy looks messy, but it’s also how you get results.

— Daniel Gabai (@DanielGabai_) December 27, 2024

X is the new public square and posting here is like publishing pamphlets for open debate. It’s how our country was formed. We are going back to basics

— Jessica Montgomery (@jessicanolanova) December 27, 2024

!nonchuds

(i'd post that south park smelling farts gif but im too lazy)

Last thread

!art

Last weeks prompt:

Draw a something for the holidays, Christmas themed, Hanukka themed, Kwanzaa themed, or anything else you can think of that makes sense for the season

Submissions from last thread:

@Katedra

@Szrotmistrz

@houellebecq

@Count_Sprpr

@TournamentFishingButJolly

This weeks prompt:

This week, draw something relating to the word "Ink"

As always if you have any feedback on these threads I am all ears.

Repent or burn forever to those who don't

Happy birthday Jesus Christ the king of kings