Strixhaven : School Of Magic

To celebrate the release of the latest Magic: The Gathering set, set in a wizarding school; we made our own wizarding class based off of casting Harry Potter spells with our voices!

Comment

Inspiration

The theme "magic" stood out to me as a competitive Magic: The Gathering player and after spitballing ideas all night with Aaron, I said 'why don't we just cast spells with our voice?' We got really excited since it fit the theme so well and it lined up very closely with the Strixhaven release in April.

What it does

When the web application opens, you are taken to a menu to navigate the spell list. Clicking each spell brings you to the "classroom". You click the center of the screen and say the spell to cast it. Each spell has a different effect.

How we built it

Me and Aaron looked into PIXIJS, which handles a lot of the effects provided. We separated each of the spells into their own pages in a page folder. We also used some React elements to format the pages and routing to keep the navigation menu available, since the PIXIJS container breaks a lot of formatting in webpages. We hosted it with Docker for testing purposes. I made the music with my piano and the stag video for effects, and Jackson made all of the other assets.

Challenges we ran into

Using a library (PIXIJS) that has very little clear documentation and a lot of depreciations (Which aren't updated in the documentation or examples on the site) and issues, we found out very quickly about 10 hours in that we may have to reduce our spell list from 10 to 6 (two of them being turning on and off a light). Having containers break on us, React bugging out with the PIXIJS apps, and having a hard time finding help really set us back. The voice recognition also bugged out in the input checking since I was trying to compare it with a const Phrase. After I ditched that, we were fine to implement it.

Accomplishments that we're proud of

Getting the voice recognition to work was a great moment. Finding the magic of friendship along the way helped out too.

What we learned

PIXIJS kinda sucks, so we can't recommend it. UTSA should have a react class. Doc Rob makes a spicy meme. Is this Loss?

What's next for Strixhaven : School Of Magic

Idk, probably getting released in a trading card game. WOO CAPITALISM!

Spell List

Spell Effect
Avada Kadevera Killing Curse
Lumos Light Spell
Nox Darkens Lumos
Expecto Patronum Protection Spell
Incindio Fire Summoning Spell
Wingardium Leviosa Floating Spell

Cool features

Custom music made by Leon!

Custom video made by Leon!

Custom backgrounds made by Jackson!

Easter Eggs made by Jackson!

Cool Effects made by Jackson!

  • - - Written by Team Lead, Leon Karvecz at 10:23AM

Built With

Share this project:

Updates