Skip to content

Commit 82d96c1

Browse files
rong5026rong5026
committed
[UPDATE] readme finish
1 parent 1e25114 commit 82d96c1

File tree

1 file changed

+114
-9
lines changed

1 file changed

+114
-9
lines changed

‎README.md

+114-9
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
<h1 align="center">
22
<a href="https://github.com/Imagine-ENTZ/AirDrawing" title="AwesomeCV Documentation">
3-
<img alt="AwesomeCV" src="https://github.com/stock-price-calculator/tradingbot/assets/77156858/e1be76c5-3bf5-478a-8bc4-c790ef10f3a2" width="100%" height="100%" />
3+
<!-- <img alt="AwesomeCV" src="https://github.com/stock-price-calculator/tradingbot/assets/77156858/e1be76c5-3bf5-478a-8bc4-c790ef10f3a2" width="100%" height="100%" /> -->
4+
5+
<img src="https://github.com/stock-price-calculator/tradingbot/assets/77156858/7cb49ab8-3f3c-4b2e-bd1e-fd1e35fdd187"/>
6+
47
</a>
58
<br />
69
ENTZ P.A.S
@@ -62,7 +65,7 @@
6265
- 2023.01.04 ~ 2023.01.28
6366

6467
## 👬 팀 소개
65-
- 홍영환 - <a href="https://github.com/Imagine-ENTZ/Server">백엔드 (Spring Boot)</a>, Azure API 서버 구축 및 배포, WebRTC, Spring STOMP, <a href="https://github.com/Imagine-ENTZ/AirDrawing">프론트 (React)</a>, WebSocket 연결, Canvas그림그리기, Tesseract 문자 변환, 1 vs 1 화상게임 구현, 손모양 인식 모델 적용, WORD-TRACING 구현
68+
- 홍영환 - <a href="https://github.com/Imagine-ENTZ/Server">백엔드 (Spring Boot)</a>, Azure API 서버 구축 및 배포, WebRTC, Spring STOMP, STUN TURN 서버 구축 <a href="https://github.com/Imagine-ENTZ/AirDrawing">프론트 (React)</a>, WebSocket 연결, Canvas그림그리기, Tesseract 문자 변환, 1 vs 1 화상게임 구현, 손모양 인식 모델 적용, WORD-TRACING 구현
6669
- 박민지 - <a href="https://github.com/Imagine-ENTZ/AirDrawing">프론트 (React)</a> , 게임 타이머, DECORATIVE GAME 전체 구현
6770
- 김영림 - <a href="https://github.com/Imagine-ENTZ/AirDrawing">프론트 (React)</a> WORD-TRACING 구현, 메인 배경 및 게임 배경, 이미지 캡쳐
6871

@@ -142,40 +145,142 @@ Game Player
142145
- 랜덤으로 제시된 단어를 따라서 작성합니다.
143146
- "OK" 손동작(엄지 척)을 취하면 정답이 맞는지 확인해 줍니다.
144147
- 정답을 맞추면 Score가 100점씩 증가합니다.
148+
145149
## 2. 🎮 나의 화면 꾸미기 ( DECORATING )
146150

147151
<div align="center">
148152

149153
<img src="https://github.com/stock-price-calculator/tradingbot/assets/77156858/052d846b-7f58-420d-b080-5157d6ddbea7" width="100%" >
150154

155+
</div>
156+
157+
- 게임방법
158+
159+
<div align="center">
160+
161+
|<img src="https://github.com/stock-price-calculator/tradingbot/assets/77156858/3c60b7d5-5949-4522-8d82-2ccd85d5241e" width="100%"> |<img src="https://github.com/stock-price-calculator/tradingbot/assets/77156858/1a2800e9-af3d-4feb-a68b-4a62a08de101" width="100%" >|
162+
|:---:|:---:|
163+
|게임 방법1| 게임 방법2|
164+
165+
|<img src="https://github.com/stock-price-calculator/tradingbot/assets/77156858/c1aeb492-d95b-4d69-8c0e-5ea8c2c9bbd0" width="100%"> |<img src="https://github.com/stock-price-calculator/tradingbot/assets/77156858/5a1ac0ee-3a6c-4b4a-9679-ba15a04b3d56" width="100%" >|<img src="https://github.com/stock-price-calculator/tradingbot/assets/77156858/0906ab63-cf9a-4c87-95a8-26fdcd4df53e" width="100%"> |
166+
|:---:|:---:|:---:|
167+
|게임 방법3 | 게임 방법4 |게임 방법5|
168+
169+
</div>
170+
171+
<hr>
172+
173+
- 예시
174+
<div align="center">
175+
151176
|<img src="https://github.com/stock-price-calculator/tradingbot/assets/77156858/fb7c0810-c933-426f-ab83-68743bfc770d" width="100%"> |<img src="https://github.com/stock-price-calculator/tradingbot/assets/77156858/a473501c-9839-4f8e-9c0c-0c9a43b71e90" width="100%" >|<img src="https://github.com/stock-price-calculator/tradingbot/assets/77156858/047e3bac-2eaf-4dd6-ae96-3d3def6a2138" width="100%"> |
152177
|:---:|:---:|:---:|
153178
|단어 작성| 아이콘 생성| 아이콘 이동|
154179

155180
</div>
156181

157182
- 원하는 단어를 작성합니다.
158-
- 스페이스바( Space bar )를 누르면 해당 단어의 아이콘이 랜덤으로 화면에 나옵니다.
183+
- 스페이스바( Space bar )를 누르면 아이콘 생성 API에 요청해 해당 단어의 아이콘이 랜덤으로 화면에 나옵니다.
159184
- 마우스 커서를 이용해 아이콘을 움직이며 웹화면을 꾸밀 수 있습니다.
160185
- 아이콘을 배치하고 화면을 이미지로 다운로드할 수 있습니다.
161186

187+
## 🆚 1 vs 1 대결모드
188+
189+
<div align="center">
190+
191+
<img src="https://github.com/stock-price-calculator/tradingbot/assets/77156858/78c8ba24-cc28-4c4b-ac98-bbfffff1a218" height="100%" width="100%" >
192+
193+
|<img src="https://github.com/stock-price-calculator/tradingbot/assets/77156858/9d7ee26e-c9e9-424f-ab64-4a9853beca1c" width="100%"> |<img src="https://github.com/stock-price-calculator/tradingbot/assets/77156858/f58b179c-a620-4121-bf44-e065b11116ca" width="100%" >|
194+
|:---:|:---:|
195+
|방 생성| 상대방 입장 대기 |
196+
197+
|<img src="https://github.com/stock-price-calculator/tradingbot/assets/77156858/86d7f8d4-9f30-4339-9df2-a390d11a9443" width="100%"> |<img src="https://github.com/stock-price-calculator/tradingbot/assets/77156858/323f2170-0cbe-49b1-8e42-0b37304444fc" width="100%" >|
198+
|:---:|:---:|
199+
|대결 시작| 대결 중 |
200+
</div>
201+
202+
< 단어 따라쓰기 ( WORD TRACING ) >
203+
- 플레이 하고자 하는 게임의 모드를 선택 후 방을 생성합니다.
204+
- 상대방이 입장을 하게 되면 게임이 시작하게 됩니다.
205+
- 제시된 단어를 작성하여 OK모션( 엄지 척 )으로 제출합니다.
206+
- 제한시간동안 Score가 높은 사람이 승리합니다.
207+
208+
< 나의 화면 꾸미기 ( DECORATING ) >
209+
- 입장 후 각자 화면에 원하는 아이콘의 단어를 작성합니다.
210+
- 스페이스바를 눌러 문자를 아이콘으로 전환합니다.
211+
- 원하는 위치에 아이콘을 위치시킨 후 프로필을 꾸밉니다.
212+
162213
<hr>
163214

164215
## 💾 시스템 설계도
165216
<img src="https://github.com/stock-price-calculator/tradingbot/assets/77156858/59c46ea5-5656-40c6-b63b-9558914a41ae" height="100%" width="100%" >
166217

218+
<hr>
219+
220+
## 🛠️ 아쉽거나 어려웠던점
221+
- 2인용 게임에서 나의 화면 꾸미기 ( DECORATING )로 플레이하면 한 화면에 두 사람이 서로 글씨를 작성해 프로필을 같이 꾸미는 기능 구현까지 성공했었다. 하지만 상대방이 그린 점들의 좌표를 실시간으로 계속 공유하고 캔버스에 동시에 그려주는 기능에 있어서 좌표가 조금 부정확하게 그려지는 부분이 있어 제출전에 다시 개인의 프로필을 꾸미는 방법으로 진행했었다. 개발시간이 더 있었다면 [공유 프로필 꾸미기] 기능도 추가해보고 싶다.
167222

223+
- 로컬에서 WebRTC는 따로 STUN TURN서버가 필요없지만 배포를하고 외부에서 서로 1대1 대결을 하려면 서버가 꼭 필요했었다.
224+
인터넷에 찾아보니 구글이나 다른 곳에서 무료로 지원해주는 STUN/TURN 서버들이 이전에는 있었지만 현재는 전부 막혔다는 사실을 접했다.
225+
그래서 부랴부랴 외국 유튜버의 기술블로그를 보며 Azure 서버를 하나 더 생성해 마감시간안에 완성할 수 있었다.
168226

169227
## 📌 페이지 화면
170228

171229
### 1. 메인페이지
172230
<p align="center">
173-
<img src="https://github.com/stock-price-calculator/tradingbot/assets/77156858/7cb49ab8-3f3c-4b2e-bd1e-fd1e35fdd187"/>
174-
175-
<img src="https://github.com/stock-price-calculator/tradingbot/assets/77156858/fb8f9b1b-e0d1-4730-8fa7-b386e3b21282">
176-
177-
|<img src="https://github.com/stock-price-calculator/tradingbot/assets/77156858/7cb49ab8-3f3c-4b2e-bd1e-fd1e35fdd187" width="100%"> |<img src="https://github.com/stock-price-calculator/tradingbot/assets/77156858/fb8f9b1b-e0d1-4730-8fa7-b386e3b21282" width="100%" >|
231+
232+
|<img src="https://github.com/stock-price-calculator/tradingbot/assets/77156858/7cb49ab8-3f3c-4b2e-bd1e-fd1e35fdd187" width="100%"> |<img src="https://github.com/stock-price-calculator/tradingbot/assets/77156858/fd6a0e59-dfe6-4843-aac2-8977370dc8f4" width="100%" >|
178233
|:---:|:---:|
179-
|손 모양에 따른 기능| 각 지점 벡터|
234+
|메인| Get Started|
235+
236+
</p>
237+
238+
### 2. 로그인, 회원가입
239+
240+
<p align="center">
241+
242+
|<img src="https://github.com/stock-price-calculator/tradingbot/assets/77156858/a89dbad0-89bb-47ee-a3cd-29e710812b58" width="100%"> |<img src="https://github.com/stock-price-calculator/tradingbot/assets/77156858/12a4668d-55f1-40cd-9f0b-10e5ddb404f0" width="100%" >|
243+
|:---:|:---:|
244+
|로그인| 회원가입 |
245+
246+
</p>
247+
248+
### 3. 게임 모드 선택
249+
250+
<p align="center">
251+
252+
<img src="https://github.com/stock-price-calculator/tradingbot/assets/77156858/efa002a2-3ee5-4a30-918b-0acf16b7f469" width="100%">
253+
254+
</p>
255+
256+
### 4. 단어 따라쓰기 ( WORD TRACING )
257+
258+
<p align="center">
259+
260+
|<img src="https://github.com/stock-price-calculator/tradingbot/assets/77156858/0de61e3e-13bd-486a-ac5a-c20e7e8021a3" width="100%"> |<img src="https://github.com/stock-price-calculator/tradingbot/assets/77156858/5d01ea55-5fdf-4324-9563-6c4d7c4bdd6a" width="100%" >|
261+
|:---:|:---:|
262+
| 입장 화면| 따라쓰기 |
263+
264+
|<img src="https://github.com/stock-price-calculator/tradingbot/assets/77156858/c7ec8648-d51c-46ca-a0bf-d32447a03a5f" width="100%"> |<img src="https://github.com/stock-price-calculator/tradingbot/assets/77156858/62d32eef-964a-4cb0-b6a5-2829ac0917d0" width="100%" >|
265+
|:---:|:---:|
266+
|엄지로 정답확인| 오답 화면 |
267+
268+
</p>
269+
270+
### 5. 나의 화면 꾸미기 ( DECORATING )
271+
272+
<p align="center">
273+
274+
|<img src="https://github.com/stock-price-calculator/tradingbot/assets/77156858/d302d32f-d463-4776-b090-7dd831bfdb7a" width="100%"> |
275+
|:---:|
276+
|입장 화면|
277+
278+
<div align="center">
279+
280+
|<img src="https://github.com/stock-price-calculator/tradingbot/assets/77156858/fb7c0810-c933-426f-ab83-68743bfc770d" width="100%"> |<img src="https://github.com/stock-price-calculator/tradingbot/assets/77156858/a473501c-9839-4f8e-9c0c-0c9a43b71e90" width="100%" >|<img src="https://github.com/stock-price-calculator/tradingbot/assets/77156858/047e3bac-2eaf-4dd6-ae96-3d3def6a2138" width="100%"> |
281+
|:---:|:---:|:---:|
282+
|단어 작성| 아이콘 생성| 아이콘 이동|
283+
284+
</div>
180285

181286
</p>

0 commit comments

Comments
 (0)