JasonWoof Got questions, comments, patches, etc.? Contact Jason Woofenden
gitweb / peach-cgt.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: f2045f8)
colored card areas (deck, hand, etc)
authorJason Woofenden <jason@jasonwoof.com>
Wed, 26 Oct 2011 22:15:01 +0000 (18:15 -0400)
committerJason Woofenden <jason@jasonwoof.com>
Wed, 26 Oct 2011 22:15:01 +0000 (18:15 -0400)
index.html patch | blob | history
style.less patch | blob | history

diff --git a/index.html b/index.html
index 8ada84e..fc6742c 100644 (file)
--- a/index.html
+++ b/index.html
@@ -13,6 +13,6 @@
 </head>
 <body>
        <h1>Card Table</h1>
 </head>
 <body>
        <h1>Card Table</h1>
-       <div id="table"></div>
+       <div id="table"><div id="your_side"><div class="discard_area"></div><div class="deck_area"></div><div class="hand_area"></div></div><div id="my_side"><div class="discard_area"></div><div class="deck_area"></div><div class="hand_area"></div></div></div>
 </body>
 </html>
 </body>
 </html>
diff --git a/style.less b/style.less
index 5df22bd..615961a 100644 (file)
--- a/style.less
+++ b/style.less
@@ -1,6 +1,18 @@
+@table-width: 1000px;
+@table-height: 800px;
+
 @card-width: 100px;
 @card-height: 140px;
 
 @card-width: 100px;
 @card-height: 140px;
 
+@pile-width: @card-width * 1.3;
+@hand-height: @card-height * 1.3;
+
+@area-lightness: 44%;
+@area-border-color: #ccc;
+@your-side-color: #ffe2e2;
+@my-side-color: #e2ffe2;
+
+
 .shadow (@x: 0, @y: 0, @blur: 1px, @alpha) {
        @val: @x @y @blur rgba(0, 0, 0, @alpha);
        box-shadow:         @val;
 .shadow (@x: 0, @y: 0, @blur: 1px, @alpha) {
        @val: @x @y @blur rgba(0, 0, 0, @alpha);
        box-shadow:         @val;
@@ -23,8 +35,8 @@ h1 {
 }
 
 #table {
 }
 
 #table {
-       height: 700px;
-       width: 960px;
+       width: @table-width;
+       height: @table-height;
        background: #eee;
        position: relative;
        .shadow(2px, 2px, 10px, 0.4);
        background: #eee;
        position: relative;
        .shadow(2px, 2px, 10px, 0.4);
@@ -66,3 +78,51 @@ h1 {
        }
        background-color: #ddd;
 }
        }
        background-color: #ddd;
 }
+
+#my_side, #your_side {
+       position: absolute;
+       width: @table-width;
+       height: @hand-height;
+       left: 0;
+}
+
+#your_side {
+       background: @your-side-color;
+       border-bottom: 2px solid @area-border-color;
+       top: 0;
+}
+
+#my_side {
+       background: @my-side-color;
+       border-top: 2px solid @area-border-color;
+       top: @table-height - @hand-height - 2px;
+}
+
+.discard_area, .deck_area, .hand_area {
+       position: absolute;
+       height: @hand-height;
+}
+.discard_area, .deck_area {
+       border-right: 2px solid @area-border-color;
+       width: @pile-width;
+}
+.hand_area {
+       width: @table-width - (@pile-width + 2px) * 2;
+}
+.discard_area {
+       left: 0px;
+}
+.deck_area {
+       left: @pile-width + 2px;
+}
+.hand_area {
+       left: (@pile-width + 2px) * 2;
+}
+
+#your_side div {
+       top: 0px;
+}
+
+#my_side div {
+       top: 0; // @table-height - @hand-height;
+}
PeachCGT; Card table simulator for testing games like wtactics