legop3/MultiRoombaRover
1
0
Fork 0
mirror of https://github.com/legop3/MultiRoombaRover.git synced 2026-09-16 01:21:20 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

add discord invite button in UI

Browse Source
This commit is contained in:
legop3
2025-11-22 15:38:44 -05:00
parent d1d5ad91bd
commit 3be9e17ecc
11 changed files with 95 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/public/assets/index-5m4BdscJ.js
-11
View File
File diff suppressed because one or more lines are too long
server/public/assets/index-D0Nncfze.css
-1
View File
File diff suppressed because one or more lines are too long
server/public/assets/index-D4k56rvM.js
+11
View File
File diff suppressed because one or more lines are too long
server/public/assets/index-DUduiIaK.css
+1
View File
File diff suppressed because one or more lines are too long
server/public/index.html
+2 -2
View File
@@ -5,8 +5,8 @@
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>webui</title>
<script type="module" crossorigin src="/assets/index-5m4BdscJ.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-D0Nncfze.css">
<script type="module" crossorigin src="/assets/index-D4k56rvM.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-DUduiIaK.css">
</head>
<body>
<div id="root"></div>
webui/package-lock.json
Generated
+10
View File
@@ -10,6 +10,7 @@
"dependencies": {
"react": "^19.2.0",
"react-dom": "^19.2.0",
"react-icons": "^5.5.0",
"react-joystick-component": "^6.2.1",
"react-router-dom": "^7.9.6"
},
@@ -3391,6 +3392,15 @@
"react": "^19.2.0"
}
},
"node_modules/react-icons": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
"integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
"license": "MIT",
"peerDependencies": {
"react": "*"
}
},
"node_modules/react-joystick-component": {
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/react-joystick-component/-/react-joystick-component-6.2.1.tgz",
webui/package.json
+1
View File
@@ -12,6 +12,7 @@
"dependencies": {
"react": "^19.2.0",
"react-dom": "^19.2.0",
"react-icons": "^5.5.0",
"react-joystick-component": "^6.2.1",
"react-router-dom": "^7.9.6"
},
webui/src/components/DiscordInviteButton.jsx
+23
View File
@@ -0,0 +1,23 @@
import { useSession } from "../context/SessionContext";
import { FaDiscord } from "react-icons/fa";
export default function DiscordInviteButton({text = "Join our Discord!"}) {
const { session } = useSession();
const discordInvite = session?.discord?.invite || null;
if (!discordInvite) return null;
return (
<a
href={discordInvite}
target="_blank"
rel="noopener noreferrer"npm
className="inline-flex items-center px-3 py-2 text-white rainbow-animate-bg transition justify-center"
// animated rainbow backgound
// className="inline-flex items-center px-3 py-2 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white rounded hover:from-indigo-600 hover:via-purple-600 hover:to-pink-600 transition"
>
<FaDiscord className="mr-2" />
{text}
</a>
);
}
webui/src/components/DrivePanel.jsx
+2
View File
@@ -1,5 +1,6 @@
import { useTelemetryFrame } from '../context/TelemetryContext.jsx';
import { useControlSystem } from '../controls/index.js';
import DiscordInviteButton from './DiscordInviteButton.jsx';
export default function DrivePanel() {
const {
@@ -53,6 +54,7 @@ export default function DrivePanel() {
disabled={!roverId}
/>
</div>
{/* <DiscordInviteButton /> */}
</section>
);
}
webui/src/components/ModeGateOverlay.jsx
+4
View File
@@ -1,5 +1,6 @@
import AuthPanel from './AuthPanel.jsx';
import { useSession } from '../context/SessionContext.jsx';
import DiscordInviteButton from './DiscordInviteButton.jsx';
const PRIVILEGED_ROLES = new Set(['admin', 'lockdown', 'lockdown-admin']);
const RESTRICTED_MODES = new Set(['admin', 'lockdown']);
@@ -42,6 +43,9 @@ export default function ModeGateOverlay() {
<div className="surface-muted">
<AuthPanel />
</div>
<div className='w-full justify-center items-center'>
<DiscordInviteButton text='Join our Discord server for updates!'/>
</div>
{/* <p className="text-xs text-slate-500">
Your controls are paused until access is granted. You will automatically regain the interface once the mode
changes or after a successful login.
webui/src/index.css
+41
View File
@@ -65,4 +65,45 @@ body {
.button-danger {
@apply px-0.5 py-0.5 text-sm font-medium text-white transition-colors bg-rose-600 hover:bg-rose-500;
}
.rainbow-animate-bg {
background: linear-gradient(
270deg,
#ff0000,
#ff7f00,
#ffff00,
#00ff00,
#0000ff,
#4b0082,
#8b00ff
/* less colors: */
/* #ff0000,
#00ff00,
#0000ff */
/* blue, white, pink */
/* #00e5ff,
#ffffff,
#ff69b4 */
/* discord colors */
/* #5865f2,
#ffffff,
#ff4754 */
);
background-size: 1400% 1400%;
animation: rainbowBG 300s ease infinite;
}
@keyframes rainbowBG {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
}