{"id":26562923,"url":"https://github.com/aelfproject/bingo-game-front","last_synced_at":"2025-03-22T15:29:18.258Z","repository":{"id":39436234,"uuid":"200636257","full_name":"AElfProject/bingo-game-front","owner":"AElfProject","description":"a game demo for verifiable random number","archived":false,"fork":false,"pushed_at":"2023-01-01T11:24:37.000Z","size":4851,"stargazers_count":1,"open_issues_count":27,"forks_count":4,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-03-15T20:21:18.379Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AElfProject.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-08-05T10:43:59.000Z","updated_at":"2024-03-15T20:21:18.380Z","dependencies_parsed_at":"2023-01-31T22:01:11.482Z","dependency_job_id":null,"html_url":"https://github.com/AElfProject/bingo-game-front","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AElfProject%2Fbingo-game-front","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AElfProject%2Fbingo-game-front/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AElfProject%2Fbingo-game-front/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AElfProject%2Fbingo-game-front/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AElfProject","download_url":"https://codeload.github.com/AElfProject/bingo-game-front/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244977813,"owners_count":20541739,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-03-22T15:29:17.604Z","updated_at":"2025-03-22T15:29:18.248Z","avatar_url":"https://github.com/AElfProject.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# bingo-game-front\n\n## Table of Contents\n\n- [Introduction](#Introduction)\n- [Required knowledge](#Required-knowledge)\n- [Quick start](#Quick-start)  \n  - [Install](#Install)\n  - [Start with mock data](#Start-with-mock-data)\n  - [Start with Api proxy service](#Start-with-Api-proxy-service)\n- [Develop](#Develop)\n  - [Coding Standards](#Coding-Standards)\n  - [Use Api](#Use-Api)\n  - [I18n](#I18n)\n  - [Project Flow](#Project-Flow)\n    - [register](#register)\n    - [Login](#Login)\n    - [Play](#Play)\n    - [Mnemonic](#Mnemonic)\n    - [QrcodeExport](#QrcodeExport)\n\n## Introduction\n\nThis is a Bingo Game based on [aelf-sdk](https://github.com/AElfProject/aelf-sdk.js)  \nYou can learn basic usage of [aelf](https://github.com/AElfProject/AElf)\n\n## Required knowledge\n\n- [AElf-sdk](https://github.com/AElfProject/aelf-sdk.js)\n- React\n- React-router\n- Redux\n- React-redux\n\n## Quick start\n\n- This project uses node and npm. Go check them out if you don't have them locally installed.\n\n- This project relies on aelf chain with bingo-game contract.  \n  If you don't know how to build an aelf chain or don't hava a ready-made aelf chain, you can refer to our [Official Documents](https://docs.aelf.io/main/main/setup)-Tutorials-'How to dev a DAPP'-Setup Env\n\n- You can change the aelf chain addres in `./src/page/bingo/common/constans.js`\n\n### Install\n\n#### Npm\n\n```bash\nnpm install\n```\n\n#### Yarn\n\n```bash\nyarn\n```\n\n### Start with mock data\n\n**If you don't have Api, you can run the project in this way and use the local mock data in `mock/*` to test the program**\n\n#### Npm\n\n```bash\nnpm run dev\n```\n\n#### Yarn\n\n```bash\nyarn run dev\n```\n\n#### How to set mock data\n\nSet the correspondence between the file storing the mock data and Api path:\n\n```text\nbuild/mock.json\n```\n\nThe json file that stores the mock data is located here:\n\n```text\nmock/\n```\n\nRestart the project, and then you can use mock data.\n\n\n### Start with Api proxy service\n\n**If the Api proxy service is launch, you can run the project this way to joint test program**\n\n#### Npm\n\n```bash\nnpm run test\n```\n\n#### Yarn\n\n```bash\nyarn run test\n```\n\nYou can change the Api proxy service address in `./build/proxy.json` \"target\" field.\n\n\nOpen [http://0.0.0.0:9527/index.html](http://0.0.0.0:9527/index.html) in your browser\n\n## Develop\n\n### Coding Standards\n\n- Airbnb JavaScript Style Guide\n\n### Use Api\n\n- Put Api path in `./src/common/constants.js`\n- Use `request` function in `./src/common/request.js` to send Api\n\n_We also recommend you send Api by dispatch_\n\n### I18n\nInternationalization with [react-i18next](https://react.i18next.com)  \nLearn how to use in [Official Documents](https://react.i18next.com)\n- Change configuration : `./src/pages/bingo/common/i18n.js`\n- Add text : `./src/pages/bingo/common/langs.js`\n\n### Project Flow\n\n**Notice: after registration, some account information save in Storage.\u003cbr\u003e\nYou can check it in F12 -\u003e Application**\n\nWhen entering the project, the program will automatically detect the existence of an account.\n- Account exists, enter the login page.\n- Account doesn't exist, enter the registration page.  \nYou can view the logic of the code in `./src/pages/bingo/components/Auth`\n\n#### register\n  If there is no wallet address and keystore in \"Local Storage\".\n  1. Enter the correct account information.\n  2. Create a new wallet by `AElf.wallet.createNewWallet()`\n  3. Save the name and wallet address in the DB by 'Register'Api.\n  4. Dispatch action. save wallet, name, count in redux's store.\n  5. Get encrypted keystore by `AElf.wallet.keyStore.getKeystore`\n  6. save keystore and wallet's address in 'Local Storage', and save wallet in 'Session Storage'. Use this data to determine if an account exists or whether log in.\n  7. Register bingoGame contract with this wallet.\n  8. Show address, count in Modal.\n  9. Enter 'play' page.\n\n#### Login\n  If there is already wallet's address and keystore in 'Local Storage', but don't have wallet info in `Session Storage' enter login page.\n  1. Get wallet's in 'Local Storage', show in not editable address input item. \n  2. Get password from the user.\n  3. Get Keystore from 'local Session'.\n  4. Get Mnemonic by `AElf.wallet.keyStore.unlockKeystore(keyStore, password)`\n  5. Get wallet by `AElf.wallet.getWalletByMnemonic(mnemonic)`\n  6. Save wallet in redux's store and 'Session Storage'.\n  7. Enter 'play' page.\n\n#### Play\n  1. Get Token Contract and BingoGame Contarct through AElf method.\n  2. Get number of cards through Token Contract.\n  3. Get Top Records and Personal Records.\n  4. Page display\n  5. Click play button, get result by `bingoGameContract.Play({value})`, then send result to DB by Api.\n  6. Show play result in Modal\n\n#### Mnemonic\n  Get mnemonic from 'Session Storage' and show\n\n#### QrcodeExport\n  Save Keystore in QRcode.\n  Use [qrcode.react](https://www.npmjs.com/package/qrcode.react) achieve.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faelfproject%2Fbingo-game-front","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faelfproject%2Fbingo-game-front","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faelfproject%2Fbingo-game-front/lists"}