製作一個html+css+js程式，實現Vino Square（維諾廣場），一款抽象策略遊戲。
一，html結構
中間是棋盤區，裡面是一個大小為480*480的svg棋盤。左右或上下是玩家控制區，如果是電腦端，則右邊是玩家一控制區，左邊是玩家二控制區，如果是手機端，則下面是玩家一控制區，上面是玩家二控制區。
棋盤區的棋盤應始終保持1:1的高寬比。當電腦端時，每個控制區的寬度至少是240，多則填滿餘下空隙。當手機端時，每個控制區的高度至少是160，多則填滿餘下空隙。
控制區的結構為：分數（字體要大，居中，保證能顯示三位數），棋子及數量。有三種棋子，棋子應放進一個正方形的框中，如果是電腦端，則三個棋子縱向排列，玩家一的棋子數量在棋子右邊，玩家二在左邊，如果是手機端，則三個棋子横向排列，棋子數量統一在棋子下方。
二，遊戲規則
遊戲目標是圍成盡可能多的平方數，分數高者獲勝。
棋子分為三種：fino（法諾），vino（維諾），mimo（米諾）。其中法諾是五個正方形連成v形，即一個正方形的右邊和下邊都有兩個相同的正方形與之相連，維諾是三個正方形連成v形，米諾是一個正方形。
每方有五個法諾，七個維諾，三個米諾。
棋盤是十乘十正方形棋子。
在遊戲時，雙方輪流放置一個棋子，要先放完法諾才能開始放維諾，放完維諾才能放米諾。棋子之間不能重疊。
當一方不能合規落下一個棋子，則他將直接輸掉遊戲。
計分規則是，形成一個二乘二的矩形計4分，形成三乘三的矩形計9分，四乘四或五乘五等依次類推。同樣棋型可以重覆計分，比如二乘三矩形可計兩次4分，三乘三矩形可計四次4分和一次9分。同時棋盤上只要有一個正方形就計1分，則可認為每方只要落完棋子就有49分的基礎分（5*5+3*7+1*3=49）。
當一局結束後，雙方交換先後手再玩一局，之後統計兩局的總分，分高者獲勝。
三，控制說明
當輪到一方時，他的分數區的背景將變色，以表示當前輪到他行動。
法諾和維諾棋子有四個旋轉方向，等於是把棋子的框分成四個象限，當點擊其中一個象限，v的尖角就朝向它。
當點擊一個法諾或維諾棋子時，它將被選中，同時會朝向所點擊的象限方向。如果再次點擊相同的象限，則取消選取。
當點擊一個米諾棋子時，它將被選中，如果再次點擊則取消取。
當有一個棋子被選中時，點擊棋盤的一個格子，則這個棋子將落在所點擊的地方。如果是法諾或維諾則以v形尖角的格子為落子的地方。
當發生棋子重疊或超出棋盤邊界，則本次落子不能執行，並彈出2.4s的消息框提示。
在落子之後立即計分，分數將直接發生變化。
當一局結束後，彈出一個窗口（右上角有關閉叉），展示雙方得分，並詢問是否進行下一局交換先後手，或是結束遊戲。
四，工具欄
棋盤區的下方有一排工具欄，不要覆蓋到棋盤上。工具欄的按鈕有：回退、前進、AI設置、導出文本棋譜、下載svg、恢復窗口，自動旋轉。
每一個按鈕都是一個svg圖標。
目前除了回退和前進，其它的工具的功能暫時不用實現。
五，開始頁面
打開頁面時，有主標題，副標題，中英語言切換，規則介紹，開始按鈕。
主標題為「維諾廣場」（英文為Vino Square），副標題為「法諾、維諾、米諾在廣場上玩」（英文為Fino, Vino, Mino are playing on the square.）（英文需要你幫我修改以使其語法正確）。
當點擊語言切換，整個頁面和遊戲中的消息框等，都將把語言切換成相應語言。一開始默認是英文。
規則介紹將把前面的規則寫上，加入英文翻譯。
點開始遊戲按鈕則立即開始遊戲，第一局將是玩家一先手。
代码： 全选
製作一個html+css+js程式，實現Vino Square（維諾廣場），一款抽象策略遊戲。
一，html結構
中間是棋盤區，裡面是一個大小為480*480的svg棋盤。左右或上下是玩家控制區，如果是電腦端，則右邊是玩家一控制區，左邊是玩家二控制區，如果是手機端，則下面是玩家一控制區，上面是玩家二控制區。
棋盤區的棋盤應始終保持1:1的高寬比。當電腦端時，每個控制區的寬度至少是240，多則填滿餘下空隙。當手機端時，每個控制區的高度至少是160，多則填滿餘下空隙。
控制區的結構為：分數（字體要大，居中，保證能顯示三位數），棋子及數量。有三種棋子，棋子應放進一個正方形的框中，如果是電腦端，則三個棋子縱向排列，玩家一的棋子數量在棋子右邊，玩家二在左邊，如果是手機端，則三個棋子横向排列，棋子數量統一在棋子下方。
二，遊戲規則
遊戲目標是圍成盡可能多的平方數，分數高者獲勝。
棋子分為三種：fino（法諾），vino（維諾），mimo（米諾）。其中法諾是五個正方形連成v形，即一個正方形的右邊和下邊都有兩個相同的正方形與之相連，維諾是三個正方形連成v形，米諾是一個正方形。
每方有五個法諾，七個維諾，三個米諾。
棋盤是十乘十正方形棋子。
在遊戲時，雙方輪流放置一個棋子，要先放完法諾才能開始放維諾，放完維諾才能放米諾。棋子之間不能重疊。
當一方不能合規落下一個棋子，則他將直接輸掉遊戲。
計分規則是，形成一個二乘二的矩形計4分，形成三乘三的矩形計9分，四乘四或五乘五等依次類推。同樣棋型可以重覆計分，比如二乘三矩形可計兩次4分，三乘三矩形可計四次4分和一次9分。同時棋盤上只要有一個正方形就計1分，則可認為每方只要落完棋子就有49分的基礎分（5*5+3*7+1*3=49）。
當一局結束後，雙方交換先後手再玩一局，之後統計兩局的總分，分高者獲勝。
三，控制說明
當輪到一方時，他的分數區的背景將變色，以表示當前輪到他行動。
法諾和維諾棋子有四個旋轉方向，等於是把棋子的框分成四個象限，當點擊其中一個象限，v的尖角就朝向它。
當點擊一個法諾或維諾棋子時，它將被選中，同時會朝向所點擊的象限方向。如果再次點擊相同的象限，則取消選取。
當點擊一個米諾棋子時，它將被選中，如果再次點擊則取消取。
當有一個棋子被選中時，點擊棋盤的一個格子，則這個棋子將落在所點擊的地方。如果是法諾或維諾則以v形尖角的格子為落子的地方。
當發生棋子重疊或超出棋盤邊界，則本次落子不能執行，並彈出2.4s的消息框提示。
在落子之後立即計分，分數將直接發生變化。
當一局結束後，彈出一個窗口（右上角有關閉叉），展示雙方得分，並詢問是否進行下一局交換先後手，或是結束遊戲。
四，工具欄
棋盤區的下方有一排工具欄，不要覆蓋到棋盤上。工具欄的按鈕有：回退、前進、AI設置、導出文本棋譜、下載svg、恢復窗口，自動旋轉。
每一個按鈕都是一個svg圖標。
目前除了回退和前進，其它的工具的功能暫時不用實現。
五，開始頁面
打開頁面時，有主標題，副標題，中英語言切換，規則介紹，開始按鈕。
主標題為「維諾廣場」（英文為Vino Square），副標題為「法諾、維諾、米諾在廣場上玩」（英文為Fino, Vino, Mino are playing on the square.）（英文需要你幫我修改以使其語法正確）。
當點擊語言切換，整個頁面和遊戲中的消息框等，都將把語言切換成相應語言。一開始默認是英文。
規則介紹將把前面的規則寫上，加入英文翻譯。
點開始遊戲按鈕則立即開始遊戲，第一局將是玩家一先手。
