From afcf6e36acd1675c0a02f70733f1f4bc7e3f7982 Mon Sep 17 00:00:00 2001 From: Takane Ichinose Date: Sat, 6 Apr 2024 12:40:55 +0900 Subject: [PATCH] Update readme --- README.md | 71 ++++++++++++++++++++++++++++++++++++++----------------- 1 file changed, 49 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index 9d0b4bc..94cf41f 100644 --- a/README.md +++ b/README.md @@ -1,30 +1,57 @@ -# React + TypeScript + Vite +# Bravy Chicky Dice Adventure -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. +## Description -Currently, two official plugins are available: +This is just a simple turn-based game where you just have to throw a dice, defeat the enemy, and go to the highest floor as you can. -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh +Help Chicky to climb up the Natural Tower by giving it a command. Chicky doesn't quite understand yet what it will do. -## Expanding the ESLint configuration +There are 4 possible commands to fight the ghost defending the Natural Tower. -If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: +By rolling the dice, you can guide Chicky with the possible commands depends on the number appeared on the dice. -- Configure the top-level `parserOptions` property like this: +- `n == 1` Do nothing +- `n >= 2` Able to Defend +- `n >= 3` Able to Defend, and Attack +- `n >= 5` Able to Defend, Attack, and Heal -```js -export default { - // other rules... - parserOptions: { - ecmaVersion: 'latest', - sourceType: 'module', - project: ['./tsconfig.json', './tsconfig.node.json'], - tsconfigRootDir: __dirname, - }, -}; -``` +Also, you may challenge your friends and brag your highest score. -- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked` -- Optionally add `plugin:@typescript-eslint/stylistic-type-checked` -- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list +I haven't been ditching practicing web development these days, and I had hard time creating all these stuff. + +This game is best viewed in landscape mode. + +## Requirements + +1. Text editor (Preferred Visual Studio Code) +1. Terminal (I use the built-in terminal on Visual Studio Code) + +## Building the program + +For my future reference, below is the way to build the program. + +1. Clone the repository +1. Install the dependencies using this command: + `# npm` +1. Build the main program using this command: + `# npm run build` +1. At the step above, the distributed program will be produced, and _dist_ folder will be generated. The step from here will be optional if you want to run the program on the localhost. +1. Create a local virtual server using this command: + `# npm run dev` +1. After building, it can be accessed at [http://localhost:5173/](http://localhost:5173/). + +## Resources + +1. [Blockbench](https://www.blockbench.net/) Low poly 3D model creation tool +1. [Aseprite](https://www.aseprite.org/) Image creation software for textures +1. [ThreeJS](https://threejs.org/) 3D Rendering engine used for the game +1. [React](https://react.dev/) Front end web library for UI +1. [React Three Fiber](https://docs.pmnd.rs/react-three-fiber) Integration of ThreeJS into React +1. [TailwindCSS](https://tailwindcss.com/) CSS framework for easy styling +1. [Vite](https://vitejs.dev/) Build tool for the web +1. [TypeScript](https://www.typescriptlang.org/) Type safety JavaScript transpiler +1. [NodeJS](https://nodejs.org/en/) Runtime JavaScript used for building the app +1. [npm](https://www.npmjs.com/) Package manager for NodeJS +1. [Nosutaru dot](https://free-fonts.jp/nosutaru-dot/) Pixel-art fonts +1. [PICO-8 Secret Palette](https://lospec.com/palette-list/pico-8-secret-palette) All PICO-8 palettes and its hidden colours +1. [Visual Studio Code](https://code.visualstudio.com/) Text editor (IDE) I used for development