rajukottedi/ludo-web-multiplayer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edited pawn positioning

Browse Source
This commit is contained in:
Wenszel 2021-04-30 11:35:30 +02:00
parent d4a317cb87
commit 7304922e86
3 changed files with 65 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Gameboard.jsx
View File

@ -43,13 +43,13 @@ const Gameboard = () => {
})
}
const checkWin = () => {
if(pawns.filter(pawn => pawn.color === 'red' && pawn.position === 88).length === 4){
if(pawns.filter(pawn => pawn.color === 'red' && pawn.position === 73).length === 4){
alert("Red Won")
}else if(pawns.filter(pawn => pawn.color === 'blue' && pawn.position === 88).length === 4){
}else if(pawns.filter(pawn => pawn.color === 'blue' && pawn.position === 79).length === 4){
alert("Blue Won")
}else if(pawns.filter(pawn => pawn.color === 'green' && pawn.position === 88).length === 4){
}else if(pawns.filter(pawn => pawn.color === 'green' && pawn.position === 85).length === 4){
alert("Green Won")
}else if(pawns.filter(pawn => pawn.color === 'yellow' && pawn.position === 88).length === 4){
}else if(pawns.filter(pawn => pawn.color === 'yellow' && pawn.position === 91).length === 4){
alert("Yellow Won")
}
}

59
src/components/game-board-components/Map.jsx
View File

@ -29,16 +29,16 @@ const Map = ({ pawns, nowMoving, rolledNumber }) => {
}else if(pawn.position !== pawn.basePos){
switch (pawn.color){
case 'red':
if(pawn.position + rolledNumber <= 72) return true;
if(pawn.position + rolledNumber <= 73) return true;
break;
case 'blue':
if(pawn.position + rolledNumber <= 77) return true;
if(pawn.position + rolledNumber <= 79) return true;
break;
case 'green':
if(pawn.position + rolledNumber <= 82) return true;
if(pawn.position + rolledNumber <= 85) return true;
break;
case 'yellow':
if(pawn.position + rolledNumber <= 87) return true;
if(pawn.position + rolledNumber <= 91) return true;
break;
}
}else{
@ -67,47 +67,62 @@ const Map = ({ pawns, nowMoving, rolledNumber }) => {
}
}
}
const getHintPawnPosition = (pawn) => {
const getHintPawnPosition = pawn => {
// Based on color (because specific color have specific base and end positions)
let { position } = pawn;
switch (context.color){
case 'red':
// When in base
if(position >= 0 && position <= 3){
if(position >= 0 && position <= 3) {
return 16;
// Ending move
}else if(position + rolledNumber === 72){
return 88;
// Next to end
}else if(position <= 66 && position + rolledNumber >= 67){
return position + rolledNumber + 1; // 1 is difference between last position on map and first on end
// Normal move
}else{
return position + rolledNumber;
}
case 'blue':
// When in base
if(position >= 4 && position <= 7){
return 55;
}else if(position < 67 && position + rolledNumber > 67){
return position + rolledNumber - 67 + 16
}else if(position <= 53 && position + rolledNumber >= 54){
console.log(71 + position + rolledNumber - 54)
return 71 + position + rolledNumber - 54;
// Next to red base
}else if(position <= 67 && position + rolledNumber > 67){
return position + rolledNumber - 52;
// Next to base
}else if(position <= 53 && position + rolledNumber >= 54){
return position + rolledNumber + 20;
// Normal move
}else{
return position + rolledNumber;
}
case 'green':
// When in base
if(position >= 8 && position <= 11){
return 42;
}else if(position+rolledNumber < 66 && (position + rolledNumber > 42 || position+rolledNumber <= 40)){
return position + rolledNumber;
// Next to red base
}else if(position <= 67 && position + rolledNumber > 67){
return position + rolledNumber - 52;
// Next to base
}else if(position <= 40 && position + rolledNumber >= 41){
return position + rolledNumber + 39;
// Normal move
}else{
return 76 - (position + rolledNumber - 40)
return position + rolledNumber;
}
case 'yellow':
// When in base
if(position >= 12 && position <= 15){
return 29;
}else if(position+rolledNumber < 66 && (position + rolledNumber > 29 || position+rolledNumber <= 27)){
return position + rolledNumber;
// Next to red base
}else if(position <= 67 && position + rolledNumber > 67){
return position + rolledNumber - 52;
// Next to base
}else if(position <= 27 && position + rolledNumber >= 28){
return position + rolledNumber + 58;
// Normal move
}else{
return 82 + (position + rolledNumber - 27)
return position + rolledNumber;
}
}
@ -149,10 +164,10 @@ const Map = ({ pawns, nowMoving, rolledNumber }) => {
const rerenderCanvas = () => {
const canvas = canvasRef.current;
const ctx = canvas.getContext('2d');
var image = new Image();
const image = new Image();
image.src = 'https://img-9gag-fun.9cache.com/photo/a8GdpYZ_460s.jpg';
image.onload = function() {
ctx.drawImage(image, 0 , 0);
ctx.drawImage(image, 0, 0);
pawns.forEach( (pawn, index) => {
if(nowMoving && rolledNumber && blinking && pawn.color === context.color && checkIfPawnCanMove(pawn)){
pawns[index].circle = paintPawn(ctx, positions[pawn.position].x, positions[pawn.position].y, 'white');

43
src/components/game-board-components/positions.js
View File

@ -1,6 +1,6 @@
const positions = [
// Red base
{x: 67, y: 67},
{x: 67, y: 67}, // 0
{x: 67, y: 116},
{x: 117, y: 67},
{x: 117, y: 116},
@ -12,7 +12,7 @@ const positions = [
// Green base
{x: 343, y: 343},
{x: 392, y: 392},
{x: 392, y: 343},
{x: 392, y: 343}, // 10
{x: 343, y: 392},
// Yellow base
{x: 343, y: 67},
@ -24,7 +24,7 @@ const positions = [
{x: 76, y: 200},
{x: 107, y: 200},
{x: 138, y: 200},
{x: 169, y: 200},
{x: 169, y: 200}, // 20
{x: 200, y: 169},
{x: 200, y: 138},
@ -33,10 +33,10 @@ const positions = [
{x: 200, y: 45},
{x: 200, y: 14},
// Top
{x: 230, y: 14}, //25
{x: 230, y: 14},
{x: 261, y: 14},
{x: 261, y: 45},
{x: 261, y: 76},
{x: 261, y: 76}, // 30
{x: 261, y: 107},
{x: 261, y: 138},
{x: 261, y: 169},
@ -48,19 +48,19 @@ const positions = [
{x: 414, y: 200},
{x: 445, y: 200},
// Right
{x: 445, y: 230},
{x: 445, y: 230}, // 40
{x: 445, y: 261},
{x: 414, y: 261},
{x: 383, y: 261},
{x: 352, y: 261},
{x: 321, y: 261},
{x: 291, y: 261}, //44
{x: 291, y: 261},
{x: 261, y: 291},
{x: 261, y: 322},
{x: 261, y: 353},
{x: 261, y: 384},
{x: 261, y: 384}, // 50
{x: 261, y: 414},
{x: 261, y: 445},
// Bottom
@ -73,44 +73,45 @@ const positions = [
{x: 200, y: 322},
{x: 200, y: 291},
{x: 169, y: 261},
{x: 138, y: 261}, //59
{x: 169, y: 261}, // 60
{x: 138, y: 261},
{x: 107, y: 261},
{x: 76, y: 261},
{x: 45, y: 261},
{x: 15, y: 261},
// Left
{x: 15, y: 231}, //64
{x: 15, y: 231}, // 66
// One behind red base
{x: 15, y: 200}, //65
{x: 15, y: 200}, //67
// Red end
{x: 45, y: 231}, //66
{x: 45, y: 231}, // 68
{x: 76, y: 231},
{x: 107, y: 231},
{x: 138, y: 231},
{x: 169, y: 231},
{x: 200, y: 231}, // 73
// Blue end
{x: 231, y: 445}, //71
{x: 231, y: 414},
{x: 231, y: 414}, // 74
{x: 231, y: 384},
{x: 231, y: 353}, //74
{x: 231, y: 353},
{x: 231, y: 322},
{x: 231, y: 291},
{x: 231, y: 260}, // 79
// Green end
{x: 414, y: 231}, // 77
{x: 414, y: 231}, // 80
{x: 383, y: 231},
{x: 352, y: 231},
{x: 321, y: 231},
{x: 290, y: 231},
{x: 259, y: 231}, // 85
// Yellow base
{x: 230, y: 15}, //82
{x: 230, y: 45},
{x: 230, y: 45}, // 86
{x: 230, y: 76},
{x: 230, y: 107},
{x: 230, y: 138},
{x: 230, y: 169}, //87
{x: -50, y: -50} // 88
{x: 230, y: 169},
{x: 230, y: 200}, // 91
];
export default positions;