Introducing Socket Firewall: Free, Proactive Protection for Your Software Supply Chain.Learn More
Socket
Book a DemoInstallSign in
Socket

@ayco/mnswpr

Package Overview
Dependencies
Maintainers
1
Versions
1
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@ayco/mnswpr

Classic Minesweeper browser game

latest
Source
npmnpm
Version
0.3.13
Version published
Maintainers
1
Created
Source

Play Minesweeper Online

Netlify Status

Play it here: mnswpr.com. This is the classic game Minesweeper built with vanilla web technologies (i.e., no framework dependency).

Technology Stack:

  • HTML, JS, and CSS
  • Webpack for bundling
  • Firebase for leader board store
  • Netlify for hosting

Project motivation

One day, while working in my home office, I heard loud and fast mouse clicks coming from our bedroom. It's my wife, playing her favorite game (Minesweeper) on a crappy website full of advertisements.

I can't allow this, it's a security issue. 🤣

But it is also an opportunity.

I wanted to give her the same game, with a similar leader board she can dominate. And this is also a chance for me to dig deeper into vanilla JS.

Can I make a page with complex interactions (more on this later) without any library dependency?

What I have learned:

  • JS is awesome ✨
  • We don't always necessarily need JS frameworks (or TS) ✨
  • Even subtle UI changes can improve user gameplay experience ✨
  • There's more ways to break you're app than you are initially aware of ✨
  • Competition motivates users to use your app more ✨
  • Hash in bundled filenames help issues in browser caching (when shipping versions fast) ✨

Development

To start development, you need node v16 (the dev server doesn't work on v18 yet). Once you know you have this, you can do the following:

  • Install dependencies: npm i
  • Start the dev server: npm run dev

Running Locally

After running the commands to start development, open in a browser: http://localhost:4200

Contribution reminders

  • There's no hot reloading. You have to reload the app after making a change. OR contribute to enable HMR? ;)
  • This is a very messy code; a product of quick hacking and shipping while live users are giving feedback. Let's clean it up!

Live Demo

👉 The live site is here: Minesweeper

FAQs

Package last updated on 05 Aug 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts