Add AF

README.md

@@ -22,10 +22,10 @@ This is the home of the amiv website.
 
    Requirements:
 
-   * *(Windows only)* [Windows Subsystem for Linux (WSL)](https://docs.microsoft.com/en-us/windows/wsl/)
-   * [Docker Engine](https://docs.docker.com/engine/install/)
-   * [Visual Studio Code](https://code.visualstudio.com/)(VSCode)
-   * [Remote Development Extension Pack for VSCode](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack)
+   - _(Windows only)_ [Windows Subsystem for Linux (WSL)](https://docs.microsoft.com/en-us/windows/wsl/)
+   - [Docker Engine](https://docs.docker.com/engine/install/)
+   - [Visual Studio Code](https://code.visualstudio.com/)(VSCode)
+   - [Remote Development Extension Pack for VSCode](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack)
 
    Open the project directory with the prepared devcontainer by clicking the green button in the left button corner of the VSCode window and select `Remote-Containers: Open Folder in Container...`.
 

gatsby-browser.js

@@ -9,6 +9,9 @@ import ReactDOM from 'react-dom'
 import PropTypes from 'prop-types'
 
 import { ThemeProvider } from './src/context/themeContext'
+import { KitenProvider } from './src/context/kitenContext'
+import { HarlemProvider } from './src/context/harlemContext'
+import HarlemBlocker from './src/components/harlem/harlemBlocker'
 
 /**
  * Control whether to update scroll position on path change.
@@ -38,7 +41,14 @@ const shouldUpdateScroll = ({ prevRouterProps, routerProps }) => {
 }
 
 const wrapRootElement = ({ element }) => (
-  <ThemeProvider>{element}</ThemeProvider>
+  <ThemeProvider>
+    <HarlemProvider>
+      <KitenProvider>
+        <HarlemBlocker />
+        {element}
+      </KitenProvider>
+    </HarlemProvider>
+  </ThemeProvider>
 )
 
 wrapRootElement.propTypes = {

gatsby-ssr.js

@@ -8,9 +8,19 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import { ThemeProvider } from './src/context/themeContext'
+import { KitenProvider } from './src/context/kitenContext'
+import { HarlemProvider } from './src/context/harlemContext'
+import HarlemBlocker from './src/components/harlem/harlemBlocker'
 
 const wrapRootElement = ({ element }) => (
-  <ThemeProvider>{element}</ThemeProvider>
+  <ThemeProvider>
+    <HarlemProvider>
+      <KitenProvider>
+        <HarlemBlocker />
+        {element}
+      </KitenProvider>
+    </HarlemProvider>
+  </ThemeProvider>
 )
 
 wrapRootElement.propTypes = {

nginx.conf

@@ -37,7 +37,7 @@ server {
     expires    off;
   }
 
-  location ~* \.(ico|jpg|jpeg|png|gif|svg|js|jsx|css|less|swf|eot|ttf|otf|woff|woff2)$ {
+  location ~* \.(ico|jpg|jpeg|png|gif|svg|js|jsx|css|less|swf|eot|ttf|otf|woff|woff2|mp3)$ {
     add_header Cache-Control "public";
     expires +1y;
   }

src/components/events/eventPoster.js

@@ -8,6 +8,7 @@ import { Spinner } from 'amiv-react-components'
 import { apiUrl } from 'config'
 import Img from '../general/image'
 import Link from '../general/link'
+import HarlemObject from '../harlem/harlemObject'
 
 const useStyles = makeStyles(
   {
@@ -49,9 +50,15 @@ const EventPoster = ({ event, elevation, className, ...props }) => {
   )
 
   return (
-    <Box boxShadow={2} className={[classes.root].join(' ')} {...props}>
-      {event ? <Link to={`/events/${event._id}`}>{imageTag}</Link> : imageTag}
-    </Box>
+    <HarlemObject>
+      <Box
+        boxShadow={2}
+        className={[classes.root, className].join(' ')}
+        {...props}
+      >
+        {event ? <Link to={`/events/${event._id}`}>{imageTag}</Link> : imageTag}
+      </Box>
+    </HarlemObject>
   )
 }
 

src/components/footer.js

@@ -8,10 +8,11 @@ import TwitterIcon from '@material-ui/icons/Twitter'
 import { FormattedMessage } from 'gatsby-plugin-intl'
 import { ExternalLink } from 'amiv-react-components'
 
-import VsethLogoSVG from '~images/logos/vseth_fachverein.png'
+import VsethLogoSVG from '~images/logos/vseth_fachverein.svg'
 import EthLogoSVG from '~images/logos/eth.svg'
 
 import Link from './general/link'
+import HarlemObject from './harlem/harlemObject'
 
 const useVsethLogoStyles = makeStyles(
   {
@@ -150,13 +151,15 @@ const Footer = ({ className }) => {
   return (
     <footer className={[className, classes.root].join(' ')}>
       <div className={classes.report}>
-        <Typography className={classes.contentContainer}>
-          <FormattedMessage id="footer.issueSpotted" />
-          &nbsp;
-          <ExternalLink href="https://gitlab.ethz.ch/amiv/amiv-website/issues/new?issuable_template=bug">
-            <FormattedMessage id="footer.issueReport" />
-          </ExternalLink>
-        </Typography>
+        <HarlemObject>
+          <Typography className={classes.contentContainer}>
+            <FormattedMessage id="footer.issueSpotted" />
+            &nbsp;
+            <ExternalLink href="https://gitlab.ethz.ch/amiv/amiv-website/issues/new?issuable_template=bug">
+              <FormattedMessage id="footer.issueReport" />
+            </ExternalLink>
+          </Typography>
+        </HarlemObject>
       </div>
       <div className={classes.footer}>
         <div
@@ -164,46 +167,58 @@ const Footer = ({ className }) => {
             ' '
           )}
         >
-          <Typography className={classes.copyright}>
-            © 1893 - {new Date().getFullYear()} AMIV an der ETH&nbsp;
-            <Link
-              className={classes.copyrightLink}
-              color="secondary"
-              to="/legal-notice"
-            >
-              <FormattedMessage id="contact" />
-              &nbsp;/&nbsp;
-              <FormattedMessage id="legal-notice.title" />
-            </Link>
-          </Typography>
+          <HarlemObject>
+            <Typography className={classes.copyright}>
+              © 1893 - {new Date().getFullYear()} AMIV an der ETH&nbsp;
+              <Link
+                className={classes.copyrightLink}
+                color="secondary"
+                to="/legal-notice"
+              >
+                <FormattedMessage id="contact" />
+                &nbsp;/&nbsp;
+                <FormattedMessage id="legal-notice.title" />
+              </Link>
+            </Typography>
+          </HarlemObject>
           <div className={classes.socialLogoContainer}>
-            <ExternalLink
-              className={classes.socialLogoLink}
-              noIcon
-              href="https://www.facebook.com/AMIV.ETHZ/"
-            >
-              <FacebookIcon className={classes.socialLogo} />
-            </ExternalLink>
-            <ExternalLink
-              className={classes.socialLogoLink}
-              noIcon
-              href="https://www.instagram.com/amiv_eth/"
-            >
-              <InstagramIcon className={classes.socialLogo} />
-            </ExternalLink>
-            <ExternalLink
-              className={classes.socialLogoLink}
-              noIcon
-              href="https://twitter.com/amiv_ethz"
-            >
-              <TwitterIcon className={classes.socialLogo} />
-            </ExternalLink>
+            <HarlemObject>
+              <ExternalLink
+                className={classes.socialLogoLink}
+                noIcon
+                href="https://www.facebook.com/AMIV.ETHZ/"
+              >
+                <FacebookIcon className={classes.socialLogo} />
+              </ExternalLink>
+            </HarlemObject>
+            <HarlemObject>
+              <ExternalLink
+                className={classes.socialLogoLink}
+                noIcon
+                href="https://www.instagram.com/amiv_eth/"
+              >
+                <InstagramIcon className={classes.socialLogo} />
+              </ExternalLink>
+            </HarlemObject>
+            <HarlemObject>
+              <ExternalLink
+                className={classes.socialLogoLink}
+                noIcon
+                href="https://twitter.com/amiv_ethz"
+              >
+                <TwitterIcon className={classes.socialLogo} />
+              </ExternalLink>
+            </HarlemObject>
           </div>
           <div className={classes.institutionLogoContainer}>
-            <ExternalLink noIcon href="https://www.ethz.ch/">
-              <img height={64} src={EthLogoSVG} alt="ETH Zürich" />
-            </ExternalLink>
-            <VsethLogo className={classes.vsethLogo} />
+            <HarlemObject>
+              <ExternalLink noIcon href="https://www.ethz.ch/">
+                <img height={64} src={EthLogoSVG} alt="ETH Zürich" />
+              </ExternalLink>
+            </HarlemObject>
+            <HarlemObject>
+              <VsethLogo className={classes.vsethLogo} />
+            </HarlemObject>
           </div>
         </div>
       </div>

src/components/general/stickyOnScroll.js

@@ -26,7 +26,7 @@ const StickyOnScroll = ({
   const scrollTrigger = useScrollTrigger()
   const classes = useStyles()
 
-  if (isBrowser) {
+  if (isBrowser()) {
     useEffect(() => {
       if (!containerElement.current) return () => {}
 

src/components/harlem/harlemBlocker.css

+.mw-blocker {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 100000;
+  background-color: transparent;
+  display: block;
+}

src/components/harlem/harlemBlocker.js

+import React from 'react'
+import {
+  HARLEM_STATE_STARTED_STAGE1,
+  HARLEM_STATE_STARTED_STAGE2,
+  HARLEM_STATE_STARTED_STAGE3,
+  useHarlem,
+} from '../../context/harlemContext'
+import './harlemBlocker.css'
+
+const HarlemBlocker = () => {
+  const harlem = useHarlem()
+
+  if (
+    harlem.state === HARLEM_STATE_STARTED_STAGE1 ||
+    harlem.state === HARLEM_STATE_STARTED_STAGE2 ||
+    harlem.state === HARLEM_STATE_STARTED_STAGE3
+  ) {
+    return <div className="mw-blocker" />
+  }
+  return null
+}
+
+export default HarlemBlocker

src/components/harlem/harlemButton.js

+import React, { useEffect, useState } from 'react'
+import { Zoom, Fab, Tooltip } from '@material-ui/core'
+import StopIcon from '@material-ui/icons/Stop'
+import PlayArrowIcon from '@material-ui/icons/PlayArrow'
+import { makeStyles, useTheme } from '@material-ui/styles'
+import { useIntl } from 'gatsby-plugin-intl'
+import {
+  HARLEM_STATE_IDLE,
+  HARLEM_STATE_STARTED_STAGE1,
+  HARLEM_STATE_STARTED_STAGE2,
+  HARLEM_STATE_STARTED_STAGE3,
+  useHarlem,
+} from '../../context/harlemContext'
+import { KITEN_STATE_ACTIVE, useKiten } from '../../context/kitenContext'
+
+const useStyles = makeStyles(theme => ({
+  fab: {
+    position: 'fixed',
+    bottom: theme.spacing(16),
+    right: '50%',
+    transform: 'translateX(50%) !important',
+    zIndex: 100001,
+  },
+}))
+
+const HarlemButton = () => {
+  const harlem = useHarlem()
+  const kiten = useKiten()
+  const classes = useStyles()
+  const theme = useTheme()
+  const intl = useIntl()
+  const [showStart, setShowStart] = useState(false)
+  const [startTimeout, setStartTimeout] = useState(null)
+  const [showStop, setShowStop] = useState(false)
+  const [stopTimeout, setStopTimeout] = useState(null)
+
+  useEffect(() => {
+    if (startTimeout) {
+      clearTimeout(startTimeout)
+    }
+
+    if (stopTimeout) {
+      clearTimeout(stopTimeout)
+    }
+
+    if (harlem.enabled && harlem.state === HARLEM_STATE_IDLE) {
+      setStartTimeout(setTimeout(() => setShowStart(true), 500))
+    } else {
+      setShowStart(false)
+    }
+
+    if (
+      harlem.enabled &&
+      (harlem.state === HARLEM_STATE_STARTED_STAGE1 ||
+        harlem.state === HARLEM_STATE_STARTED_STAGE2 ||
+        harlem.state === HARLEM_STATE_STARTED_STAGE3)
+    ) {
+      setStopTimeout(setTimeout(() => setShowStop(true), 500))
+    } else {
+      setShowStop(false)
+    }
+  }, [harlem.enabled, harlem.state])
+
+  const transitionDuration = {
+    enter: theme.transitions.duration.enteringScreen,
+    exit: theme.transitions.duration.leavingScreen,
+  }
+
+  const tooltipEnterDelay = 500
+
+  return (
+    <React.Fragment>
+      <Zoom
+        in={showStop}
+        timeout={transitionDuration}
+        style={{
+          transitionDelay: `${showStop ? transitionDuration.exit : 0}ms`,
+        }}
+        unmountOnExit
+      >
+        <Tooltip
+          title={intl.formatMessage({ id: 'harlem.button.stop' })}
+          enterDelay={tooltipEnterDelay}
+          placement="top"
+        >
+          <Fab
+            aria-label={intl.formatMessage({ id: 'harlem.button.stop' })}
+            className={classes.fab}
+            color="secondary"
+            onClick={() => harlem.stopEffect()}
+          >
+            <StopIcon />
+          </Fab>
+        </Tooltip>
+      </Zoom>
+      <Zoom
+        in={showStart && kiten.state !== KITEN_STATE_ACTIVE}
+        timeout={transitionDuration}
+        style={{
+          transitionDelay: `${showStart ? transitionDuration.exit : 0}ms`,
+        }}
+        unmountOnExit
+      >
+        <Tooltip
+          title={intl.formatMessage({ id: 'harlem.button.start' })}
+          enterDelay={tooltipEnterDelay}
+          placement="top"
+        >
+          <Fab
+            aria-label={intl.formatMessage({ id: 'harlem.button.start' })}
+            className={classes.fab}
+            color="secondary"
+            onClick={() => harlem.startEffect(true)}
+          >
+            <PlayArrowIcon />
+          </Fab>
+        </Tooltip>
+      </Zoom>
+    </React.Fragment>
+  )
+}
+
+export default HarlemButton

src/components/harlem/harlemEndDialog.css

+
+.harlem_paper {
+  max-width: unset !important;
+}

src/components/harlem/harlemEndDialog.js

+import React from 'react'
+import { Button, Dialog, DialogActions } from '@material-ui/core'
+import { HARLEM_STATE_ENDED, useHarlem } from '../../context/harlemContext'
+import { FormattedMessage } from 'gatsby-plugin-intl'
+import image from '~images/af_final.png'
+import './harlemEndDialog.css'
+
+const HarlemEndDialog = () => {
+  const harlem = useHarlem()
+
+  const showDialog = harlem.state === HARLEM_STATE_ENDED
+
+  return (
+    <Dialog
+      scroll="body"
+      open={showDialog}
+      onClose={() => harlem.continueEffect()}
+      classes={{ paper: 'harlem_paper' }}
+    >
+      <img
+        width="711"
+        height="400"
+        style={{
+          width: 'auto',
+          height: 'auto',
+          maxHeight: 'calc(100% - 53px)',
+          maxWidth: '100%',
+          objectFit: 'contain',
+        }}
+        src={image}
+      />
+      <DialogActions>
+        <Button onClick={() => harlem.continueEffect()} color="primary">
+          <FormattedMessage id="harlem.end.button" />
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}
+
+export default HarlemEndDialog

src/components/harlem/harlemObject.css

+/* .im_drunk, .im_baked, .im_trippin, .im_blown */
+
+.mw-strobe_light {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 100000;
+  background-color: rgba(250, 250, 250, 0.8);
+  display: block;
+}
+
+.mw-harlem_shake_me {
+  transition: all 0.8s ease-in-out;
+  -moz-transition: all 0.8s ease-in-out;
+  -webkit-transition: all 0.8s ease-in-out;
+  -o-transition: all 0.8s ease-in-out;
+  -ms-transition: all 0.8s ease-in-out;
+
+  animation: spin 1s infinite linear;
+  -moz-animation: spin 1s infinite linear;
+  -webkit-animation: spin 1s infinite linear;
+  -o-animation: spin 1s infinite linear;
+  -ms-animation: spin 1s infinite linear;
+}
+
+.mw-harlem_shake_slow {
+  transition: all 3.2s ease-in-out;
+  -moz-transition: all 3.2s ease-in-out;
+  -webkit-transition: all 3.2s ease-in-out;
+  -o-transition: all 3.2s ease-in-out;
+  -ms-transition: all 3.2s ease-in-out;
+
+  animation: spin 4s infinite linear;
+  -moz-animation: spin 4s infinite linear;
+  -webkit-animation: spin 4s infinite linear;
+  -o-animation: spin 4s infinite linear;
+  -ms-animation: spin 4s infinite linear;
+}
+
+/*
+  Animate.css - http://daneden.me/animate
+  Licensed under the ☺ license (http://licence.visualidiot.com/)
+  But we have it modified for our use.
+  */
+body {
+  -webkit-backface-visibility: hidden;
+}
+
+.mw-harlem_shake_me {
+  -webkit-animation-duration: 0.4s;
+  -moz-animation-duration: 0.4s;
+  -o-animation-duration: 0.4s;
+  animation-duration: 0.4s;
+  -webkit-animation-fill-mode: both;
+  -moz-animation-fill-mode: both;
+  -o-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+.mw-harlem_shake_slow {
+  -webkit-animation-duration: 1.6s;
+  -moz-animation-duration: 1.6s;
+  -o-animation-duration: 1.6s;
+  animation-duration: 1.6s;
+  -webkit-animation-fill-mode: both;
+  -moz-animation-fill-mode: both;
+  -o-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+.flash,
+.mw-strobe_light {
+  -webkit-animation-name: flash;
+  -moz-animation-name: flash;
+  -o-animation-name: flash;
+  animation-name: flash;
+}
+
+@-webkit-keyframes shake {
+  0%,
+  100% {
+    -webkit-transform: translateX(0);
+  }
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
+    -webkit-transform: translateX(-10px);
+  }
+  20%,
+  40%,
+  60%,
+  80% {
+    -webkit-transform: translateX(10px);
+  }
+}
+
+@-moz-keyframes shake {
+  0%,
+  100% {
+    -moz-transform: translateX(0);
+  }
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
+    -moz-transform: translateX(-10px);
+  }
+  20%,
+  40%,
+  60%,
+  80% {
+    -moz-transform: translateX(10px);
+  }
+}
+
+@-o-keyframes shake {
+  0%,
+  100% {
+    -o-transform: translateX(0);
+  }
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
+    -o-transform: translateX(-10px);
+  }
+  20%,
+  40%,
+  60%,
+  80% {
+    -o-transform: translateX(10px);
+  }
+}
+
+@keyframes shake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {