Adding react with vite (tried parcel)

ProLoser · May 13, 2024 · 52be219 · 52be219
1 parent 4b3462c
commit 52be219
Show file tree

Hide file tree

Showing 32 changed files with 3,376 additions and 76 deletions.
diff --git a/.gitignore b/.gitignore
@@ -64,3 +64,35 @@ node_modules/
 
 # dotenv environment variables file
 .env
+
+# Parcel
+.parcel-cache
+dist/
+
+### Vite ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+### /Vite ###
diff --git a/functions/package.json b/functions/package.json
@@ -13,7 +13,6 @@
   "engines": {
     "node": "18"
   },
-  "main": "lib/index.js",
   "dependencies": {
     "firebase-admin": "^12.1.0",
     "firebase-functions": "^5.0.0"

diff --git a/index.html b/index.html
@@ -0,0 +1,16 @@
+<!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>Backgammon</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>
diff --git a/package.json b/package.json
@@ -1,9 +1,16 @@
 {
   "name": "PeaceInTheMiddleEast",
   "version": "1.0.0",
-  "main": "index.js",
+  "private": "true",
+  "type": "module",
   "repository": "https://github.com/ProLoser/PeaceInTheMiddleEast",
   "license": "MIT",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
@@ -13,5 +20,19 @@
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
     "styled-components": "^6.1.10"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.2",
+    "@types/react-dom": "^18.3.0",
+    "parcel": "^2.12.0",
+    "process": "^0.11.10",
+    "@typescript-eslint/eslint-plugin": "^7.8.0",
+    "@typescript-eslint/parser": "^7.8.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.7",
+    "typescript": "^5.2.2",
+    "vite": "^5.2.11"
   }
 }
diff --git a/public/styles.css b/public/styles.css
@@ -0,0 +1,176 @@
+#board {
+    display: flex;
+    gap: 0;
+    height: 100%;
+    flex-wrap: wrap;
+}
+
+.dice {
+    position: absolute;
+    left: 20%;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 2;
+}
+
+.bar {
+    background: lightblue;
+    flex-basis: 4%;
+}
+
+.home {
+    background: lightblue;
+    flex-basis: 4%;
+}
+
+.piece {
+    width: 20px;
+    height: 20px;
+
+    &.white {
+        background: white;
+    }
+
+    &.black {
+        background: black;
+    }
+}
+
+.point {
+    position: relative;
+    flex-basis: calc(100% / 14);
+
+    &::before {
+        content: ' ';
+        display: block;
+        width: 0;
+        height: 0;
+        position: absolute;
+    }
+}
+
+:nth-child(1 of .bar) {
+    order: 3;
+}
+
+:nth-child(2 of .bar) {
+    order: 7;
+}
+
+:nth-child(1 of .home) {
+    order: 5;
+}
+
+:nth-child(2 of .home) {
+    order: 9;
+}
+
+:nth-child(-n+12 of .point) {
+    order: 4;
+}
+
+:nth-child(-n+6 of .point) {
+    order: 2;
+}
+
+:nth-child(n+13 of .point) {
+    order: 6;
+}
+
+:nth-child(n+19 of .point) {
+    order: 8;
+}
+
+/* landscape layout (tablet / computer) */
+@media (min-aspect-ratio: 1) {
+    .point:hover::before {
+        border-top-color: blue !important;
+    }
+
+    .point::before {
+        left: 50%;
+        transform: translateX(-50%);
+        border-left: 30px solid transparent;
+        border-right: 30px solid transparent;
+    }
+
+    /* top */
+    :nth-child(-n+12 of .point) {
+        &::before {
+            border-top: 40vh solid #111;
+        }
+
+        &:nth-child(odd)::before {
+            border-top-color: brown;
+            border-top-width: 30vh;
+        }
+    }
+
+    /* bottom */
+    :nth-child(n+13 of .point) {
+        &::before {
+            border-top: none;
+            border-bottom: 40vh solid black;
+            bottom: 0;
+            top: auto;
+        }
+
+        &:nth-child(even)::before {
+            border-bottom-color: brown;
+            border-bottom-width: 30vh;
+        }
+
+        &:hover::before {
+            border-bottom-color: blue !important;
+        }
+    }
+}
+
+/* Portrait layout (mobile phone) */
+@media (max-aspect-ratio: 1) {
+    #board {
+        flex-direction: column;
+    }
+
+    .point {
+        &:hover::before {
+            border-left-color: blue !important;
+        }
+
+        &::before {
+            top: 50%;
+            transform: translateY(-50%);
+            border-top: 40px solid transparent;
+            border-bottom: 40px solid transparent;
+        }
+    }
+
+    :nth-child(-n+12 of .point) {
+        &::before {
+            border-left: 40vw solid #f00;
+            left: 0;
+        }
+
+        &:nth-child(odd)::before {
+            border-left-color: lightcoral;
+            border-left-width: 30vw;
+        }
+    }
+
+    :nth-child(n+13 of .point) {
+        &::before {
+            border-left: none;
+            border-right: 40vw solid #f00;
+            right: 0;
+        }
+
+        &:hover::before {
+            border-right-color: blue !important;
+        }
+
+        &:nth-child(even)::before {
+            border-right-color: lightcoral;
+            border-right-width: 30vw;
+        }
+    }
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -0,0 +1,5 @@
+import Game from './Game';
+
+export default function App() {
+  return <Game />;
+}
diff --git a/src/Game.tsx b/src/Game.tsx
diff --git a/src/Game/Dice/images/digit-1-black.png b/src/Game/Dice/images/digit-1-black.png
diff --git a/src/Game/Dice/images/digit-1-white.png b/src/Game/Dice/images/digit-1-white.png
diff --git a/src/Game/Dice/images/digit-2-black.png b/src/Game/Dice/images/digit-2-black.png
diff --git a/src/Game/Dice/images/digit-2-white.png b/src/Game/Dice/images/digit-2-white.png
diff --git a/src/Game/Dice/images/digit-3-black.png b/src/Game/Dice/images/digit-3-black.png
diff --git a/src/Game/Dice/images/digit-3-white.png b/src/Game/Dice/images/digit-3-white.png
diff --git a/src/Game/Dice/images/digit-4-black.png b/src/Game/Dice/images/digit-4-black.png
diff --git a/src/Game/Dice/images/digit-4-white.png b/src/Game/Dice/images/digit-4-white.png
diff --git a/src/Game/Dice/images/digit-5-black.png b/src/Game/Dice/images/digit-5-black.png
diff --git a/src/Game/Dice/images/digit-5-white.png b/src/Game/Dice/images/digit-5-white.png
diff --git a/src/Game/Dice/images/digit-6-black.png b/src/Game/Dice/images/digit-6-black.png
diff --git a/src/Game/Dice/images/digit-6-white.png b/src/Game/Dice/images/digit-6-white.png
diff --git a/src/Game/Dice/images/index.ts b/src/Game/Dice/images/index.ts
@@ -0,0 +1,12 @@
+export { default as black1 } from './digit-1-black.png'
+export { default as black2 } from './digit-2-black.png'
+export { default as black3 } from './digit-3-black.png'
+export { default as black4 } from './digit-4-black.png'
+export { default as black5 } from './digit-5-black.png'
+export { default as black6 } from './digit-6-black.png'
+export { default as white1 } from './digit-1-white.png'
+export { default as white2 } from './digit-2-white.png'
+export { default as white3 } from './digit-3-white.png'
+export { default as white4 } from './digit-4-white.png'
+export { default as white5 } from './digit-5-white.png'
+export { default as white6 } from './digit-6-white.png'
diff --git a/src/Game/Dice/index.tsx b/src/Game/Dice/index.tsx
@@ -0,0 +1,14 @@
+import { MouseEventHandler } from 'react';
+import * as IMAGES from './images';
+
+type DiceProps = {
+    onClick: MouseEventHandler,
+    values: [number?, number?]
+}
+
+export default function Dice({ onClick, values }: DiceProps) {
+    return <div className="dice" onClick={onClick} style={{ cursor: 'pointer' }}>
+        <img src={IMAGES[`black${values[0] || 6}`]} />
+        <img src={IMAGES[`white${values[1] || 3}`]} />
+    </div>
+}