Base chess app

packages/chess-app/.env.example

@@ -0,0 +1,11 @@
+# Application configuration
+VITE_CHAIN=LTC
+VITE_NETWORK=regtest
+VITE_URL=http://127.0.0.1:1031
+
+# Application Port
+VITE_PORT=1032
+
+# Smart Contract Locations
+# Run 'npm run deploy' and copy the output here
+VITE_COUNTER_MOD_SPEC=fddcf4fe11f7460ea2efa2912cb3feee73773beffcd9216e6bd6b28ad9c59518:0

packages/chess-app/.gitignore

@@ -0,0 +1,22 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+/dist
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+*.log*

packages/chess-app/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "printWidth": 100,
+  "semi": false,
+  "singleQuote": false,
+  "trailingComma": "none"
+}

packages/chess-app/README.md

@@ -0,0 +1,98 @@
+<div align="center">
+  <h1>TBC Chess</h1>
+  <p>
+    A decentralised Chess App based on Bitcoin Computer.
+    <br />
+    <a href="http://bitcoincomputer.io/">website</a> &#183; <a href="http://docs.bitcoincomputer.io/">docs</a>
+  </p>
+</div>
+
+## Prerequisites
+
+You need to have [git](https://www.git-scm.com/) and [node.js](https://nodejs.org/) installed.
+
+## Installation
+
+<font size=1>
+
+```sh
+# Download the monorepo
+git clone https://github.com/bitcoin-computer/monorepo.git
+
+# Move into monorepo folder
+cd monorepo
+
+# Install the dependencies
+npm install
+```
+
+</font>
+
+## Usage
+
+Most of the api is documented in the [Create React App Readme](https://github.com/facebook/create-react-app).
+
+### Start the Application
+
+To start the application run the command below and open [http://localhost:3000](http://localhost:3000).
+
+<font size=1>
+
+```bash
+# Move to the package
+cd packages/chess-app
+
+# Install the dependencies
+npm install
+
+# Use the default environment variables
+cp .env.example .env
+
+# Deploy the contracts
+npm run deploy
+
+# Copy the mod-specs to env
+
+# Start the app
+npm run dev
+```
+
+</font>
+
+## Documentation
+
+Have a look at the [docs](https://docs.bitcoincomputer.io/) for the Bitcoin Computer.
+
+## Getting Help
+
+If you have any questions, please let us know on <a href="https://t.me/thebitcoincomputer" target="_blank">Telegram</a>, <a href="https://twitter.com/TheBitcoinToken" target="_blank">Twitter</a>, or by email clemens@bitcoincomputer.io.
+
+## Development Status
+
+See [here](https://github.com/bitcoin-computer/monorepo/tree/main/packages/lib#development-status).
+
+## Price
+
+See [here](https://github.com/bitcoin-computer/monorepo/tree/main/packages/lib#price).
+
+## Contributing
+
+This project is intended as a starting point for new development so we want to keep it simple. If you have found a bug please create an [issue](https://github.com/bitcoin-computer/monorepo/issues). If you have a bug fix or a UX improvement please create a pull request [here](https://github.com/bitcoin-computer/monorepo/pulls).
+
+If you want to add a feature we recommend to create a fork. Let us know if you have built something cool and we can link to your project.
+
+## Legal Notice
+
+See [here](https://github.com/bitcoin-computer/monorepo/tree/main/packages/lib#legal-notice).
+
+## MIT License
+
+Copyright (c) 2022 BCDB Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+[node]: https://github.com/bitcoin-computer/monorepo/tree/main/packages/node

packages/chess-app/eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

packages/chess-app/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TBC Chess</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

packages/chess-app/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@bitcoin-computer/chess-app",
+  "private": true,
+  "version": "0.22.0-beta.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "test": "vitest",
+    "deploy": "npm run build-contract && node --loader ts-node/esm  ./scripts/deploy.ts",
+    "build-contract": "tsc --project tsconfig.build.json && mv ./build-contract/chess-module.js ./src/contracts/chess.mjs && rm -rf build-contract"
+  },
+  "dependencies": {
+    "@bitcoin-computer/components": "^0.22.0-beta.0",
+    "@bitcoin-computer/lib": "^0.22.0-beta.0",
+    "flowbite": "^2.3.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.9.0",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.9.0",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.9",
+    "globals": "^15.9.0",
+    "jsdom": "^25.0.0",
+    "postcss": "^8.4.44",
+    "tailwindcss": "^3.4.10",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.0.1",
+    "vite": "^5.4.1",
+    "vitest": "^2.0.5"
+  }
+}

packages/chess-app/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

packages/chess-app/scripts/deploy.ts

@@ -0,0 +1,68 @@
+import { Computer } from "@bitcoin-computer/lib"
+import { ChessGame } from "../src/contracts/chess-game.js"
+import { config } from "dotenv"
+import * as readline from "node:readline/promises"
+import { stdin as input, stdout as output } from "node:process"
+import * as fs from "fs"
+
+config()
+
+const rl = readline.createInterface({ input, output })
+
+const { VITE_CHAIN: chain, VITE_NETWORK: network, VITE_URL: url, MNEMONIC: mnemonic } = process.env
+
+if (network !== "regtest") {
+  if (!mnemonic) throw new Error("Please set MNEMONIC in the .env file")
+}
+
+const computer = new Computer({ chain, network, mnemonic, url })
+await computer.faucet(2e8)
+const balance = await computer.wallet.getBalance()
+
+// Summary
+console.log(`Chain \x1b[2m${chain}\x1b[0m
+Network \x1b[2m${network}\x1b[0m
+Node Url \x1b[2m${url}\x1b[0m
+Address \x1b[2m${computer.wallet.address}\x1b[0m
+Mnemonic \x1b[2m${mnemonic}\x1b[0m
+Balance \x1b[2m${balance.balance / 1e8}\x1b[0m`)
+
+const answer = await rl.question("\nDo you want to deploy the contracts? \x1b[2m(y/n)\x1b[0m")
+if (answer === "n") {
+  console.log("\n Aborting...\n")
+} else {
+  fs.readFile("./src/contracts/chess.mjs", "utf-8", async (err, chessFile) => {
+    if (err) {
+      console.error("Error reading file:", err)
+      return
+    }
+    console.log("\n * Deploying Chess contract...")
+    const chessModSpec = await computer.deploy(`${chessFile}`)
+    const chessGameModSpec = await computer.deploy(`
+      import { Chess } from "${chessModSpec}"
+      export ${ChessGame}
+    `)
+
+    console.log(`
+    import { Chess } from "${chessModSpec}"
+    export ${ChessGame}
+  `)
+
+    console.log(`
+Successfully deployed smart contracts.
+
+-----------------
+  ACTION REQUIRED
+-----------------
+
+(1) Update the following rows in your .env file.
+
+VITE_CHESS_MODULE_MOD_SPEC\x1b[2m=${chessModSpec}\x1b[0m
+VITE_CHESS_GAME_MOD_SPEC\x1b[2m=${chessGameModSpec}\x1b[0m
+
+(2) Run 'npm start' to start the application.
+`)
+  })
+}
+
+rl.close()

packages/chess-app/src/App.css

@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

packages/chess-app/src/App.test.tsx

@@ -0,0 +1,10 @@
+import { screen, render } from "@testing-library/react"
+import App from "./App"
+
+describe("App", () => {
+  it("renders the App component", () => {
+    render(<App />)
+    const linkElement = screen.getByText(/All Counters/i)
+    expect(linkElement).toBeInTheDocument()
+  })
+})

packages/chess-app/src/App.tsx

@@ -0,0 +1,39 @@
+import "./App.css"
+import { useEffect, useState } from "react"
+import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom"
+import { initFlowbite } from "flowbite"
+import { Auth, UtilsContext, Wallet, ComputerContext } from "@bitcoin-computer/components"
+import { ChessBoard } from "./components/ChessBoard"
+
+import { Navbar } from "./components/Navbar"
+import { MyGames } from "./components/Assets"
+import CreateNewGame from "./components/CreateNewGame"
+
+export default function App() {
+  const [computer] = useState(Auth.getComputer())
+
+  useEffect(() => {
+    initFlowbite()
+  }, [])
+
+  return (
+    <BrowserRouter>
+      <span className="bg-gray-900/50 dark:bg-gray-900/80 z-30 inset-0 sr-only"></span>
+      <UtilsContext.UtilsProvider>
+        <ComputerContext.Provider value={computer}>
+          <Auth.LoginModal />
+          <Wallet />
+          <Navbar />
+          <div className="w-full h-screen bg-white border-gray-200 dark:bg-gray-900 px-28">
+            <Routes>
+              <Route path="/" element={<MyGames />} />
+              <Route path="/new-game" element={<CreateNewGame />} />
+              <Route path="/game/:id" element={<ChessBoard />} />
+              <Route path="*" element={<Navigate to="/" replace={true} />} />
+            </Routes>
+          </div>
+        </ComputerContext.Provider>
+      </UtilsContext.UtilsProvider>
+    </BrowserRouter>
+  )
+}