diff --git a/apps/web/package.json b/apps/web/package.json
index 35b7758..d5cf122 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -9,19 +9,21 @@
"lint": "next lint"
},
"dependencies": {
+ "bootstrap": "^5.2.3",
"next": "^13.1.1",
"react": "^18.2.0",
+ "react-bootstrap": "^2.7.4",
"react-dom": "^18.2.0",
"ui": "*"
},
"devDependencies": {
"@babel/core": "^7.0.0",
- "eslint": "7.32.0",
- "eslint-config-custom": "*",
- "tsconfig": "*",
"@types/node": "^17.0.12",
"@types/react": "^18.0.22",
"@types/react-dom": "^18.0.7",
+ "eslint": "7.32.0",
+ "eslint-config-custom": "*",
+ "tsconfig": "*",
"typescript": "^4.5.3"
}
}
diff --git a/apps/web/pages/_app.js b/apps/web/pages/_app.js
new file mode 100644
index 0000000..a138b5e
--- /dev/null
+++ b/apps/web/pages/_app.js
@@ -0,0 +1,5 @@
+// add bootstrap css
+import "bootstrap/dist/css/bootstrap.css"; // own css files here
+export default function MyApp({ Component, pageProps }) {
+ return ;
+}
diff --git a/apps/web/pages/index.tsx b/apps/web/pages/index.tsx
index 243204c..7c60a32 100644
--- a/apps/web/pages/index.tsx
+++ b/apps/web/pages/index.tsx
@@ -1,5 +1,6 @@
import dynamic from "next/dynamic";
import * as React from "react";
+import { Col, Container, Navbar, Row } from "react-bootstrap";
const DynamicMap = dynamic(() => import("../components/GalaxyMap"), {
ssr: false,
@@ -8,8 +9,16 @@ const DynamicMap = dynamic(() => import("../components/GalaxyMap"), {
export default function Web() {
return (
-
Web
-
+
+
+ Twilight Assembly
+
+
+
+
+
+
+
);
}
diff --git a/apps/web/public/static/factions/1.png b/apps/web/public/static/factions/1.png
new file mode 100644
index 0000000..df66ccc
Binary files /dev/null and b/apps/web/public/static/factions/1.png differ
diff --git a/apps/web/public/static/factions/10.png b/apps/web/public/static/factions/10.png
new file mode 100644
index 0000000..10b4637
Binary files /dev/null and b/apps/web/public/static/factions/10.png differ
diff --git a/apps/web/public/static/factions/11.png b/apps/web/public/static/factions/11.png
new file mode 100644
index 0000000..1c4f123
Binary files /dev/null and b/apps/web/public/static/factions/11.png differ
diff --git a/apps/web/public/static/factions/12.png b/apps/web/public/static/factions/12.png
new file mode 100644
index 0000000..1279bc6
Binary files /dev/null and b/apps/web/public/static/factions/12.png differ
diff --git a/apps/web/public/static/factions/13.png b/apps/web/public/static/factions/13.png
new file mode 100644
index 0000000..200c261
Binary files /dev/null and b/apps/web/public/static/factions/13.png differ
diff --git a/apps/web/public/static/factions/14.png b/apps/web/public/static/factions/14.png
new file mode 100644
index 0000000..428262e
Binary files /dev/null and b/apps/web/public/static/factions/14.png differ
diff --git a/apps/web/public/static/factions/15.png b/apps/web/public/static/factions/15.png
new file mode 100644
index 0000000..aa3a127
Binary files /dev/null and b/apps/web/public/static/factions/15.png differ
diff --git a/apps/web/public/static/factions/16.png b/apps/web/public/static/factions/16.png
new file mode 100644
index 0000000..35148af
Binary files /dev/null and b/apps/web/public/static/factions/16.png differ
diff --git a/apps/web/public/static/factions/17.png b/apps/web/public/static/factions/17.png
new file mode 100644
index 0000000..a4ef42d
Binary files /dev/null and b/apps/web/public/static/factions/17.png differ
diff --git a/apps/web/public/static/factions/18.png b/apps/web/public/static/factions/18.png
new file mode 100644
index 0000000..be67218
Binary files /dev/null and b/apps/web/public/static/factions/18.png differ
diff --git a/apps/web/public/static/factions/19.png b/apps/web/public/static/factions/19.png
new file mode 100644
index 0000000..6c07916
Binary files /dev/null and b/apps/web/public/static/factions/19.png differ
diff --git a/apps/web/public/static/factions/2.png b/apps/web/public/static/factions/2.png
new file mode 100644
index 0000000..fd314d6
Binary files /dev/null and b/apps/web/public/static/factions/2.png differ
diff --git a/apps/web/public/static/factions/20.png b/apps/web/public/static/factions/20.png
new file mode 100644
index 0000000..460c05d
Binary files /dev/null and b/apps/web/public/static/factions/20.png differ
diff --git a/apps/web/public/static/factions/21.png b/apps/web/public/static/factions/21.png
new file mode 100644
index 0000000..e53a4c9
Binary files /dev/null and b/apps/web/public/static/factions/21.png differ
diff --git a/apps/web/public/static/factions/22.png b/apps/web/public/static/factions/22.png
new file mode 100644
index 0000000..769582a
Binary files /dev/null and b/apps/web/public/static/factions/22.png differ
diff --git a/apps/web/public/static/factions/23.png b/apps/web/public/static/factions/23.png
new file mode 100644
index 0000000..09d4fc8
Binary files /dev/null and b/apps/web/public/static/factions/23.png differ
diff --git a/apps/web/public/static/factions/24.png b/apps/web/public/static/factions/24.png
new file mode 100644
index 0000000..79eeb4e
Binary files /dev/null and b/apps/web/public/static/factions/24.png differ
diff --git a/apps/web/public/static/factions/25.png b/apps/web/public/static/factions/25.png
new file mode 100644
index 0000000..93b2e8a
Binary files /dev/null and b/apps/web/public/static/factions/25.png differ
diff --git a/apps/web/public/static/factions/3.png b/apps/web/public/static/factions/3.png
new file mode 100644
index 0000000..18a2c89
Binary files /dev/null and b/apps/web/public/static/factions/3.png differ
diff --git a/apps/web/public/static/factions/4.png b/apps/web/public/static/factions/4.png
new file mode 100644
index 0000000..1799c22
Binary files /dev/null and b/apps/web/public/static/factions/4.png differ
diff --git a/apps/web/public/static/factions/5.png b/apps/web/public/static/factions/5.png
new file mode 100644
index 0000000..c8d78dc
Binary files /dev/null and b/apps/web/public/static/factions/5.png differ
diff --git a/apps/web/public/static/factions/6.png b/apps/web/public/static/factions/6.png
new file mode 100644
index 0000000..58ea8b5
Binary files /dev/null and b/apps/web/public/static/factions/6.png differ
diff --git a/apps/web/public/static/factions/7.png b/apps/web/public/static/factions/7.png
new file mode 100644
index 0000000..2daab76
Binary files /dev/null and b/apps/web/public/static/factions/7.png differ
diff --git a/apps/web/public/static/factions/8.png b/apps/web/public/static/factions/8.png
new file mode 100644
index 0000000..b4b178e
Binary files /dev/null and b/apps/web/public/static/factions/8.png differ
diff --git a/apps/web/public/static/factions/9.png b/apps/web/public/static/factions/9.png
new file mode 100644
index 0000000..d5e9b2c
Binary files /dev/null and b/apps/web/public/static/factions/9.png differ
diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json
index a355365..52619d8 100644
--- a/apps/web/tsconfig.json
+++ b/apps/web/tsconfig.json
@@ -1,5 +1,5 @@
{
"extends": "tsconfig/nextjs.json",
- "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "pages/_app.js"],
"exclude": ["node_modules"]
}
diff --git a/package-lock.json b/package-lock.json
index 3bbe67d..d0a587f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -56,8 +56,10 @@
"apps/web": {
"version": "0.0.0",
"dependencies": {
+ "bootstrap": "^5.2.3",
"next": "^13.1.1",
"react": "^18.2.0",
+ "react-bootstrap": "^2.7.4",
"react-dom": "^18.2.0",
"ui": "*"
},
@@ -1410,6 +1412,65 @@
"url": "^0.11.0"
}
},
+ "node_modules/@popperjs/core": {
+ "version": "2.11.7",
+ "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz",
+ "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==",
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/popperjs"
+ }
+ },
+ "node_modules/@react-aria/ssr": {
+ "version": "3.6.0",
+ "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.6.0.tgz",
+ "integrity": "sha512-OFiYQdv+Yk7AO7IsQu/fAEPijbeTwrrEYvdNoJ3sblBBedD5j5fBTNWrUPNVlwC4XWWnWTCMaRIVsJujsFiWXg==",
+ "dependencies": {
+ "@swc/helpers": "^0.4.14"
+ },
+ "peerDependencies": {
+ "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+ }
+ },
+ "node_modules/@restart/hooks": {
+ "version": "0.4.9",
+ "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.9.tgz",
+ "integrity": "sha512-3BekqcwB6Umeya+16XPooARn4qEPW6vNvwYnlofIYe6h9qG1/VeD7UvShCWx11eFz5ELYmwIEshz+MkPX3wjcQ==",
+ "dependencies": {
+ "dequal": "^2.0.2"
+ },
+ "peerDependencies": {
+ "react": ">=16.8.0"
+ }
+ },
+ "node_modules/@restart/ui": {
+ "version": "1.6.5",
+ "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.6.5.tgz",
+ "integrity": "sha512-kDjhH8lk+aVGc+dPb8wEBXRDx4B1WX6/pqyWi22R3Oim6KQokeLGO2g8MYzwd2/UdjsrDt+HyYFpKihLIN7+/A==",
+ "dependencies": {
+ "@babel/runtime": "^7.21.0",
+ "@popperjs/core": "^2.11.6",
+ "@react-aria/ssr": "^3.5.0",
+ "@restart/hooks": "^0.4.9",
+ "@types/warning": "^3.0.0",
+ "dequal": "^2.0.3",
+ "dom-helpers": "^5.2.0",
+ "uncontrollable": "^8.0.1",
+ "warning": "^4.0.3"
+ },
+ "peerDependencies": {
+ "react": ">=16.14.0",
+ "react-dom": ">=16.14.0"
+ }
+ },
+ "node_modules/@restart/ui/node_modules/uncontrollable": {
+ "version": "8.0.2",
+ "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-8.0.2.tgz",
+ "integrity": "sha512-/GDx+K1STGtpgTsj5Dj3J51YaKxZDblbCQHTH1zHLuoBEWodj6MjtRVv3TUijj1JYLRLSFsFzN8NV4M3QV4d9w==",
+ "peerDependencies": {
+ "react": ">=16.14.0"
+ }
+ },
"node_modules/@rushstack/eslint-patch": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz",
@@ -1479,14 +1540,12 @@
"version": "15.7.5",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
"integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
- "dev": true,
"license": "MIT"
},
"node_modules/@types/react": {
"version": "18.0.34",
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.34.tgz",
"integrity": "sha512-NO1UO8941541CJl1BeOXi8a9dNKFK09Gnru5ZJqkm4Q3/WoQJtHvmwt0VX0SB9YCEwe7TfSSxDuaNmx6H2BAIQ==",
- "dev": true,
"license": "MIT",
"dependencies": {
"@types/prop-types": "*",
@@ -1504,13 +1563,25 @@
"@types/react": "*"
}
},
+ "node_modules/@types/react-transition-group": {
+ "version": "4.4.6",
+ "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz",
+ "integrity": "sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==",
+ "dependencies": {
+ "@types/react": "*"
+ }
+ },
"node_modules/@types/scheduler": {
"version": "0.16.3",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
"integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==",
- "dev": true,
"license": "MIT"
},
+ "node_modules/@types/warning": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
+ "integrity": "sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA=="
+ },
"node_modules/@typescript-eslint/parser": {
"version": "5.58.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.58.0.tgz",
@@ -2011,6 +2082,24 @@
"integrity": "sha512-DRQrD6gJyy8FbiE4s+bDoXS9hiW3Vbx5uCdwvcCf3zLHL+Iv7LtGHLpr+GZV8rHG8tK766FGYBwRbu8pELTt+w==",
"dev": true
},
+ "node_modules/bootstrap": {
+ "version": "5.2.3",
+ "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
+ "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
+ "funding": [
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/twbs"
+ },
+ {
+ "type": "opencollective",
+ "url": "https://opencollective.com/bootstrap"
+ }
+ ],
+ "peerDependencies": {
+ "@popperjs/core": "^2.11.6"
+ }
+ },
"node_modules/brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -2158,6 +2247,11 @@
"node": "*"
}
},
+ "node_modules/classnames": {
+ "version": "2.3.2",
+ "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+ "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+ },
"node_modules/client-only": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -2262,7 +2356,6 @@
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==",
- "dev": true,
"license": "MIT"
},
"node_modules/damerau-levenshtein": {
@@ -2357,6 +2450,14 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/dequal": {
+ "version": "2.0.3",
+ "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+ "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+ "engines": {
+ "node": ">=6"
+ }
+ },
"node_modules/dir-glob": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -2383,6 +2484,15 @@
"node": ">=6.0.0"
}
},
+ "node_modules/dom-helpers": {
+ "version": "5.2.1",
+ "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+ "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+ "dependencies": {
+ "@babel/runtime": "^7.8.7",
+ "csstype": "^3.0.2"
+ }
+ },
"node_modules/earcut": {
"version": "2.2.4",
"resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz",
@@ -3570,6 +3680,14 @@
"node": ">= 0.4"
}
},
+ "node_modules/invariant": {
+ "version": "2.2.4",
+ "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+ "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+ "dependencies": {
+ "loose-envify": "^1.0.0"
+ }
+ },
"node_modules/is-arguments": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
@@ -4534,6 +4652,18 @@
"react-is": "^16.13.1"
}
},
+ "node_modules/prop-types-extra": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+ "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+ "dependencies": {
+ "react-is": "^16.3.2",
+ "warning": "^4.0.0"
+ },
+ "peerDependencies": {
+ "react": ">=0.14.0"
+ }
+ },
"node_modules/punycode": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
@@ -4582,6 +4712,35 @@
"node": ">=0.10.0"
}
},
+ "node_modules/react-bootstrap": {
+ "version": "2.7.4",
+ "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.7.4.tgz",
+ "integrity": "sha512-EPKPwhfbxsKsNBhJBitJwqul9fvmlYWSft6jWE2EpqhEyjhqIqNihvQo2onE5XtS+QHOavUSNmA+8Lnv5YeAyg==",
+ "dependencies": {
+ "@babel/runtime": "^7.21.0",
+ "@restart/hooks": "^0.4.9",
+ "@restart/ui": "^1.6.3",
+ "@types/react-transition-group": "^4.4.5",
+ "classnames": "^2.3.2",
+ "dom-helpers": "^5.2.1",
+ "invariant": "^2.2.4",
+ "prop-types": "^15.8.1",
+ "prop-types-extra": "^1.1.0",
+ "react-transition-group": "^4.4.5",
+ "uncontrollable": "^7.2.1",
+ "warning": "^4.0.3"
+ },
+ "peerDependencies": {
+ "@types/react": ">=16.14.8",
+ "react": ">=16.14.0",
+ "react-dom": ">=16.14.0"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ }
+ }
+ },
"node_modules/react-dom": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -4600,6 +4759,26 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
+ "node_modules/react-lifecycles-compat": {
+ "version": "3.0.4",
+ "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+ "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+ },
+ "node_modules/react-transition-group": {
+ "version": "4.4.5",
+ "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+ "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+ "dependencies": {
+ "@babel/runtime": "^7.5.5",
+ "dom-helpers": "^5.0.1",
+ "loose-envify": "^1.4.0",
+ "prop-types": "^15.6.2"
+ },
+ "peerDependencies": {
+ "react": ">=16.6.0",
+ "react-dom": ">=16.6.0"
+ }
+ },
"node_modules/regenerator-runtime": {
"version": "0.13.11",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
@@ -5399,6 +5578,20 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/uncontrollable": {
+ "version": "7.2.1",
+ "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+ "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+ "dependencies": {
+ "@babel/runtime": "^7.6.3",
+ "@types/react": ">=16.9.11",
+ "invariant": "^2.2.4",
+ "react-lifecycles-compat": "^3.0.4"
+ },
+ "peerDependencies": {
+ "react": ">=15.0.0"
+ }
+ },
"node_modules/update-browserslist-db": {
"version": "1.0.10",
"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz",
@@ -5639,6 +5832,14 @@
"node": ">=0.4.0"
}
},
+ "node_modules/warning": {
+ "version": "4.0.3",
+ "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+ "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+ "dependencies": {
+ "loose-envify": "^1.0.0"
+ }
+ },
"node_modules/web": {
"resolved": "apps/web",
"link": true
@@ -5800,8 +6001,10 @@
"@pixi/events": "7.2.4",
"@pixi/react": "^7.1.0",
"@twilight-assembly/core": "*",
+ "bootstrap": "^5.2.3",
"pixi-viewport": "^5.0.1",
- "pixi.js": "^7.2.4"
+ "pixi.js": "^7.2.4",
+ "react-bootstrap": "^2.7.4"
},
"devDependencies": {
"@types/react": "^18.0.22",
diff --git a/packages/ui/package.json b/packages/ui/package.json
index c2fa5f3..5a9dc7a 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -8,11 +8,13 @@
"lint": "eslint \"**/*.ts*\""
},
"dependencies": {
+ "@pixi/events": "7.2.4",
+ "@pixi/react": "^7.1.0",
"@twilight-assembly/core": "*",
+ "bootstrap": "^5.2.3",
"pixi-viewport": "^5.0.1",
"pixi.js": "^7.2.4",
- "@pixi/events": "7.2.4",
- "@pixi/react": "^7.1.0"
+ "react-bootstrap": "^2.7.4"
},
"devDependencies": {
"@types/react": "^18.0.22",
diff --git a/packages/ui/pixi/Circle.tsx b/packages/ui/pixi/Circle.tsx
new file mode 100644
index 0000000..395fff1
--- /dev/null
+++ b/packages/ui/pixi/Circle.tsx
@@ -0,0 +1,29 @@
+import { PixiComponent } from "@pixi/react";
+import { Graphics } from "pixi.js";
+import { propUpdated } from "./propsUpdates";
+
+export const Circle = PixiComponent("Circle", {
+ create: (props) => new Graphics(),
+ applyProps: (instance, oldProps, props) => {
+ const { x, y, r, fill, stroke, strokeWidth, alpha } = props;
+ if (
+ propUpdated(props, oldProps, [
+ "x",
+ "y",
+ "stroke",
+ "strokeWidth",
+ "r",
+ "fill",
+ ])
+ ) {
+ instance.clear();
+ instance.lineStyle({ width: strokeWidth, color: stroke });
+ instance.beginFill(fill);
+ instance.drawCircle(x || 0, y || 0, r);
+ instance.endFill();
+ }
+ if (propUpdated(props, oldProps, ["alpha"])) {
+ instance.alpha = alpha;
+ }
+ },
+});
diff --git a/packages/ui/pixi/propsUpdates.ts b/packages/ui/pixi/propsUpdates.ts
new file mode 100644
index 0000000..f2b416c
--- /dev/null
+++ b/packages/ui/pixi/propsUpdates.ts
@@ -0,0 +1,16 @@
+// https://codesandbox.io/s/6x5pr?file=/src/util.js:216-229
+export function propUpdated(
+ props: { [x: string]: any },
+ oldProps: { [x: string]: any },
+ keys: any[]
+) {
+ return keys.reduce((a, b) => {
+ if (a) {
+ return a;
+ } else if (props[b] !== oldProps[b]) {
+ return true;
+ } else {
+ return false;
+ }
+ }, false);
+}