Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add a little gift from the FSH mascot #194

Merged
merged 1 commit into from
Jan 14, 2025
Merged

add a little gift from the FSH mascot #194

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,6 +179,7 @@ export default function App(props) {
const [sharedConfig, setSharedConfig] = useState({});
const [isLineWrapped, setIsLineWrapped] = useState(false);
const [isDebugConsoleChecked, setIsDebugConsoleChecked] = useState(false);
const [timeToSayAhoy, setTimeToSayAhoy] = useState(false);

useEffect(() => {
async function waitForFSH() {
Expand Down Expand Up @@ -252,6 +253,10 @@ export default function App(props) {

function handleConfigChange(config) {
setConfigToShare(config);
if (!timeToSayAhoy && config.canonical === 'ahoy to fsh') {
console.log('🐟 ahoy to you too! thanks for using FSH ONLINE!');
setTimeToSayAhoy(true);
}
}

function handleResetWidth() {
Expand Down Expand Up @@ -367,7 +372,7 @@ export default function App(props) {
<ThemeProvider theme={theme}>
<div className="root" style={{ height: '100vh' }}>
<div className={classes.top}>
<TopBar />
<TopBar sayAhoy={timeToSayAhoy} />
<FSHControls
onSUSHIClick={handleSUSHIControls}
onGoFSHClick={handleGoFSHControls}
Expand Down
17 changes: 15 additions & 2 deletions src/components/TopBar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from 'react';
import clsx from 'clsx';
import { makeStyles } from '@material-ui/core/styles';
import { AppBar, Toolbar, Button, Typography, Box } from '@material-ui/core';
import { StylesProvider } from '@material-ui/core/styles';
Expand All @@ -19,6 +20,18 @@ const useStyles = makeStyles((theme) => ({
height: '55px',
width: '63px'
},
'@keyframes spin-once': {
'0%': {
rotate: '0deg'
},
'100%': {
rotate: '360deg'
}
},
logoSpin: {
animation: '$spin-once 1000ms',
animationIterationCount: 1
},
toolbarBox: {
alignItems: 'center'
},
Expand All @@ -43,15 +56,15 @@ const useStyles = makeStyles((theme) => ({
}
}));

export default function TopBar() {
export default function TopBar(props) {
const classes = useStyles();
return (
<AppBar className={classes.root}>
<Toolbar>
<Box className={classes.toolbarBox} display="flex" flexGrow={1} flexDirection="row">
<Box order={1} display="flex" flexGrow={1} flexDirection="row">
<Box order={1} alignSelf="center" display="flex">
<img src={logo} alt="logo" className={classes.logo} />
<img src={logo} alt="logo" className={clsx(classes.logo, { [classes.logoSpin]: props.sayAhoy })} />
</Box>
<Box order={2} alignSelf="center" m={1}>
<StylesProvider injectFirst>
Expand Down
Loading