Summary:
BLSS, "Beat the Landlord Scoring System", is a software for keeping socres for "beat the landlord" game. BL is called "dou4di4zhu3" in Chinese, which is very popular in mainland China.
Commonly, people grab a pen and peice of paper to keep the score. I became inspired by my lasiness and erro-proned record keeping.
As I progressed through the project, when I was at GUI stage, I found myself trying hard to avoid using written words to convey information and error messages. I began to search for images and icons to better express my meanings.
From years of GUI design exprerience, allocating real estate to populate messages is a headaching and constant thing, not to mentioning the compound effect of internationalization or localization.
So I decided to using only images and icons for the GUI part of this project. This project is my proof-of-concept on "pictation GUI design".
Software requirements: NodeJS(18) and MongoDB (Atlas or Community version).
Software used: systems - nodejs, mongodb; language - javascript, css; GUI - html5, tailwindcss, pug; nodejs modules/middelwares - express, mongoose, morgan, multer, dotenv, design framework - mvc; development tools - vscode, prettier, eslint, postcss; deployment environment - aws ec2, linux, windows;
Installation:
"npm install"
This will install all the dependencies.
Running:
modify config.env to reflect your environment.
"npm run dev" as commond for development
"npm run prod" as command for production
Development(on windows):
"npm run debug" as command for debugging web app.
"npm run debug-prod" as command for debugging as in production environment
"npm run tailwind-watch" as command for tailwind watch
"npm run postcss" as command for postcssing the style.css file
Using BLSS:
(Default page is the game list page, which showing all the games played by all players)
4 icons on the top of the page, "new game(landlord)", "game list(pair of aces)", "players", and "stats".
Games are listed from latest to earlest. Players are shown with a badge as the indication of the winner of the game. Clock icon indicates the duration of the game, round icon shows the number of rounds, scorepad shows total scores of each player, and arrow icon will bring you to the play game page of the game again, where you can continute play the game.
The accordion shows immutable table of all the rounds in the game.
The first thing to do is to create players on the player page.
(Player page, which you can create, edit, and remove players, 3 players are required to play a game)
Lets create 4 players.
We go to "new game" page to start a new game by click the first icon(landlord).
(New Game page, which you start a game)
Choose 3 players(first 3 players are selected by default) to start a new game.
Clicking the start button to go to "Play Game" page.
(Play Game page, which you record all rounds of a game)
The page is using table like interface with a "header row" and "control row" on the top of the table.
For "header row" and "control row", here are the descriptions of each column from left to right:
[round] - headher: number of each round; control: submit button, to submit the round;
[badge] - headher: indicating whether the landlord of the game has won or not; control: check if the landlord won the game, leave unchecked if the landlord lost the game;
[player] - headher: the score of player 1 through 3, negative score for lost and positive for won; control: click if the player is the landlord;
[score] - headher: base score of each game; control: decrease or increase the base score, defaulted to 3;
[bomb] - headher: number of bombs of each game; control: decrease of increase the number of bombs happened in the game;
[spring] - headher: indicating a "spring" event for each game; control: check if a "spring" event happened during the game, leave uncheck if not;
[landlord] - headher: showing the landload of each game; control: remove button, to remove the round in case of error (a round needs to be selected by click on the row)
Also a "subtotal row" appears as the third row, which shows a subtotal of each column. For landlord column, colors are used to group users.
A garbage bin icon on the to right is to delete the whole game.
The start time of the game is on the very top right.
(Stat Page, which display some stats of all the games played)
A table of stats with 6 different stats displayed in each row, explained from top to bottom below:
[medal] - top 3 players who won most games;
[landlord] - top 3 players who played most rounds as landlord;
[score] - top 3 players who had the highest total game score;
[round] - top 3 games with the most rounds;
[bomb] - top 3 rounds with the most number of bombs;
[duration] - top 3 games with the longest duration;