Skip to content

Commit

Permalink
proposed landing page changes; mousedown responsiveness fix in game
Browse files Browse the repository at this point in the history
  • Loading branch information
@vincentwoo
vincentwoo committed Jun 5, 2011
1 parent f6dc4a0 commit 7ecba01
Show file tree
Hide file tree
Showing 3 changed files with 68 additions and 57 deletions.
2 changes: 1 addition & 1 deletion client/client.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ function addCards(newCards) {
var td = $('<td/>');
var c = $('<div/>', {
'class': 'card',
click: function() { select(this) }
mousedown: function() { select(this) }
});
c.append(generateShapes(card));
cards.push(c);
Expand Down
95 changes: 56 additions & 39 deletions client/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,67 +15,84 @@ <h1><a href="/">Multiplayer<span>Set</span></a></h1>
<ul id="explanation">
<li class="message cornered full">
<p>
MultiplayerSet is a game about pattern matching. The idea is to find
<b>sets</b> of three cards that meet certain requirements. Each card has a
four properties. The properties are <b>amount</b> (of shapes),
<b>shape</b>, <b>color</b>, and <b>shading</b>.
</p>
<p>
A <b>set</b> is three cards for which each card has, for each property, three
different properties or one uniform property. Two cards that are both red
and a third that is green are <b>not</b> a set.
MultiplayerSet is a game in which you try to find <b>sets</b> of three cards
out of twelve cards. Which cards form sets has to do with the <b>four traits</b>
that each card has:
</p>
<ul>
<li><b>Shape</b>: oval, diamond, or squiggle</li>
<li><b>Color</b>: red, blue, or green</li>
<li><b>Amount</b> of shapes: one, two, or three</li>
<li><b>Shading</b>: solid, hollow, or striped</li>
</ul>
</li>
<li><h2>Examples of VALID sets</h2></li>
<li><h2>Sets</h2></li>
<li class="message cornered">
<div class="sidebar">
<div class="set">
<div class="cardwrap" number="0" color="0" shape="0" shading="0"></div>
<div class="cardwrap" number="0" color="0" shape="0" shading="0"></div>
<div class="cardwrap" number="0" color="0" shape="0" shading="0"></div>
</div>
</div>
<p>
A set is three cards where all the traits on the three cards are either
<b>all the same</b>&hellip;
</p>
<div class="clear"></div>
<div class="set">
<div class="cardwrap" number="0" color="0" shape="0" shading="0"></div>
<div class="cardwrap" number="0" color="1" shape="0" shading="1"></div>
<div class="cardwrap" number="0" color="2" shape="0" shading="2"></div>
<div class="sidebar">
<div class="set">
<div class="cardwrap" number="0" color="0" shape="0" shading="0"></div>
<div class="cardwrap" number="1" color="1" shape="1" shading="1"></div>
<div class="cardwrap" number="2" color="2" shape="2" shading="2"></div>
</div>
</div>
<p>
Here all the cards have the same <b>shape</b> (oval) and <b>amount</b>
(one) but different <b>shadings</b> and <b>colors</b>.
or <b>all different</b>&hellip;
</p>
<div class="clear"></div>
<div class="set">
<div class="cardwrap" number="2" color="2" shape="0" shading="0"></div>
<div class="cardwrap" number="1" color="0" shape="1" shading="1"></div>
<div class="cardwrap" number="0" color="1" shape="2" shading="2"></div>
<div class="sidebar">
<div class="set">
<div class="cardwrap" number="0" color="0" shape="1" shading="0"></div>
<div class="cardwrap" number="0" color="1" shape="1" shading="1"></div>
<div class="cardwrap" number="0" color="2" shape="1" shading="2"></div>
</div>
</div>
<p>
In this set, all four attributes are different across all three cards.
or <b>any mixture of same and different traits</b>. Here the cards have
number and shape <b>in common</b> with <b>different</b> color and shading.
</p>
<div class="clear"></div>
</li>
<li><h2>Examples of INVALID sets</h2></li>
<li><h2>The rule of thumb</h2></li>
<li class="message cornered">
<p>
As a rule, if a set has two cards that share a property (such as two cards
that both have ovals), but the third one differs (it has diamonds), then
it is NOT a set. Here are some examples.
If you're not sure if you've found a set, just ask yourself, <b>"Are there
only two of something?"</b> If so, then you don't have a set. Here are some
examples:
</p>
<div class="set">
<div class="cardwrap" number="0" color="0" shape="0" shading="0"></div>
<div class="cardwrap" number="0" color="0" shape="0" shading="1"></div>
<div class="cardwrap" number="0" color="2" shape="0" shading="2"></div>
<div class="sidebar">
<div class="set">
<div class="cardwrap" number="2" color="2" shape="0" shading="0"></div>
<div class="cardwrap" number="2" color="1" shape="0" shading="1"></div>
<div class="cardwrap" number="2" color="1" shape="0" shading="2"></div>
</div>
</div>
<p>
Identical to the first example set except that two of the cards are red,
and the other green. If one of the red cards were blue or if all three
cards were red, it would be a set.
This would be a set except that <b>two of the cards</b> are blue. If they
were all blue or there was one of each color, you would have a real set.
</p>
<div class="clear"></div>
<div class="set">
<div class="cardwrap" number="1" color="0" shape="1" shading="0"></div>
<div class="cardwrap" number="2" color="2" shape="2" shading="1"></div>
<div class="cardwrap" number="0" color="1" shape="1" shading="1"></div>
<div class="sidebar">
<div class="set">
<div class="cardwrap" number="1" color="1" shape="1" shading="0"></div>
<div class="cardwrap" number="2" color="0" shape="0" shading="1"></div>
<div class="cardwrap" number="0" color="2" shape="2" shading="0"></div>
</div>
</div>
<p>
This is not a set because there are two diamonds and two hollow-shaded cards.
If all the cards were diamond and hollow, it would be a set. Alternatively,
if the last card was a striped squiggly shape, it would also be a set.
Similar problem here: <b>two of the cards</b> are solidly shaded. If all
three were solid or there were one of each shading, it'd be correct.
</p>
<div class="clear"></div>
</li>
Expand Down
28 changes: 11 additions & 17 deletions client/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,6 @@
padding: 0;
list-style: none;
}
li ul {
margin-left: 25px;
}
li li {
list-style: circle;
}
html, body { width: 100% }
body {
color: #333;
Expand Down Expand Up @@ -75,15 +69,16 @@ textarea {
word-wrap: break-word;
}
#header {
position: absolute;
position: fixed;
width: 100%;
top: 20px;
height: 40px;
}
#header h1 {
width: 990px;
padding-left: 20px;
width: 970px;
margin: 0 auto;
text-align: right;
text-align: left;
}
#header h1 span {
color: #999;
Expand Down Expand Up @@ -132,7 +127,6 @@ textarea {
text-align: left;
margin-top: 15px;
}

.p0 {color: #771536}
.p1 {color: #0E4647}
.p2 {color: #597725}
Expand All @@ -141,7 +135,6 @@ textarea {
.p5 {color: #28A09A}
.p6 {color: #9FBC42}
.p7 {color: #D84E86}

.puzzled {
display: none;
border-radius: 4px;
Expand Down Expand Up @@ -338,7 +331,12 @@ textarea {
position: relative;
z-index: 2;
}
p { margin-bottom: 10px; }
#explanation h1 { margin: 0 0 10px 15px }
#explanation h2 { margin: 25px 0 10px 15px }
#wrap #explanation .full { width: 700px; }
li ul { margin-left: 25px; }
li li { list-style: circle; }
.button {
background: #fff;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
Expand All @@ -360,11 +358,10 @@ li#display_ad {
margin-bottom: 15px;
background: #cecece;
}
.set {
.sidebar {
position:relative;
margin: 0px -415px 10px 0;
width: 390px;
height: 80px;
float: right;
background: #eee;
padding: 10px 10px 10px 25px;
Expand All @@ -374,7 +371,4 @@ li#display_ad {
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
z-index: -1;
}
.set .cardwrap { float: left; }
#explanation p { margin-bottom: 10px; }
#explanation h1 { margin: 0 0 10px 15px }
#explanation h2 { margin: 25px 0 10px 15px }
.set .cardwrap { float: left; }

0 comments on commit 7ecba01

Please sign in to comment.