Wizard’s Trial — KendoReact Free Components Challenge
Live Demo
What I Built
I created a browser-based fantasy RPG mini-game where the player controls a young wizard apprentice who must progress through locations, talk with NPCs, and defeat monsters within a time limit.
The problem I wanted to solve was: How do you make a simple, story-driven game playable directly in the browser with modern React tooling while keeping the UI consistent?
The audience is anyone who enjoys casual pixel-art games or interactive storytelling, but the project is also aimed at developers looking to see how KendoReact components can be used beyond dashboards and forms — even in a game-like experience.
The outcome is a working prototype where:
- There are several levels with increased difficulty.
- Dialog flows naturally between player and NPCs.
- A fight sequence begins only after dialog is complete, has a timer and a HP bar showing the remaining health of the monster.
- A countdown timer creates urgency.
- Victories are logged, and results can be reviewed later.
Everything is styled and laid out using 10 KendoReact free components!
KendoReact Free Components Used (10+)
- Animation
- Common Utilities: Typography
- Dialogs: Window
- Dialogs: Dialog
- Progress Bars
- Inputs
- Buttons: Button
- Buttons: Group Button
- Layouts
- Indicators
- Notification
KendoReact usage details
Animation
The animation was mainly used to make the dialogs run smoother, using a push transition to show the next dialog.Common Utilities: Typography
The most used common utility was the typography, used for every text to give a coherent UI feeling and better readability.Dialogs: Window
The Window component was used to create a Hint component to provide instructions and give context to the users.
- Dialogs: Dialog The dialog component was used to allow the user to customize their character's name and to handle the game over notification when the user runs out of time.
- Progress bars The progress bar was used to display the monster's overall health and display the damage the user was inputting.
- Inputs The input was used in the beginning to input the user's desired nickname for the adventure.
- Buttons: Button The buttons were used to advance the story and also show hints. It was extensively used for the user to be able to take action on different situation.
- Buttons: Group Button The group buttons were used to let the user select their favorite character.
- Layouts The layout component was used in every screen to help place the elements (characters, location, monsters).
- Indicators: Loader The loading indicator was used to load up the application in the beginning of the story.
- Notification I used a notification on the Credits screen to show more info about me and where you can find me in Dev.to!
Architecture / How It Works
Clicker
- Handles the main click-to-progress mechanic.
- Advances the story or triggers a battle when the user clicks.
- May also be used to interact with objects or NPCs.
Story
- Manages the flow of narrative and dialog.
- Coordinates which NPC or character is speaking.
- Controls when the player can interact or when the next event (like a fight) is triggered.
Fight
- Handles all combat logic between the player and monsters.
- Manages the fight timer; if the player doesn’t act in time, triggers a game over.
- Handles monster actions and player responses.
- Calls logFight to record the outcome.
useDialog
- Custom hook to manage dialog state and transitions.
- Determines which character or NPC is currently speaking.
- Ensures dialog sequences are completed before allowing progression (e.g., before a fight starts).
CharacterContext
- Provides global state management using React Context.
- Stores the current character, level, username, and fight history.
- Allows any component to access or update character-related data.
Background, Character, Monster
- Pure rendering components.
- Display the current background, player character, and monster/NPC images and animations with the help of KendoReact.
State Management
Global State (CharacterContext)
Stores:
- Current character selection and info.
- Current level.
- Username.
- Fight history (array of fight results, e.g., win/loss, score, time).
- Accessible throughout the app for consistent state.
Local State (Fight)
Manages:
- Whether the fight has started.
- Timer countdown for player actions.
- Game-over state (if the timer runs out or the player loses).
- Defeat flag (if the player loses the fight).
Data Flow
Dialog Sequence
The useDialog hook manages dialog between the main character and NPCs. Both sides’ dialogs are calculated and displayed in sequence. The player cannot proceed (e.g., to a fight) until the dialog is complete.
Progression to Fight
After dialog, the Clicker or Story module triggers the Fight module.
The fight timer starts, and the player must act before it runs out.
Fight Outcome
If the player defeats the monster, logFight is called.
The fight result (win/loss, score, etc.) is saved to the global fight history array in CharacterContext.
Game Over / Retry
If the timer runs out or the player loses, a game-over state is triggered.
The player can retry the fight, which resets the local fight state and timer.
End of Game
At the end of the game or story, the fight history array is used to display a summary of the player’s performance.
Setup & Run Locally
git clone git@github.com:violetadev/kendo.git
cd kendo
npm install
npm start
Top comments (0)