mirror of
https://github.com/legop3/MultiRoombaRover.git
synced 2026-09-15 17:12:59 -04:00
add discord invite button in UI
This commit is contained in:
legop3
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -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>
|
||||
|
||||
Generated
+10
@@ -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",
|
||||
|
||||
@@ -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"
|
||||
},
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user