# *Go Go PAINTING*

---

[github](https://github.com/BroLeaf/GoGoPainting)

---

[TOC]

---

## 開會紀錄

---

### 2018/06/02 20:25 ~ 23:00
:::danger

本來打算使用beego的聊天框架，我們在上面有做了修改html以及去使用了該框架的controller操作，建立了聊天房間以及對話系統。可是今天討論時發現，該框架無法支援mouse event，於是開始google，找到了另一種用來製作遊戲的框架--Ebiten，這個框架支援mouse event, keyboard event，我們也測試了是否可以透過這種方式來用滑鼠作畫，結果是成功的，於是下一個要面對的問題就是，如何把聊天室與畫畫整合起來，並且弄一個server。
:::
1. 畫畫的網頁，如何+進去其他網頁元件
2. 連線聊天功能，即時聊天傳送功能 github.io

----

### 2018/06/05 21:00 ~ 23:30

* 用什麼方式把畫出來的資訊傳給其他 client 知道
* 畫布是由數百個點組成，每個點都有座標，每 0.1 秒讀取一次有改變的座標位置，廣播出去讓其他人的畫布都改變
* 怎麼樣讓別人進來玩
1. 區域網路
* apache2
* go web 框架
2. 固定 IP 架設 server
* github.io ？

#### **TODO**

- [x] 確定用什麼是建立 server、繪畫跟 beego 聊天室的結合

----

### 2018/06/06 21:00 ~ 23:30

* 因為需要後端的 WebSocket 去傳送聊天室和繪圖資料，所以必須要用到後端操作，所以 github.io 跟 apache 直接 out ！！
* 因為 apache 跟 github.io 都只能用靜態網頁，雖然不是不可能，但難度太高，所以決定放棄
* 最後是決定用 html 跟 js 結合後端的 golang 弄出我們的架構
* 溝通部份前端 js 的 WebSocket 跟後端 golang 的 WebSocket 接收資料
* 實際使用需要連接到同一個 wifi 底下，連線到 server 的 IP 位置
* 用 GopherJS 技術，把 paint.go compile 成 .js 檔，最後整合到 beego聊天室 的 golang project 裡面
* 把專案第一次 commit 到 github 上作版本控制

#### **TODO**

- [x] golang WebSocket
- [x] js WebSocket
- [x] 前端後端連線
- [x] Server 廣播給所有 client

----

### 2018/06/12 21:00 ~ 01:30
* 完成進度：
1. server方面
* 能把user在paint畫的點座標傳送給server，同時傳送回來給user自己的畫圖板並畫上，先做初步debug
2. 聊天室答案方面
* 剖析beego聊天室框架，在msg的傳送中設定畫畫答案，如有user答對，則會將該訊息替換成"you got it!"

* 方式說明：
1. server方面：
* 本來想嘗試在paint的go中寫go的socket，結果gopherjs中會發生問題，無法順利轉到js中
* 因此使用node js的server，先使用gopherjs build產生js檔，再寫入其中
* update()，js中該func會持續運行，用來偵測mouse click，因此我們也將socket嵌入其中
2. 聊天室答案方面：
* 在user鍵入字串(要說的話)時，判斷是否為正確答案，如果是就印出"I GOT IT"(不會印出答案)，並切換答案，如果不是就只是印出打了什麼。

* 遇到的問題：
1. server方面：
* 如果user畫太多線，會造成server崩潰

#### **TODO**

- [x] 解決server崩潰問題
- [x] HTML 優化
- [x] Go Go painting 圖標

----

### 2018/06/14 15:30 ~ 17:30

* 網頁可以在區域網路上瀏覽（預計 demo 形式也會如此）
* 做 socket 傳送 plot 的優化（因為本來有時 plot 會一點一點的分散）
* 解決 server 崩潰問題（透過方法一二解決）
* 方法：
1. 把能夠不要放在 update() 裡面的 socket 傳送全部都移動到 init() 裡面
* js 中的 update()： js 中該 func 會持續運行，用來偵測 mouse click
* js 中的 init()： js 中會在 html 啟動該 js 時運行一次，用來初始化
2. 嘗試 server emit 時間區段是要小比較好 還是大，結果是要小

* 現在的問題：
* 精準度沒有很精確，畫畫者與猜題者的畫面會略有不同，有些點沒有呈現出來，但不至於影響觀看

#### **TODO**

- [x] 區分畫畫者，猜題者，先以第一個進來的就是猜題者下手
- [x] 一個點（int）傳送變成一次一堆點(list)傳送
- [x] HTML 前端界面優化
- [ ] beego 端（port:8080）與paint（port:9999）溝通，因為答對需要清空繪圖板，需要雙方的資訊
- [x] 傳送精確度優化
- [x] 遊戲模式優化

### 2018/06/16 18:00 ~ 20:00

* 完成上次的前三個進度
* 修改遊戲方式，改成每 30 秒 (或 60 秒)變換一次題目，換完題目後將畫布清空
* 清空方式： server 端傳送 `clear` 觸發 client 端 event
* 清空時間不一：是因為按照 socket 被創立的時間而定，也就是說跟何時近來遊戲有關，預計下次改善。
* 還沒有能夠換畫畫者

#### **TODO**

- [ ] TODO port 9999 與 8080 要能溝通

----

### 2018/06/19 22:00 ~ 24:00
* 優化了每輪遊戲的間隔時間，現在 server 跟 client 清空時間間隔不到一秒
* 若 server 是不進行遊戲的話，那對所有玩家來說看到的畫面就會是一樣的
* 現在聊天室因為是用 bee go 去控制的，所以要能夠跟產生出來的 js 檔案做連結
* 最開始是想到用 javascript call go function 達到傳參數的目的
* [參考](https://github.com/dop251/goja)
* 另一個解法是使用真實時間，達到兩邊都能夠同時輪替遊戲
* 現在能夠做到只要有人答對就會換題目

#### **TODO**

- [x]TODO go 題目配合真實時間
- [x]TODO js 題目配合真實時間
- [x]題目的輸出
- [x]輪流畫畫
- [x]前端優化

----

### 2018/06/24 22:00 ~ 24:00

* 前端(聊天室)介面優化
* 之前因為是用 js 畫布合併到 go 聊天室的關係有覆蓋到背景的設定，所以在 websocket.html 最上層修改背景就不會有被 js 畫布影響的問題
* 實做輪流畫畫
* 但是現階段會有題目對不上，以及有時候畫出來的圖案不會傳到 server ，也無法顯示給其他人的 bug


* 輪流畫畫

#### **TODO**

- [x]修正輪流畫畫的 bug
- [x]整理程式碼，增加可讀性
---

### 2018/06/24 22:00 ~ 24:00

* 將上禮拜輪流的 bug 去除
* 確認 project 完成度
* 做報告PPT

#### **TODO**

---
## 架構

---

### Server

* 負責處理資料傳輸
* 不參與遊戲
* 根據規則：以進入房間的順序，找離上一個畫的人最近的號碼，如果是最大的，那就從第一個人重新開始。
* `socket.on('I want to draw'...` 其實就是定義說，當 server 收到這個事件就做這件事

 socket.on('I want to draw', function(client_drawer) {
    if (client_drawer < drawer_min)
      drawer_min = client_drawer;
    if (pre_drawer < client_drawer) {
      if (pre_drawer == drawer || client_drawer < drawer) {
        drawer = client_drawer;
      }
    }
  });

* Server 傳送畫圖資訊時，傳的是一個 list (可以把他想像成一個 array)
* 以前我們為了使別人呈獻時有動態感，所以是一個個點傳送過去，但是這樣做對 server 負擔太大了，所以才改用這種方式。

  socket.on('my XY list event', function (datax, datay) {
    ttmmppX.push(datax);
    ttmmppY.push(datay);
    ttmmppX = datax;
    ttmmppY = datay;
  });

----

### Client

* 畫畫者
* 可以看到題目
* 被允許畫畫
* ( 不允許聊天？ )
* 猜題者
* 不能畫畫
* 可以聊天、猜題
* 與 server 溝通

Client->Server: 加入遊戲
Server->Client: 決定號碼
Server->Server: 27秒後，下一輪
Client->Server: 我是幾號，我還在線上
Note right of Server: 用3秒整理決定下一個
Server->Client: (廣播) 下一個是 X 號

* 我們讓每個 client 每秒中都會浸入這個 function
* 如果你是畫畫者(drawer == my_Number)，你就會把你化過的資料傳給 server
* 如果你是其他人，你就會向 server 發出 `get data`請求

setInterval(function(){
//console.log('send xy list to server every 1 sec')
    if (drawer == my_Number) {
	socket.emit('my XY list event', has_drewX, has_drewY);
	has_drewX.splice(0, has_drewX.length);
	has_drewY.splice(0, has_drewY.length);
    } else {
	socket.emit('get data', my_Number);
    }
}, 1000);

----

### 連線實作

* port 9999
* 處理聊天資訊
* 確定猜中答案就不會把正確答案送出

* port 8080
* 傳送聊天室資訊
* 處理是否猜中答案
* client.html、client.js、main.js(111065) localhost -> IP 位置

----

### 聊天室

* 使用port: 8080
* Golang為後端作業(socket溝通、判斷答案、聊天功能)
* js為中間溝通，html、css為前端呈現
* chatroom.go :
* 包含題庫、答對判定、換題目倒數、進入房間、離開房間

----

### Web 框架

* 我們主要是使用 beego 這個框架
* 他是中國人開發的，所以其實很多資料找起來很容易
* 其實有著不易拓展的特性，適合用於入門 golang
* beego 的一些 router、controller 都有整合起來，用 function 的型式幫你整理好了，但也是因為這個原因，才會有人說這樣不適合拓展
* 聊天室就是從原生框架開始修改，但是後面並和 golang 的畫板時，卻出現許多問題
* 因為解決不了所以改用其他方法，詳情請看 畫板 -> gopherjs

----

### 畫板

* 改 position
* z-index(html裡的深度)
* left（html裡的位置）
* 傳接畫過的點
* 用 list 紀錄下畫過的點，傳到 server 端
* 由 server 接受到所有畫過的點，傳給 client 端
* 實作node js client到畫板裡
* 將 client 的 socket.io 寫到 paint 的 js 檔中
* gopherjs
* 可以將他視為一種 compiler ，將 golang 轉換成 javascript ，然後我們直接將這部份當作我們圖畫的後端
* 轉換後產生的困難就是，我們兩個 socket port 溝通問題，畫圖題目顯示跟比對答案

---

## Reference

[學習筆記：Go 語言](https://hackmd.io/c/HyP6KVZ1G/https%3A%2F%2Fhackmd.io%2FKzCGDMCZQRgTgLQGYAsBjSCWQOwwQBwqpZIBscZKADDmsAKYNA%3D%3D%3Fboth)
[unrecognized import path](https://stackoverflow.com/questions/20458796/unrecognized-import-path-with-go-get)
[Go Web 教學](https://github.com/astaxie/build-web-application-with-golang/blob/master/zh/preface.md)
[gopherjs](https://github.com/gopherjs/gopherjs)