add winter background (#351)

* feat: show holiday header during December
* add winter background
* feat: snow on the home screen
* specify a low number of pieces to keep CPU from getting fried

Co-authored-by: Jeremy Kahn <[email protected]>

package.json

@@ -106,12 +106,14 @@
     "notistack": "^1.0.5",
     "prop-types": "^15.6.2",
     "react": "^17.0.2",
+    "react-confetti": "^6.1.0",
     "react-dom": "^17.0.2",
     "react-file-reader-input": "^2.0.0",
     "react-hotkeys": "^2.0.0",
     "react-markdown": "^4.3.1",
     "react-number-format": "^4.4.1",
     "react-router-dom": "^5.2.0",
+    "react-use": "^17.4.0",
     "react-zoom-pan-pinch": "^1.6.1",
     "redis": "^3.0.2",
     "shifty": "^2.15.2",

src/components/Home/Home.js

@@ -18,9 +18,10 @@ import { achievementsMap } from '../../data/achievements'
 import FarmhandContext from '../Farmhand/Farmhand.context'
 import { STANDARD_LOAN_AMOUNT } from '../../constants'
 import { stageFocusType } from '../../enums'
-import { memoize } from '../../utils'
+import { isDecember, memoize } from '../../utils'
 import Achievement from '../Achievement'
 
+import { SnowBackground } from './SnowBackground'
 import './Home.sass'
 
 const onboardingAchievements = [
@@ -61,7 +62,19 @@ const Home = ({
   ),
 }) => (
   <div className="Home">
-    <h1>Welcome!</h1>
+    {isDecember() ? (
+      <>
+        <SnowBackground />
+        <h1 className="holiday-greeting">
+          Happy holidays!{' '}
+          <span role="img" aria-label="Snowman">
+            ⛄️
+          </span>
+        </h1>
+      </>
+    ) : (
+      <h1>Welcome!</h1>
+    )}
     <Accordion>
       <AccordionSummary expandIcon={<ExpandMoreIcon />}>
         <h2>Click to read a note from the developer</h2>

src/components/Home/Home.sass

@@ -7,6 +7,10 @@
     margin-bottom: 1em
     text-align: center
 
+    &.holiday-greeting
+      line-height: 1.25em
+      color: #fffafa
+
   p
     font-size: 1.2em
     line-height: 1.3em

src/components/Home/SnowBackground.js

@@ -0,0 +1,44 @@
+import React from 'react'
+import useWindowSize from 'react-use/lib/useWindowSize'
+import Confetti from 'react-confetti'
+
+const randomInt = (min: number, max: number) => {
+  return Math.floor(min + Math.random() * (max - min + 1))
+}
+
+// Taken from:
+// https://github.com/alampros/react-confetti/blob/484bad0a0aaddbcfcc2fb4c1a4a7eeceaa6d4879/stories/snow.story.jsx#L7-L24
+const drawSnowflake = function(ctx) {
+  const numPoints = this.numPoints || randomInt(3, 4) * 2
+  this.numPoints = numPoints
+  const innerRadius = this.radius * 0.2
+  const outerRadius = this.radius * 0.8
+  ctx.beginPath()
+  ctx.moveTo(0, 0 - outerRadius)
+
+  for (let n = 1; n < numPoints * 2; n++) {
+    const radius = n % 2 === 0 ? outerRadius : innerRadius
+    const x = radius * Math.sin((n * Math.PI) / numPoints)
+    const y = -1 * radius * Math.cos((n * Math.PI) / numPoints)
+    ctx.lineTo(x, y)
+  }
+  ctx.fill()
+  ctx.stroke()
+  ctx.closePath()
+}
+
+export const SnowBackground = () => {
+  const { width, height } = useWindowSize()
+  return (
+    <Confetti
+      style={{ position: 'fixed' }}
+      width={width}
+      height={height}
+      drawShape={drawSnowflake}
+      colors={['#FFFFFF', '#CBDDF8']}
+      gravity={0.03}
+      numberOfPieces={10}
+      wind={0.01}
+    />
+  )
+}

src/components/Stage/Stage.js

@@ -9,7 +9,7 @@ import CowPen from '../CowPen'
 import Shop from '../Shop'
 import Workshop from '../Workshop'
 import { stageFocusType } from '../../enums'
-import { isOctober } from '../../utils'
+import { isOctober, isDecember } from '../../utils'
 
 import './Stage.sass'
 
@@ -34,6 +34,7 @@ export const Stage = ({ field, stageFocus, viewTitle }) => {
       {...{
         className: classNames('Stage', {
           'is-october': isOctober(),
+          'is-december': isDecember(),
         }),
         'data-stage-focus': stageFocus,
         role: 'main',

src/components/Stage/Stage.sass

@@ -45,6 +45,9 @@
     &.is-october
       background-image: url('../../img/ui/jack-o-lantern-bg.png')
 
+    &.is-december
+      background-image: url('../../img/ui/winter-bg.png')
+
   &[data-stage-focus=SHOP]
     background-image: url('../../img/ui/yellow-dot-bg.png')
 

src/utils.js

@@ -1291,5 +1291,10 @@ export const isCowInBreedingPen = (cow, cowBreedingPen) =>
  */
 export const isOctober = () => new Date().getMonth() === 9
 
+/**
+ * @returns {boolean}
+ */
+export const isDecember = () => new Date().getMonth() === 11
+
 export { default as isRandomNumberLessThan } from './utils/isRandomNumberLessThan'
 export { default as totalIngredientsInRecipe } from './utils/totalIngredientsInRecipe'