Add visuzalization of opponent

rnixik · May 9, 2018 · b1d1e4d · b1d1e4d
1 parent 4c57de9
commit b1d1e4d
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 25 deletions.
diff --git a/html/css/index.css b/html/css/index.css
@@ -71,6 +71,60 @@ body {
   transform: scale(1.3);
 }
 
+.playing-card-back-box {
+  display: inline-block;
+  width: 65px;
+  height: 94px;
+  position: relative;
+  box-sizing: border-box;
+}
+.playing-card-back {
+  border: 1px solid black;
+  border-radius: 4px;
+  width: 100%;
+  height: 100%;
+  background-size: 10%;
+  background-position: 10px; 10px;
+  background-color: #ffe9e9;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23c5614c' fill-opacity='1'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+}
+
+.opponent {
+  display: inline-block;
+  position: relative;
+  overflow: hidden;
+  width: 120px;
+  height: 104px;
+  box-sizing: border-box;
+  border: 4px solid #ffe9e9;
+  border-radius: 4px;
+  margin-right: 10px;
+}
+
+.opponet__nickname {
+  position: absolute;
+  top: 10px;
+  left: 6px;
+  text-align: left;
+  background: rgba(0, 0, 0, 0.7);
+  color: #fff;
+  font-size: 11px;
+  width: 100px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 2px;
+  box-sizing: border-box;
+}
+.opponet__card-num {
+  position: absolute;
+  top: 46px;
+  left: 6px;
+  font-size: 26px;
+  width: 52px;
+  height: 40px;
+  text-align: center;
+  text-shadow: -3px 3px 4px #fff, 3px -3px 4px #fff, -3px -3px 4px #fff, 3px 3px 4px #fff;
+}
 .app {
   display: flex;
 }

diff --git a/html/index.html b/html/index.html
@@ -95,28 +95,30 @@ <h2>Game: {{ room.game_status }}</h2>
                     <span v-if="playingTable.trumpCard">TrumpCard: {{ playingTable.trumpCard.value }}{{ playingTable.trumpCard.suit }}</span>
                     Trump card is in pile: {{ playingTable.trumpCardIsInPile }}
                 </div>
+
                 <div>
-                    Hands:
-                    <ol>
-                        <li v-for="handSize in playingTable.handsSizes">
-                          {{ handSize }}
-                        </li>
-                    </ol>
+                        <opponent 
+                            v-for="(handSize, handIndex) in playingTable.handsSizes"
+                            v-if="handIndex != game.yourPlayerIndex"
+                            v-bind:hand-size="handSize"  
+                            v-bind:nickname="game.players[handIndex].name"
+                        ></opponent>
                 </div>
+
                 <div class="your-hand-holder">
-                    Your hand:
                     <div v-if="playingTable.yourHand.length" class="your-hand" v-bind:style="{width: playingTable.yourHand.length * 140 + 'px'}">
                         <playing-card 
                         v-for="(yourCard, index) in playingTable.yourHand" 
                         v-bind:card="yourCard" 
                         v-bind:style="{
                           left: index*(Math.min(playingTable.yourHand.length/6 * -40), -70) + 'px', 
                           transform: 'rotate(' + (index+0.5-playingTable.yourHand.length/2) * 3 + 'deg)',
-                          bottom: Math.abs(index+0.5-playingTable.yourHand.length/2) * Math.abs(index+0.5-playingTable.yourHand.length/2) * (6/playingTable.yourHand.length * -2.1) + 'px',
+                          bottom: Math.abs(index+0.5-playingTable.yourHand.length/2) * Math.abs(index+0.5-playingTable.yourHand.length/2) * (6/playingTable.yourHand.length * -2.1) + 'px'
                         }"
                         ></playing-card>
                     </div>
                 </div>
+
             </div>
 
         </div>
@@ -127,6 +129,31 @@ <h2>Game: {{ room.game_status }}</h2>
             </div>
         </script>
 
+        <script type="text/x-template" id="playing-card-back-template">
+            <div class="playing-card-back-box">
+                <div class="playing-card-back"></div>
+            </div>
+        </script>
+
+        <script type="text/x-template" id="opponent-template">
+            <div class="opponent">
+                <div 
+                  class="opponet__nickname" 
+                  v-bind:style="{'z-index': handSize}"
+                >{{ nickname }}</div>
+                <div class="opponet__card-num" v-bind:style="{'z-index': handSize}">{{ handSize }}</div>
+                <div class="opponet__hand" v-bind:style="{width: handSize * 65 + 'px'}">
+                    <playing-card-back 
+                      v-for="index in handSize"
+                      v-bind:style="{
+                          left: ( (index-1) * (-65 + 45/(handSize-1)) ) + 'px',
+                          'z-index': handSize-index
+                        }"
+                    ></playing-card-back>
+                </div>
+            </div>
+        </script>
+
 
 
         <script>

diff --git a/html/js/index.js b/html/js/index.js
@@ -27,6 +27,24 @@ Vue.component('playing-card', {
   }
 });
 
+Vue.component('playing-card-back', {
+  template: '#playing-card-back-template'
+});
+
+Vue.component('opponent', {
+  template: '#opponent-template',
+  props: {
+    handSize: {
+      type: Number,
+      required: true
+    },
+    nickname: {
+      type: String,
+      required: true
+    }
+  }
+});
+
 function App() {
     var app = this;
 
@@ -85,23 +103,6 @@ function App() {
         },
         startGame: function () {
           app.commandStartGame();
-        },
-        convertCardToCssClass: function (card) {
-          const replaces = {
-            'J': 'jack',
-            'Q': 'queen',
-            'K': 'king',
-            'A': 'ace',
-            '♣': 'clubs',
-            '♦': 'diamonds',
-            '♥': 'hearts',
-            '♠': 'spades',
-          };
-          let cssClass = card.value + '_of_' + card.suit;
-          for (orig in replaces) {
-            cssClass = cssClass.replace(new RegExp(orig, "g"), replaces[orig]);
-          }
-          return cssClass;
         }
       }
     });