diff --git a/src/main/java/com/alterdekim/game/component/game/Chip.java b/src/main/java/com/alterdekim/game/component/game/Chip.java new file mode 100644 index 0000000..67f01c0 --- /dev/null +++ b/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; +} diff --git a/src/main/java/com/alterdekim/game/component/game/GameRoom.java b/src/main/java/com/alterdekim/game/component/game/GameRoom.java index 4a83222..9f54606 100644 --- a/src/main/java/com/alterdekim/game/component/game/GameRoom.java +++ b/src/main/java/com/alterdekim/game/component/game/GameRoom.java @@ -57,6 +57,7 @@ public class GameRoom { List right = new ArrayList<>(); List bottom = new ArrayList<>(); List 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); } diff --git a/src/main/java/com/alterdekim/game/websocket/message/WebSocketMessageType.java b/src/main/java/com/alterdekim/game/websocket/message/WebSocketMessageType.java index 49f96b8..e74e8fb 100644 --- a/src/main/java/com/alterdekim/game/websocket/message/WebSocketMessageType.java +++ b/src/main/java/com/alterdekim/game/websocket/message/WebSocketMessageType.java @@ -4,5 +4,6 @@ public enum WebSocketMessageType { PlayersList, BoardGUI, InfoRequest, - ChangeBoardTileState + ChangeBoardTileState, + AssignChip } diff --git a/src/main/resources/static/javascript/game.js b/src/main/resources/static/javascript/game.js index 332fd0c..2b2a0a7 100644 --- a/src/main/resources/static/javascript/game.js +++ b/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); diff --git a/src/main/resources/templates/game.html b/src/main/resources/templates/game.html index 522ea50..1cd6e8b 100644 --- a/src/main/resources/templates/game.html +++ b/src/main/resources/templates/game.html @@ -208,11 +208,11 @@ -
-
-
-
-
+
+
+
+
+