@hACAppy_2025 thoughts

https://old.reddit.com/r/Darnthatsinteresting/comments/1howtb3/comment/m4dwynn/?context=8

DECLASSIFIED: In September 2024, before the fall of the Assad Regime, our soldiers conducted an undercover operation to dismantle an Iranian-funded underground precision missile production site in Syria.

Watch exclusive footage from this historic moment. pic.twitter.com/s0bTDNwx77

— Israel Defense Forces (@IDF) January 2, 2025

!jidf we just can't stop winning wow

(non-blurry)

(differently-blurry)

On tonight's episode:

We begin the NewJeans Saga. Join us for a brief look at the history of the major players in the scandal, as well as the opening volleys of a feud that could alter the landscape of pretty ricefoids shaking their hips on stage for ever.

Who is MHJ?

What exactly is, a NewJeans?

Why do I keep using Twice for the OP?

Find the answers to all of this and more, right after these messages from our sponsor:

Now, back to our regularly scheduled programing.

Christmas Thread Theme

Introduction

On the morning of November 28th, 2024, an official representative of the superstar Kpop group NewJeans announced that the members would be holding a press conference to address the ongoing dispute with their record label, ADOR. Two weeks prior, on November 13th, the group sent a letter notifying ADOR of numerous issues that they considered to be breaches of their contract. Per a (standard) clause in the contract, ADOR had 14 days to respond to and ameliorate these breaches. If it failed to do so, NewJeans would have the option to terminate their exclusive contract, without penalty. With the 14 day deadline set to pass at 12:00 AM KST, November 29th, it seemed premature to call a press conference. However, the group was planning to board a plane to Japan in preparation for promotional activities later that evening, and expressed their wish to update their fans on the situation before ADOR could take advantage of their travel to control the media narrative.

They know what they did

And so, at 8:30 PM, the members of NewJeans and a PR representative met with the press to announce their response to ADOR's failure to rectify the alleged contract breaches. What followed was a bizzare press conference that saw members claim their contract was terminated and that they:

• were no longer under contract with ADOR after midnight

• would not need to pay a termination penalty

• would begin seeking other oppurtunities while finishing scheduled events with ADOR

And the really bizarre part...

• would not seek to confirm the termination of their contract via legal action.

This, of course, raised numerous questions amongst the entertainment reporters present who have a solid grasp on how contract terminations work. I'm sure the dramatards in the audience who understand contract law, or are capable of tying their own shoes, have many of the same questions. Thankfully, the girls took some time to take questions from the press.

An excerpt from the press conference. Did you understand?

Always a good idea to check the specifics after terminating the contract

Leaving the world with more questions than answers, the members of NewJeans boarded a plane to Japan to resume promotional activities, setting the internet ablaze with discussion of what was in the future for NewJeans. Well, in order to predict the future, one must first understand the past.

And that past can only be found...

...In the K-Hole.

The Main Players

HYBE

The illegitimate love child of Kim Jong-Un and Xi Jinping Bang Si-Hyuk

HYBE Corporation, initially founded by Bang Si-hyuk in 2005 as Big Hit Entertainment, is the largest of the big 4 record companies in Kpop, with a market capitalization almost 4x greater than that of their next largest competitor, JYP Entertainment. Their success is directly tied to that of their most popular group, BTS, who during their heyday, generated more GDP for South Korea than the Korean domestic airline industry. This great financial success provided Big Hit Entertainment with the opportunity to acquire numerous smaller record labels including Source Music, which would later go on to debut the girl group Le Sserafim, in 2019 and Pledis Entertainment (Seventeen and Formis9) in 2020

With these new labels under their belt, Big Hit Entertainment restructured itself as HYBE Corporation in 2021, structuring all of their various sub-labels underneath the new Hybe Label division. During the years proceeding the re-structuring, HYBE developed plans to debut numerous gril groups, and leading these plans was the former Visual Director for SM Entertainment, Min Hee-jin (MHJ).

Min Hee-Jin

Born in 1979, MHJ began her career in Kpop as a graphic designer for SM Entertainment (one of the other big 4 companies in Kpop) in 2003. Eventually she was promoted to creative director, where she oversaw all visual branding for a number of SM's gril groups, including Girls Generation, Red Velvet, and f(x). Her impact on the industry in this role was massive, as she shifted artistic direction within the industry towards the idea of more experimental "concepts".

You can think of a group's concept as the overarching theme of the group, impacting everything from album art, photoshoots, music videos, and costumes to public behavior and even the type of music the group produces. The concept of an artist can remain static for years on end (think of how Motley Crue have always been party boy rockstars), or change over time (compare the early music and style of The Beatles to their later work.)

Leaving SM in 2018 due to burnout, it wasn't long before she found herself hired by Big Hit Entertainment to oversee the rebranding to HYBE Corporation. It was also announced that MHJ would be the creative lead for multiple new girl groups, as well as the producer for a label that HYBE would launch in the next few years. MHJ took part in initial planning for a new girl group with Source Music, but in 2021 HYBE established the ADOR sub label and named her as the CEO. The first act to debut under ADOR would be the girl group MHJ had begun developing with Source Music, NewJeans.

NewJeans

Upcoming January 2025 Vogue Korea cover featuring NewJeans

Auditions for Mhj's new girl group began in 2019 under Source Music. Initially planning to debut in 2021, this was pushed back to 2022, ostentibly due to the Covid-19 Pandemic. Officially debuting on July 22nd of 2022, NewJeans quickly became one of the biggest acts in all of Kpop. Their achievements speak for themselves:

• First idol group in history to occupy the #1, #2 and #3 spot on every chart in Korea for 3 consecutive months with Ditto, OMG, and Hype Boy

• NewJeans surpassed 5 billion total points on Circle Digital Chart in only 64 weeks, second only to BTS (53 weeks)

• First girl group to ever chart 5 songs on the Billboard Hot 100 in the same calendar year in K-Pop history

• Set a Guinness record for fastest artist to reach 1 billion streams on Spotify and also became the fastest Korean act in history to reach 3 billion streams

Newjeans debut single and MV, Hype Boy, released July 22nd, 2022.

This groups massive success on the charts led them to become one of the most sought after brand endorsements in the advertising industry , with them eventually going on to work with Nike, Coca- Cola, McDonald's, Apple, Levi's, and Calvin Klein. NewJeans was so successful on this front that In April 2024, Forbes Korea reported that the group had earned ₩30 billion (~$20 million) in advertising in the course of a single year. to put this in perspective, Patrick Mahomes had total estimated off-the-field earnings of $25 million in 2024.

You know you've made it big when even your slop meal gets to go on tour.

Hanni

The Vietnamese-Australian member of a Korean girl group's English male name is Harry.

Born to Vietnamese parents in Melbourne, Australia, Phạm Ngọc Hân's (20) first experience in the entertainment industry was as a member of the Australian kpop dance cover group AEMINA. In late 2019, she was the only person to pass the Plus Global Auditions, the first set of auditions for the girl group that would become NewJeans. Hanni is widely considered to be the best vocalist in the group

Minji

Marcus the Cleanup Queen

Born in Chuncheon, South Korea in 2004, Kim Min-ji began training with Source Music in 2017. She was likely the first member selected for NewJeans, as she was the anonymous face of the Plus Global Auditions that selected Hanni. Often acting as the de facto leader, Minji is the oldest member and one of the best dancers in the group.

Dani

Her male English name is Demitree.

In 2005, Danielle Marsh was born to an Australian father and Korean mother in Newcastle, Australia. Moving back and forth between Australia and South Korea as a child, Dani's first experience in show business was as a child actor in South Korea. She began her kpop career as a trainee at YG Entertainment ( the last of the big four Kpop companies), leaving the company and joining Source Music in July 2020. Probably the most popular member internationally, Dani is a talented vocalist who provided the Korean dub of Ariel for the live action Little Mermaid movie.

Haerin

This Kang's name is Stephen

Originally from Seoul, South Korea, Kang Hae-rin dropped out of middle school in 2020 at the age of 13 to begin training with Source Music, later earning her GED. A taleented singer and dancer, Haerin is also a global ambassador for Dior.

Hyein

(Male name) Collin is the reason we need pedobear.

Lee Hye-in was born in Incheon, South Korea in 2008, making her the youngest member, or maknae, of NewJeans. Getting her start as a child model, she also was a member of a kid's group called U.SSO Girl from 2017-2018. She later went on to star on a YouTube children's channel called PocketTV. She eventually joined ADOR as a trainee in 2021. Despite being the youngest member of the group, Hyein has the most showbiz experience in the group.

Now that we've had a chance to meet the stars of our story, we are finally able to see where the NewJeans/ADOR drama truly began. But first, it's time for a...

Cookie Break

After the success of their debut single Hype Boy, NewJeans quickly followed up with the lead single of their self-titled debut EP, Cookie. As @0BS3SS10N mentioned in the comments of our previous episode, there was something a little off about this song.

With most of the song in Korean, the lyrics, once translated into English, are something else:

Now, these lyrics wouldn't be too bad in and of themselves, at least compared to western music, save for one small problem; the majority of the group was underage when the song was released. At the time of release, Dani and Hanni were 17, Haerin was 16, and Hyein was 14(!). Only Minji was over the age of 18 at the time. This generated a great deal of controversy in western markets due to the sexual tone of the lyrics.

https://old.reddit.com/r/kpop/comments/wdclrx/newjeans_cookie/

https://old.reddit.com/r/kpopthoughts/comments/wdd6bg/new_jeans_just_officially_debut_with_the_release/

Link

A solid summary of the drama

As @ftincel touched on above, the scandal was complicated by a report of a pattern of weird, borderline pedophilic behavior surrounding MHJ. She had numerous pictures of underage girls and a 15 year old Brooke Shields on her Instagram, and had also been accused of over sexualizing underage idols while at SM Entertainment.

Link

HYBE, ADOR, and NewJeans themselves argued the song was actually about burning a CD for someone (to bake a CD is a euphemism for burning a CD in Korea) and that the translator who worked on the MV above had mistranslated the lyrics. Most Westerners didn't buy this, pointing out that two of the people in the group (Dani and Hanni) were native English speakers. However, as is common with scandals related to Kpop idols, there were plenty of fans who were ready to eat up the cover story.

Link

https://old.reddit.com/r/unpopularkpopopinions/comments/wrsspn/cookie_by_new_jeans_isnt_as_sexual_as_people_make/

https://old.reddit.com/r/NewJeans/comments/wkle0q/serious_discussion_thread_the_cookie_and_min/

Let's see what /mu/ had to say at the time:

You know it's bad when even 4chan thinks you've gone too far

I think this is a compilation of translated comments from Korean sites. If not, someone needs to investigate this guy.

With all of that background info and the Cookie drama out of the way, we can begin our story in earnest.

The Beginning of the End

The Audit

On April 22nd, 2024, bombshell news dropped that HYBE would be launching an internal audit of ADOR and it's executives, due to concerns that MHJ was trying to attract investors to take the label independent. At the time, HYBE owned about 80% of ADOR, with the remaining 20% being held by ADOR executives, predominantly MHJ.

HYBE alleged that MHJ and a VP at ADOR, identified only as Mr. L, were working in collaboration to "free" ADOR from HYBE. The scheme included Mr. L passing classified info about HYBE to MHJ. Mr. L had previously worked with HYBE, most relevantly during its IPO, before being transferred by the company to ADOR. Once HYBE became aware of the plan, the audit was triggered, executives electronics were examined, and plans to remove MHJ as CEO of ADOR were initiated.

Illit

For her part, MHJ released a statement alleging that the audit was an illegal attempt to oust her as CEO In retaliation for her accusing Illit, a new Kpop group under HYBE's sub-label, Belift Labs, and their producers of "copying" NewJeans.

https://www.koreaboo.com/news/min-hee-jin-official-statement/

April 23rd and 24th

The next day, April 23rd, HYBE responded that it had clear evidence that MHJ had been planning to take ADOR independent long before Illit had debuted. The main piece of evidence for this was an unreleased internal document detailing MHJ's plans.

https://m-en.yna.co.kr/view/AEN20240423006400315

On the 24th, various ADOR executives tried to distance MHJ from the discovered internal document, but a report from Dispatch (basically the Korean TMZ) revealed that she had almost $73 million in put options on HYBE.

Link

April 25th

The Next day, April 25th, HYBE made public it's initial findings from the audit and stated it's intention to report MHJ to the police.

A leaked conversation between MHJ and another ADOR executive, A

In response MHJ called her own press conference that day, which ran for almost 2 hours.

the entire press conference summed up by mhj lawyers pic.twitter.com/3qrfngiz3H

— 𝓪⁷ (@JlNSONYEONDAN) April 25, 2024

During this press conference MHJ touched on a number of topics, including:

• Reiterating that the only cause of the audit was an internal complaint she filed over Illit's "plaigerism"

• Complaining that her shareholders agreement that she signed with HYBE was unfair and currently being renegotiated.

• Alleging that she was promised NewJeans would be the first of HYBE's new girl groups to debut. Instead Le Sserafim was allowed to debut first. (Remember this one, it will be important later on)

• Claiming that she would take legal action against HYBE for seizing her and other executive's electronics

• Stating that all of ADOR's internal discussions about seeking outside investors and breaking away from HYBE were merely jokes

• Tacitly admitting that she would consult a Korean Shaman to help make business decisions (again, more on this at a later date)

The entire press conference is a trip, and this all is just a snippet. We'll do a deep dive into the press conference and it's after effects next week, but for now, let's see how the internet reacted:

Reddit Reacts

Warning:: May contain spoilers for future parts of the saga.

https://old.reddit.com/r/kpop/comments/1ca2gc4/hybe_launched_audit_into_ceo_of_newjeans_agency/

https://old.reddit.com/r/kpop_uncensored/comments/1ccn2j5/my_takes_from_the_min_heejin_press_conference/

https://old.reddit.com/r/popheads/comments/1ca90ty/hybe_initiates_audit_of_adors_management/

https://old.reddit.com/r/popheads/comments/1ca90ty/hybe_initiates_audit_of_adors_management/

/mu/ Reacts

That's all the time we have for this week, but I hope that I was able to whet your whistle for the drama we have ahead, because theres quite a bit of it.

On next week's "In the K-Hole"

• A deep dive into MHJ's April 25th press conference and auxiliary accusations!

• The parents of NewJeans speak up!

• New legal challenges!

• And much, much more, all next week!

I hope you enjoyed this episode, as well as your upcoming holidays. A very merry Christmas to you all and yours...

... From the bottom...

... Of the K-Hole.

Sounds very different than his comments on H1Bs in 2016.

he doesn't need to pander to anybody now

Negged by a sycophant.

WE SUPPORT PRESIDENT TRUMP'S POSITIONS UNCONDITIONALLY ON THIS SITE. RULE 1. THOSE CRITICIZING HIM ARE DNC AND CCP SHILLS THAT CAN FRICK OFF BACK TO REDDIT.

IF TRUMP SUPPORTS H1BS THEN SO DO I!!! TRUMP WON A HISTORIC MANDATE NOT ANY OF YOU SO SHUT THE FRICK UP, SIT DOWN, AND FOLLOW PRESIDENT TRUMP. IF NOT, FRICK OFF!!!!!

MAGA NOW AND FOREVER. WE FOLLOW TRUMP.

LOL who's the shill? I think it's the person here pushing for us to shut up and accept immigration, H1-Bs, etc.

now the shills are the ones blindly following trump

Maybe Stephen Miller will convince him otherwise.

Hahahahaha stormstrags BTFO.

President Trump supports Elon's ability to take genius scientists and engineers from anywhere to build his rockets.

This is all necessary because our school system has been overtaken by "woke" and we don't produce the best anymore. We rank much lower than most countries on test scores. China and India are now beating us in producing these people.

President Trump is smart. Xi would be laughing at us if we didn't import geniuses here.

Luckily President Trump is playing 4D chess and stormstrags here are playing chutes and ladders.

FOR THOSE CRITICIZING TRUMP IN THIS THREAD, WE SUPPORT TRUMP UNCONDITIONALLY. RULE 1. THOSE CRITICIZING TRUMP ARE RINOS AND NOT MAGA!!!

the dramatards could learn a thing or two from this guy

Eat shit and die, schlomo.

WE SUPPORT PRESIDENT TRUMP'S POSITIONS HERE. IF TRUMP SUPPORTS H1B THEN SO DO I.

PRESIDENT TRUMP DICTATES WHAT WE FOLLOW ON THIS SITE. FRICK OFF CUTE TWINK SHILL COMMUNIST.

commies btfo'd

HOLD THE LINE!

He needs to hear our voices, and our stories.

i'm sure the billionaire cares more about you than the dollars he'll save by giving jobs to third worlders

He needs to say this in a truth post not reported on by the NY post to get a vibe gauge.

If he does side w the POS Musk then it's good bye to half his core base.

Trump doesn't stand with Nazi losers. Trump stands for #MAGA.

Fake MAGAs GTFO!

Yep. If he turns around and backs the Great Replacement after all of this, I'm fricking done with him. This is the ultimate BETRAYAL.

Anti Elon cucks BTFO. If you hate Elon then you better hate Trump now too

We're not a cult

@Newvann rightoid drama

What's this !jannies Not satisfied with GST you guys want income tax too now?

https://rdrama.net/votes/c_7568060

Former defense minister Moshe Ya'alon on Saturday said the Islamic State terrorist group in the Syrian Golan Heights "apologized" for attacking an Israeli unit.

"There was one case recently where Daesh opened fire and apologized," Ya'alon said, using the terror group's Arabic nickname.

This was an apparent reference to a clash that took place near the Syrian border last November, in which IDF troops exchanged fire with members of the Islamic State affiliate. After a brief gun battle, the Israeli military attacked the terrorist group with airstrikes and tank fire, killing four of them

!glowies @elfbinn @grizzly

Just off the top of my head:

• tunnel jews

• trump assasination attempt

• biden dementia debate

• replacement dem debacle

• trump landslide

• laura loomer and trump romance rumors

• assad went

• the claims adjuster

• south korea attempted coup

• NJ drones

• atheist terror attack

• two major commercial airline accidents

• H1-B/musk internet race war

This definitely isn't a comprehensive list. What else happened this year?

edit:

JIMMY NOOOOOOOOOOO :marseyjimmycartergenocide:

idk why but people using blaccent on Reddit makes me lol. I guess some black guy in Atlanta got caught being gay and black people in Atlanta are upset about this.

He's doing copyright takedowns lmao here's the KF back ups

https://kiwifarms.net/threads/whatifalthist-rudyard-lynch.174154/post-20173271

https://kiwifarms.net/threads/whatifalthist-rudyard-lynch.174154/post-20173271

I want to see him grovel and beg

Why are Boeing planes falling apart?

Exhibit A: pic.twitter.com/ArDmIcit4z

— Derenic Byrd (@DerenicByrd) December 31, 2024

https://www.business-standard.com/article/international/boeing-put-flyers-at-risk-with-9-an-hour-pay-to-737-max-software-engineers-119062900267_1.html

Real life Afghanistan is literally worse than The Handmaid's Tale. The fact that this gets so little media attention angers me.

Islamic law is incompatible with human and especially women's rights. No amount of gaslamping or whining about "islamophobia" is going to stop me from saying that anymore. Women and children are not fricking property.

If Islam cannot be dragged kicking and screaming into the 21st century, then it needs to be left behind in the past. Same for any religion.

This is most perfect reconstruction of reddit comment

Without women, society would fall apart since most manoids can't tell their butt from their face. Meanwhile, no scientist has yet found a use for the y chromosome

EDIT: Lot of fragile incels in this thread are MAD. No matter how many death threats you send, I'm going to keep speaking my truth

EDIT 2: After 59 comments, there are still ZERO downsides to manfree society. Struggling to see how your zero contributions justify all the r*pe and murder you commit

>complains that Joe Rogan says modt wealthy womxn are only wealthy bc they married into it. Decides that she wants tp start her own business butt while claiming to be a man to avoid the neocolonialist patriarchy discriminating against her and her own bootstraps initiative. Major aspect of business plan is to have rich husband and his family bankroll the business.

the rest is about how men are so incompetent compared to womxn and womxn are at a super disadvantage in business and womxn feel the need to act more masculine to succeed in business and thats not hevkin fair

"Teleiophilia" means attraction to adults. The reason even adult-attracted people display a slightly lower than average IQ in this study is likely due to the sample being limited to male patients reporting "illegal or disturbing sexual behavior", meaning the IQ differential between libertarianphiles and non-libertarianphiles is likely even greater than this study suggests, given that paraphilia and criminality in general are likely predictors of low IQ, and that men have slightly but significantly lower IQs than women !moidmoment

https://annas-archive.se/scidb/10.1037/0894-4105.18.1.3

There is a large graveyard filled with my enemies.

I do not wish to add to it, but will if given no choice.

Those who pick fights with me do so at their own peril, but maybe this is their lucky day …

— Elon Musk (@elonmusk) November 21, 2023

... everyone is assuming Kareem Majir Dumal identifies as male, and no one is questioning anyone about this.

!cuteandinvalid

I really do.

She's so r-slurred even when I agree with her it's unbearable. I would just ignore her but every queer I know irl seems to worship her even though she obviously ed out for clout and is the most brazen grifter and clout chaser. How she got acting and video game jobs I have no idea beyond nepotism and networking because she has 0 talent whatsoever.

Her political videos are r-slurred too it's basically just slop designed to entertain her viewers rather than to be actually incisive. All her videos really do is give midwits comfort that their already existing (and mostly r-slurred) ideas are smart because a smart sounding person is using smart words to say them.

Also I hate that she skin walked contrapoints. Not that I agreed with contrapoints on everything and she also sold out and became a grifter and hostage of her viewers but at least she was somewhat original and interesting.

Should PhilosophyTube be cancelled in 2025?

I wouldn't be surprised if PhilosophyTube becoming the most famous UK , as well as the popularity of finnster, was some 4d chess ploy by the government to make the UK normies hate us.

I couldn't be bothered putting emojis in so here's some random Marseys. Salt and pepper them as you please:

Idk why I posted this I hadn't thought about her for weeks but I saw a comment under a YouTube video by her and it triggered my PTSD (Philosophy Toob Seething Disorder)

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.