Add remaining shapes count

src/App.css

@@ -136,6 +136,10 @@ form button {
   border-color: transparent #6c757d transparent transparent;
 }
 
+.vom-draw-reminder {
+  font-size: 0.9rem;
+}
+
 #magic-canvas,
 #vom-admin-canvas {
   width: 100%;

src/App.tsx

@@ -95,7 +95,7 @@ type AnswersData = {
   email: string,
 };
 
-const PAGES = [0, 1, 2, 3];
+const PAGES = [0, 1, 2, 3, 4];
 const App = () => {
   const [ currentPage, setCurrentPage ] = useState(0);
   const [ exit, setExit ] = useState(false);

src/DrawCanvas.tsx

@@ -576,6 +576,10 @@ class Canvas extends React.Component<CanvasProps, CanvasState> {
     return this.state.data.length === 8;
   }
 
+  getDrawsLeft = () => {
+    return 8 - this.state.data.length;
+  }
+
   componentDidMount = () => {
     const canvas = new PaperScope();
     canvas.setup('magic-canvas');
@@ -595,7 +599,7 @@ class Canvas extends React.Component<CanvasProps, CanvasState> {
     return (
       <>
       <div id="vom-canvas-tools">
-        <ButtonGroup className="mb-3" size="sm">
+        <ButtonGroup className="" size="sm">
           <Button onClick={() => this.props.showHelp()} color="info">
             HELP
           </Button>
@@ -614,10 +618,9 @@ class Canvas extends React.Component<CanvasProps, CanvasState> {
             ) : null
           }
         </ButtonGroup>
-
         {
           this.state.pathSelected !== undefined ? (
-            <ButtonGroup className="mb-3" size="sm">
+            <ButtonGroup className="" size="sm">
               <Button onClick={() => this.toggleModal(true)}>
                 EDIT DATA
               </Button>
@@ -628,6 +631,9 @@ class Canvas extends React.Component<CanvasProps, CanvasState> {
           ) : null 
         }
       </div>
+      <div className="vom-draw-reminder">
+        You can draw up to {this.getDrawsLeft()} more shapes
+      </div>
       <div id="vom-canvas-mode">
         {
           this.state.editMode ? (