From 2776f583661179640dea91f5c5cedd2e0e247bbc Mon Sep 17 00:00:00 2001
From: Steffen <steffen@baumgart.biz>
Date: Fri, 3 Jul 2020 10:57:08 +0200
Subject: [PATCH] open player menu always inside the circle (closes #28)

---
 src/components/Player.vue     |  2 +-
 src/components/TownSquare.vue | 22 ++++++++++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/components/Player.vue b/src/components/Player.vue
index ef0d8cd..aab6a97 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -634,7 +634,7 @@ li.move:not(.from) .player .overlay svg.move {
 .player > .menu {
   position: absolute;
   left: 100%;
-  bottom: 0;
+  bottom: -5px;
   text-align: left;
   white-space: nowrap;
   background: rgba(0, 0, 0, 0.5);
diff --git a/src/components/TownSquare.vue b/src/components/TownSquare.vue
index 230f186..5debc09 100644
--- a/src/components/TownSquare.vue
+++ b/src/components/TownSquare.vue
@@ -219,8 +219,30 @@ export default {
     &:nth-child(#{$i}) {
       transform: rotate($rot * 1deg);
       @if $i - 1 <= $item-count / 2 {
+        // first half of players
         z-index: $item-count - $i + 1;
+        // open menu on the left
+        .player > .menu {
+          left: auto;
+          right: 100%;
+          margin-right: 15px;
+          &:before {
+            border-left-color: black;
+            border-right-color: transparent;
+            right: auto;
+            left: 100%;
+          }
+        }
+        .fold-enter-active,
+        .fold-leave-active {
+          transform-origin: right center;
+        }
+        .fold-enter,
+        .fold-leave-to {
+          transform: perspective(200px) rotateY(-90deg);
+        }
       } @else {
+        // second half of players
         z-index: $i - 1;
         .ability {
           right: 120%;