Joseph Lepley's Portfolio

A minesweeper clone built in React. Upon landing on the application page, the user is presented with a modal to either use a preset difficulty configuration that will set the width and height of the game's grid, as well as the number of mines. Alternatively, the user can specify a custom width, height, and mine count for the game. The user is also presented with a button to display the rules of the game as well as the controls for the applicaiton.

Once the user has configured the game's difficulty and clicked the game start button, the game begins. The user can click on cells in the grid to switch them to a revealed state or right click to mark cells with flags. The game enters a win state if the user reveals all non-mine cells, or it enters a loss state if the user clicks on a cell with a mine. A stopwatch component keeps track of the time the user spends playing the game, and it pauses whenever the game enters its win or loss state. The user can bring up the difficulty config modal at any time by pressing the New Game button to start a new game with a new layout.

This applicaiton makes good use of React Hooks to manage complex game state and logical interactions. It is designed to be responsive with support for both desktop and mobile layouts, as well as both mouse and touch controls. It uses SASS for more complex styling rules.

Lightweight library to simplify and streamline dialog workflow in React. Users can add and remove Dialogs/Modals directly to the Virtual DOM from code without needing to implement them in the page's JSX ahead of time. More importantly, the manager gives users the capability to add submission to dialogs, which will be passed to the code that opened the modal in a promise-like callback. This makes it easy to add forms to modals that are opened conditionally and then handle the form data in the same function or to open simple confirmation dialogs.