player's hands are visible

frontend/src/views/Betaparty.vue

 <template>
-  <div class="about">
+  <div class="party">
     <hand class="player-hand"/>
     <div class="winds">
       <img :src="this.topWindGlyph" class="player-wind top-wind">
@@ -7,6 +7,15 @@
       <img :src="this.bottomWindGlyph" class="player-wind bottom-wind">
       <img :src="this.leftWindGlyph" class="player-wind left-wind">
     </div>
+    <div class="left-hand">
+      <img v-for="i in 13" :key="i" :src="backTile" width=46 height=62>
+    </div>
+    <div class="top-hand">
+      <img v-for="i in 13" :key="i" :src="backTile" width=46 height=62>
+    </div>
+    <div class="right-hand">
+      <img v-for="i in 13" :key="i" :src="backTile" width=46 height=62>
+    </div>
   </div>
 </template>
 
@@ -20,18 +29,13 @@ export default {
     data(){ //data must be a function 
     return{
         id: 10,
-        topWindGlyph: null,
-        rightWindGlyph: null,
-        bottomWindGlyph: null,
-        leftWindGlyph: null,
+        topWindGlyph: require('@/assets/img/mahjong-tiles/Black/Pei.svg'),
+        rightWindGlyph: require('@/assets/img/mahjong-tiles/Black/Shaa.svg'),
+        bottomWindGlyph: require('@/assets/img/mahjong-tiles/Black/Nan.svg'),
+        leftWindGlyph: require('@/assets/img/mahjong-tiles/Black/Ton.svg'),
+        backTile: require('@/assets/img/mahjong-tiles/Black/Back.svg'),
       }
     },
-    mounted() {
-      this.topWindGlyph = require('@/assets/img/mahjong-tiles/Black/Pei.svg')
-      this.rightWindGlyph = require('@/assets/img/mahjong-tiles/Black/Shaa.svg')
-      this.bottomWindGlyph = require('@/assets/img/mahjong-tiles/Black/Nan.svg')
-      this.leftWindGlyph = require('@/assets/img/mahjong-tiles/Black/Ton.svg')
-    }
 }
 </script>
 
@@ -40,7 +44,7 @@ export default {
 .player-hand{
   position: absolute;
   bottom: 9%;
-  left: 200px;
+  left: 310px;
 }
 
 .winds{
@@ -95,5 +99,27 @@ export default {
   left: 0;
   right: 202px;
 }
+.top-hand{
+  position: absolute;
+  left: 400px;
+}
+.right-hand{
+  position: absolute;
+  transform: rotate(-90deg)
+  ;top: 454px;
+  left: 864px;
+}
+
+.left-hand{
+  position: absolute;
+  transform: rotate(90deg);
+  left: -70px;
+  top: 454px;
+}
+/*
+.party *{
+  background: rgba(255, 255, 255, 0.1);
 
+}
+*/
 </style>
\ No newline at end of file