Chips added, fields conversion added

This commit is contained in:
Michael Wain 2024-03-07 02:26:15 +03:00
parent c93a40def1
commit e56ca760b6
7 changed files with 163 additions and 25 deletions

View File

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

View File

@ -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, "");
}
}

View File

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

View File

@ -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);
}

View File

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

View File

@ -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();
}

View File

@ -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"></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"></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" style="display: none;"></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" style="display: none;"></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">