Updated to 0.1.5 (to the main branch) (#29)

<!--
For Work In Progress Pull Requests, please use the Draft PR feature,
see https://github.blog/2019-02-14-introducing-draft-pull-requests/ for
further details.

     For a timely review/response, please avoid force-pushing additional
     commits if your PR already received reviews or comments.

Before submitting a Pull Request, please ensure you've done the
following:
- 📖 Read the our Code of Conduct:
https://github.com/ekinkaradag/snake-vue3/blob/main/.github/CODE_OF_CONDUCT.md
     - 👷‍♀️ Create small PRs. In most cases this will be possible.
     - ✅ Provide tests for your changes (Not applicable yet. Disregard).
     - 📝 Use descriptive commit messages.
- 📗 Update any related documentation and include any relevant
screenshots.
-->

## What type of PR is this? (check all applicable)

- [X] 💻 Refactor
- [X] 🍕 Feature
- [X] 🐛 Bug Fix
- [ ] 🚀 Optimization
- [ ] 📃 Documentation Update

## Description

## Related Tickets & Documents

<!--
For pull requests that relate or close an issue, please include them
below. We like to follow [Github's guidance on linking issues to pull
requests](https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue).

For example having the text: "closes #1234" would connect the current
pull
request to issue 1234.  And when we merge the pull request, Github will
automatically close the issue.
-->

## QA Instructions, Screenshots, Recordings

_Please replace this line with instructions on how to test your changes,
a note
on the devices and browsers this has been tested on, as well as any
relevant
images for UI changes._

### UI accessibility checklist

_If your PR includes UI changes, please utilize this checklist:_

- [X] Semantic HTML implemented?
- [X] Keyboard operability supported?
- [X] Color contrast tested?

## [disregard] Added/updated tests? (Not applicable yet)

- [ ] 👍 Yes
- [ ] 👎 No, and this is why: _please replace this line with details on
why tests
      have not been included_
- [ ] ✋ I need help with writing tests

## [optional] Are there any post deployment tasks we need to perform?

## [optional] What gif best describes this PR or how it makes you feel?

CONTRIBUTING.md → .github/CONTRIBUTING.md

@@ -1,15 +1,15 @@
 # Contributing
 
-When contributing to this repository, please first discuss the change you wish to make via issue, with the owners of this repository before making a change. 
+When contributing to this repository, please first discuss the change you wish to make via issue, with the owners of this repository before making a change.
 
-Please note we have a code of conduct ([`CODE_OF_CONDUCT.md`](https://github.com/ekinkaradag/snake-vue3/blob/main/CODE_OF_CONDUCT.md)), please follow it in all your interactions with the project.
+Please note we have a code of conduct ([`CODE_OF_CONDUCT.md`](https://github.com/ekinkaradag/snake-vue3/blob/main/.github/CODE_OF_CONDUCT.md)), please follow it in all your interactions with the project.
 
 ## Pull Request Process
 
-1. Ensure any install or build dependencies are removed before the end of the layer when doing a 
+1. Ensure any install or build dependencies are removed before the end of the layer when doing a
    build.
 2. Update the README.md with details of changes to the interface, this includes new features, known bugs, limitations etc.
 3. Increase the version numbers in [`package.json`](https://github.com/ekinkaradag/snake-vue3/blob/main/package.json) and the README.md to the new version that this
    Pull Request would represent. The versioning scheme we use is [SemVer](http://semver.org/).
-4. You may merge the Pull Request in once you have the sign-off of at least one other developer, or if you 
+4. You may merge the Pull Request in once you have the sign-off of at least one other developer, or if you
    do not have permission to do that, you may request the second reviewer to merge it for you.

.github/PULL_REQUEST_TEMPLATE.md

@@ -6,7 +6,7 @@
      commits if your PR already received reviews or comments.
 
      Before submitting a Pull Request, please ensure you've done the following:
-     - 📖 Read the our Code of Conduct: https://github.com/ekinkaradag/snake-vue3/blob/main/CODE_OF_CONDUCT.md
+     - 📖 Read the our Code of Conduct: https://github.com/ekinkaradag/snake-vue3/blob/main/.github/CODE_OF_CONDUCT.md
      - 👷‍♀️ Create small PRs. In most cases this will be possible.
      - ✅ Provide tests for your changes (Not applicable yet. Disregard).
      - 📝 Use descriptive commit messages.
@@ -44,7 +44,9 @@ on the devices and browsers this has been tested on, as well as any relevant
 images for UI changes._
 
 ### UI accessibility checklist
+
 _If your PR includes UI changes, please utilize this checklist:_
+
 - [ ] Semantic HTML implemented?
 - [ ] Keyboard operability supported?
 - [ ] Color contrast tested?

.github/workflows/build.yml

@@ -0,0 +1,32 @@
+name: Build
+
+on:
+  push:
+    branches: ["main", "development"]
+  pull_request:
+    branches: ["main", "development"]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "yarn"
+      - name: Install dependencies
+        run: yarn --frozen-lockfile
+      - name: Run Typecheck
+        run: yarn typecheck
+        timeout-minutes: 1
+      - name: Build
+        run: yarn build
+        timeout-minutes: 1

.vscode/extensions.json

@@ -0,0 +1,9 @@
+{
+  "recommendations": [
+    "vue.vscode-typescript-vue-plugin",
+    "octref.vetur",
+    "esbenp.prettier-vscode",
+    "dbaeumer.vscode-eslint",
+    "mgmcdermott.vscode-language-babel"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

HOW_TO_PLAY.md

@@ -0,0 +1,12 @@
+# How to play 📕
+
+- The game is played in a 35x35 grid.
+- The player starts as a single **cell** snake with a random direction.
+- The player can navigate the snake via W, A, S, D keys or the arrow keys (⬆, ⬅, ⬇, ➡).
+- The player needs to navigate the snake to the snack in order to have the snake grow and gain score.
+- Each eaten snack contributes 1 point to the score.
+- If the snake hits its own tail, then the game is over.
+- Rules of "Play without borders":
+  - If the snake hits the grid borders, it will continue to move in the same direction from the opposite end.
+- Rules of "Play with borders":
+  - If the snake hits the grid boundaries, then the game is over.

README.md

@@ -15,18 +15,9 @@
     <img src="https://img.shields.io/twitter/follow/dev_ekinkaradag?style=social&logo=twitter" alt="follow on Twitter"></a>
 </p>
 
-## Rules 📕
-
-- The game is played in a 35x35 grid.
-- The player starts as a single **cell** snake with a random direction.
-- The player can navigate the snake via W, A, S, D keys or the arrow keys (⬆, ⬅, ⬇, ➡).
-- The player needs to navigate the snake to the snack in order to have the snake grow and gain score.
-- Each eaten snack contributes 1 point to the score.
-- If the snake hits its own tail, then the game is over.
-- Rules of "Play without borders":
-  - If the snake hits the grid borders, it will continue to move in the same direction from the opposite end.
-- Rules of "Play with borders":
-  - If the snake hits the grid boundaries, then the game is over.
+## How to play 📕
+
+If you'd like to know about how to play the game, you can find about it here: [`HOW_TO_PLAY.md`](https://github.com/ekinkaradag/snake-vue3/blob/14-how-to-play-popup/HOW_TO_PLAY.md)
 
 ## Development 👨‍💻
 
@@ -111,7 +102,7 @@ git clone https://github.com/ekinkaradag/snake-vue3.git
 
   ```bash
   yarn deploy
-  ```  
+  ```
 
   - Or, if you prefer to use `npm`, you can run this:
 
@@ -120,7 +111,8 @@ git clone https://github.com/ekinkaradag/snake-vue3.git
   ```
 
 ## Thank you 👏
-Thanks to all the supporters of the project! If you would like to contribute, make sure to check out [`CONTRIBUTING.md`](https://github.com/ekinkaradag/snake-vue3/blob/main/CONTRIBUTING.md)
+
+Thanks to all the supporters of the project! If you would like to contribute, make sure to check out [`CONTRIBUTING.md`](https://github.com/ekinkaradag/snake-vue3/blob/main/.github/CONTRIBUTING.md)
 
 **Stargazers:**
 

index.html

@@ -35,6 +35,6 @@
 
   <body>
     <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

package.json

@@ -1,21 +1,26 @@
 {
   "homepage": "https://ekinkaradag.github.io/snake-vue3/",
   "name": "vue-snake",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "deploy": "gh-pages -d dist"
+    "deploy": "gh-pages -d dist",
+    "typecheck": "vue-tsc --noEmit --skipLibCheck"
   },
   "dependencies": {
+    "marked": "^7.0.4",
+    "typescript": "^5.1.6",
     "vue": "^3.3.4",
     "vuex": "^4.1.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.2.3",
+    "@vue/cli-plugin-typescript": "^5.0.8",
     "@vue/compiler-sfc": "^3.3.4",
     "gh-pages": "^6.0.0",
-    "vite": "^4.4.9"
+    "vite": "^4.4.9",
+    "vue-tsc": "^1.8.8"
   }
 }