feat: tictactoe UI (#780)

## Type of change

- New feature

## Changes

The following changes have been made:

- Create a ui for the tic tac toe app


## Related Issues

Closes #110

.github/workflows/deploy-contracts.yml

@@ -0,0 +1,102 @@
+name: Deploy Contracts
+
+on:
+  workflow_dispatch:
+    inputs:
+      provider_url:
+        description: "Provider url"
+        required: true
+        default: "https://beta-5.fuel.network/graphql"
+        type: string
+      wallet_secret:
+        description: "Wallet secret used to deploy contracts"
+        required: true
+        type: string
+      gas_price:
+        description: "Min gas price required from the provider"
+        required: true
+        default: 1
+        type: number
+      commit_changes:
+        description: "Commit contract ids on the current branch"
+        required: true
+        default: true
+        type: boolean
+
+env:
+  RUST_VERSION: 1.74.0
+  NODE_VERSION: 18
+  PNPM_VERSION: 8
+  WALLET_SECRET: ${{ github.event.inputs.wallet_secret }}
+  PROVIDER_URL: ${{ github.event.inputs.provider_url }}
+  GAS_PRICE: ${{ github.event.inputs.gas_price }}
+
+jobs:
+  cancel-previous-run:
+    name: Cancel previous actions
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: n1hility/cancel-previous-runs@v2
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+  test-inputs:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check provider_url format
+        run: |
+          if ! [[ "${{ github.event.inputs.provider_url }}" =~ ^https?:\/\/([a-z0-9\.-]){1,}(:[0-9]{1,4})?\/graphql$ ]]; then
+            echo "Provider url is not valid";
+            process 1;
+          fi
+        shell: bash
+
+  build-and-deploy:
+    needs: test-inputs
+    name: Build and deploy contracts
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        project: ["games/TicTacToe/frontend-app"]
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Install rust toolchain
+        uses: dtolnay/rust-toolchain@master
+        with:
+          toolchain: ${{ env.RUST_VERSION }}
+
+      - name: Install Fuel toolchain
+        uses: FuelLabs/action-fuel-toolchain@v0.6.0
+        with:
+          toolchain: nightly
+          date: 2024-01-24
+
+      - name: PNPM install
+        id: pnpm-cache
+        run: |
+          cd ${{ matrix.project }}
+          pnpm recursive install --frozen-lockfile
+
+      - name: Build contracts
+        run: |
+          cd ${{ matrix.project }}
+          pnpm fuels build
+
+      - name: Deploy contracts
+        run: |
+          cd ${{ matrix.project }}
+          pnpm fuels deploy
+        env:
+          NODE_ENV: production
+
+      - name: Commit new contract ids
+        if: ${{ github.event.inputs.commit_changes && github.ref != 'refs/heads/master' }}
+        uses: EndBug/add-and-commit@v9
+        with:
+          message: "chore: update contract ids"
+          add: ${{ matrix.project }}/production-contract/contract-ids.json

.gitignore

@@ -4,3 +4,7 @@
 
 # These are backup files generated by rustfmt
 **/*.rs.bk
+
+node_modules
+.turbo
+dist

games/TicTacToe/README.md

@@ -31,27 +31,37 @@ The project consists of a smart contract.
 ```sh
 TicTacToe
 ├── project
-│   ├── contracts
-│   │   └── tictactoe-contract
-│   │       ├── src/main.sw
-│   │       └── tests/harness.rs
-│   ├── README.md
-│   └── SPECIFICATION.md
-├── ui
-│   ├── README.md
-│   └── SPECIFICATION.md
+│   ├────── contracts
+│   │   └────── tictactoe-contract
+│   │       ├────── src/main.sw
+│   │       └────── tests/harness.rs
+│   ├────── README.md
+│   └────── SPECIFICATION.md
+├── app
+│   ├────── package.json
+│   ├────── index.html
+│   └────── src/main.tsx
 └── README.md
 ```
 
 ## Running the project
 
 ### User interface
 
-TODO: The user interface does not currently exist therefore its [README.md](ui/README.md) and [SPECIFICATION.md](ui/SPECIFICATION.md) are empty.
+In order to run the subsequent commands change into the following directory `/path/to/TicTacToe/packages/app/<here>`.
+
+#### Run the frontend application
+
+```bash
+pnpm install
+pnpm project-setup
+```
+
+You will need to install the [Fuel wallet](https://wallet.fuel.network/docs/install/) in order to interact with the application. Now you can open your browser and interact with the tic-tac-toe contract through the frontend.  To play connect two of your wallet accounts and switch between them so each can take their turn.  If you want to run this locally you will need to modify the `chainConfig.json` file to fund your wallet locally.  Add your wallet address and give it some amount of asset id 0x0000...0000.
 
 ### Project
 
-In order to run the subsequent commands change into the following directory `/path/to/TicTacToe/project/<here>`.
+In order to run the subsequent commands change into the following directory `/path/to/TicTacToe/packages/project/<here>`.
 
 #### Program compilation
 

games/TicTacToe/frontend-app/.env.production

@@ -0,0 +1 @@
+VITE_NODE_ENV=production

games/TicTacToe/frontend-app/.eslintignore

@@ -0,0 +1,14 @@
+
+**/node_modules/
+**/coverage/
+*.js
+*.html
+dist
+CHANGELOG.md
+src/contract-types
+contracts
+**/*.typegen.ts
+.eslintrc.js
+**/__generated__/
+**/generated/*
+.changeset/**.md

games/TicTacToe/frontend-app/.eslintrc

@@ -0,0 +1,12 @@
+{
+  "extends": ["plugin:@fuels/base"],
+  "rules": {
+    "import/prefer-default-export": "off",
+    "import/no-named-as-default": "off",
+    "import/export": "off",
+    "import/default": "off",
+    "no-console": "error",
+    "@typescript-eslint/no-empty-function": "off",
+    "jsx-a11y/alt-text": "off"
+  }
+}

games/TicTacToe/frontend-app/.gitignore

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

games/TicTacToe/frontend-app/.prettierignore

@@ -0,0 +1,14 @@
+.coverage_*
+.github
+CHANGELOG.md
+coverage
+dist
+dist-crx
+node_modules
+pnpm-lock.yaml
+**/*.typegen.ts
+.next
+**/storybook/**/*
+**/__generated__/
+**/generated/
+.changeset/**.md

games/TicTacToe/frontend-app/.prettierrc.js

@@ -0,0 +1,9 @@
+const fuelPrettierConfig = require('@fuels/prettier-config');
+
+/** @type {import("prettier").Config} */
+module.exports = {
+  ...fuelPrettierConfig,
+  // trailingComma always adds comma on the end of functions params, that can cause
+  // issues, when a second param can't be undefined.
+  trailingComma: 'es5',
+};