update: Added test data and put corners to the right place

src/app/room/_components/Board/index.tsx

@@ -1,17 +1,37 @@
+'use client'
+
+import React from 'react';
+
 import dataBoardTest from "@/data/boards/test";
 import TileProperty from "../Tiles/TileProperty";
+import TileCorner from "../Tiles/TileCorner";
+
+
+// Given 40total tiles, there should be 4rows, each row containing 9tiles. Before the row, the tile should be outside and after the row finishesh, the tile should be outside
 
 
 function Board() {
+ console.log(dataBoardTest);
+
+ const renderTile = (item, index) => {
+ switch (item.corner) {
+ case 'corner':
+ return <TileCorner key={index} />;
+ case 'special':
+ // return <TileSpecial key={index} />;
+ return <div>Special</div>
+ default:
+ return <TileProperty key={index} tile={item} />;
+ }
+ };
+
  return (
  <div className="board border border-red-600">
- {dataBoardTest.map((item, index) => {
- return (
- <TileProperty tile={item} />
- )
- })}
+ {dataBoardTest.map((item, index) => renderTile(item, index))}
+ {/* {renderTilesWithRows()} */}
  </div>
- )
+ );
 }
 
 export default Board;
+

src/data/boards/classic.tsx

@@ -15,6 +15,10 @@ class Board {
  movePlayerTo(index:number) {
 
  }
+
+ renderBoard() {
+
+ }
 }
 
 // - If user wants to add a new tile, I will select all arrays inside, and add an empty tile to X index
@@ -52,19 +56,19 @@ class Board {
 // }
 // ]
 
-// const dataBoardClassic: any = [
+const dataBoardClassic: any = [
  {
- ...dataProperties.brazil,
- ...dataProperties.brazil.properties[0],
+ ...dataProperties.brazil.cities.salvador,
  },
  {
  type: "communityChest",
  name: "Tresure",
  icon: "./images/chest.png"
  },
  {
- ...dataProperties.brazil,
- ...dataProperties.brazil.properties[1],
+ // ...dataProperties.brazil,
+ // ...dataProperties.brazil.properties[1],
+ ...dataProperties.brazil.cities.rio,
  },
  {
  name: "Income Tax",

src/data/boards/test.tsx

@@ -1,54 +1,66 @@
 import dataProperties from "../properties";
 
-const dataBoardTest = [
+let dataBoardTest:any = [
  {
- ...dataProperties.brazil,
- ...dataProperties.brazil.properties[0],
+ ...dataProperties.brazil.cities.salvador,
  },
  {
- ...dataProperties.brazil,
- ...dataProperties.brazil.properties[1],
+ ...dataProperties.brazil.cities.rio,
  },
  {
- ...dataProperties.israel,
- ...dataProperties.israel.properties[0],
+ ...dataProperties.israel.cities.telAviv,
  },
  {
- ...dataProperties.israel,
- ...dataProperties.israel.properties[1],
+ ...dataProperties.israel.cities.haifa,
  },
  {
- ...dataProperties.israel,
- ...dataProperties.israel.properties[2],
+ ...dataProperties.israel.cities.jerusalem,
  },
  {
- ...dataProperties.italy,
- ...dataProperties.italy.properties[0],
+ ...dataProperties.italy.cities.venice,
  },
  {
- ...dataProperties.italy,
- ...dataProperties.italy.properties[1],
+ ...dataProperties.italy.cities.milan,
  },
  {
- ...dataProperties.italy,
- ...dataProperties.italy.properties[2],
+ ...dataProperties.italy.cities.rome,
  },
  {
- ...dataProperties.germany,
- ...dataProperties.germany.properties[0],
+ ...dataProperties.germany.cities.frankfurt,
  },
  {
- ...dataProperties.germany,
- ...dataProperties.germany.properties[1],
+ ...dataProperties.germany.cities.munich,
  },
  {
- ...dataProperties.germany,
- ...dataProperties.germany.properties[2],
+ ...dataProperties.germany.cities.berlin,
  },
  {
- ...dataProperties.usa,
- ...dataProperties.usa.properties[0],
+ ...dataProperties.usa.cities.sanFrancisco,
  },
 ]
 
+function insertAtIndexAndShift(index, element) {
+ dataBoardTest.splice(index, 0, element);
+}
+
+insertAtIndexAndShift(0, {
+ name: "Start",
+ corner: true
+});
+
+insertAtIndexAndShift(4, {
+ name: "Prison",
+ corner: true,
+});
+
+insertAtIndexAndShift(8, {
+ name: "Vaccation",
+ corner: true,
+});
+
+insertAtIndexAndShift(12, {
+ name: "Go To Prison",
+ corner: true,
+});
+
 export default dataBoardTest;

src/data/companies.tsx

@@ -1,14 +1,14 @@
 const dataCompanies = {
  price: 150,
  rent: [4, 10],
- properties: [
- {
+ properties: {
+ electric:{
  name: "Electric Company"
  },
- {
+ water: {
  name: "Water Company"
  }
- ]
+ }
 }
 
 export default dataCompanies;