Initial web package based on Typescript, React and Vite

Initial page has two tabs: * Home, the game page, with a three.js canvas and rotating cube * Blank, a blank page with a retro red background
RetroAI · Mar 10, 2024 · 25ca39f · 25ca39f
1 parent 40c28c1
commit 25ca39f
Show file tree

Hide file tree

Showing 27 changed files with 3,660 additions and 0 deletions.
diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml
@@ -0,0 +1,68 @@
+################################################################################
+#
+#  Copyright (C) 2023-2024 retro.ai
+#  This file is part of retro3 - https://github.com/retroai/retro3
+#
+#  SPDX-License-Identifier: AGPL-3.0-or-later
+#  See the file LICENSE.txt for more information.
+#
+################################################################################
+
+name: Node.js CI
+
+on: [push, pull_request]
+
+jobs:
+  build-and-deploy:
+    # The type of runner that the job will run on
+    runs-on: ${{ matrix.os }}
+
+    defaults:
+      run:
+        # Set the working directory to frontend folder
+        working-directory: src/frontend
+
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - os: ubuntu-latest
+            node-version: 20
+
+    steps:
+    - name: Checkout 🛎️
+      uses: actions/checkout@v4
+
+    - name: Setup Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ matrix.node-version }}
+
+    - name: Install pnpm
+      run: |
+        npm install -g pnpm
+
+    - name: Cache pnpm modules
+      id: cache-modules
+      uses: actions/cache@v4
+      with:
+        path: |
+          src/frontend/node_modules
+        key: ${{ runner.os }}-${{ matrix.node-version }}-pnpm-${{ hashFiles('src/frontend/pnpm-lock.yaml') }}
+
+    - name: pnpm install
+      if: steps.cache-modules.outputs.cache-hit != 'true'
+      run: |
+        pnpm install
+
+    - name: pnpm audit-ci
+      run: |
+        pnpm audit-ci
+
+    - name: pnpm lint
+      run: |
+        pnpm lint
+
+    - name: pnpm build
+      run: |
+        pnpm build
diff --git a/README.md b/README.md
@@ -6,6 +6,21 @@ Each game integration has files listing memory locations for in-game variables,
 
 Please note that ROMs are not included and you must obtain them yourself. Most ROM hashes are sourced from their respective No-Intro SHA-1 sums.
 
+## Dependencies
+
+For frontend development, the pnpm tool is also used (`npm i -g pnpm`).
+
+## Quick Start
+
+To build and run the website frontend, enter the `src/frontend/` directory and use standard pnpm commands:
+
+```bash
+cd src/frontend
+pnpm install
+pnpm build
+pnpm start
+```
+
 ## Building OpenAI code
 
 To build the legacy OpenAI code, enter the `openai` folder and run the build commands:

diff --git a/src/frontend/.eslintignore b/src/frontend/.eslintignore
@@ -0,0 +1,4 @@
+# Generated by Node
+/dist
+/node_modules
+/pnpm-lock.yaml
diff --git a/src/frontend/.eslintrc.json b/src/frontend/.eslintrc.json
@@ -0,0 +1,15 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint", "simple-import-sort"],
+  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+  "env": {
+    "browser": true,
+    "es2020": true,
+    "mocha": true,
+    "node": true
+  },
+  "rules": {
+    "simple-import-sort/imports": "error"
+  }
+}
diff --git a/src/frontend/.gitignore b/src/frontend/.gitignore
@@ -0,0 +1,15 @@
+# Generated by Node
+/dist
+/node_modules
+/yarn-*.log*
+
+# Editor directories and files
+*.njsproj
+*.ntvs*
+*.sln
+*.suo
+*.sw?
+.DS_Store
+.idea
+.vscode/*
+!.vscode/extensions.json
diff --git a/src/frontend/.prettierignore b/src/frontend/.prettierignore
@@ -0,0 +1,4 @@
+# Generated by Node
+/dist
+/node_modules
+/pnpm-lock.yaml
diff --git a/src/frontend/.prettierrc b/src/frontend/.prettierrc
@@ -0,0 +1,3 @@
+{
+  "tabWidth": 2
+}
diff --git a/src/frontend/audit-ci.json b/src/frontend/audit-ci.json
@@ -0,0 +1,9 @@
+{
+  "$schema": "https://github.com/IBM/audit-ci/raw/main/docs/schema.json",
+  "package-manager": "pnpm",
+  "low": false,
+  "moderate": true,
+  "high": true,
+  "critical": true,
+  "allowlist": []
+}
diff --git a/src/frontend/index.html b/src/frontend/index.html
@@ -0,0 +1,67 @@
+<!doctype html>
+<html
+  xmlns="http://www.w3.org/1999/xhtml"
+  prefix="og: http://ogp.me/ns#"
+  lang="en-US"
+  xml:lang="en-US"
+>
+  <head>
+    <title>retro.ai</title>
+
+    <!-- Open Graph metadata -->
+    <meta property="og:type" content="game" />
+
+    <meta charset="UTF-8" />
+
+    <!-- Link the favicon -->
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+
+    <!-- Viewporting -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <!-- Link the web app manifest for usage as a Progressive Web App (PWA) -->
+    <link
+      rel="manifest"
+      type="application/manifest+json"
+      href="manifest.json"
+    />
+
+    <!-- Start Single Page Apps for GitHub Pages -->
+    <script type="text/javascript">
+      // Single Page Apps for GitHub Pages
+      //
+      // MIT License
+      // https://github.com/rafgraph/spa-github-pages
+      //
+      // This script checks to see if a redirect is present in the query string,
+      // converts it back into the correct url and adds it to the
+      // browser's history using window.history.replaceState(...),
+      // which won't cause the browser to attempt to load the new url.
+      // When the single page app is loaded further down in this file,
+      // the correct url will be waiting in the browser's history for
+      // the single page app to route accordingly.
+      (function (l) {
+        if (l.search[1] === "/") {
+          var decoded = l.search
+            .slice(1)
+            .split("&")
+            .map(function (s) {
+              return s.replace(/~and~/g, "&");
+            })
+            .join("?");
+          window.history.replaceState(
+            null,
+            null,
+            l.pathname.slice(0, -1) + decoded + l.hash,
+          );
+        }
+      })(window.location);
+    </script>
+    <!-- End Single Page Apps for GitHub Pages -->
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/src/frontend/package.json b/src/frontend/package.json
@@ -0,0 +1,71 @@
+{
+  "name": "retro-dapp",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "Website and backend for retro.ai",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/RetroAI/retro-dapp.git"
+  },
+  "homepage": "https://retroai.github.io",
+  "bugs": {
+    "url": "https://github.com/RetroAI/retro-dapp/issues"
+  },
+  "author": "retro.ai <[email protected]>",
+  "license": "Apache-2.0",
+  "engines": {
+    "node": ">=18.0.0",
+    "npm": ">=8.0.0"
+  },
+  "keywords": [
+    "ai",
+    "arcade",
+    "defi",
+    "entertainment",
+    "games",
+    "nft",
+    "retro"
+  ],
+  "scripts": {
+    "audit-ci": "audit-ci --config audit-ci.json",
+    "build": "tsc && vite build",
+    "clean": "rimraf dist node_modules yarn-*.log*",
+    "deploy": "gh-pages --branch main --repo [email protected]:retroai/retroai.github.io.git --dist dist --dotfiles",
+    "start": "vite",
+    "format": "prettier --write . && eslint --fix .",
+    "lint": "prettier --check . && eslint .",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:ui": "vitest --ui"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3",
+    "three": "^0.157.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.25",
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.21",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/three": "^0.162.0",
+    "@typescript-eslint/eslint-plugin": "^7.1.1",
+    "@typescript-eslint/parser": "^7.1.1",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/ui": "^1.3.1",
+    "audit-ci": "^6.6.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-simple-import-sort": "^12.0.0",
+    "gh-pages": "^6.1.1",
+    "prettier": "^3.2.5",
+    "prettier-plugin-pkg": "^0.18.1",
+    "rimraf": "^5.0.5",
+    "typescript": "^5.4.2",
+    "vite": "^5.1.5",
+    "vitest": "^1.3.1"
+  },
+  "bundleDependencies": false,
+  "target": "web"
+}