Bubble Wrap

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Roadmap
5. Contributing
6. Acknowledgments

About The Project

When I casually surfed the web, I encountered a comment who made bubble wrap using markdown spoiler tags and a *pop* text. I really liked the concept, but I wanted to improve on it. Here's my version of it!

Here's what I improved on that comment:

• You can choose the size of the playfield
• It supports both clicking and hovering
• It has sound!

(back to top)

My experience

This is my first solo project after I finished the school Codecool, and my first project involving Typescript without any previous knowledge of the language.

Built With

• 18.2.0
• 5.0.2

(back to top)

Getting Started

Currently there's no official website for this project. You have to run it on your computer.

Prerequisites

To run the project you need a package manager, like npm or yarn.

Installation

1. Clone the repo

   git clone https://github.com/tuszmak/bubble-wrap.git

2. Install NPM packages

   npm install

3. Start the program with either vite or using the scripts e.g npm run dev

(back to top)

Usage

When you run the program, you need to visit this link or http://localhost:5173/

You'll be at the landing page where you can define the size of the play field.

The game has two modes you can pop bubbles with. The default is the click mode, where it pops a bubble when you click. The other mode is the hover mode, where it works by moving the mouse over the play field.

When you want to reset the field, you can erase the current one with the Clear board button and get a new one using the same button.

(back to top)

Roadmap

• Login

See the open issues for a full list of proposed features (and known issues).

(back to top)