diff --git a/frontend/src/components/Card.vue b/frontend/src/components/Card.vue
index 552c035..6718b03 100644
--- a/frontend/src/components/Card.vue
+++ b/frontend/src/components/Card.vue
@@ -89,6 +89,19 @@ export default {
#816b45 10px
);
}
+.card:not(.back,.fistful-of-cards,.high-noon,.gold-rush):before{
+ content: "";
+ background-image: radial-gradient(var(--bg-color) 13%, #0000 5%),
+ radial-gradient(var(--bg-color) 14%, transparent 5%),
+ radial-gradient(var(--bg-color) 8%, transparent 5%);
+ background-position: -12px 0, 12px 14px, 0 -12pt;
+ background-size: 50px 50px;
+ position: absolute;
+ top: -10px;
+ left: -10px;
+ bottom: -4px;
+ right: -4px;
+}
.card.equipment {
box-shadow:
0 0 0 3pt #5c5e83,
diff --git a/frontend/src/components/Lobby.vue b/frontend/src/components/Lobby.vue
index 2c29f19..90172ac 100644
--- a/frontend/src/components/Lobby.vue
+++ b/frontend/src/components/Lobby.vue
@@ -61,7 +61,7 @@
+ :style="`margin-top: ${i < 1 ? 10 : -(Math.min((p.equipment.length + p.gold_rush_equipment.length + 1) * 12, 80))}pt;`"/>
@@ -531,8 +531,14 @@ export default {
transform: scale(0.8);
margin-bottom: -4pt;
}
+.tiny-equipment .card {
+ transform: rotate(2deg);
+}
+.tiny-equipment .card:nth-child(odd) {
+ transform: rotate(-2deg);
+}
.tiny-equipment .card:hover {
- transform: translateY(10px) scale(1.1);
+ transform: translateY(10px) scale(1.2);
z-index: 1;
}
.tiny-character {
diff --git a/frontend/src/components/Player.vue b/frontend/src/components/Player.vue
index 1e96ac7..bc106dc 100644
--- a/frontend/src/components/Player.vue
+++ b/frontend/src/components/Player.vue
@@ -3,13 +3,13 @@
{{instruction}}
-
- ❤️
💀
+ ❤️
@@ -17,7 +17,7 @@
💵️
-
+
@@ -514,8 +514,12 @@ export default {
margin-left: -30pt;
}
.hand>.card:hover {
- margin-right:35pt;
- transform: translateY(-15px);
+ transform: translateY(-15px) translateX(-15px) rotate(-2deg);
+ z-index: 1;
+}
+.hand>.card:nth-child(1):hover, .hand>.card:last-child:hover {
+ transform: translateY(-15px) translateX(0) rotate(2deg);
+ z-index: 1;
}
#hand_text{
color: var(--muted-color);
@@ -531,6 +535,12 @@ export default {
margin: 10pt 0pt;
overflow:auto;
}
+#equipment .card:nth-child(even) {
+ transform: rotate(1deg);
+}
+#equipment .card:nth-child(odd) {
+ transform: rotate(-1deg);
+}
.hurt-notify {
pointer-events: none;
animation: disappear 0.5s ease-in forwards;