Halo Infinite spawn timers with voice commands and notifications

Demo • Tech Stack • Features • Development

Demo

Try it yourself at https://halo-time.vercel.app.

halo-time.demo.mp4

Unmute video to hear synthesized voice notifications

Tech Stack

• React
• Material-UI
• Web Speech API (MDN Docs)
• react-scripts
• Node.js
• Vercel

Features

• Labeled progress bar timers
  • Uses wasaab/react-progress-bar-timer
  • The timer counts down and the progress bar fills to represent progress.
• Timer control
  • Click a progress bar to start, stop, or restart the spawn timer.
  • Start all button
  • "start ____" voice commands
    • Commands
      • Start timer by name
      • Start all timers
    • Toggled via the voice commands button
• Localized, synthesized, voice notifications and flashing animation when spawn timers finish.
  • Toggled via the voice notifications button
• Voice synthesis and speech recognition are implemented using the Web Speech API (MDN Docs).
• Selectable playlist, game mode, and map, to populate spawns.
• Toggle filters for spawn types.
  • Types
    • Vehicles
    • Weapons
    • Equipment
    • Powerups
  • Customize ordering of spawn type sections

Development

Installing Dependencies

yarn

yarn install

npm

npm install

Development Mode

yarn

yarn start

npm

npm start

Runs the app in the development mode. Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes. You may also see any lint errors in the console.

Production Build

yarn

yarn build

npm

npm build

Builds the app for production to the build folder.

It correctly bundles React in production mode and optimizes the build for the best performance. The build is minified and the filenames include the hashes.

Serving Production Build

You can serve the production build locally using the following command:

npx serve -s build