Вопрос:

Как сделать монопольную доску, используя для этого разные части?

javascript html css

31 просмотра

1 ответ

23512 Репутация автора

Я пытаюсь создать монопольное правление. Теперь у меня есть строки / столбцы мест и центр в виде отдельных элементов в строке. Что я хочу сделать, это установить два ряда и столбца с каждой стороны от центра и сделать настоящую доску.

const qs = str => document.querySelector(str);
const qsa = str => document.querySelectorAll(str);
const ce = (str, props) => {
  let elm = document.createElement(str);
  if (props) {
    for (let k in props) {
      elm[k] = props[k]
    }
  }
  return elm;
}


const main = qs('#main')


const board = [{
    toBuy: false,
    isRegular: false,
  },
  ...convertToObjects([
    'Mardan brown 60 2,10,30,90,160,250',
    'cm',
    'Quetta brown 60 4,30,60,180,320,450',
    'incomeTax 100',
    'Airport con1 200 25',
    'Mansehra blue 100 6,30,90,270,400,550',
    'ch',
    'Swat blue blue 100 6,30,90,270,400,550',
    'Abbottabad blue 120 8,40,100,300,450,600'
  ]),
  {
    name: 'Just visiting'
  },

  ...convertToObjects([
    'Peshawar pink 140 10,50,150,450,625,750',
    'Water-Works con2 150',
    'Mardan pink 140 10,50,150,450,625,750',
    'Swabi pink 160 12,60,180,500,700,900',
    'Railway con1 200 25',
    'Haripur orange 180 14,70,200,550,750,950',
    'cm',
    'Rawalpindi orange 180 14,70,200,550,750,950',
    'Islamabad orange 200 14,70,200,550,750,950',
  ]),
  {
    name: 'Free parking'
  },
  ...convertToObjects([
    'Faisalabad red 220 18,90,250,700,875,1050',
    'ch',
    'Sialkot red 220 18,90,250,700,875,1050',
    'Lahore red 220 18,90,250,700,875,1050',
    'Butstop con1 200 25',
    'Multan yellow 260 22,110,330,800,975,1150',
    'Bhawalpur yellow 260 22,110,330,800,975,1150',
    'Electric-Company con2 150',
    'Sibi yellow 260 22,110,330,800,975,1150',
  ]),
  {
    name: 'Jail'
  },
  ...convertToObjects([
    'Hunza green 300 26,130,390,900,1100,1275',
    'Chitral green 300 26,130,390,900,1100,1275',
    'cm',
    'Kashmir green 300 26,130,390,900,1100,1275',
    'Port con1 200',
    'ch',
    'Hyderabad purple 350 35,175,500,1100,1300,1500',
    'incomeTax 100',
    'Karachi purple 400 50,200,600,1400,1700,2000'
  ]),

]

function convertToObjects(arr, sets) {
  return arr.map(x => {
    let obj = {
      toBuy: false,
      isRegular: false
    }
    if (x === 'cm') {
      return {
        ...obj,
        name: 'Community Chest',

      }
    } else if (x === 'ch') {
      return {
        ...obj,
        name: 'Chance'
      }
    } else if (x.startsWith('incomeTax')) {
      return {
        ...obj,
        name: 'Income Tax',
        secondText: `${x.split(' ')[1]}`
      }
    } else {
      let [name, setName, price, rents] = x.split(' ')
      if (rents) {
        rents = rents.split(',')
        return {
          toBuy: true,
          isRegular: true,
          name,
          setName,
          price,
          rents,
          motergage: Math.floor(price / 2),
          owner: -1,
          isMotergaged: false,

        }
      } else return {
        toBuy: true,
        isRegular: true,
        name,
        setName,
        price,
        motergage: Math.floor(price / 2),
        owner: -1,
        isMotergaged: false,

      }
    }
  })
}
const sets = ['brown', 'blue', 'pink', 'orange', 'red', 'yellow', 'green', 'purple']

board.forEach((x, i) => {
  const block = ce('div', {
    className: 'block'
  })
  if (i % 10 === 0) {
    block.classList.add('corner')
  }
  if (sets.includes(x.setName)) {
    let setColor = ce('div', {
      className: 'set-color'
    });
    setColor.style.backgroundColor = x.setName;
    block.appendChild(setColor);
  }
  if (x.toBuy || x.secondText) {
    const blockPrice = ce('div', {
      className: 'block-price',
      innerHTML: '$' + (x.price || x.secondText)
    });
    block.appendChild(blockPrice);
  }
  const blockText = ce('div', {
    className: 'block-text',
    innerHTML: x.name
  });

  block.appendChild(blockText);
  x.element = block;


})

for (let i = 0; i < 4; i++) {
  const row = ce('div', {
    className: 'row',
    id: 'row' + i
  });
  for (let j = 9; j >= 0; j--) {
    console.log()
    row.appendChild(board[(i * 10) + j].element);
  }
  main.appendChild(row)
}
.block {
  height: 150px;
  width: 110px;
  font-size: 17px;
  text-align: center;
  background: #cce3c7;
  font-family: cursive;
  position: relative;
  border: 2px solid black;
  display: inline-block;
}

.corner {
  width: 150px;
}

.block-text {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%)
}

.block-price {
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%)
}

.set-color {
  width: 100%;
  height: 20px;
  border-bottom: 2px solid;
}
<table id="main">
  <img src="https://i.imgur.com/9oGnIa4.jpg" />
</table>

Я хочу выглядеть как настоящая монопольная доска. Вы можете проверить этовведите описание изображения здесь

Примечание: не беспокойтесь о изображениях реальной платы, которых нет у меня. Я просто хочу выровнять эти ряды вокруг центра.

Автор: Maheer Ali Источник Размещён: 11.08.2019 06:33

Ответы (1)


0 плюса

11 Репутация автора

Положение: абсолютное, сверху и слева от каждой строки

Вы можете использовать как заголовок, абсолютное положение и направлять строки сверху и слева. Вы также можете попробовать это на холсте.

Я поместил это в код, чтобы вы могли видеть.

const qs = str => document.querySelector(str);
const qsa = str => document.querySelectorAll(str);
const ce = (str, props) => {
  let elm = document.createElement(str);
  if (props) {
    for (let k in props) {
      elm[k] = props[k]
    }
  }
  return elm;
}


const main = qs('#main')


const board = [{
    toBuy: false,
    isRegular: false,
  },
  ...convertToObjects([
    'Mardan brown 60 2,10,30,90,160,250',
    'cm',
    'Quetta brown 60 4,30,60,180,320,450',
    'incomeTax 100',
    'Airport con1 200 25',
    'Mansehra blue 100 6,30,90,270,400,550',
    'ch',
    'Swat blue blue 100 6,30,90,270,400,550',
    'Abbottabad blue 120 8,40,100,300,450,600'
  ]),
  {
    name: 'Just visiting'
  },

  ...convertToObjects([
    'Peshawar pink 140 10,50,150,450,625,750',
    'Water-Works con2 150',
    'Mardan pink 140 10,50,150,450,625,750',
    'Swabi pink 160 12,60,180,500,700,900',
    'Railway con1 200 25',
    'Haripur orange 180 14,70,200,550,750,950',
    'cm',
    'Rawalpindi orange 180 14,70,200,550,750,950',
    'Islamabad orange 200 14,70,200,550,750,950',
  ]),
  {
    name: 'Free parking'
  },
  ...convertToObjects([
    'Faisalabad red 220 18,90,250,700,875,1050',
    'ch',
    'Sialkot red 220 18,90,250,700,875,1050',
    'Lahore red 220 18,90,250,700,875,1050',
    'Butstop con1 200 25',
    'Multan yellow 260 22,110,330,800,975,1150',
    'Bhawalpur yellow 260 22,110,330,800,975,1150',
    'Electric-Company con2 150',
    'Sibi yellow 260 22,110,330,800,975,1150',
  ]),
  {
    name: 'Jail'
  },
  ...convertToObjects([
    'Hunza green 300 26,130,390,900,1100,1275',
    'Chitral green 300 26,130,390,900,1100,1275',
    'cm',
    'Kashmir green 300 26,130,390,900,1100,1275',
    'Port con1 200',
    'ch',
    'Hyderabad purple 350 35,175,500,1100,1300,1500',
    'incomeTax 100',
    'Karachi purple 400 50,200,600,1400,1700,2000'
  ]),

]

function convertToObjects(arr, sets) {
  return arr.map(x => {
    let obj = {
      toBuy: false,
      isRegular: false
    }
    if (x === 'cm') {
      return {
        ...obj,
        name: 'Community Chest',

      }
    } else if (x === 'ch') {
      return {
        ...obj,
        name: 'Chance'
      }
    } else if (x.startsWith('incomeTax')) {
      return {
        ...obj,
        name: 'Income Tax',
        secondText: `${x.split(' ')[1]}`
      }
    } else {
      let [name, setName, price, rents] = x.split(' ')
      if (rents) {
        rents = rents.split(',')
        return {
          toBuy: true,
          isRegular: true,
          name,
          setName,
          price,
          rents,
          motergage: Math.floor(price / 2),
          owner: -1,
          isMotergaged: false,

        }
      } else return {
        toBuy: true,
        isRegular: true,
        name,
        setName,
        price,
        motergage: Math.floor(price / 2),
        owner: -1,
        isMotergaged: false,

      }
    }
  })
}
const sets = ['brown', 'blue', 'pink', 'orange', 'red', 'yellow', 'green', 'purple']

board.forEach((x, i) => {
  const block = ce('div', {
    className: 'block'
  })
  if (i % 10 === 0) {
    block.classList.add('corner')
  }
  if (sets.includes(x.setName)) {
    let setColor = ce('div', {
      className: 'set-color'
    });
    setColor.style.backgroundColor = x.setName;
    block.appendChild(setColor);
  }
  if (x.toBuy || x.secondText) {
    const blockPrice = ce('div', {
      className: 'block-price',
      innerHTML: '$' + (x.price || x.secondText)
    });
    block.appendChild(blockPrice);
  }
  const blockText = ce('div', {
    className: 'block-text',
    innerHTML: x.name
  });

  block.appendChild(blockText);
  x.element = block;


})

for (let i = 0; i < 4; i++) {
  const row = ce('div', {
    className: 'row',
    id: 'row' + i
  });
  for (let j = 9; j >= 0; j--) {
    console.log()
    row.appendChild(board[(i * 10) + j].element);
  }
  main.appendChild(row)
}
.block {
  height: 150px;
  width: 110px;
  font-size: 17px;
  text-align: center;
  background: #cce3c7;
  font-family: cursive;
  position: relative;
  border: 2px solid black;
  display: inline-block;
}

.corner {
  width: 150px;
}

.block-text {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%)
}

.block-price {
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%)
}

.set-color {
  width: 100%;
  height: 20px;
  border-bottom: 2px solid;
}
.board {
      padding: 200px;
}
.center-game{
  height: 1028px;
}
#row0{
    width: 1184px;
  position: absolute;
    top: 50px;
    transform: rotate(180deg);
    left: 56px;
}
#row1{
    width: 1184px;
      position: absolute;
    top: 1235px;
    transform: rotate(0deg);
    left: 208px;
}
#row2{
    width: 1184px;
      position: absolute;
    top: 720px;
    transform: rotate(90deg);
    left: -460px;
}
#row3{
      width: 1184px;
         position: absolute;
    top: 566px;
    transform: rotate(270deg);
    left: 724px;

}
<table id="main">
  <div class="board">
      <img class="center-game" src="https://i.imgur.com/9oGnIa4.jpg" />
  </div>
</table>

Автор: Omer Размещён: 11.08.2019 07:22
Вопросы из категории :
32x32