Live Drawings

index.html

@@ -68,6 +68,7 @@ <h3>Announcement</h3>
           <button aria-selected="false" data-value="set">Set</button>
           <button aria-selected="false" data-value="matrix">Matrix</button>
           <button aria-selected="false" data-value="frq">FRQ</button>
+          <!-- <button aria-selected="false" data-value="draw">Draw</button> -->
         </div>
       </div>
     </div>
@@ -236,6 +237,14 @@ <h3>Announcement</h3>
           <input type="range" min="0" max="9" value="4" step="1" id="frq-input" />
           <h1 id="frq-score">4</h1>
         </div>
+        <div data-answer-mode="draw">
+          <canvas disabled></canvas>
+          <div class="button-grid">
+            <button data-action="undo" disabled>Undo</button>
+            <button data-action="clear" disabled>Clear</button>
+            <button data-action="redo" disabled>Redo</button>
+          </div>
+        </div>
       </div>
       <button class="pill space" id="submit-button">Submit</button>
     </div>
@@ -345,7 +354,7 @@ <h2 id="history-date"></h2>
       <label for="date-input">Date</label>
       <input type="date" id="date-input" />
       <div data-modal-actions>
-        <button id="dismiss-makeup-button">Dismiss</button>
+        <button id="dismiss-makeup-button">Continue Anyway</button>
         <button id="makeup-click-button">Make Up Clicks</button>
       </div>
     </div>
@@ -354,8 +363,8 @@ <h2 id="history-date"></h2>
       <div></div>
       <div></div>
       <p><a href="https://github.com/faisalnjs"><img src="https://avatars.githubusercontent.com/u/84286255" />Faisal N
-          (@faisalnjs)</a> - Commits after 5/21/2024 including Set, Matrix, and FRQ input modes, make-up mode, banner
-        images, authentication, syncing</p>
+          (@faisalnjs)</a> - Commits after 5/21/2024 including Set, Matrix, and FRQ input modes, make-up mode, Live
+        Drawings, banner images, authentication, syncing</p>
       <p><a href="https://github.com/khui0">khui0</a> - Original design and development, logo image</p>
       <div class="row center" style="gap: 7.5px; margin-top: 5px;">
         <a href="https://github.com/faisalnjs/virtual-clicker" class="icon" tooltip="GitHub Repository"><i

package.json

@@ -1,7 +1,7 @@
 {
   "name": "virtual-clicker",
   "private": true,
-  "version": "5.0.0",
+  "version": "5.2.0",
   "type": "module",
   "scripts": {
     "dev": "vite --host",
@@ -25,6 +25,7 @@
   "dependencies": {
     "bootstrap-icons": "^1.11.3",
     "mathlive": "^0.104.0",
-    "vite-plugin-package-version": "^1.1.0"
+  "vite-plugin-package-version": "^1.1.0",
+  "socket.io-client": "^4.7.2"
   }
 }