• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Tworzenie planszy monopoly CSS - czy dobrze to robię?

VPS Starter Arubacloud
+1 głos
146 wizyt
pytanie zadane 26 sierpnia 2021 w HTML i CSS przez Doge Gaduła (3,420 p.)

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;
}

 

1 odpowiedź

+2 głosów
odpowiedź 26 sierpnia 2021 przez mb-dir Mądrala (6,710 p.)
wybrane 27 sierpnia 2021 przez Doge
 
Najlepsza

Witaj

Czy jest jakiś lepszy i łatwiejszy sposób na zrobienie tego?

Moim zdaniem siatka grida idealnie nadaje się do takiego layout'u. Tutaj mój przykład, zastosowałem w nim grid-template-areas, tak jest dla mnie czytelniej, ty nie musisz, ty w swoim przykładzie do układu pól stosujesz również grid'a, ja pobawiłem się z flexem, nie mozna okreslic co jest lepsze, a co gorsze. Dla mnie to co napisałem jest bardziej zrozumiałe(ale w koncu ja to pisałem, więc to nie jest żadne zaskoczenie), porównaj sobie te layout'y, możesz również wpisać w google fraze "Monopoly layout css", albo "Monopoly board layout css", czy cos w tym stylu, podejrzewam, że każde z rozwiązań które podsunie Ci wyszukiwarka będzie się nieco różniło, więc bedziesz mógł zdecydować, które z nich jest najbardziej dla ciebie zrozumiałe i proste.

Co do drugiego pytania, to jakbys mógł screena podesłac, bo niczego nie zauważyłem

Jeżeli chodzi o trzecie pytanie, to tak, do "rotowania" elementu służy właściwość rotate, i jeżeli taki jest layout, to nie widze przeszkód w takim pochyleniu tekstu

 

 

komentarz 27 sierpnia 2021 przez Doge Gaduła (3,420 p.)
Jak pododawałem trochę właściwości to już nie robi się taka 1px przerwa, a niestety nie mam systemu kontroli wersji, więc nie mogę tego cofnąć.
komentarz 27 sierpnia 2021 przez Doge Gaduła (3,420 p.)

@Jerzy Klemens Werner, Znalazłem właśnie o co chodzi z przesuwaniem się wszystkiego przy zmianie okna na pół monitora - chodzi o firefoxa, w którym robi się problem z szerokością oraz wysokością, ponieważ w chromie wszystko jest normalnie. W jaki sposób mogę temu zapobiec?

Podobne pytania

0 głosów
1 odpowiedź 399 wizyt
0 głosów
1 odpowiedź 202 wizyt
pytanie zadane 2 listopada 2020 w C# przez PanPrezes Obywatel (1,520 p.)
0 głosów
5 odpowiedzi 390 wizyt
pytanie zadane 7 listopada 2015 w C i C++ przez aki3130pl Nowicjusz (140 p.)

92,839 zapytań

141,780 odpowiedzi

320,855 komentarzy

62,171 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...