Chips added, client-side oop added

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

@@ -0,0 +1,17 @@
+package com.alterdekim.game.component.game;
+
+import lombok.AllArgsConstructor;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+
+@Getter
+@Setter
+@AllArgsConstructor
+@NoArgsConstructor
+public class Chip {
+    private Long uid;
+    private Integer x;
+    private Integer y;
+    private String color;
+}

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

@@ -57,6 +57,7 @@ public class GameRoom {
             List<BoardTile> right = new ArrayList<>();
             List<BoardTile> bottom = new ArrayList<>();
             List<BoardTile> left = new ArrayList<>();
+
             for( int i = 0; i < 9; i++ ) {
                 top.add(new BoardTile(UUID.randomUUID().toString(), 2 + i, 1000, "", "/static/images/7up.png", "ffffff", "f5f5f5"));
             }
@@ -88,6 +89,8 @@ public class GameRoom {
             left.get(2).setStars("★★★");
             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")));
         } catch (JsonProcessingException e) {
             log.error(e.getMessage(), e);
         }

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

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

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

@@ -1,3 +1,74 @@
+class Chip {
+
+    constructor(obj1) {
+        this.obj = obj1;
+    }
+
+    get x() {
+        return this.obj.attr("data-x");
+    }
+
+    get y() {
+        return this.obj.attr("data-y");
+    }
+
+    get uid() {
+        return this.obj.attr("data-uid");
+    }
+
+    get color() {
+        return this.obj.attr("data-color");
+    }
+
+    set x(x) {
+        this.obj.attr("data-x", x);
+    }
+
+    set y(y) {
+        this.obj.attr("data-y", y);
+    }
+
+    set uid(uid) {
+        this.obj.attr("data-uid", uid);
+    }
+
+    set color(color) {
+        this.obj.attr("data-color", color);
+    }
+
+    get dom() {
+        return this.obj;
+    }
+}
+
+class Board {
+    constructor() {}
+
+    get chips() {
+        return this.board_chips;
+    }
+
+    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;
+
+const board = new Board();
+
 var socket = null;
 
 function disconnect() {
@@ -18,6 +89,12 @@ function sendMessage(message, type) {
 }
 
 $(document).ready(function() {
+     let chips = [];
+     $(".chip").each(function() {
+         chips.push(new Chip($(this)));
+     });
+     board.chips = chips;
+
      socket = new SockJS('/websocket');
 
      socket.onopen = function() {
@@ -48,9 +125,30 @@ function showMessage(message) {
         case 'ChangeBoardTileState':
             changeBoardState(JSON.parse(message.body));
             break;
+        case 'AssignChip':
+            assignChip(JSON.parse(message.body));
+            break;
     }
 }
 
+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);
+    }
+}
+
+function assignChip(body) {
+    let nc = board.chips.find((c) => c.uid == 0);
+    if( nc == undefined ) return;
+    nc.uid = body.uid;
+    nc.color = body.color;
+    nc.x = body.x;
+    nc.y = body.y;
+    refreshChips();
+}
+
 function changeBoardState(body) {
     let board_tile = $(".board_field[data-fid='" + body.uid + "']");
     $(board_tile).find(".cost").css("background-color", "#"+body.color);

src/main/resources/templates/game.html

@@ -208,11 +208,11 @@
 					</div>
 					<!-- <div class="chips"> -->
 						<!-- {262,55} {318,55} {375,55} -->
-					<div class="chip red" data-trow=0 data-tcol=0></div>
+					<div class="chip" data-x="0" data-y="0" data-uid="0"></div>
-					<div class="chip green" data-trow=0 data-tcol=0></div>
+					<div class="chip" data-x="0" data-y="0" data-uid="0"></div>
-					<div class="chip blue" data-trow=0 data-tcol=0></div>
+					<div class="chip" data-x="0" data-y="0" data-uid="0"></div>
-					<div class="chip purple" data-trow=0 data-tcol=0></div>
+					<div class="chip" data-x="0" data-y="0" data-uid="0"></div>
-					<div class="chip orange" data-trow=0 data-tcol=0></div>
+					<div class="chip" data-x="0" data-y="0" data-uid="0"></div>
 					<!-- </div> -->
 					<div class="up">
 						<div class="board_field corner">