Wizard Game Tracker App

About the card game

Wizard is a trick-taking card game for three to six players by Amigo Spiele. The main game goes as followed. You get a set number of cards and have to say how many turns you will win with those. The number of cards you get increases by one each round. If your bet is right you get points else you loose points. The game is won by the player with the most points at the end of the game. The app also supports the extensions and special community rules.

Impressions

Setup

Quickly set up a new game by entering the names of the players, activating special rules if needed and setting the number of rounds. All done responsive and both mobile and desktop friendly.

And a lot of confetti

Open Wizard Score App

Deep Insights

Keep all your games in one place and look at them whenever you want. The app has a sync feature to keep your games stored across devices. You can also easily share your games with your friends by sending them a link.

Now that you have played a few games, you wonder who is the best player? Who got the most points? Who had the best bet accuracy? The app provides a detailed analysis of everyone you every played with.

And lastly you can also analyze the types of games you played. What is your favourite wizard day? How long do your games usually last? How many players do you usually play with? How precice are all your bets and which rules do you usually play with? The app provides a detailed analysis of all your games and gives you insights into your playing style and preferences.

Open Wizard Score App

And so many more features

Quality of Life

The app helps with entering the data, by automatically arranging the players in the right order (it changes every round) and highlighting the current dealer. The app also enforces special rules and exceptions set by the player.

Game History

The app keeps track of the games you played. You can easily access the games you played and look at a detailed analysis of each game. This way you can keep track of your progress and see how you played over time.

Game Sharing

You can easily share the game with others by sending them a unique link. Others can open the provided link, preview the game and decide if they want to add it to their local history of games.

Error correction

Human errors can occur. The app provides a simple way to correct them. You can easily change the bets, tricks, playernames, current dealer, scores and much more.

Responsive Design

The app is designed to be responsive and works on both mobile and desktop devices. It adapts to different screen sizes and orientations, providing a seamless experience across all devices scaling according to the screen size.

Optimized Performance

The app is designed to be fast and efficient. It uses modern technologies to deliver a fast and efficient experience. The main game runs without any page reloads or server connection after the initial page load. Astro minifies the files for enhanced performance.

Dataloss prevention

The main goal is zero data loss. In the action of the game it can happen that the phone goes into standby, the tab is closed or internet connection is lost. To prevent data loss the app always stores the current state of the game in the local storage. This way the app can always recover the current game (well except if the phone explodes 😅 or the user clears the browser cache). Past games are kept in an central database so they even survive that.

Technical details

{
	"dealer": 4, // The current dealer
	"rule_1": true, // The special rules
	"rule_random_dealer": true,
	"rule_expansion": false,
	"rule_custom_rounds": false,
	"rule_crowdchaos": false,
	"round": 2, // current round
	"max_rounds": 12, // amount of rounds
	"players": [
		// players names
		"Boba Fett",
		"Ahsoka",
		"Anakin Skywalker",
		"Darth Maul",
		"Count Dooku"
	],
	"bets": [
		// bets of the players
		[0, 0, 0, 0, 1], // round 1
		[2, 0, 0, 1, 0] // round 2
	],
	"tricks": [
		// tricks of the players
		[0, 0, 0, 0, 1] // round 1
	],
	"score": [
		// scores of the players
		[20, 20, 20, 20, 30] // round 1
	],
	"score_change": [
		// score change of the players
		[20, 20, 20, 20, 30] // round 1
	],
	// 1 = enter bets | 2 = enter tricks <- not a boolean for future expansion
	"step": 2,
	// 1 score overview | 2 bets/tricks | 3 celebration view
	"display": 1,
	// selected view of the score overview
	"score_display": 3,
	// time the game was started
	"time_started": 1704067200,
	// time the game ended (set when the game ends)
	"time_ended": 1706745600
}

    "players": [
        {
            "name": "Boba Fett",
            "bets": [0,2],
            "tricks": [0],
            "score": [20],
            "score_change": [20],
        },
        {
            "name": "Ahsoka",
            "bets": [0,0],
            "tricks": [0],
            "score": [20],
            "score_change": [20],
        },
    ],

    "rules": [
        "random_dealer"
    ],

Main Learing Points

This project was my first webapp that felt polished to me. I developed it in parallel to my cs lectures playing around with the new knowlege, building both the backend and the frontend. I learned a lot about working efficiently and automating repetitive tasks. For example I configured github actions to automatically build and deploy the app automatically after a push to the main branch.

Web Developement Next to that I learned a lot about the base of web development, working with plain HTML, CSS and JavaScript, as the app is build with mostly the native web stack and only a few extras that ease web developement a lot like TypeScript or Astro providing types for javascript, automatic minification, component support and much more quality of life features.

Backend I also learned a lot about backend development. I made use PHP and MariaDB as I’m already used to PHP and SQL. I learned a lot about how to structure a backend, how to interact with a database and about security.

UI Design As always: Simplicity is key. I learned a lot about how to design a clean, simple and intuitive UI. Using the design rules I learned about in my lectures I was able to create a UI, that has proven to be easily understandable for other users given they know the card game.