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

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

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