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 · Sep 30, 2023 · 4729c26 · 4729c26
1 parent f73ca18
commit 4729c26
Show file tree

Hide file tree

Showing 25 changed files with 3,511 additions and 0 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -0,0 +1,56 @@
+################################################################################
+#
+#  Copyright (C) 2023 retro.ai
+#  This file is part of retro-dapp - https://github.com/RetroAI/retro-dapp
+#
+#  SPDX-License-Identifier: Apache-2.0
+#  See the file LICENSE for more information.
+#
+################################################################################
+
+name: Build and Deploy
+on:
+  push:
+    branches:
+      - main
+    paths:
+      # Only run the workflow when files in frontend change
+      - 'frontend/**'
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        # Set the working directory to frontend folder
+        working-directory: frontend
+
+    steps:
+    - name: Checkout 🛎️
+      # If you're using actions/checkout@v2 you must set persist-credentials
+      # to false in most cases for the deployment to work correctly
+      uses: actions/checkout@v4
+      with:
+        persist-credentials: false
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v3
+      with:
+        node-version: '20'
+
+    - name: Install and Build
+      run: |
+        yarn install
+        yarn build
+
+    - name: Deploy to retroai.github.io 🚀
+      run: |
+        cd ..
+        git clone https://github.com/RetroAI/retroai.github.io.git deployed-repo
+        rsync -av --delete frontend/dist/ deployed-repo/
+        cd deployed-repo
+        git config user.name "GitHub Action"
+        git config user.email "[email protected]"
+        git add .
+        git commit -m "Deployed new build from retro-dapp repository"
+        git push https://${{secrets.GH_PAT}}@github.com/RetroAI/retroai.github.io.git main
diff --git a/frontend/.eslintignore b/frontend/.eslintignore
@@ -0,0 +1,3 @@
+# Generated by Yarn
+/dist
+/node_modules
diff --git a/frontend/.eslintrc.json b/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/frontend/.gitignore b/frontend/.gitignore
@@ -0,0 +1,15 @@
+# Generated by Yarn
+/dist
+/node_modules
+yarn-*.log*
+
+# Editor directories and files
+*.njsproj
+*.ntvs*
+*.sln
+*.suo
+*.sw?
+.DS_Store
+.idea
+.vscode/*
+!.vscode/extensions.json
diff --git a/frontend/.prettierignore b/frontend/.prettierignore
@@ -0,0 +1,3 @@
+# Generated by Yarn
+/dist
+/node_modules
diff --git a/frontend/audit-ci.json b/frontend/audit-ci.json
@@ -0,0 +1,9 @@
+{
+  "$schema": "https://github.com/IBM/audit-ci/raw/main/docs/schema.json",
+  "package-manager": "yarn",
+  "low": false,
+  "moderate": true,
+  "high": true,
+  "critical": true,
+  "allowlist": []
+}
diff --git a/frontend/index.html b/frontend/index.html
@@ -0,0 +1,65 @@
+<!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/frontend/package.json b/frontend/package.json
@@ -0,0 +1,73 @@
+{
+  "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": "yarn build && gh-pages --branch main --repo [email protected]:retroai/retroai.github.io.git --dist dist --dotfiles",
+    "dev": "vite",
+    "format": "prettier --write . && eslint --fix .",
+    "lint": "prettier --check . && eslint .",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:ui": "vitest --ui"
+  },
+  "dependencies": {
+    "@web3-react/core": "^8.2.2",
+    "@web3-react/metamask": "^8.2.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.16.0",
+    "three": "^0.157.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.8.0",
+    "@types/react": "^18.2.23",
+    "@types/react-dom": "^18.2.8",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/three": "^0.156.0",
+    "@typescript-eslint/eslint-plugin": "^6.7.3",
+    "@typescript-eslint/parser": "^6.7.3",
+    "@vitejs/plugin-react": "^4.1.0",
+    "@vitest/ui": "^0.34.6",
+    "@web3-react/types": "^8.2.2",
+    "audit-ci": "^6.6.1",
+    "eslint": "^8.50.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
+    "prettier": "^3.0.3",
+    "prettier-plugin-pkg": "^0.18.0",
+    "rimraf": "^5.0.5",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.9",
+    "vitest": "^0.34.6"
+  },
+  "bundleDependencies": false,
+  "target": "web"
+}
diff --git a/frontend/public/.nojekyll b/frontend/public/.nojekyll
diff --git a/frontend/public/manifest.json b/frontend/public/manifest.json
@@ -0,0 +1,14 @@
+{
+  "short_name": "retro.ai",
+  "name": "retro.ai",
+  "icons": [
+    {
+      "src": "vite.svg",
+      "type": "image/svg+xml"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/frontend/public/robots.txt b/frontend/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/frontend/public/vite.svg b/frontend/public/vite.svg
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -0,0 +1,56 @@
+/*
+ * Copyright (C) 2023 retro.ai
+ * This file is part of retro-dapp - https://github.com/RetroAI/retro-dapp
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ * See the file Apache-2.0.txt for more information.
+ */
+
+nav ul {
+  position: relative;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  background-color: #333;
+}
+
+nav li {
+  float: left;
+}
+
+nav li a {
+  display: block;
+  color: white;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+}
+
+nav li a:hover {
+  background-color: #111;
+}
+
+/*
+ * The following should ensure the button has no background, no border, and
+ * the SVG should be visible
+ */
+.showNavbarButton {
+  background: transparent !important; /* Using !important to avoid override by other styles */
+  border: none !important; /* Remove border */
+  cursor: pointer; /* Pointer cursor on hover */
+  padding: 8px; /* Adjust padding as needed */
+}
+
+.hideNavbarButton {
+  background-color: transparent; /* Transparent background */
+  color: #ffffff; /* White arrow */
+  border: none; /* Remove border */
+  cursor: pointer; /* Pointer cursor on hover */
+  padding: 8px; /* Add some padding */
+  font-size: 1.2rem; /* Adjust font-size as needed */
+  position: absolute; /* Positioning it */
+  right: 0; /* Align to the right */
+  top: 50%; /* Center vertically */
+  transform: translateY(-50%); /* Centering adjustment */
+}