Permalink
Browse files

board-border reworked; figures colorize moved to css; board controls …

…restyling
  • Loading branch information...
1 parent 716a2b3 commit aebb9cde9c11d3f68a2609f62b35b4fc8868847d @kroleg committed Aug 17, 2011
Showing with 107 additions and 144 deletions.
  1. +49 −82 css/styles.css
  2. +52 −49 js/game.js
  3. +6 −13 puzzle.html
View
@@ -6,7 +6,7 @@
width: 500px;
height: 600px;
position: relative;
- margin: 50px auto;
+ margin: 5px auto;
}
#board .inner {
@@ -23,112 +23,79 @@
border: 2px solid black;
}
+.solo{
+ background-color: #3399CC;
+}
+
+.hor{
+ background-color: #FFCC00;
+}
+
+.vert{
+ background-color: #66CC33;
+}
+
+.target{
+ background-color: #FD5E42;
+}
+
#board_select {
width: 500px;
margin: 10px auto
}
.button {
- border: 1px solid black;
+ border: 1px solid #FD5E42;
float: left;
- margin: 0px 50px;
+ margin: 0px 10px;
padding: 15px 20px;
font-size: 18px;
cursor: pointer;
- background: white
+ background: white;
+ border-radius: 20px;
}
.button.active {
- background: #ccc
+ background: #FD5E42;
+ color: white;
}
#reset {
- padding: 15px 25px
+ padding: 10px;
+ float:right;
+ cursor: pointer;
}
.brdr {
position: absolute;
}
-.tl {
- border-top: 2px solid black;
- border-left: 2px solid black;
- top: 0;
- left: 0;
- height: 50px;
- width: 50px;
-}
-
-.top {
- border-top: 2px solid black;
- border-bottom: 2px solid black;
- top: 0;
- left: 50px;
- height: 46px;
- width: 400px
-}
-
-.tr {
- border-top: 2px solid black;
- border-right: 2px solid black;
- top: 0;
- left: 450px;
- height: 50px;
- width: 50px;
-}
-
-.r {
- border-left: 2px solid black;
- border-right: 2px solid black;
- top: 50px;
- left: 448px;
- height: 500px;
- width: 50px;
-}
-
-.br {
- border-bottom: 2px solid black;
- border-right: 2px solid black;
- top: 550px;
- left: 450px;
- height: 50px;
- width: 50px;
-}
+/* board */
-.el {
- border-bottom: 2px solid black;
- border-top: 2px solid black;
- border-left: 2px solid black;
- top: 548px;
- left: 348px;
- height: 50px;
- width: 100px;
+#border-outer{
+ position: absolute;
+ border: 2px solid black;
+ width: 498px;
+ z-index: 1;
+ height: 598px;
}
-
-.er {
- border-bottom: 2px solid black;
- border-top: 2px solid black;
- border-right: 2px solid black;
- top: 548px;
+#border-inner{
+ top: 48px;
left: 48px;
- height: 50px;
- width: 100px;
-}
-
-.bl {
- border-bottom: 2px solid black;
- border-left: 2px solid black;
- top: 550px;
- left: 0px;
- height: 50px;
- width: 50px;
+ position: absolute;
+ border: 2px solid black;
+ width: 398px;
+ z-index: 1;
+ height: 498px;
}
-
-.l {
+#border-exit{
+ left: 148px;
+ z-index: 2;
+ bottom: -2px;
+ position: absolute;
+ background-color: white;
border-left: 2px solid black;
border-right: 2px solid black;
- top: 48px;
- left: 0px;
- height: 502px;
- width: 46px;
-}
+ width: 198px;
+ height: 54px;
+}
View
@@ -8,42 +8,42 @@ jQuery(function($){
var sets = {
set1: [
// {type:"vert", left: 1, top: 1},
- {name:"g1", width:1, height: 2, left: 1, top: 1},
- {name:"g2", width:1, height: 2, left: 4, top: 1},
- {name:"g3", width:1, height: 2,left: 1, top: 3},
- {name:"g4", width:1, height: 2,left: 4, top: 3},
- {name:"r", width:2, height: 2,left: 2, top: 1},
- {name:"y1", width:2, height: 1,left: 2, top: 3},
- {name:"b1", width:1, height: 1,left: 1, top: 5},
- {name:"b2", width:1, height: 1,left: 2, top: 4},
- {name:"b3", width:1, height: 1,left: 3, top: 4},
- {name:"b4", width:1, height: 1,left: 4, top: 5}
+ {name:"g1", type: 'vert', left: 1, top: 1},
+ {name:"g2", type: 'vert', left: 4, top: 1},
+ {name:"g3", type: 'vert', left: 1, top: 3},
+ {name:"g4", type: 'vert', left: 4, top: 3},
+ {name:"r", type: 'target', left: 2, top: 1},
+ {name:"y1", type: 'hor', left: 2, top: 3},
+ {name:"b1", type: 'solo', left: 1, top: 5},
+ {name:"b2", type: 'solo', left: 2, top: 4},
+ {name:"b3", type: 'solo', left: 3, top: 4},
+ {name:"b4", type: 'solo', left: 4, top: 5}
],
set2: [
- {name:"g1", width:1, height: 2,left: 1, top: 1},
- {name:"g2", width:1, height: 2,left: 4, top: 1},
- {name:"r", width:2, height: 2,left: 2, top: 1},
- {name:"y1", width:2, height: 1,left: 1, top: 3},
- {name:"y2", width:2, height: 1,left: 3, top: 3},
- {name:"y3", width:2, height: 1,left: 2, top: 4},
- {name:"b1", width:1, height: 1,left: 1, top: 4},
- {name:"b2", width:1, height: 1,left: 1, top: 5},
- {name:"b3", width:1, height: 1,left: 4, top: 4},
- {name:"b4", width:1, height: 1,left: 4, top: 5}
+ {name:"g1", type: 'vert', left: 1, top: 1},
+ {name:"g2", type: 'vert', left: 4, top: 1},
+ {name:"r", type: 'target',left: 2, top: 1},
+ {name:"y1", type: 'hor', left: 1, top: 3},
+ {name:"y2", type: 'hor', left: 3, top: 3},
+ {name:"y3", type: 'hor', left: 2, top: 4},
+ {name:"b1", type: 'solo', left: 1, top: 4},
+ {name:"b2", type: 'solo', left: 1, top: 5},
+ {name:"b3", type: 'solo', left: 4, top: 4},
+ {name:"b4", type: 'solo', left: 4, top: 5}
],
set3: [
- {name:"g1", width:1, height: 2,left: 1, top: 1},
- {name:"g2", width:1, height: 2,left: 4, top: 1},
- {name:"r", width:2, height: 2,left: 2, top: 1},
- {name:"y1", width:2, height: 1,left: 2, top: 4},
- {name:"b1", width:1, height: 1,left: 1, top: 3},
- {name:"b2", width:1, height: 1,left: 1, top: 4},
- {name:"b3", width:1, height: 1,left: 1, top: 5},
- {name:"b4", width:1, height: 1,left: 2, top: 3},
- {name:"b5", width:1, height: 1,left: 3, top: 3},
- {name:"b6", width:1, height: 1,left: 4, top: 3},
- {name:"b7", width:1, height: 1,left: 4, top: 4},
- {name:"b8", width:1, height: 1,left: 4, top: 5}
+ {name:"g1", type: 'vert', left: 1, top: 1},
+ {name:"g2", type: 'vert', left: 4, top: 1},
+ {name:"r", type: 'target', left: 2, top: 1},
+ {name:"y1", type: 'hor', left: 2, top: 4},
+ {name:"b1", type: 'solo', left: 1, top: 3},
+ {name:"b2", type: 'solo', left: 1, top: 4},
+ {name:"b3", type: 'solo', left: 1, top: 5},
+ {name:"b4", type: 'solo', left: 2, top: 3},
+ {name:"b5", type: 'solo', left: 3, top: 3},
+ {name:"b6", type: 'solo', left: 4, top: 3},
+ {name:"b7", type: 'solo', left: 4, top: 4},
+ {name:"b8", type: 'solo', left: 4, top: 5}
]
};
@@ -52,12 +52,6 @@ jQuery(function($){
slide_duration : 150,
size :{x:4,y:5},
point_size : 100,
- colors: {
- r: '#FD5E42',
- g: '#66CC33',
- b: '#3399CC',
- y: '#FFCC00'
- },
current: 'set1'
};
@@ -82,20 +76,29 @@ jQuery(function($){
$('#board .inner').html('');
for (var i in this.figures){
var slider = this.figures[i];
- var color;
- if (slider.height == 1 && slider.width == 1)
- color = this.colors.b;
- else if (slider.height == 2 && slider.width == 1)
- color = this.colors.g;
- else if (slider.height == 2 && slider.width == 2)
- color = this.colors.r;
- else
- color = this.colors.y;
+ var type;
+ switch (slider.type){
+ case 'solo':
+ slider.height = 1;
+ slider.width = 1;
+ break;
+ case 'hor':
+ slider.height = 1;
+ slider.width = 2;
+ break;
+ case 'vert':
+ slider.height = 2;
+ slider.width = 1;
+ break;
+ case 'target':
+ slider.height = 2;
+ slider.width = 2;
+ }
$('<div/>')
.attr('id',slider.name)
- .attr('class','figure')
- .css('background',color)
+ .attr('class','figure ' + slider.type)
+// .css('background',color)
.appendTo('#board .inner');
}
View
@@ -2,29 +2,22 @@
<link rel="stylesheet" href="css/styles.css">
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
-<!--<script type="text/javascript" src="js/tojson.js"></script>-->
+<script type="text/javascript" src="js/tojson.js"></script>
<script type="text/javascript" src="js/game.js"></script>
</head>
<body>
<div id="board_select">
<div id="set1" class="button active">1</div>
<div id="set2" class="button">2</div>
<div id="set3" class="button">3</div>
+ <a id="reset">RESET</a>
+
<div class="clr"></div>
- <div id="reset">RESET</div>
</div>
<div id="board">
- <div class="border">
- <div class="tl brdr"></div>
- <div class="top brdr"></div>
- <div class="tr brdr"></div>
- <div class="r brdr"></div>
- <div class="br brdr"></div>
- <div class="er brdr"></div>
- <div class="el brdr"></div>
- <div class="bl brdr"></div>
- <div class="l brdr"></div>
- </div>
+ <div id="border-outer"></div>
+ <div id="border-inner"></div>
+ <div id="border-exit"></div>
<div class="inner">
</div>
</div>

0 comments on commit aebb9cd

Please sign in to comment.