Having some fun on webpackbin

emoji_slots.js

// From https://www.webpackbin.com/bins/-Ku7fYF911w0Y-YUxqVa

import React from 'react'
import { compose, lifecycle, withHandlers, withState, withProps } from 'recompose'
import styled, { css } from 'styled-components'
import { range, sample } from 'lodash'

const Screen = styled.main`
  height: 200vh;
`

const Content = styled.div`
  margin-top: 75px;
`

const Header = styled.header`
  height: 65px;
  width: 100%;
  position: fixed;
  background-color: #000000;
  z-index: 50000;
  top: 0;
  left: 0;
`

const Grid = styled.div`
  display: flex;
  flex-wrap: wrap;
  width: 100vw;
  align-items: center;
  justify-content: center;
`

const GridItem = styled.div`
  flex-basis: 25%;
  font-size: 56px;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  margin: 10px;
  height: 150px;
  background: #f1f1f1;
  box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
  transition: box-shadow 0.8s;
  &:hover {
    box-shadow: 8px 8px 20px 0px rgba(0,0,0,0.75);
    cursor: pointer;
  }
`

const InnerHeader = styled.div`
  width: 100%;
  height: 60px;
  display: flex;
  color: white;
  font-size: 32px;
  margin-left: 15px;
  align-items: center;
  justify-content: center;
`

const ProgressBar = styled.div`
  width: 100%;
  background: #000000;
  height: 5px;
`

const ProgressIndicator = styled.div`
  width: ${props => props.progressWidth || 0}px;
  background: -webkit-gradient(linear, right top, left top, from(#05f), color-stop(50%, #7201b2), to(#f83371));
  background: linear-gradient(to left, #05f, #7201b2 50%, #f83371);
  height: 100%;
  max-width: 100%;
`

const arrowCss = ({ direction }) => {
  return css`
    border-${direction}: 30px solid green;
    ${direction}: 0;
  `;
}


const Arrow = styled.div`
  position: fixed;
  top: calc(100vh / 2);
  width: 0px;
  height: 0px;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  ${props => arrowCss(props)}
`;

function App ({ progressWidth, emoji }) {
  return (
    <Screen>
      <Header>
        <InnerHeader>
          😀 Emoji Slots 🎰
        </InnerHeader>
        <ProgressBar>
          <ProgressIndicator progressWidth={progressWidth} />
        </ProgressBar>
      </Header>
      <Content>
        <Arrow direction="lefte" />
        <Arrow direction="right" />
        <Grid>
          {range(0, 300).map(a => <GridItem key={a}>{sample(emoji)}</GridItem>)}
        </Grid>
      </Content>
    </Screen>
  )
}

export default compose(
  withState('scrollPosition', 'setScrollPosition', 0),
  withHandlers({
    handleScroll: props => event => {
      props.setScrollPosition(document.body.scrollTop)
    }
  }),
  lifecycle({
    componentDidMount() {
      window.addEventListener('scroll', this.props.handleScroll)
    },
    componentWillUnmount() {
      window.removeEventListener('scroll', this.props.handleScroll)
    }
  }),
  withProps(({ scrollPosition }) => {
    const height = document.body.scrollHeight - 860
    const width = document.body.clientWidth
    const progressWidth = width / (height / scrollPosition)
    return {
      progressWidth
    }
  }),
  withProps(() => ({
    emoji: ['🚽', '🖕', '🤡', '💩', '👅', '🦋', '⛄️', '🤖', '👹']
  }))
)(App)