Witam, postanowiłem stworzyć kopię gry monopoly w przeglądarce, lecz dobrą chwilę się męczyłem, aby dojść do obecnego stanu planszy, która i tak nie jest idealna. Zrobiłem ją za pomocą CSS grid oraz transform: rotate();. Struktura jest taka, że mamy planszę oraz lewą i prawą część planszy, które zawierają po 2 narożne pola oraz 9 normalnych, a część górna i dolna zawierają same 9 zwykłych, ponieważ nie wiedziałem jak to inaczej zrobić. Rotate jest zrobiony dla dużych przezroczystych pól wielkości planszy do gry, na których górze są pola wewnątrz kolejnego diva. I mam następujące pytania:
1. Czy jest jakiś lepszy i łatwiejszy sposób na zrobienie tego?
2. Dlaczego kiedy dam okno przeglądarki z planszą na normalnej szerokości, to na górnym divie robi się po jednej stronie ok. 1px odstęp po lewej stronie?(widać to po nadaniu background-color na .fields-left) - w przeglądarce na pół ekranu nie ma tego problemu, a szerokość planszy jest podana w px, więc nie rozumiem, dlaczego w zależności od szerokości przeglądarki się zmienia.
3. Czy ustawianie tekstu tak jak na polu start jest dobrym pomysłem?
kod:
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="script.js" defer></script>
</head>
<body>
<div class="board">
<div class="big-field-left">
<div class="fields-left">
<div class="start-field">
<div class="start-field-inside">COLLECT 200$ SALARY AS YOU PASS</div>
</div>
<div class="normal-field1 normal-field-left"></div>
<div class="normal-field2 normal-field-left"></div>
<div class="normal-field3 normal-field-left"></div>
<div class="normal-field4 normal-field-left"></div>
<div class="normal-field5 normal-field-left"></div>
<div class="normal-field6 normal-field-left"></div>
<div class="normal-field7 normal-field-left"></div>
<div class="normal-field8 normal-field-left"></div>
<div class="normal-field9 normal-field-left"></div>
<div class="jail-field"></div>
</div>
</div>
<div class="big-field-top">
<div class="fields-top">
<div class="normal-field10 normal-field-top"></div>
<div class="normal-field11 normal-field-top"></div>
<div class="normal-field12 normal-field-top"></div>
<div class="normal-field13 normal-field-top"></div>
<div class="normal-field14 normal-field-top"></div>
<div class="normal-field15 normal-field-top"></div>
<div class="normal-field16 normal-field-top"></div>
<div class="normal-field17 normal-field-top"></div>
<div class="normal-field18 normal-field-top"></div>
</div>
</div>
<div class="big-field-right">
<div class="fields-right">
<div class="parking-field"></div>
<div class="normal-field19 normal-field-right"></div>
<div class="normal-field20 normal-field-right"></div>
<div class="normal-field21 normal-field-right"></div>
<div class="normal-field22 normal-field-right"></div>
<div class="normal-field23 normal-field-right"></div>
<div class="normal-field24 normal-field-right"></div>
<div class="normal-field25 normal-field-right"></div>
<div class="normal-field26 normal-field-right"></div>
<div class="normal-field27 normal-field-right"></div>
<div class="policeman-field"></div>
</div>
</div>
<div class="big-field-bottom">
<div class="fields-bottom">
<div class="normal-field28 normal-field-bottom"></div>
<div class="normal-field29 normal-field-bottom"></div>
<div class="normal-field30 normal-field-bottom"></div>
<div class="normal-field31 normal-field-bottom"></div>
<div class="normal-field32 normal-field-bottom"></div>
<div class="normal-field33 normal-field-bottom"></div>
<div class="normal-field34 normal-field-bottom"></div>
<div class="normal-field35 normal-field-bottom"></div>
<div class="normal-field36 normal-field-bottom"></div>
</div>
</div>
</div>
</body>
</html>
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body
{
background-color: #303030;
display: flex;
justify-content: center;
}
.board
{
width: 715px;
height: 715px;
background-color: red;
position: relative;
}
.normal-field-left, .normal-field-top, .normal-field-right, .normal-field-bottom
{
border: 2px solid black;
}
.big-field-left, .big-field-top, .big-field-right, .big-field-bottom
{
width: 100%;
height: 100%;
position: absolute;
}
.fields-left, .fields-top, .fields-right, .fields-bottom
{
width: 100%;
height: 110px;
background-color: yellow;
display: grid;
}
.start-field, .jail-field, .parking-field, .policeman-field
{
height: 100%;
background-color: pink;
border: 2px solid black;
}
.big-field-left
{
transform: rotate(270deg);
}
.big-field-top, .big-field-bottom
{
display: grid;
justify-items: center;
}
.big-field-right
{
transform: rotate(90deg);
}
.big-field-bottom
{
transform: rotate(180deg);
}
.fields-left, .fields-right
{
grid-template-columns: 110px 55px 55px 55px 55px 55px 55px 55px 55px 55px 110px;
}
.fields-top, .fields-bottom
{
width: 495px;
grid-template-columns: 55px 55px 55px 55px 55px 55px 55px 55px 55px;
}
.fields-bottom
{
transform: translateX(0px);
}
.normal-field-left, .normal-field-top, .normal-field-right, .normal-field-bottom, .start-field, .jail-field, .parking-field, .policeman-field
{
background-color: hsl(127.2,33.33%,85.29%);
}
.start-field-inside
{
width: 100%;
height: 100%;
transform: rotate(135deg) translateY(15px);
text-align: center;
}
