Skip to content

Commit f2e0749

Browse files
hnnynhhnnynh
committed
chore: code formatter & title, logo
1 parent 280789a commit f2e0749

23 files changed

Lines changed: 806 additions & 727 deletions

‎public/index.html‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
5+
<link rel="icon" href="%PUBLIC_URL%/logo.png" />
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
77
<meta name="theme-color" content="#000000" />
88
<meta
99
name="description"
1010
content="Web site created using create-react-app"
1111
/>
12-
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
12+
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.png" />
1313
<!--
1414
manifest.json provides metadata used when your web app is installed on a
1515
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -24,10 +24,9 @@
2424
work correctly both with client-side routing and a non-root public URL.
2525
Learn how to configure a non-root public URL by running `npm run build`.
2626
-->
27-
<title>React App</title>
27+
<title>AirView</title>
2828
</head>
2929
<body>
30-
<noscript>You need to enable JavaScript to run this app.</noscript>
3130
<div id="root"></div>
3231
<!--
3332
This HTML file is a template.

‎public/logo.png‎

5.28 KB
Loading

‎src/components/drawing/Canvas.tsx‎

Lines changed: 102 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,181 +1,192 @@
1-
import React, { useEffect, useContext, useRef, useState, useCallback } from 'react'
2-
import styled from 'styled-components'
3-
import { DrawingMenuContext } from '../../context/DrawingMenuContext'
4-
import { WebRTCUser } from '../../types'
5-
import { io, Socket } from 'socket.io-client'
1+
import React, {
2+
useEffect,
3+
useContext,
4+
useRef,
5+
useState,
6+
useCallback,
7+
} from "react";
8+
import styled from "styled-components";
9+
import { DrawingMenuContext } from "../../context/DrawingMenuContext";
10+
import { WebRTCUser } from "../../types";
11+
import { io, Socket } from "socket.io-client";
612

713
interface CanvasProps {
8-
width: number
9-
height: number
14+
width: number;
15+
height: number;
1016
}
1117

1218
interface props {
13-
user: WebRTCUser
19+
user: WebRTCUser;
1420
}
1521

1622
interface Coordinate {
17-
x: number
18-
y: number
23+
x: number;
24+
y: number;
1925
}
2026

2127
const Canvas = ({ user }: props) => {
22-
const canvasRef = useRef<HTMLCanvasElement>(null)
23-
const { state } = useContext(DrawingMenuContext)
24-
const { color, thickness, isDrawing, isErasing } = state
25-
const socketRef = useRef<Socket | null>(null)
28+
const canvasRef = useRef<HTMLCanvasElement>(null);
29+
const { state } = useContext(DrawingMenuContext);
30+
const { color, thickness, isDrawing, isErasing } = state;
31+
const socketRef = useRef<Socket | null>(null);
2632

27-
const [mousePosition, setMousePosition] = useState<Coordinate | undefined>(undefined)
28-
const [isPainting, setIsPainting] = useState(false)
29-
const [drawnLines, setDrawnLines] = useState<Array<Coordinate>>([])
33+
const [mousePosition, setMousePosition] = useState<Coordinate | undefined>(
34+
undefined
35+
);
36+
const [isPainting, setIsPainting] = useState(false);
37+
const [drawnLines, setDrawnLines] = useState<Array<Coordinate>>([]);
3038

3139
const updateCanvasSize = () => {
32-
const canvas = canvasRef.current
40+
const canvas = canvasRef.current;
3341
if (canvas && canvas.parentElement) {
34-
canvas.width = canvas.parentElement.offsetWidth
35-
canvas.height = canvas.parentElement.offsetHeight
42+
canvas.width = canvas.parentElement.offsetWidth;
43+
canvas.height = canvas.parentElement.offsetHeight;
3644
}
37-
}
45+
};
3846

3947
useEffect(() => {
40-
window.addEventListener('resize', updateCanvasSize)
41-
updateCanvasSize() // Initial update
48+
window.addEventListener("resize", updateCanvasSize);
49+
updateCanvasSize(); // Initial update
4250

4351
// Initialize socket only if it's not already established
4452
if (!socketRef.current) {
45-
socketRef.current = io(`${user.ipAddress}:5555`)
53+
socketRef.current = io(`${user.ipAddress}:5555`);
4654
}
4755

48-
socketRef.current.on('connect', () => {
49-
console.log('connected!')
50-
})
56+
socketRef.current.on("connect", () => {
57+
console.log("connected!");
58+
});
5159

5260
return () => {
53-
window.removeEventListener('resize', updateCanvasSize)
61+
window.removeEventListener("resize", updateCanvasSize);
5462
if (socketRef.current) {
5563
// Disconnect the socket if needed
56-
socketRef.current.disconnect()
64+
socketRef.current.disconnect();
5765
}
58-
}
59-
}, [user])
66+
};
67+
}, [user]);
6068

61-
const drawLine = (originalMousePosition: Coordinate, newMousePosition: Coordinate) => {
69+
const drawLine = (
70+
originalMousePosition: Coordinate,
71+
newMousePosition: Coordinate
72+
) => {
6273
if (!canvasRef.current) {
63-
return
74+
return;
6475
}
65-
const canvas: HTMLCanvasElement = canvasRef.current
66-
const context = canvas.getContext('2d')
76+
const canvas: HTMLCanvasElement = canvasRef.current;
77+
const context = canvas.getContext("2d");
6778

6879
if (context) {
6980
if (isErasing) {
70-
context.globalCompositeOperation = 'destination-out' // Set mode to erase
71-
context.lineWidth = thickness * 2 // You might want a bigger eraser
81+
context.globalCompositeOperation = "destination-out"; // Set mode to erase
82+
context.lineWidth = thickness * 2; // You might want a bigger eraser
7283
} else {
73-
context.globalCompositeOperation = 'source-over' // Set mode to draw
74-
context.strokeStyle = color
75-
context.lineWidth = thickness
84+
context.globalCompositeOperation = "source-over"; // Set mode to draw
85+
context.strokeStyle = color;
86+
context.lineWidth = thickness;
7687
}
7788

78-
context.lineJoin = 'round'
79-
context.beginPath()
80-
context.moveTo(originalMousePosition.x, originalMousePosition.y)
81-
context.lineTo(newMousePosition.x, newMousePosition.y)
82-
context.closePath()
83-
context.stroke()
89+
context.lineJoin = "round";
90+
context.beginPath();
91+
context.moveTo(originalMousePosition.x, originalMousePosition.y);
92+
context.lineTo(newMousePosition.x, newMousePosition.y);
93+
context.closePath();
94+
context.stroke();
8495
}
85-
}
96+
};
8697

8798
const getCoordinates = (event: MouseEvent): Coordinate | undefined => {
8899
if (!canvasRef.current) {
89-
return
100+
return;
90101
}
91102

92-
const canvas: HTMLCanvasElement = canvasRef.current
93-
const rect = canvas.getBoundingClientRect() // Get the bounding rectangle of the canvas
103+
const canvas: HTMLCanvasElement = canvasRef.current;
104+
const rect = canvas.getBoundingClientRect(); // Get the bounding rectangle of the canvas
94105

95106
return {
96107
x: event.clientX - rect.left,
97-
y: event.clientY - rect.top
98-
}
99-
}
108+
y: event.clientY - rect.top,
109+
};
110+
};
100111

101112
const startPaint = useCallback((event: MouseEvent) => {
102-
const coordinates = getCoordinates(event)
113+
const coordinates = getCoordinates(event);
103114
if (coordinates) {
104-
setIsPainting(true)
105-
setMousePosition(coordinates)
115+
setIsPainting(true);
116+
setMousePosition(coordinates);
106117
}
107-
}, [])
118+
}, []);
108119

109120
const paint = useCallback(
110121
(event: MouseEvent) => {
111-
event.preventDefault()
122+
event.preventDefault();
112123

113124
if (isPainting && (isDrawing || isErasing)) {
114-
const newMousePosition = getCoordinates(event)
115-
const canvas = canvasRef.current
125+
const newMousePosition = getCoordinates(event);
126+
const canvas = canvasRef.current;
116127

117128
if (canvas && newMousePosition) {
118-
const { width, height } = canvas
129+
const { width, height } = canvas;
119130
if (newMousePosition.x > width || newMousePosition.y > height) {
120-
exitPaint()
131+
exitPaint();
121132
} else if (mousePosition) {
122-
drawLine(mousePosition, newMousePosition)
123-
setMousePosition(newMousePosition)
133+
drawLine(mousePosition, newMousePosition);
134+
setMousePosition(newMousePosition);
124135

125-
setDrawnLines((prevLines) => [...prevLines, newMousePosition])
136+
setDrawnLines((prevLines) => [...prevLines, newMousePosition]);
126137
}
127138
}
128139
}
129140
},
130141
[isPainting, mousePosition]
131-
)
142+
);
132143

133144
const exitPaint = useCallback(() => {
134-
const canvas = canvasRef.current
145+
const canvas = canvasRef.current;
135146
if (canvas) {
136-
setIsPainting(false)
147+
setIsPainting(false);
137148
const data = JSON.stringify({
138149
width: canvas.width,
139150
height: canvas.height,
140151
line: drawnLines,
141152
color: color,
142153
thickness: thickness,
143-
id: user.id
144-
})
145-
console.log(data)
146-
console.log(socketRef.current)
147-
socketRef.current?.emit('send', data)
148-
setDrawnLines([])
154+
id: user.id,
155+
});
156+
console.log(data);
157+
console.log(socketRef.current);
158+
socketRef.current?.emit("send", data);
159+
setDrawnLines([]);
149160
}
150-
}, [drawnLines])
161+
}, [drawnLines]);
151162

152163
useEffect(() => {
153164
if (!canvasRef.current) {
154-
return
165+
return;
155166
}
156-
const canvas: HTMLCanvasElement = canvasRef.current
167+
const canvas: HTMLCanvasElement = canvasRef.current;
157168

158-
canvas.addEventListener('mousedown', startPaint)
159-
canvas.addEventListener('mousemove', paint)
160-
canvas.addEventListener('mouseup', exitPaint)
169+
canvas.addEventListener("mousedown", startPaint);
170+
canvas.addEventListener("mousemove", paint);
171+
canvas.addEventListener("mouseup", exitPaint);
161172

162173
return () => {
163-
canvas.removeEventListener('mousedown', startPaint)
164-
canvas.removeEventListener('mousemove', paint)
165-
canvas.removeEventListener('mouseup', exitPaint)
166-
}
167-
}, [startPaint, paint, exitPaint])
174+
canvas.removeEventListener("mousedown", startPaint);
175+
canvas.removeEventListener("mousemove", paint);
176+
canvas.removeEventListener("mouseup", exitPaint);
177+
};
178+
}, [startPaint, paint, exitPaint]);
168179

169-
return <CanvasComponent ref={canvasRef} className="canvas"></CanvasComponent>
170-
}
180+
return <CanvasComponent ref={canvasRef} className="canvas"></CanvasComponent>;
181+
};
171182

172-
export default Canvas
183+
export default Canvas;
173184

174185
const CanvasComponent = styled.canvas`
175186
border-radius: 15px;
176187
background: transparent;
177188
position: absolute;
178-
height: '100%';
179-
width: '100%';
189+
height: "100%";
190+
width: "100%";
180191
z-index: 10;
181-
`
192+
`;

‎src/components/menu/BottomMenu.tsx‎

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,16 @@ import { MdOutlineScreenShare } from "react-icons/md";
44
import { MdPersonAddAlt1 } from "react-icons/md";
55
import { LuLayoutGrid } from "react-icons/lu";
66
import { PiSignOutBold } from "react-icons/pi";
7-
import { useModal } from '../../context/ModalContext';
8-
import { useNavigate } from 'react-router-dom';
7+
import { useModal } from "../../context/ModalContext";
8+
import { useNavigate } from "react-router-dom";
99

1010
type props = {
1111
setFocusScreen: (focusScreen: string) => void;
1212
};
1313

1414
const BottomMenu = ({ setFocusScreen }: props) => {
1515
const [showBottomMenu, setShowBottomMenu] = useState(false);
16-
const [showCodeModal, setShowCodeModal] = useState(false)
16+
const [showCodeModal, setShowCodeModal] = useState(false);
1717
const [modal, dispatchModal] = useModal();
1818
const navigate = useNavigate();
1919

@@ -32,31 +32,31 @@ const BottomMenu = ({ setFocusScreen }: props) => {
3232
return (
3333
<>
3434
<Wrapper>
35-
<MenuBtn>
36-
<MdOutlineScreenShare />
37-
</MenuBtn>
38-
<MenuBtn
39-
onClick={() => {
40-
dispatchModal({ type: "modal_clicked"});
41-
}}
42-
>
43-
<MdPersonAddAlt1 />
44-
</MenuBtn>
45-
<MenuBtn
46-
onClick={() => {
47-
setFocusScreen("");
48-
}}
49-
>
50-
<LuLayoutGrid />
51-
</MenuBtn>
52-
<MenuBtn
53-
onClick={() => {
54-
navigate("/");
55-
}}
56-
>
57-
<PiSignOutBold />
58-
</MenuBtn>
59-
</Wrapper>
35+
<MenuBtn>
36+
<MdOutlineScreenShare />
37+
</MenuBtn>
38+
<MenuBtn
39+
onClick={() => {
40+
dispatchModal({ type: "modal_clicked" });
41+
}}
42+
>
43+
<MdPersonAddAlt1 />
44+
</MenuBtn>
45+
<MenuBtn
46+
onClick={() => {
47+
setFocusScreen("");
48+
}}
49+
>
50+
<LuLayoutGrid />
51+
</MenuBtn>
52+
<MenuBtn
53+
onClick={() => {
54+
navigate("/");
55+
}}
56+
>
57+
<PiSignOutBold />
58+
</MenuBtn>
59+
</Wrapper>
6060
</>
6161
);
6262
}

0 commit comments

Comments
 (0)