made support for mobile devices

README.md

@@ -32,17 +32,13 @@ Online whiteboard app that makes drawing, collaboration and sharing easy.
 
 ## How to use
 
-### [DESKTOP]:
+### [DESKTOP, MOBILE]:
 
-- Click and **move** mouse for drawing picture
+- Click (tap) and **move** mouse for drawing picture
 - Choose brush color and width on toolbar block
 - Click **Clear** button to delete all pictures from board
 - Click **Share** button to generate link that you can share to friends and draw pictures together
 
-### [MOBILE]:
-
-**WILL BE SOON, FUTURE FEATURE**
-
 ## About the project.
 
 ### Frontend
@@ -66,7 +62,7 @@ Online whiteboard app that makes drawing, collaboration and sharing easy.
 
 ### DevOps
 
-- I used Docker to build a microservice application
+- I used `Docker` to build a microservice application
 - List of microservices you can see in file `docker-compose.yml`
 
 ## Project setup

frontend/components/Board.js

@@ -12,20 +12,21 @@ export const Board = props => {
     const canvas_ref = useRef(null);
 
     function createNewPicEvent(e) {
+
         // put to store empty array as "width.color": [..., []] for adding new points in future
         props.createNewPic({
             width: currentBrushWidth,
             color: currentBrushColor,
         })
     }
 
-    function addPointToLastPicEvent(e) {
-        if (e.buttons !== 1) return;
-
+    function addPointToLastPicEvent(e) {     
+        if (e.buttons !== 1 && e.touches === undefined) return;
+        
         // put to store one point as "width.color": [[...], [..., {x, y}]]
         props.addPointToLastPic({
-            x: e.clientX - e.target.offsetLeft,
-            y: e.clientY - e.target.offsetTop
+            x: (e.type == 'mousemove') ? (e.clientX - e.target.offsetLeft) : (e.touches[0].clientX - e.target.offsetLeft),
+            y: (e.type == 'mousemove') ? (e.clientY - e.target.offsetTop) : (e.touches[0].clientY - e.target.offsetTop),
         }, {
             width: currentBrushWidth,
             color: currentBrushColor,
@@ -35,17 +36,13 @@ export const Board = props => {
     function saveLastPic(e) {
         if (!props.websocket || !props.url) return;
 
-        console.log('event mouseup')
-
         let key = __transformBrushToKey({
             width: currentBrushWidth,
             color: currentBrushColor
         })
 
         let lastPic = store_points[key][ store_points[key].length - 1 ]
 
-        console.log(lastPic)
-
         fetchApi('/board', 'PUT', {
                         board_url: props.url,
                         data_delta: JSON.stringify(lastPic),
@@ -115,7 +112,7 @@ export const Board = props => {
 
     return (
         <div className={styles.canvasContainer}>
-                <canvas onMouseUp={saveLastPic} onMouseDown={createNewPicEvent} onMouseMove={addPointToLastPicEvent} className={styles.canvas} id="drawingCanvas" ref={canvas_ref}>
+                <canvas onTouchStart={createNewPicEvent} onTouchMove={addPointToLastPicEvent} onTouchEnd={saveLastPic} onMouseUp={saveLastPic} onMouseDown={createNewPicEvent} onMouseMove={addPointToLastPicEvent} className={styles.canvas} id="drawingCanvas" ref={canvas_ref}>
                 </canvas>
             </div>
         )

frontend/pages/_app.js

@@ -1,5 +1,5 @@
 import '../styles/globals.css'
-import { createStore, applyMiddleware } from 'redux';
+import { createStore } from 'redux';
 import { rootReducer } from '../store/reducers';
 import { Provider } from 'react-redux';
 import { composeWithDevTools } from 'redux-devtools-extension';

frontend/styles/globals.css

@@ -1,5 +1,9 @@
 html,
 body {
+  position: fixed;
+  height: 100%;
+  overflow: hidden;
+  width: 100%;
   padding: 0;
   margin: 0;
   font-size: 18px;