This is a solution to the Memory game challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the game depending on their device's screen size
- See hover states for all interactive elements on the page
- Play the Memory game either solo or multiplayer (up to 4 players)
- Set the theme to use numbers or icons within the tiles
- Choose to play on either a 6x6 or 4x4 grid
- [Solution URL]: Add solution URL here
- Live Site
- Wick - Component Compiler
- Glow - JS Animations and Transitions
- CSS Flexbox
- CSS Transforms
I worked on this longer than expected. It forced me implement new features to the libraries I've been working on to ensure smooth transitions between pages and consistent game state between pages. I've been modifying my workflow to define more base components that can be reused on different pages. This includes the buttons, menu frames, and labels for player information.
I really benefited from being able to use hot-component reloading to update my live views on multiple devices and browser windows simultaneously. The experience was a little rocky with the current implementation of Wick, but it proved to be very useful as I developed the site alongside making modifications to Wick. I want to look into adding hot-module reloading at some point to get the same experience while developing logic outside of components.
- Frontend Mentor - @acweathersby