The Fab Five Game

👉  Play it at  fraulueneburg.github.io/fab-five-game/

Introduction

This is a project that I made at Ironhack as part of their 2023 Web Development Bootcamp. It is a logic game, based on a German card game. I’m especially proud of the fact that I built it entirely in Javascript, HTML and CSS – no canvas elements here.

I used one inline svg for each shapes, then cloned them via the <use> element. This makes it easy to change the shapes, if needed. The colours are equally easy to adjust via CSS custom properties. The game comes with dark and light mode and scales to mobile, of course.

Features

• 😎   nice simple gaming fun without signup
• 🌈   clever colour switching via SVGs and CSS custom properties
• ⏰   time adapts when you’re fast
• 🌄   random cheesy motivational quote when you’ve lost a round
• 🌙   light and dark mode

Demo

👉  Play it at  fraulueneburg.github.io/fab-five-game/ (no sign-up required)

---

Content

1. Setup
2. Customization
3. Game Rules
4. About me
5. Contact

1. Setup

If you’d like to view my game in your browser:

• git clone https://github.com/fraulueneburg/fab-five-game.git in your terminal
• cd fab-five-game
• open index.html
• or, you know, just visit the game demo and start the gaming fun right away 🚀

2. Customization

Item Colours

To customize the item colours, just change the CSS custom properties inside css/items.css.

Shapes

The shapes are embedded as inline svgs in index.html. The wrapper code for all svgs stays the same:

<svg display="none" width="0" height="0" version="1.1" role="none" xmlns="http://www.w3.org/2000/svg">
	<defs>
		<!-- CODE FOR ALL SVGS -->
	</defs>
</svg>

Inside that wrapper code, paste the inline svg code of your items and wrap each one with the following <symbol> tag. Adjust the number inside the id attribute accordingly (item01, item02 etc.). Make sure your svg has a square artboard so all items will be displayed correctly.

<symbol id="item01" focusable="false" role="none" viewBox="0 0 160 160">
	<!-- svg code of first item -->
</symbol>

Put together, it looks like this:

<svg display="none" width="0" height="0" version="1.1" role="none" xmlns="http://www.w3.org/2000/svg">
	<defs>
		<symbol id="item01" focusable="false" role="none" viewBox="0 0 160 160">
			<!-- svg code of first item -->
		</symbol>
		<symbol id="item02" focusable="false" role="none" viewBox="0 0 160 160">
			<!-- svg code of second item -->
		</symbol>
		<!-- ... etc ... --->
	</defs>
</svg>

3. Game Rules

The rules are explained on the startscreen of the game as well as throughout the game.

4. About me

I’m a Full Stack Web Developer and UI/UX Designer currently living in Hamburg, Germany.
Usability is a top priority in my work and I am also strongly advocating for (and keep learning about) web accessibility.

5. Like this project?
Follow my progress and let’s connect: