diff --git a/src/components/Gameboard.jsx b/src/components/Gameboard.jsx index 6538fcf..ef1e460 100644 --- a/src/components/Gameboard.jsx +++ b/src/components/Gameboard.jsx @@ -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") } } diff --git a/src/components/game-board-components/Map.jsx b/src/components/game-board-components/Map.jsx index 928f416..90f88cb 100644 --- a/src/components/game-board-components/Map.jsx +++ b/src/components/game-board-components/Map.jsx @@ -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'); diff --git a/src/components/game-board-components/positions.js b/src/components/game-board-components/positions.js index 66bcc23..c54597b 100644 --- a/src/components/game-board-components/positions.js +++ b/src/components/game-board-components/positions.js @@ -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: 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: 76}, + {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; \ No newline at end of file