1
\$\begingroup\$

I am creating a Monopoly board game using HTML, CSS, PHP, JS and jQuery. I am doing this to develop my web development skills. I have cut the project into sections, so this question will only deal with creating the board.

JSFiddle

The board size is determined by the sizes of the 40 Monopoly positions class name .box. The problem is in deciding the optimum size for these positions.

This is the current makeup:

  • Title
  • Runway : When a player lands on that position a 12x12px star will be displayed.
  • Body: This a 32px area where icons are placed if icons are used
  • Price: This displays the purchase price in case unowned, or rent if owned, or taxes.

I don't want the user to scroll at all. Users with a screen size lower than 1024x768 are not supported in this case. How would you size the 40 positions for users with a 1024x768 screen size?

Note: Don't worry about the lack of iteration with PHP that can come later. We first need to know what the HTML should look like then we can automate it later.

Image of a real Monopoly board

/*******************************
Elements
********************************/
span{
	display: block;
	font: bold 10px "Arial", "Helvetica", sans-serif;
	color: #000;
	text-align: center;
}
/*******************************
Board Structure
********************************/
.board {
    background: #EBEBE0;
    width: 808px;
}
.row{
    background: #fff;  
	float: left;
	margin-bottom: 2px;
}
#row1, #row3 {
	height: 82px;
    width: 788px;
}
#row2 {
	width: 788px;
	
}
.col1{
	float: left;
	width: 75px;
}
.col3{
	float: right;
	margin-right: 2px;
	width: 75px;
}
/*******************************
Board positions - Box
********************************/
.box {
    background: #fff;
    border: 1px solid #000;
	float: left;
	height: 80px;
	width: 75px;
}
div #box-x:last-child {
    margin-right: 0;
}
#box-x{
	margin-right: 2px;
}
#box-y{
	margin-bottom: 2px;
}
div #box-y:last-child {
    margin-bottom: 0;
}
/*******************************
Board positions - Title
********************************/
.title{
	background: black;
	border-bottom: 1px solid #000;
	line-height: 16px;
}
#blanktitle{
	background: none;
	border-color: #fff;
}
#pink{
	background: #ff4f72;
}
/*******************************
Board positions - Runway
********************************/
.runway{
	background: aliceblue;
	height: 12px;
	margin: 2px 0 2px 0;
}
.piece{
	background-image:url('../img/piece2.png');
	float: left;
	height:12px;
	margin-left: 2px;
	width: 12px;
}
/*******************************
Board positions - Body
********************************/
.cardbody{
	background: beige;
	height:32px;
}
.icons{
	background-repeat: no-repeat;
	width: 32px;
	height: 32px;
	margin: 0 auto 0 auto;
}
#airport{
	
}
#chest{
	
}

/*******************************
Board positions - Price
********************************/
.price{
	line-height: 12px;
	margin: 2px 0 2px 0;
	text-align: center;
	width: 100%;
}
<body>
<div class="board">
    <div class="row" id="row1">
        <div class="box" id="box-x">
			<span class="title" id="pink">Amsterdam</span>
			<div class="runway">
				
			</div>
			<div class="cardbody">
			</div>
			<span class="price"></span>
		</div>
        <div class="box" id="box-x">
			<span class="title" id="blanktitle"> Schiphol</span>
			<div class="runway">
				
			</div>
			<div class="cardbody">
				<span class="icons" id="airport"></span>
			</div>
			<span class="price"> </span>
		</div>
        <div class="box" id="box-x"></div>
        <div class="box" id="box-x"></div>
        <div class="box" id="box-x"></div>
        <div class="box" id="box-x"></div>
        <div class="box" id="box-x"></div>
        <div class="box" id="box-x"></div>
        <div class="box" id="box-x"></div>
        <div class="box" id="box-x"></div>
    </div>
	<div class="row" id="row2">
		<div class="col1">
			<div class="box" id="box-y"></div>
			<div class="box" id="box-y"></div>
			<div class="box" id="box-y"></div>
			<div class="box" id="box-y"></div>
			<div class="box" id="box-y"></div>
			<div class="box" id="box-y"></div>
			<div class="box" id="box-y"></div>
			<div class="box" id="box-y"></div>
		</div>
		<div class="col3">
			<div class="box" id="box-y"></div>
			<div class="box" id="box-y"></div>
			<div class="box" id="box-y"></div>
			<div class="box" id="box-y"></div>
			<div class="box" id="box-y"></div>
			<div class="box" id="box-y"></div>
			<div class="box" id="box-y"></div>
			<div class="box" id="box-y"></div>
		</div>
	</div>
	<div class="row" id="row3">
        <div class="box" id="box-x">
			<span class="title" id="pink">Amsterdam</span>
			<div class="runway">
				
			</div>
			<div class="cardbody">
			</div>
			<span class="price"></span>
		</div>
        <div class="box" id="box-x">
			<span class="title" id="blanktitle"> Schiphol</span>
			<div class="runway">
				
			</div>
			<div class="cardbody">
				<span class="icons" id="airport"></span>
			</div>
			<span class="price"> </span>
		</div>
        <div class="box" id="box-x"></div>
        <div class="box" id="box-x"></div>
        <div class="box" id="box-x"></div>
        <div class="box" id="box-x"></div>
        <div class="box" id="box-x"></div>
        <div class="box" id="box-x"></div>
        <div class="box" id="box-x"></div>
        <div class="box" id="box-x"></div>
    </div>
</div>
</body>
</html>

\$\endgroup\$
  • 4
    \$\begingroup\$ Greetings and welcome to Code Review. Since there is no JavaScript or PHP in this question, I removed these tags. The only thing then to review is the HTML which we all know is not going to make the final cut ( you will generate this ) and the CSS. Honestly, I think you jumped the gun on this, you should advance your project a bit more and then come back. \$\endgroup\$ – konijn Jan 30 '14 at 17:37
  • 3
    \$\begingroup\$ Questions about "How would you guys implement this feature that I haven't implemented?" (i.e. "So how would you guys size the 40 positions for users with a 1024x768 screen size?") is off-topic for Code Review. \$\endgroup\$ – Simon Forsberg Jan 30 '14 at 17:53
  • \$\begingroup\$ This is very imaginative. Much of the game of Monopoly is just the beauty of the board, so I wonder if it would be worth taking the time to make the spaces rectangular and adding the colored bars and some of the images in your divs. \$\endgroup\$ – TimSPQR Jan 30 '14 at 22:51
  • \$\begingroup\$ @SimonAndréForsberg I have replicated the Monopoly board in my code for a 1024x768 screen. I was not sure my code (HTML) was efficient and my question was how you would replicate it. \$\endgroup\$ – Elton Frederik Jan 31 '14 at 4:13
7
\$\begingroup\$

As mentioned in the comments the question that you are asking is actually off topic as you have not implemented it yet and there are many solutions (you could for example do everything as percentage or vh/vw units rather than pixels). What you're asking for is a concept known as responsive design. I will however review the code that you have.

First problem I see

    <div class="box" id="box-x"></div>
    <div class="box" id="box-x"></div>

you have non-unique ids! This is against spec and you will find that many tools and libraries have problems when using non-unique ids. Instead you should use

    <div class="box box-x"></div>
    <div class="box box-x"></div>

Speaking of which, the .box class is probably not the best named. you could imagine making a diesel-punk version of this where you use border-radius to have round (not boxy) spaces. Instead name it for what it is. My recommendation would be .place

I'll stop short of saying that you should avoid ids altogether but only use them when you're really really sure that the element is the only one on the page with that name (including any other components built from composite uis).

Next - this is a bit of personal preference but I think you're overusing divs. proper html elements can give good semantics to your document. I would probably structure the .column>div stuff as ul.column>li since these are part of a series. Other valid possibilities might be <article> (as in article of clothing NOT a blog post article) or <section> elements.

I would also say you can make this significantly more lightweight by using a javascript templating framework like Handlebars or a an MVVM framework like Knockout or a full javascript framework like Angular. Your mounds and mounds of html will then collapse down to just a single definition.

Runway probably doesn't need to be an element at all. You can probably just tag the .box the appropriate class (like .orange) and use css3 gradients to create that stripe.

\$\endgroup\$
  • \$\begingroup\$ I have implemented the board structure and asked this question with the aim of improving my base structure. If it wasn't for your answer, I would have continued with non-unique ids! Also naming it .place instead of .box is a good suggestion, perhaps the best word is .position \$\endgroup\$ – Elton Frederik Jan 31 '14 at 4:07
  • \$\begingroup\$ .runway is to contain the monopoly pieces when the player lands there. \$\endgroup\$ – Elton Frederik Jan 31 '14 at 4:10
  • \$\begingroup\$ I see, then .runway does make sense, yes. Also you can benefit a lot from using a css precompiler. Either LESS or SASS (my preference) - either one works and either one is 1000000 times nicer than raw css. \$\endgroup\$ – George Mauer Jan 31 '14 at 4:29
  • \$\begingroup\$ Yes. I will use them, also like sass. I like to first do raw HTML just to get good idea and then automate it. I know CR is really for improving code but I needed to review the base structure first. \$\endgroup\$ – Elton Frederik Jan 31 '14 at 5:16
  • \$\begingroup\$ Here is an image of some the issue I have to think about link. It seems that 75x75 is necessary, that way I can add all the necessary data. The background colors are just for illustration purposes. \$\endgroup\$ – Elton Frederik Jan 31 '14 at 5:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.