DEV Community

Cover image for Celebrate June rituals with Solstice Bingo!
Klaudia Grzondziel
Klaudia Grzondziel

Posted on

Celebrate June rituals with Solstice Bingo!

June Solstice Game Jam Submission

This is a submission for the June Solstice Game Jam

Before we dive into technicalities, let me make one thing straight โ€“ I love rituals and small celebrations! ๐Ÿ’› I'm usually the first one buying a Christmas tree (preferably in the first week of December), decorating my house for seasonal events, and taking care of small daily rituals like journaling, burning a candle, home SPA, or a short mindfulness practice over a morning cup of coffee.

Some time ago, I got a creative kit from a friend (thanks a lot @mentelka ๐Ÿ’›). Inside, among others, there was a spring bingo. I was super excited to cross out spring activities, like blowing on a dandelion, enjoying a spring storm, or looking for a four-leaf clover ๐Ÿ€

Such small celebrations bring lots of joy, improve your mood, and reduce stress by encouraging you to enjoy nature, do something creative, or take care of yourself. That's why I'm inviting you to play Solstice Bingo and to celebrate the magic of June rituals!

What I Built

In Solstice Bingo I gathered June traditions from around the world and wrapped them into a browser-based bingo game. Complete activities, mark them done, and watch the sky shift from deep night to solstice noon.

But the game isn't only about ticking boxes. Every card tells the story of a June ritual and how people celebrate it around the world. Some also include links to articles or YouTube videos if you want to go deeper. It's a chance to discover customs you've never heard of and take part in some of them yourself, like reading literature by a Black author, going for a picnic, or simply staying hydrated ๐ŸŒŠ

Video Demo

Here's a quick demo:

Code

The code lies in the solstice-bingo GitHub repository.

How I Built It

The whole game lives in a single HTML file โ€“ and that was a deliberate choice! No frameworks, no bundlers, no node_modules folder that weighs more than the project itself. Just plain HTML, CSS, and a bit of JavaScript. For something this small, it just makes sense to keep it all in one place.

My favourite part? The sky animation ๐Ÿ˜ As you complete rituals, the background shifts from deep night blues to warm solstice noon. I used CSS custom properties and a small colour-interpolation function to make the transitions smooth. The sun literally rises as you play! โ˜€๏ธ

Progress is saved in localStorage, so you can close the tab and pick up where you left off. Each card is randomly drawn from a pool of 33 rituals, so reshuffling gives you a fresh experience every time.

I built this with AI โ€“ Gemini and Claude were my coding partners, since I'm still learning CSS and JavaScript. I described what I wanted, reviewed the output, pushed back when something felt off, and iterated. Honestly, it felt a lot like pair programming!

Prize Category

Hell yeah, let me submit to all categories! Because why not? ๐Ÿ˜„ I did this small project mostly for fun and for pleasantly learning new things. However, I did try to include everything necessary to apply for both categories:

  • Best Ode to Alan Turing โ€“ there is one card in the bingo that is devoted to Alan Turing. Can you find it and checkmark the activity? ๐Ÿ™‚

  • Best Google AI Usage - well, I did use Gemini for prompt engineering, as I myself cannot code (yet!). So I used Gemini as my collaborator and reviewer with whom I consulted my ideas and guided on how I wanted the project to look. I also generated the article banner using Gemini. It does count, right? RIIIGHT? ๐Ÿ˜…

Conclusions

The whole challenge and designing this game was super fun! I played with HTML, CSS, and JavaScript, vibe-coded another app (you can read about the first one in Gemma 4 challenge inspired me to build my first app!), checked out Netlify for the first time, and learned about June celebrations I'd never heard of before. It also gave me the push to finally start the Responsive Web Design course!

Have I started to play the Solstice Bingo myself? Of course! You know I love such stuff ๐Ÿ˜ I encourage you to give it a try as well! If you want to share your activities and inspire others, feel free to post your activity photos on social media with the #solsticebingo hashtag. Let the magic of rituals shine! โ˜€๏ธ

Top comments (17)

Collapse
 
francistrdev profile image
FrancisTRแด…แด‡แด  (ใฃโ—”โ—กโ—”)ใฃ

Good work! This looks really cool Klaudia!

Collapse
 
klaudiagrz profile image
Klaudia Grzondziel

Thank you! ๐Ÿ’›

Collapse
 
heyitsjem profile image
Jem

Love this!

Collapse
 
klaudiagrz profile image
Klaudia Grzondziel

Thank you, enjoy the Solstice Bingo! ๐Ÿ’›

Collapse
 
hemapriya_kanagala profile image
Hemapriya Kanagala

Klaudia, this is such a fun idea. I like how it encourages people to enjoy small things they might otherwise overlook.

Also, I have to admit, now I'm curious to see if I can find the Alan Turing card ๐Ÿ˜„

Collapse
 
klaudiagrz profile image
Klaudia Grzondziel

Thank you! Let me know if you could find it! ๐Ÿ˜

Collapse
 
mentelka profile image
Martyna Mentel

I've already said it, but never enough appraisal in this crazy competitive world: I love it, it's cute and mindful, and you're so great at incorporating new skills in a friendly manner. I really admire that :)

Collapse
 
klaudiagrz profile image
Klaudia Grzondziel

Awww, thanks Marti! ๐Ÿฅน Still trying to find my way with AI, though.

Collapse
 
mentelka profile image
Martyna Mentel • Edited

You're nailing it, gurl!

Collapse
 
learn2027 profile image
meow.hair

I was delighted to read your post!๐Ÿ˜ Honestly, you've created something truly beautiful. I look forward to more of your creativity and thoughtful approach. Thank you.
๐ŸŒŠ๐ŸงŠ

Collapse
 
klaudiagrz profile image
Klaudia Grzondziel

Thank you, enjoy the bingo game and the magic of June โ˜€๏ธ

Collapse
 
zep1997 profile image
Self-Correcting Systems

This is such a warm idea, and you can tell you actually live this stuff instead of
just building it. a bingo that nudges people to go on a picnic, stay hydrated, read
a Black author, do a little mindfulness, and then the sky literally rises as you
tick them off. you turned small rituals and self-care into a game, and that is a
genuinely kind thing to make.

the sky shifting from night to solstice noon as you finish real activities is the
perfect touch, because the reward is tied to you actually doing something good for
yourself, not just clicking a box. and going from "i cannot code yet" to shipping
this whole thing is the entire point, so keep going. off to find the turing card
now.

Collapse
 
klaudiagrz profile image
Klaudia Grzondziel • Edited

Thank you for your comment; it's very heartwarming to read ๐Ÿ’›
Good luck with your June bingo, and thank you for playing! :)

Collapse
 
technogamerz profile image
๐“ฃ๐“ฑ๐“ฎ ๐“›๐“ช๐”ƒ๐”‚ ๐“ฐ๐“ฒ๐“ป๐“ต โ—‰โ โ€ฟโ โ—‰

This is the kind of wholesome web project I enjoy discovering. Nicely done! ๐ŸŒผ

Collapse
 
klaudiagrz profile image
Klaudia Grzondziel

Thank you! ๐Ÿ’›

Collapse
 
mdhemalakhand1999 profile image
MD Hemal Akhand

love this

Collapse
 
klaudiagrz profile image
Klaudia Grzondziel

Thank you, enjoy the game ๐Ÿ’›