Chips added, fields conversion added

pom.xml

@@ -16,8 +16,8 @@
     </parent>
 
     <properties>
-        <maven.compiler.source>1.8</maven.compiler.source>
+        <maven.compiler.source>11</maven.compiler.source>
-        <maven.compiler.target>1.8</maven.compiler.target>
+        <maven.compiler.target>11</maven.compiler.target>
         <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
     </properties>
 

src/main/java/com/alterdekim/game/component/game/BoardField.java

@@ -0,0 +1,24 @@
+package com.alterdekim.game.component.game;
+
+import lombok.AllArgsConstructor;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+
+@Getter
+@Setter
+@AllArgsConstructor
+@NoArgsConstructor
+public class BoardField {
+    private String uid;
+    private Integer x;
+    private Integer y;
+    private Integer cost;
+    private Integer stars;
+    private String img;
+    private String color;
+
+    public BoardTile toBoardTile() {
+        return new BoardTile(this.uid, 0, this.cost, "★".repeat(stars), this.img, this.color, "");
+    }
+}

src/main/java/com/alterdekim/game/component/game/GamePlayer.java

@@ -13,4 +13,5 @@ public class GamePlayer {
     private Long userId;
     private String displayName;
     private Integer money;
-}
+    private Chip chip;
+}

src/main/java/com/alterdekim/game/component/game/GameRoom.java

@@ -29,10 +29,15 @@ public class GameRoom {
 
     private UserServiceImpl userService;
 
+    private List<BoardField> boardFields;
+
     public GameRoom(List<RoomPlayer> players, UserServiceImpl userService) {
         this.userService = userService;
-        this.players = players.stream().map(p -> new GamePlayer(p.getUserId(), userService.findById(p.getUserId()).getDisplayName(), 0)).collect(Collectors.toList());
+        this.players = players.stream()
+                .map(p -> new GamePlayer(p.getUserId(), userService.findById(p.getUserId()).getDisplayName(), 0, new Chip(p.getUserId(), 0, 0, "#000000")))
+                .collect(Collectors.toList());
         this.socks = new ConcurrentHashMap<>();
+        this.boardFields = new ArrayList<>();
     }
 
     public void receiveMessage(BasicMessage message, WebSocketSession session) {
@@ -74,6 +79,8 @@ public class GameRoom {
                 left.add(new BoardTile(UUID.randomUUID().toString(), i, 2200, "", "/static/images/beeline.png", "000000", "f5f5f5"));
             }
 
+
+
             List<CornerTile> corners = new ArrayList<>();
             corners.add(new CornerTile("/static/images/start.png"));
             corners.add(new CornerTile("/static/images/injail.png"));
@@ -90,7 +97,20 @@ public class GameRoom {
             left.get(2).setOwnerColor("fffbbb");
             sendMessage(message.getUid(), WebSocketMessageType.ChangeBoardTileState, om.writeValueAsString(left.get(2)));
 
-            sendMessage(message.getUid(), WebSocketMessageType.AssignChip, om.writeValueAsString(new Chip(2L, 10, 15, "#ff0000")));
+            Chip red = new Chip(2L, 10, 9, "#ff0000");
+            Chip green = new Chip(3L, 10, 10, "#00ff00");
+            Chip blue = new Chip(4L, 0, 5, "#0000ff");
+            Chip white = new Chip(5L, 0, 5, "#ffffff");
+            Chip black = new Chip(6L, 0, 5, "#000000");
+
+            sendMessage(message.getUid(), WebSocketMessageType.AssignChip, om.writeValueAsString(red));
+            sendMessage(message.getUid(), WebSocketMessageType.AssignChip, om.writeValueAsString(green));
+            sendMessage(message.getUid(), WebSocketMessageType.AssignChip, om.writeValueAsString(blue));
+            sendMessage(message.getUid(), WebSocketMessageType.AssignChip, om.writeValueAsString(white));
+            sendMessage(message.getUid(), WebSocketMessageType.AssignChip, om.writeValueAsString(black));
+
+            red.setY(10);
+            sendMessage(message.getUid(), WebSocketMessageType.ChipMove, om.writeValueAsString(red));
         } catch (JsonProcessingException e) {
             log.error(e.getMessage(), e);
         }

src/main/java/com/alterdekim/game/websocket/message/WebSocketMessageType.java

@@ -5,5 +5,6 @@ public enum WebSocketMessageType {
     BoardGUI,
     InfoRequest,
     ChangeBoardTileState,
-    AssignChip
+    AssignChip,
+    ChipMove
 }

src/main/resources/static/javascript/game.js

@@ -1,5 +1,4 @@
 class Chip {
-
     constructor(obj1) {
         this.obj = obj1;
     }
@@ -42,7 +41,9 @@ class Chip {
 }
 
 class Board {
-    constructor() {}
+    constructor() {
+        this.board_chips = [];
+    }
 
     get chips() {
         return this.board_chips;
@@ -51,18 +52,6 @@ class Board {
     set chips(chips) {
         this.board_chips = chips;
     }
-
-    get fields() {
-        return this.board_fields;
-    }
-
-    set fields(fields) {
-        this.board_fields = fields;
-    }
-}
-
-class Field {
-
 }
 
 const top_offset = 18;
@@ -128,14 +117,116 @@ function showMessage(message) {
         case 'AssignChip':
             assignChip(JSON.parse(message.body));
             break;
+        case 'ChipMove':
+            chipMove(JSON.parse(message.body));
+            break;
     }
 }
 
+function clamp(number, min, max) {
+    return Math.max(min, Math.min(number, max));
+}
+
+function chipMove(body) {
+    let nc = board.chips.find((c) => c.uid == body.uid);
+    if( nc == undefined ) return;
+    nc.x = body.x;
+    nc.y = body.y;
+    refreshChips();
+}
+
+const corners = [
+    {x: 0, y: 0},
+    {x: 10, y: 0},
+    {x: 10, y: 10},
+    {x: 0, y: 10}
+];
+
+const chips_margins = [[],
+    [{top: 40, left: 20}],
+    [{top: 25, left: 20}, {top: 50, left: 20}],
+    [{top: 20, left: 20}, {top: 45, left: 20}, {top: 70, left: 20}],
+    [{top: 20, left: 20}, {top: 45, left: 28}, {top: 70, left: 20}, {top: 45, left: 8}],
+    [{top: 20, left: 20}, {top: 45, left: 25}, {top: 70, left: 20}, {top: 70, left: 10}, {top: 45, left: 10}]
+];
+
+function distinct(arr) {
+    for(let i = 0; i < arr.length; i++) {
+        let a = arr[i];
+        let cnt = 0;
+        for(let u = 0; u < arr.length; u++) {
+            if(a.x == arr[u].x && a.y == arr[u].y) {
+                cnt++;
+            }
+        }
+        if( cnt > 1 ) {
+            arr.splice(i, 1);
+            i = 0;
+        }
+    }
+    return arr;
+}
+
+function includes(pos) {
+    for(let i = 0; i < corners.length; i++) {
+        if( pos.x == corners[i].x && pos.y == corners[i].y ) {
+            return true;
+        }
+    }
+    return false;
+}
+
 function refreshChips() {
     for(let i = 0; i < board.chips.length; i++ ) {
         let chip = board.chips[i];
         if( chip.uid == 0 ) continue;
         $(chip.dom).css("background-color", chip.color);
+        let offsetY = (Math.max(chip.y-1, 0) * 55) + (chip.y * 2) + (clamp(chip.y, 0, 1) * 100) + 18;
+        let offsetX = (Math.max(chip.x-1, 0) * 55) + (chip.x * 2) + (clamp(chip.x, 0, 1) * 100);
+        $(chip.dom).animate({marginTop: offsetY, marginLeft: offsetX}, 1000);
+    }
+    let positions = distinct(board.chips.filter((c) => c.uid != 0).map(({ x, y }) => ({ x, y })));
+    for( let i = 0; i < positions.length; i++ ) {
+        let a = board.chips.filter((c) => c.x == positions[i].x && c.y == positions[i].y && c.uid != 0);
+        if( includes(positions[i]) ) {
+            switch(a.length) {
+                case 1:
+                    $(a[0].dom).animate({marginTop: "+=40", marginLeft: "+=40"}, 500);
+                    break;
+                case 2:
+                    $(a[0].dom).animate({marginTop: "+=20", marginLeft: "+=40"}, 500);
+                    $(a[1].dom).animate({marginTop: "+=60", marginLeft: "+=40"}, 500);
+                    break;
+                case 3:
+                    $(a[0].dom).animate({marginTop: "+=40", marginLeft: "+=15"}, 500);
+                    $(a[1].dom).animate({marginTop: "+=40", marginLeft: "+=40"}, 500);
+                    $(a[2].dom).animate({marginTop: "+=40", marginLeft: "+=65"}, 500);
+                    break;
+                case 4:
+                    $(a[0].dom).animate({marginTop: "+=15", marginLeft: "+=20"}, 500);
+                    $(a[1].dom).animate({marginTop: "+=15", marginLeft: "+=60"}, 500);
+                    $(a[2].dom).animate({marginTop: "+=55", marginLeft: "+=20"}, 500);
+                    $(a[3].dom).animate({marginTop: "+=55", marginLeft: "+=60"}, 500);
+                    break;
+                case 5:
+                    $(a[0].dom).animate({marginTop: "+=15", marginLeft: "+=20"}, 500);
+                    $(a[1].dom).animate({marginTop: "+=15", marginLeft: "+=60"}, 500);
+                    $(a[2].dom).animate({marginTop: "+=55", marginLeft: "+=20"}, 500);
+                    $(a[3].dom).animate({marginTop: "+=55", marginLeft: "+=60"}, 500);
+                    $(a[4].dom).animate({marginTop: "+=35", marginLeft: "+=40"}, 500);
+                    break;
+            }
+        } else {
+            if( positions[i].x > 0 && positions[i].x < 10 ) {
+                for(let u = 0; u < a.length; u++) {
+                    $(a[u].dom).animate({marginTop: "+=" + chips_margins[a.length][u].top, marginLeft: "+=" + chips_margins[a.length][u].left}, 500);
+                }
+            } else {
+                for(let u = 0; u < a.length; u++) {
+                    $(a[u].dom).animate({marginTop: "+=" + chips_margins[a.length][u].left, marginLeft: "+=" + chips_margins[a.length][u].top}, 500);
+                }
+            }
+        }
     }
 }
 
@@ -146,6 +237,7 @@ function assignChip(body) {
     nc.color = body.color;
     nc.x = body.x;
     nc.y = body.y;
+    $(nc.obj).css("display", "");
     refreshChips();
 }
 

src/main/resources/templates/game.html

@@ -208,11 +208,11 @@
 					</div>
 					<!-- <div class="chips"> -->
 						<!-- {262,55} {318,55} {375,55} -->
-					<div class="chip" data-x="0" data-y="0" data-uid="0"></div>
+					<div class="chip" data-x="0" data-y="0" data-uid="0" style="display: none;"></div>
-					<div class="chip" data-x="0" data-y="0" data-uid="0"></div>
+					<div class="chip" data-x="0" data-y="0" data-uid="0" style="display: none;"></div>
-					<div class="chip" data-x="0" data-y="0" data-uid="0"></div>
+					<div class="chip" data-x="0" data-y="0" data-uid="0" style="display: none;"></div>
-					<div class="chip" data-x="0" data-y="0" data-uid="0"></div>
+					<div class="chip" data-x="0" data-y="0" data-uid="0" style="display: none;"></div>
-					<div class="chip" data-x="0" data-y="0" data-uid="0"></div>
+					<div class="chip" data-x="0" data-y="0" data-uid="0" style="display: none;"></div>
 					<!-- </div> -->
 					<div class="up">
 						<div class="board_field corner">