Merge pull request #1 from takaneichinose/feature/2.0.0

Feature/2.0.0

.eslintrc.cjs

@@ -0,0 +1,8 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  rules: {},
+};

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.prettierignore

@@ -0,0 +1,3 @@
+# Ignore artifacts:
+build
+coverage

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "printWidth": 80,
+  "singleQuote": true,
+  "semi": true,
+  "tabWidth": 2,
+  "useTabs": false,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "endOfLine": "lf"
+}

README.md

@@ -1,8 +1,4 @@
-# Brave Chicky Dice Adventure
-
-A Pen created on CodePen.io. Original URL: [https://codepen.io/takaneichinose/pen/dympyjN](https://codepen.io/takaneichinose/pen/dympyjN).
-
-<img width="1440" alt="スクリーンショット 2022-07-15 0 22 06" src="https://user-images.githubusercontent.com/11864841/179163515-c37ab398-971b-4b24-bc08-ffacbaa70de2.png">
+# Bravy Chicky Dice Adventure
 
 ## Description
 
@@ -14,26 +10,49 @@ There are 4 possible commands to fight the ghost defending the Natural Tower.
 
 By rolling the dice, you can guide Chicky with the possible commands depends on the number appeared on the dice.
 
-```
-== 1 Do nothing
->= 2 Defend
->= 3 Defend, Attack
->= 5 Defend, Attack, Heal
-```
+- `n == 1` Do nothing
+- `n >= 2` Able to Defend
+- `n >= 3` Able to Defend, and Attack
+- `n >= 5` Able to Defend, Attack, and Heal
 
 Also, you may challenge your friends and brag your highest score.
 
 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.
 
-## Resources
+## Requirements
+
+1. Text editor (Preferred Visual Studio Code)
+1. Terminal (I use the built-in terminal on Visual Studio Code)
 
-- [ThreeJS](https://threejs.org) for 3D rendering and graphics
-- [GSAP](https://greensock.com) for animation
-- [ReactJS](https://reactjs.org) for UI
+## 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
 
-- [MagicaVoxel](https://ephtracy.github.io) to create all the 3D models.
-- [Aseprite](https://www.aseprite.org) for background, dice, and effect.
-- [PICO-8](https://www.aseprite.org) for the colour palette used for graphics.
-- [Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P) for the fonts in the UI.
+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. [tween.js](https://tweenjs.github.io/tween.js/) Animation or tweening
+1. [TailwindCSS](https://tailwindcss.com/) CSS framework for easy styling
+1. [howler.js](https://howlerjs.com/) Audio playing library
+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. [Silkscreen](https://fonts.google.com/specimen/Silkscreen) Pixel-art fonts
+1. [Misaki](https://littlelimit.net/misaki.htm) 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