wip: getting digital ocean app platform deploy maybe

.gitignore

@@ -33,6 +33,7 @@ build/
 .env.development.local
 .env.test.local
 .env.production.local
+.secrets.md
 
 npm-debug.log*
 yarn-debug.log*

Dockerfile

@@ -1,8 +1,8 @@
 # Use Python image
-FROM python:3.6.1-alpine
+FROM python:3.8-slim-buster
 
-# Add Alpine Lib-C and Git binaries
-RUN apk update && apk upgrade && apk add gcc musl-dev libc-dev build-base git openssl-dev
+# # Add Alpine Lib-C and Git binaries
+# RUN apk update && apk upgrade && apk add gcc musl-dev libc-dev build-base git openssl-dev
 
 # Add labels
 LABEL MAINTAINER_NAME="Matthew Cale"  

utilities_for_me/web_app/client/react/App.jsx

@@ -17,6 +17,7 @@ import Timer from './Timer'
 import CountdownClock from './CountdownClock'
 import Footer from './Footer'
 import Count from './Count'
+import Breakout from './Breakout'
 
 function App () {
   const cookieTheme = getCookie('theme')
@@ -55,6 +56,8 @@ function App () {
           <Route path='/timer' component={Timer} />
           <Route path='/countdown-clock' component={CountdownClock} />
           <Route path='/count' component={Count} />
+          <Route path='/breakout' component={Breakout} />
+
           <Route component={Error} />
         </Switch>
       </div>

utilities_for_me/web_app/client/react/Breakout.jsx

@@ -0,0 +1,61 @@
+import React, { useState , useRef, useEffect} from 'react'
+import Button from './common/Button'
+import Textarea from './common/Textarea'
+import COLORS from './lib/colors'
+
+const BreakoutHeader = () => {
+  return (
+    <section className='p-2'>
+      <h1 className='text-5xl font-light mb-3'>Breakout</h1>
+      <p>The <i>Breakout</i> utility is not a utility as much as it is not a utility and a game instead. Use this game when you want to have some fun instead of doing work.</p>
+    </section>
+  )
+}
+
+const Canvas = (props) => {
+  // Lovingly lifted from: https://medium.com/@pdx.lucasm/canvas-with-react-js-32e133c05258
+
+  const canvasRef = useRef(null)
+
+  const draw = (ctx) => {
+    ctx.fillStyle = '#000000'
+    ctx.beginPath()
+    ctx.arc(50, 100, 20, 0, 2*Math.PI)
+    ctx.fill()
+  }
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    const context = canvas.getContext('2d')
+    draw(context)
+  }, [])
+
+  return <canvas ref={canvasRef} {...props}/>
+
+}
+
+const BreakoutBody = ({ _ }) => {
+  return (
+    <section>
+      <div className='p-2'>
+        <h3 className='text-lg font-semibold'>Breakout Game Here</h3>
+        <Canvas />
+      </div>
+    </section>
+  )
+}
+
+function Breakout () {
+  const [contents, setContents] = useState('')
+  const [result, setResult] = useState('')
+
+  return (
+    <div className='mt-6 text-skin-primary'>
+      <BreakoutHeader />
+      <hr />
+      <BreakoutBody />
+    </div>
+  )
+}
+
+export default Breakout

utilities_for_me/web_app/client/react/Home.jsx

@@ -108,6 +108,12 @@ const UtilityPanes = ({ theme }) => {
         title='Count'
         description="Need to keep track of something? Your score? Reps? Number of cups of coffee you've had? 🔢"
       />
+      <UtilityPane
+        theme={theme}
+        link='/breakout'
+        title='Breakout'
+        description="Wanna target a ball to see if you can hit rectangles that look a lot like bricks? 🧱"
+      />
     </div>
   )
 }