From e845473bed5d12becef7fef99c281614d39ad145 Mon Sep 17 00:00:00 2001
From: Joffrey Bion <joffrey.bion@booking.com>
Date: Fri, 15 May 2020 19:20:41 +0200
Subject: Add card back component

---
 .../sevenwonders/ui/components/game/CardImage.kt   | 29 ++++++++++++++++------
 1 file changed, 22 insertions(+), 7 deletions(-)

(limited to 'sw-ui/src/main')

diff --git a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/CardImage.kt b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/CardImage.kt
index 38afe028..9c31d51a 100644
--- a/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/CardImage.kt
+++ b/sw-ui/src/main/kotlin/org/luxons/sevenwonders/ui/components/game/CardImage.kt
@@ -4,7 +4,7 @@ import kotlinx.css.CSSBuilder
 import kotlinx.css.Color
 import kotlinx.css.borderRadius
 import kotlinx.css.pct
-import kotlinx.css.properties.boxShadow
+import kotlinx.css.properties.*
 import kotlinx.css.px
 import kotlinx.css.rem
 import kotlinx.html.IMG
@@ -15,21 +15,36 @@ import styled.StyledDOMBuilder
 import styled.css
 import styled.styledImg
 
-fun RBuilder.cardImage(card: Card, highlightColor: Color? = null, block: StyledDOMBuilder<IMG>.() -> Unit = {}) {
-    styledImg(src = "/images/cards/${card.image}") {
+fun RBuilder.cardImage(
+    card: Card,
+    faceDown: Boolean = false,
+    highlightColor: Color? = null,
+    block: StyledDOMBuilder<IMG>.() -> Unit = {}
+) {
+    styledImg(src = card.imageSrc(faceDown)) {
         css {
-            borderRadius = 5.pct
-            boxShadow(offsetX = 2.px, offsetY = 2.px, blurRadius = 5.px, color = Color.black)
-            highlightStyle(highlightColor)
+            cardImageStyle(highlightColor)
         }
         attrs {
             title = card.name
-            alt = "Card ${card.name}"
+            alt = if (faceDown) "Card back (${card.back.image})" else "Card ${card.name}"
         }
         block()
     }
 }
 
+private fun Card.imageSrc(faceDown: Boolean): String = if (faceDown) {
+    "/images/cards/back/${back.image}"
+} else {
+    "/images/cards/$image"
+}
+
+private fun CSSBuilder.cardImageStyle(highlightColor: Color?) {
+    borderRadius = 5.pct
+    boxShadow(offsetX = 2.px, offsetY = 2.px, blurRadius = 5.px, color = Color.black)
+    highlightStyle(highlightColor)
+}
+
 private fun CSSBuilder.highlightStyle(highlightColor: Color?) {
     if (highlightColor != null) {
         boxShadow(
-- 
cgit