Make cards in hand align correctly

Scenes/Board.tscn

@@ -31,3 +31,5 @@ material/0 = null
 [node name="BoardUI" parent="." instance=ExtResource( 4 )]
 
 [node name="Cards" type="Spatial" parent="."]
+
+[node name="Tween" type="Tween" parent="."]

Scenes/Components/Card.gd

@@ -19,13 +19,9 @@ export var inHand := false
 onready var animation := $Border/AnimationPlayer
 
 func _mouse_hover():
-	if inHand:
-		animation.play("focus")
 	emit_signal("card_selected")
 
 func _mouse_blur():
-	if inHand:
-		animation.play("blur")
 	emit_signal("card_unselected")
 
 func _input_event(camera, event, click_position, click_normal, shape_idx):
@@ -72,6 +68,9 @@ func _input_event(camera, event, click_position, click_normal, shape_idx):
 				animation.play("tap")
 				exhausted = true
 
+func reset_transform():
+	$Border.transform.origin = Vector3.ZERO
+
 func _menu_action(id: int):
 	match id:
 		0: # Flip

Scenes/Components/Card.tscn

@@ -6,7 +6,8 @@
 [ext_resource path="res://MLPAssets/ExampleCard/ff6.jpg" type="Texture" id=4]
 
 [sub_resource type="BoxShape" id=1]
-extents = Vector3( 0.367502, 0.0309108, 0.49861 )
+margin = 0.001
+extents = Vector3( 0.353, 0.001, 0.481 )
 
 [sub_resource type="Animation" id=2]
 resource_name = "blur"
@@ -149,7 +150,7 @@ input_capture_on_drag = true
 script = ExtResource( 1 )
 
 [node name="CollisionShape" type="CollisionShape" parent="."]
-transform = Transform( 1, 0, 0, 0, 1.17955, 0, 0, 0, 1, 0, 0, 0 )
+transform = Transform( 1, 0, 0, 0, 1.17955, 0, 0, 0, 1, 0, 0.000197917, 0 )
 shape = SubResource( 1 )
 
 [node name="Border" type="MeshInstance" parent="."]

Scenes/Scripts/Board.gd

@@ -11,14 +11,25 @@ onready var cards := $Cards
 
 export var mouseHandThreshold = 0.9
 
-var holdingCard: Card
+var holdingCard: Card = null
+var focusedCard: Card = null
 
 var mouseOrigin: Vector2
 var lastCameraTransform: Transform
 
 func _ready():
+	add_card("ff36", 0, true)
+	add_card("ff36", 0, true)
+	add_card("ff36", 0, true)
+	add_card("ff36", 0, true)
+	add_card("ff36", 0, true)
+	add_card("ff36", 0, true)
+	add_card("ff36", 0, true)
+	add_card("ff36", 0, true)
+	add_card("ff36", 0, true)
 	add_card("ff36", 0, true)
 	add_card("ff36", 0, false)
+	reorder_hand()
 
 func _input(event: InputEvent):
 	# Camera zoom
@@ -52,14 +63,29 @@ func _process(delta: float):
 
 func _card_picked(card: Card):
 	holdingCard = card
+	# Fix rotation if coming from hand
+	if holdingCard.inHand:
+		holdingCard.rotation = Vector3.ZERO
 
 func _card_dropped(card: Card):
 	holdingCard = null
+	reorder_hand()
+
+func _card_selected(card: Card):
+	if card.inHand and focusedCard == null:
+		focusedCard = card
+		card.animation.play("focus")
+
+func _card_unselected(card: Card):
+	if focusedCard == card:
+		focusedCard = null
+		card.animation.play("blur")
 
 func reparent(object: Node, from: Node, to: Node):
 	from.remove_child(object)
 	to.add_child(object)
 	object.set_owner(to)
+	reorder_hand()
 
 func add_card(cardID: String, playerID: int, inHand: bool):
 	var card := CardTemplate.instance()
@@ -70,9 +96,45 @@ func add_card(cardID: String, playerID: int, inHand: bool):
 	card.connect("card_picked", self, "_card_picked", [card])
 	card.connect("card_selected", ui, "_card_selected", [card])
 	card.connect("card_unselected", ui, "_card_unselected", [card])
+	card.connect("card_selected", self, "_card_selected", [card])
+	card.connect("card_unselected", self, "_card_unselected", [card])
 	card.connect("card_menu", ui, "show_card_menu", [card])
 	if inHand:
 		# TODO if player != me, put in opponent's hand
 		hand.add_child(card)
 	else:
-		cards.add_child(card)
+		cards.add_child(card)
+
+const MAX_CARD_DISTANCE := 0.5
+const HAND_SCREEN_PERC := 0.8
+const CARD_ROTATION := 0.03
+const UNITSPERPX := 0.003
+
+func reorder_hand():
+	var cardsInHand: Array = hand.get_children()
+	cardsInHand.sort_custom(TransformSorter, "sort")
+	var size := cardsInHand.size()
+
+	# Calculate total width of the player's hand and other things
+	# This is done in two ways, for small hands, MAX_CARD_DISTANCE is usually used
+	# as constant distance between cards, however, as the hand gets larger we don't
+	# want them to go offscreen, therefore a "maximum screen %" is used to determine
+	# how to fit all the cards within a % of the viewport's width
+	var distancePerc := get_viewport().size.x * HAND_SCREEN_PERC * UNITSPERPX / size
+	var distance := distancePerc#max(distancePerc, MAX_CARD_DISTANCE)
+	var totalWidth := distance * (size-1)
+	var minX := -totalWidth/2
+	
+	# Iterate over all items, keep track of the index
+	var i := 0
+	for child in cardsInHand:
+		child.transform.origin = Vector3(minX + distance * i, 0.02*i, 0)
+		child.rotation = Vector3(0, CARD_ROTATION * (size - i - 1), 0)
+		i += 1
+		child.reset_transform()
+
+class TransformSorter:
+    static func sort(a, b):
+        if a.transform.origin.x < b.transform.origin.x:
+            return true
+        return false