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;