Giter Club home page Giter Club logo

mafia-dapp-ui's Introduction

Mafia Dapp UI

This is a UI for interacting with the Mafia Dapp.

For development purposes, it also supports running against the Mafia Dapp HTTP backend.

Project Setup

npm install

Compile and Hot-Reload for Development

The following will run this locally to be used against an instance of Hardhat:

npm run dev

To run against the HTTP backend, do the following:

If in a UNIX-compatible environment, run:

export MAFIA_BACKEND=http && npm run dev

If running in Windows, run:

$env:MAFIA_BACKEND = 'http'
npm run dev

Compile and Minify for Production

The following builds into the dist/ folder a distributable version of the website:

npm run build

Run Production Locally

Run the following to build the production distribution and run it locally (useful for testing the Base Goerli Testnet integration):

npm run build && npx serve dist

Attributions

mafia-dapp-ui's People

Contributors

jrh3k5 avatar

Watchers

 avatar

mafia-dapp-ui's Issues

Handle signature rejection more gracefully

The UI looks a lot more dire than it actually is when a user rejects a signature request:

image

Handle signature rejection as a first-class error and, ideally, don't report it as an error at all.

Add analytics

Add analytics to understand how much traffic the app is getting

Snap focus onto error messages

Especially on mobile, it is easy to be at the bottom of the screen and be unable to see the error that popped up. If an error occurs, the user should be snapped up to the error message so that they see it.

Cancelling game prior to start doesn't navigate away from the hosting screen

If you click to host a game, submit the transaction, and then, from the page where you click to start the game, click "cancel", you are prompted to sign a transaction to cancel the game; however, you do not navigate away from that screen. You should be taken back to the "host game / join game" screen.

Show the network in use on the page

The app allows, at least in Dev, for the user to select between Hardhat and Base Goerli. Show them, somewhere, on the screen to which network the app is communicating.

Add loading indicator

If you're waiting on the app to, for example, wait for a signal that the game has started, it can actually look like app has stalled. Add a loading indicator to let the user know that the app is just waiting for something.

Remove ability to resume game

The ability to resume a game is a bit half-baked at the moment - the game state can't properly load who's died or been convicted. This should be removed and revisited at a later date and time to allow a more robust and complete implementation to be added.

Add descriptor text on host/join game

Currently, the game takes users to a page that just has two buttons ("Host Game" and "Join Game"). There should be some direction to the user on what to do on this page (e.g., getting the host address from the host user).

Handle cold entry better

If I navigate to a page halfway through the game workflow (e.g., /game/join), the game quietly fails because it can't load a provider for the game service. In this instance, it should just take the user back to the main page.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.