feat: new cards in game

data/cards/monster/axoluna.tres

@@ -1,5 +1,6 @@
-[gd_resource type="Resource" script_class="MonsterCard" load_steps=2 format=3 uid="uid://di76avwc0gn8e"]
+[gd_resource type="Resource" script_class="MonsterCard" load_steps=3 format=3 uid="uid://deo8mj887rfx1"]
 
+[ext_resource type="Texture2D" uid="uid://b8accn4e2ojau" path="res://assets/monster/froggo 1.png" id="1_dyw44"]
 [ext_resource type="Script" path="res://tcg/card/monster_card.gd" id="1_s0p53"]
 
 [resource]
@@ -11,3 +12,4 @@ energy_cost = 1
 base_health = 120
 name = "Axoluna"
 description = "Cute wanderer of the tank, Axoluna"
+icon = ExtResource("1_dyw44")

data/cards/monster/bunnaut.tres

@@ -1,4 +1,4 @@
-[gd_resource type="Resource" script_class="MonsterCard" load_steps=2 format=3 uid="uid://bynhiupm3e5fp"]
+[gd_resource type="Resource" script_class="MonsterCard" load_steps=2 format=3 uid="uid://tgju8eodyuk1"]
 
 [ext_resource type="Script" path="res://tcg/card/monster_card.gd" id="1_3jfyg"]
 

demo_game.tscn

@@ -1,4 +1,4 @@
-[gd_scene load_steps=8 format=3 uid="uid://l2ehohbd1xhk"]
+[gd_scene load_steps=12 format=3 uid="uid://l2ehohbd1xhk"]
 
 [ext_resource type="Script" path="res://demo_game.gd" id="1_jn16u"]
 [ext_resource type="Script" path="res://player_side.gd" id="2_w4tnt"]
@@ -6,7 +6,11 @@
 [ext_resource type="PackedScene" uid="uid://cikstg43mudkn" path="res://tcg/match/match_manager.tscn" id="3_3yhrl"]
 [ext_resource type="Resource" path="res://data/cards/monster/capytain.tres" id="3_we1tk"]
 [ext_resource type="Resource" uid="uid://4eod3m0vc5a8" path="res://data/cards/support/potion.tres" id="4_kkhfk"]
-[ext_resource type="Resource" path="res://data/cards/monster/axoluna.tres" id="5_3cm5x"]
+[ext_resource type="Resource" uid="uid://deo8mj887rfx1" path="res://data/cards/monster/axoluna.tres" id="5_3cm5x"]
+[ext_resource type="PackedScene" uid="uid://bhrelvt51cbp2" path="res://ui/card_template/monster_card.tscn" id="7_4ah45"]
+[ext_resource type="PackedScene" uid="uid://b60vuykleugjn" path="res://ui/card_template/skip_card.tscn" id="7_skjyk"]
+[ext_resource type="PackedScene" uid="uid://dg5amjm1gqi06" path="res://ui/card_template/support_card_green.tscn" id="8_dytl5"]
+[ext_resource type="PackedScene" uid="uid://cds50kwwhlgam" path="res://ui/card_template/support_card_red.tscn" id="9_cabcc"]
 
 [node name="DemoGame" type="Control"]
 layout_mode = 3
@@ -19,88 +23,199 @@ script = ExtResource("1_jn16u")
 player_1_deck = Array[ExtResource("2_xuft0")]([ExtResource("3_we1tk"), ExtResource("4_kkhfk"), ExtResource("4_kkhfk"), ExtResource("4_kkhfk"), ExtResource("5_3cm5x")])
 player_2_deck = Array[ExtResource("2_xuft0")]([ExtResource("5_3cm5x"), ExtResource("4_kkhfk"), ExtResource("4_kkhfk"), ExtResource("4_kkhfk"), ExtResource("3_we1tk")])
 
-[node name="Own" type="VBoxContainer" parent="." node_paths=PackedStringArray("deck", "monster_name_label", "monster_health_label", "incoming_damage_label", "energy_label")]
+[node name="Own" type="Control" parent="." node_paths=PackedStringArray("deck", "energy_label")]
+layout_mode = 1
+anchor_top = 0.5
+anchor_right = 1.0
+anchor_bottom = 1.0
+grow_horizontal = 2
+grow_vertical = 2
+script = ExtResource("2_w4tnt")
+deck = NodePath("Hand")
+energy_label = NodePath("EnergyLabel")
+skip_card_prefab = ExtResource("7_skjyk")
+support_red_card_prefab = ExtResource("9_cabcc")
+support_green_card_prefab = ExtResource("8_dytl5")
+monster_card_prefab = ExtResource("7_4ah45")
+
+[node name="MonsterCard" parent="Own" instance=ExtResource("7_4ah45")]
+custom_minimum_size = Vector2(220, 330)
+layout_mode = 1
+anchors_preset = 5
+anchor_left = 0.5
+anchor_right = 0.5
+anchor_bottom = 0.0
+offset_left = -110.0
+offset_top = 20.0
+offset_right = 110.0
+offset_bottom = 350.0
+grow_vertical = 1
+pivot_offset = Vector2(110, 0)
+size_flags_horizontal = 4
+size_flags_vertical = 4
+
+[node name="Support1GreenCard" parent="Own" instance=ExtResource("8_dytl5")]
+layout_mode = 1
+anchors_preset = 5
+anchor_left = 0.5
+anchor_right = 0.5
+offset_left = -310.0
+offset_top = 75.0
+offset_right = -90.0
+offset_bottom = 395.0
+grow_horizontal = 2
+pivot_offset = Vector2(110, 0)
+
+[node name="Support2GreenCard" parent="Own" instance=ExtResource("8_dytl5")]
+layout_mode = 1
+anchors_preset = 5
+anchor_left = 0.5
+anchor_right = 0.5
+offset_left = 90.0
+offset_top = 75.0
+offset_right = 310.0
+offset_bottom = 395.0
+grow_horizontal = 2
+pivot_offset = Vector2(110, 0)
+
+[node name="Support2RedCard" parent="Own" instance=ExtResource("9_cabcc")]
+layout_mode = 1
+anchors_preset = 5
+anchor_left = 0.5
+anchor_right = 0.5
+offset_left = 90.0
+offset_top = 75.0
+offset_right = 310.0
+offset_bottom = 395.0
+grow_horizontal = 2
+pivot_offset = Vector2(110, 0)
+
+[node name="EnergyLabel" type="Label" parent="Own"]
+layout_mode = 1
+anchors_preset = 2
+anchor_top = 1.0
+anchor_bottom = 1.0
+offset_top = -23.0
+offset_right = 1152.0
+grow_vertical = 0
+text = "Energy:"
+
+[node name="Hand" type="HBoxContainer" parent="Own"]
 layout_mode = 1
 anchors_preset = 12
 anchor_top = 1.0
 anchor_right = 1.0
 anchor_bottom = 1.0
-offset_top = -131.0
+offset_top = -240.0
+offset_bottom = 130.0
 grow_horizontal = 2
 grow_vertical = 0
-alignment = 2
+pivot_offset = Vector2(0, 150)
-script = ExtResource("2_w4tnt")
-deck = NodePath("Hand")
-monster_name_label = NodePath("Monster/VBoxContainer/NameLabel")
-monster_health_label = NodePath("Monster/VBoxContainer/HealthLabel")
-incoming_damage_label = NodePath("Monster/VBoxContainer/IncomingDamageLabel")
-energy_label = NodePath("HBoxContainer/EnergyLabel")
-
-[node name="Monster" type="HBoxContainer" parent="Own"]
-custom_minimum_size = Vector2(0, 128)
-layout_mode = 2
-size_flags_horizontal = 4
 alignment = 1
 
-[node name="VBoxContainer" type="VBoxContainer" parent="Own/Monster"]
+[node name="SkipCard" parent="Own/Hand" instance=ExtResource("7_skjyk")]
 layout_mode = 2
 
-[node name="NameLabel" type="Label" parent="Own/Monster/VBoxContainer"]
+[node name="MonsterCard" parent="Own/Hand" instance=ExtResource("7_4ah45")]
-layout_mode = 2
-size_flags_vertical = 3
-text = "Name:"
-
-[node name="HealthLabel" type="Label" parent="Own/Monster/VBoxContainer"]
-layout_mode = 2
-size_flags_vertical = 3
-text = "Health:"
-
-[node name="IncomingDamageLabel" type="Label" parent="Own/Monster/VBoxContainer"]
-custom_minimum_size = Vector2(128, 0)
-layout_mode = 2
-size_flags_vertical = 3
-text = "Incoming Damage:"
-vertical_alignment = 2
-
-[node name="HBoxContainer" type="HBoxContainer" parent="Own"]
 layout_mode = 2
 
-[node name="EnergyLabel" type="Label" parent="Own/HBoxContainer"]
+[node name="CardBase" parent="Own/Hand" instance=ExtResource("8_dytl5")]
 layout_mode = 2
-text = "Energy:"
 
-[node name="Hand" type="HBoxContainer" parent="Own"]
+[node name="CardBase2" parent="Own/Hand" instance=ExtResource("9_cabcc")]
 layout_mode = 2
-alignment = 1
 
-[node name="Button" type="Button" parent="Own/Hand"]
+[node name="IncomingDamageLabel" type="Label" parent="Own"]
-layout_mode = 2
-text = "CARD_1"
-
-[node name="Button2" type="Button" parent="Own/Hand"]
-layout_mode = 2
-text = "CARD_2"
-
-[node name="Button3" type="Button" parent="Own/Hand"]
-layout_mode = 2
-text = "CARD_3"
-
-[node name="Opponent" type="VBoxContainer" parent="." node_paths=PackedStringArray("deck", "monster_name_label", "monster_health_label", "incoming_damage_label", "energy_label")]
 layout_mode = 1
-anchors_preset = 10
+anchors_preset = 5
-anchor_right = 1.0
+anchor_left = 0.5
-offset_bottom = 190.0
+anchor_right = 0.5
+offset_left = -83.5
+offset_top = 300.0
+offset_right = 83.5
+offset_bottom = 323.0
 grow_horizontal = 2
+text = "Incoming Damage: 0"
+horizontal_alignment = 1
+
+[node name="Opponent" type="Control" parent="." node_paths=PackedStringArray("deck", "energy_label")]
+layout_mode = 1
+anchor_right = 1.0
+anchor_bottom = 0.5
+grow_horizontal = 2
+grow_vertical = 2
 script = ExtResource("2_w4tnt")
 player_id = 1
 deck = NodePath("Hand")
-monster_name_label = NodePath("Monster/VBoxContainer/NameLabel")
-monster_health_label = NodePath("Monster/VBoxContainer/HealthLabel")
-incoming_damage_label = NodePath("Monster/VBoxContainer/IncomingDamageLabel")
 energy_label = NodePath("EnergyLabel")
 
+[node name="MonsterCard" parent="Opponent" instance=ExtResource("7_4ah45")]
+custom_minimum_size = Vector2(220, 330)
+layout_mode = 1
+anchors_preset = 7
+anchor_left = 0.5
+anchor_top = 1.0
+anchor_right = 0.5
+offset_left = -110.0
+offset_top = -350.0
+offset_right = 110.0
+offset_bottom = -20.0
+grow_vertical = 0
+pivot_offset = Vector2(110, 330)
+size_flags_horizontal = 4
+size_flags_vertical = 4
+
+[node name="Support1GreenCard" parent="Opponent" instance=ExtResource("8_dytl5")]
+layout_mode = 1
+anchors_preset = 7
+anchor_left = 0.5
+anchor_top = 1.0
+anchor_right = 0.5
+anchor_bottom = 1.0
+offset_left = -310.0
+offset_top = -465.0
+offset_right = -90.0
+offset_bottom = -145.0
+grow_horizontal = 2
+grow_vertical = 0
+pivot_offset = Vector2(110, 320)
+
+[node name="Support2GreenCard" parent="Opponent" instance=ExtResource("8_dytl5")]
+layout_mode = 1
+anchors_preset = 7
+anchor_left = 0.5
+anchor_top = 1.0
+anchor_right = 0.5
+anchor_bottom = 1.0
+offset_left = 90.0
+offset_top = -465.0
+offset_right = 310.0
+offset_bottom = -145.0
+grow_horizontal = 2
+grow_vertical = 0
+pivot_offset = Vector2(110, 320)
+
+[node name="Support2RedCard" parent="Opponent" instance=ExtResource("9_cabcc")]
+layout_mode = 1
+anchors_preset = 7
+anchor_left = 0.5
+anchor_top = 1.0
+anchor_right = 0.5
+anchor_bottom = 1.0
+offset_left = 90.0
+offset_top = -465.0
+offset_right = 310.0
+offset_bottom = -145.0
+grow_horizontal = 2
+grow_vertical = 0
+pivot_offset = Vector2(110, 320)
+
 [node name="Hand" type="HBoxContainer" parent="Opponent"]
-layout_mode = 2
+layout_mode = 1
+anchors_preset = 10
+anchor_right = 1.0
+offset_bottom = 31.0
+grow_horizontal = 2
 alignment = 1
 
 [node name="Button" type="Button" parent="Opponent/Hand"]
@@ -117,33 +232,26 @@ text = "CARD_3"
 
 [node name="EnergyLabel" type="Label" parent="Opponent"]
 layout_mode = 2
+offset_top = 35.0
+offset_right = 1152.0
+offset_bottom = 58.0
 text = "Energy:"
 
-[node name="Monster" type="HBoxContainer" parent="Opponent"]
+[node name="IncomingDamageLabel" type="Label" parent="Opponent"]
-custom_minimum_size = Vector2(0, 128)
+layout_mode = 1
-layout_mode = 2
+anchors_preset = 7
-size_flags_horizontal = 4
+anchor_left = 0.5
-alignment = 1
+anchor_top = 1.0
-
+anchor_right = 0.5
-[node name="VBoxContainer" type="VBoxContainer" parent="Opponent/Monster"]
+anchor_bottom = 1.0
-layout_mode = 2
+offset_left = -83.5
-
+offset_top = -325.0
-[node name="NameLabel" type="Label" parent="Opponent/Monster/VBoxContainer"]
+offset_right = 83.5
-layout_mode = 2
+offset_bottom = -302.0
-size_flags_vertical = 3
+grow_horizontal = 2
-text = "Name: "
+grow_vertical = 0
-
+text = "Incoming Damage: 0"
-[node name="HealthLabel" type="Label" parent="Opponent/Monster/VBoxContainer"]
+horizontal_alignment = 1
-layout_mode = 2
-size_flags_vertical = 3
-text = "Health:"
-
-[node name="IncomingDamageLabel" type="Label" parent="Opponent/Monster/VBoxContainer"]
-custom_minimum_size = Vector2(128, 0)
-layout_mode = 2
-size_flags_vertical = 3
-text = "Incoming Damage:"
-vertical_alignment = 2
 
 [node name="StartGameButton" type="Button" parent="."]
 layout_mode = 1

main.tscn

@@ -63,9 +63,12 @@ layout_mode = 1
 
 [node name="DisconnectButton" type="Button" parent="AfterConnect"]
 unique_name_in_owner = true
-layout_mode = 2
+layout_mode = 1
-offset_left = 966.0
+anchors_preset = 1
-offset_right = 1152.0
+anchor_left = 1.0
+anchor_right = 1.0
+offset_left = -186.0
 offset_bottom = 31.0
+grow_horizontal = 0
 size_flags_horizontal = 8
 text = "Disconnect"

player_side.gd

@@ -4,14 +4,22 @@ signal play_card(card: Card)
 signal rps_move(move: String)
 @export var player_id: int
 @export var deck: Container
-@export var monster_name_label: Label
-@export var monster_health_label: Label
-@export var incoming_damage_label: Label
 @export var energy_label: Label
+@export var skip_card_prefab: PackedScene
+@export var support_red_card_prefab: PackedScene
+@export var support_green_card_prefab: PackedScene
+@export var monster_card_prefab: PackedScene
+
+@onready var monster_card_ui := $"MonsterCard"
+@onready var support1_green := $"Support1GreenCard"
+@onready var support2_green := $"Support2GreenCard"
+@onready var support2_red := $"Support2RedCard"
+@onready var incoming_damage_label := $"IncomingDamageLabel"
 
 var match_manager: MatchManager
 var show_buttons: bool
 var signal_connected: bool
+var selected_card: Control
 
 func attach(match_manager: MatchManager, show_buttons: bool = true):
 	self.show_buttons = show_buttons
@@ -20,18 +28,49 @@ func attach(match_manager: MatchManager, show_buttons: bool = true):
 		match_manager.state_transitioned.connect(_on_update)
 		signal_connected = true
 
+func _ready():
+	monster_card_ui.visible = false
+	support1_green.visible = false
+	support2_green.visible = false
+	support2_red.visible = false
+
 func _on_update(transition):
+	selected_card = null
+	
 	for child in deck.get_children():
 		child.queue_free()
 	var player: MatchPlayer = match_manager.players.get(player_id) as MatchPlayer
 	if not player:
 		return
 	energy_label.text = "Energy: " + str(player.energy)
+	
+	if match_manager.support_cards_1.has(player):
+		support1_green.visible = true
+		support1_green.card = match_manager.support_cards_1[player]
+	else:
+		support1_green.visible = false
+	
+	if match_manager.support_cards_2.has(player):
+		var card: SupportCard = match_manager.support_cards_2[player]
+		if card.type == "green":
+			support2_green.visible = true
+			support2_green.card = card
+		else:
+			support2_red.visible = true
+			support2_red.card = card
+	else:
+		support2_green.visible = false
+		support2_red.visible = false
+	
+	
 	var monster = player.monster
+	
 	if monster:
-		monster_name_label.text = "Name: " + monster.card.id
+		monster_card_ui.visible = true
-		monster_health_label.text = "Health: " + str(monster.health)
+		monster_card_ui.show_monster(monster)
 		incoming_damage_label.text = "Incoming Damage: " + str(monster.health_delta)
+	else:
+		monster_card_ui.visible = false
 	if match_manager.phase in [Match.Phase.SUMMON, Match.Phase.SUPPORT_1, Match.Phase.SUPPORT_2]:
 		
 		if 	(
@@ -39,9 +78,10 @@ func _on_update(transition):
 			) or (
 				match_manager.phase == Match.Phase.SUMMON and player.monster and player.monster.health > 0 && show_buttons
 			):
-			var skip_btn = Button.new()
+			var skip_btn:CardBase = skip_card_prefab.instantiate()
-			skip_btn.text = "Skip"
+			skip_btn.left_clicked.connect(func (): 
-			skip_btn.button_up.connect(func (): play_card.emit(null))
+				_pop_this_card(skip_btn)
+				play_card.emit(null))
 			deck.add_child(skip_btn)
 		
 		for card: Card in player.hand:
@@ -55,10 +95,7 @@ func _on_update(transition):
 			if !show_buttons :
 				continue
 			
-			var btn = Button.new()
+			var is_disabled = (
-			btn.text = card.id
-			btn.button_up.connect(func (): play_card.emit(card))
-			btn.disabled = (
 				card is MonsterCard and match_manager.phase != Match.Phase.SUMMON
 			) or (
 				card is SupportCard and match_manager.phase != Match.Phase.SUPPORT_1 and match_manager.phase != Match.Phase.SUPPORT_2
@@ -67,7 +104,32 @@ func _on_update(transition):
 			) or (
 				card is MonsterCard and match_manager.phase == Match.Phase.SUMMON and player.monster and player.monster.health > 0
 			)
+			
+			var btn: CardBase = null
+			if card is MonsterCard:
+				var monster_card:MonsterCardUI = monster_card_prefab.instantiate()
+				monster_card.show_monster(MatchMonster.new(card, card.base_health, 0))
+				
+				if !is_disabled:
+					monster_card.left_clicked.connect(func (): 
+						_pop_this_card(monster_card)
+						play_card.emit(card))
+				deck.add_child(monster_card)
+				
+			elif card is SupportCard and card.type == "red":
+				btn = support_red_card_prefab.instantiate()
+				btn.card = card
 				deck.add_child(btn)
+			else:
+				btn = support_green_card_prefab.instantiate()
+				btn.card = card
+				deck.add_child(btn)
+		
+			if btn and !is_disabled:
+				btn.left_clicked.connect(func (): 
+					_pop_this_card(btn)
+					play_card.emit(card))
+			
 	if match_manager.phase == Match.Phase.RPS:
 		for move in ["rock", "paper", "scissors"]:
 			
@@ -79,3 +141,9 @@ func _on_update(transition):
 			btn.button_up.connect(func (): rps_move.emit(move))
 			deck.add_child(btn)
 
+func _pop_this_card(control: Control):
+	if selected_card:
+		selected_card.size_flags_vertical = Control.SIZE_SHRINK_END
+	
+	control.size_flags_vertical = Control.SIZE_SHRINK_BEGIN
+	selected_card = control

project.godot

@@ -19,6 +19,12 @@ config/icon="res://icon.svg"
 
 Match="*res://tcg/match/match.gd"
 
+[display]
+
+window/size/viewport_width=1920
+window/size/viewport_height=1080
+window/stretch/mode="viewport"
+
 [rendering]
 
 renderer/rendering_method="mobile"

tcg/match/match_manager.gd

@@ -22,6 +22,9 @@ var player_2: MatchPlayer:
 		return players[actual_p2_id] as MatchPlayer
 var phase: Match.Phase = Match.Phase.PREGAME
 
+var support_cards_1: Dictionary = {}
+var support_cards_2: Dictionary = {}
+
 var actual_p1_id: int
 var actual_p2_id: int
 
@@ -72,6 +75,9 @@ func resolve(action_by_player_id: Dictionary) -> PhaseTransition:
 				)
 			phase = Match.Phase.SUMMON
 		Match.Phase.SUMMON:
+			support_cards_1.clear()
+			support_cards_2.clear()
+			
 			for player_id in action_by_player_id.keys():
 				var action = action_by_player_id[player_id]
 				if action is ActionPlayCard:
@@ -83,18 +89,23 @@ func resolve(action_by_player_id: Dictionary) -> PhaseTransition:
 			if players.values().all(func(player: MatchPlayer): return player.monster):
 				phase = Match.Phase.SUPPORT_1
 		Match.Phase.SUPPORT_1:
+			support_cards_1.clear()
+			support_cards_2.clear()
+			
 			var support_cards = []
 			if player_1_action is ActionPlayCard:
 				support_cards.append({
 					"player": player_1,
 					"card": player_1_action.card
 				})
+				support_cards_1[player_1] = player_1_action.card
 				player_1.hand.erase(player_1_action.card)
 			if player_2_action is ActionPlayCard:
 				support_cards.append({
 					"player": player_2,
 					"card": player_2_action.card
 				})
+				support_cards_1[player_2] = player_2_action.card
 				player_2.hand.erase(player_2_action.card)
 			support_cards.sort_custom(func(a, b): return a.card.priority < b.card.priority)
 			for played_card in support_cards:
@@ -118,12 +129,14 @@ func resolve(action_by_player_id: Dictionary) -> PhaseTransition:
 					"player": player_1,
 					"card": player_1_action.card
 				})
+				support_cards_2[player_1] = player_1_action.card
 				player_1.hand.erase(player_1_action.card)
 			if player_2_action is ActionPlayCard:
 				support_cards.append({
 					"player": player_2,
 					"card": player_2_action.card
 				})
+				support_cards_2[player_2] = player_2_action.card
 				player_2.hand.erase(player_2_action.card)
 			support_cards.sort_custom(func(a, b): return a.card.priority < b.card.priority)
 			for played_card in support_cards:

ui/card_template/card_base.gd

@@ -1,4 +1,9 @@
 extends Control
+class_name CardBase
+
+signal left_clicked
+signal right_clicked
+signal hovering(delta: float)
 
 @export var card_name_label: Label
 @export var card_desc_label: Label
@@ -17,4 +22,23 @@ func _update(card: SupportCard):
 	card_desc_label.text = card.description
 	icon_rect.texture = card.icon
 	
+func _process(delta):
+	var mouse_position = get_global_mouse_position()
+	var rect = get_global_rect()
+	if rect.has_point(mouse_position):
+		hovering.emit(delta)
 
+func _input(event):
+	if event is InputEventMouseButton:
+		if !event.is_pressed():
+			return
+		
+		var mouse_position = get_global_mouse_position()
+		var rect = get_global_rect()
+		if not rect.has_point(mouse_position):
+			return
+		
+		if event.button_index == MOUSE_BUTTON_LEFT:
+			left_clicked.emit()
+		elif event.button_index == MOUSE_BUTTON_RIGHT:
+			right_clicked.emit()

ui/card_template/monster_card.gd

@@ -1,7 +1,56 @@
 extends Control
+class_name MonsterCardUI
 
-@export var name_label: Label
+signal left_clicked
-@export var health_label: Label
+signal right_clicked
-@export var energy_pip_container: Container
+signal hovering(delta: float)
-@export var energy_pip: PackedScene
+
-@export var art: Texture2D
+@export var name_label : Label
+@export var health_label : Label
+@export var energy_pip_container :Container
+@export var icon_texture_rect : TextureRect
+@export var paper_damage : Label
+@export var scissors_damage : Label
+@export var rock_damage : Label
+
+func show_monster(monster: MatchMonster):
+	if !monster:
+		name_label.text = ""
+		health_label.text = "HP"
+		icon_texture_rect.texture = null
+		return
+	
+	name_label.text = monster.card.id
+	health_label.text = "HP %d" % [monster.health]
+	icon_texture_rect.texture =  monster.card.icon
+	
+	paper_damage.text = str(monster.card.paper)
+	scissors_damage.text = str(monster.card.scissors)
+	rock_damage.text = str(monster.card.rock)
+	
+	var shown_stars = 0
+	for child in energy_pip_container.get_children():
+		var tr = child as TextureRect
+		tr.visible = shown_stars < monster.card.energy_cost
+		shown_stars += 1
+
+func _process(delta):
+	var mouse_position = get_global_mouse_position()
+	var rect = get_global_rect()
+	if rect.has_point(mouse_position):
+		hovering.emit(delta)
+
+func _input(event):
+	if event is InputEventMouseButton:
+		if !event.is_pressed():
+			return
+		
+		var mouse_position = get_global_mouse_position()
+		var rect = get_global_rect()
+		if not rect.has_point(mouse_position):
+			return
+		
+		if event.button_index == MOUSE_BUTTON_LEFT:
+			left_clicked.emit()
+		elif event.button_index == MOUSE_BUTTON_RIGHT:
+			right_clicked.emit()

ui/card_template/monster_card.tscn

@@ -15,16 +15,27 @@
 [ext_resource type="Texture2D" uid="uid://ch04c20lkis6j" path="res://assets/card_base/gunting.png" id="13_ifoc6"]
 [ext_resource type="Texture2D" uid="uid://b0pclmv0j0r12" path="res://assets/card_base/kertas.png" id="14_gm7k7"]
 
-[node name="MonsterCard" type="Control"]
+[node name="MonsterCard" type="Control" node_paths=PackedStringArray("name_label", "health_label", "energy_pip_container", "icon_texture_rect", "paper_damage", "scissors_damage", "rock_damage")]
+custom_minimum_size = Vector2(220, 320)
 layout_mode = 3
 anchors_preset = 15
 anchor_right = 1.0
 anchor_bottom = 1.0
-offset_right = -932.0
+offset_right = -1700.0
-offset_bottom = -328.0
+offset_bottom = -760.0
 grow_horizontal = 2
 grow_vertical = 2
+scale = Vector2(0.7, 0.7)
+pivot_offset = Vector2(110, 160)
+size_flags_vertical = 8
 script = ExtResource("1_xddej")
+name_label = NodePath("MarginContainer/MonsterNameLabel")
+health_label = NodePath("MarginContainer/HealthLabel")
+energy_pip_container = NodePath("MarginContainer/EnergyStarsContainer")
+icon_texture_rect = NodePath("MarginContainer/TextureRect2/IconTextureRect")
+paper_damage = NodePath("MarginContainer/Paper/PaperDamage")
+scissors_damage = NodePath("MarginContainer/Scissors/ScissorsDamage")
+rock_damage = NodePath("MarginContainer/Rock/RockDamage")
 
 [node name="Screenshot2025-01-25211435" type="Sprite2D" parent="."]
 visible = false
@@ -95,7 +106,8 @@ texture = ExtResource("7_qe8a1")
 expand_mode = 1
 stretch_mode = 5
 
-[node name="TextureRect" type="TextureRect" parent="MarginContainer/TextureRect2"]
+[node name="IconTextureRect" type="TextureRect" parent="MarginContainer/TextureRect2"]
+unique_name_in_owner = true
 layout_mode = 1
 anchors_preset = 15
 anchor_right = 1.0
@@ -106,32 +118,34 @@ texture = ExtResource("7_j2i0p")
 expand_mode = 1
 stretch_mode = 5
 
-[node name="EnergyStars" type="HBoxContainer" parent="MarginContainer"]
+[node name="EnergyStarsContainer" type="HBoxContainer" parent="MarginContainer"]
+unique_name_in_owner = true
 layout_mode = 0
 offset_left = 141.0
 offset_top = 55.0
 offset_right = 200.0
 offset_bottom = 70.0
 
-[node name="TextureRect3" type="TextureRect" parent="MarginContainer/EnergyStars"]
+[node name="TextureRect3" type="TextureRect" parent="MarginContainer/EnergyStarsContainer"]
 layout_mode = 2
 texture = ExtResource("8_ophhb")
 expand_mode = 3
 stretch_mode = 5
 
-[node name="TextureRect2" type="TextureRect" parent="MarginContainer/EnergyStars"]
+[node name="TextureRect2" type="TextureRect" parent="MarginContainer/EnergyStarsContainer"]
 layout_mode = 2
 texture = ExtResource("8_ophhb")
 expand_mode = 3
 stretch_mode = 5
 
-[node name="TextureRect" type="TextureRect" parent="MarginContainer/EnergyStars"]
+[node name="TextureRect" type="TextureRect" parent="MarginContainer/EnergyStarsContainer"]
 layout_mode = 2
 texture = ExtResource("8_ophhb")
 expand_mode = 3
 stretch_mode = 5
 
-[node name="HPNumber" type="Label" parent="MarginContainer"]
+[node name="HealthLabel" type="Label" parent="MarginContainer"]
+unique_name_in_owner = true
 layout_mode = 1
 anchors_preset = 10
 anchor_right = 1.0
@@ -146,6 +160,7 @@ text = "HP 80"
 vertical_alignment = 1
 
 [node name="MonsterNameLabel" type="Label" parent="MarginContainer"]
+unique_name_in_owner = true
 layout_mode = 1
 anchors_preset = 10
 anchor_right = 1.0
@@ -191,6 +206,7 @@ horizontal_alignment = 1
 vertical_alignment = 1
 
 [node name="Paper" type="TextureRect" parent="MarginContainer"]
+layout_mode = 0
 offset_left = 109.0
 offset_top = 183.0
 offset_right = 222.0
@@ -199,7 +215,8 @@ texture = ExtResource("14_gm7k7")
 expand_mode = 1
 stretch_mode = 5
 
-[node name="HPNumber" type="Label" parent="MarginContainer/Paper"]
+[node name="PaperDamage" type="Label" parent="MarginContainer/Paper"]
+unique_name_in_owner = true
 layout_mode = 1
 anchors_preset = 10
 anchor_right = 1.0
@@ -214,6 +231,7 @@ text = "10"
 vertical_alignment = 1
 
 [node name="Scissors" type="TextureRect" parent="MarginContainer"]
+layout_mode = 0
 offset_left = 43.0
 offset_top = 182.0
 offset_right = 156.0
@@ -222,7 +240,8 @@ texture = ExtResource("13_ifoc6")
 expand_mode = 1
 stretch_mode = 5
 
-[node name="HPNumber" type="Label" parent="MarginContainer/Scissors"]
+[node name="ScissorsDamage" type="Label" parent="MarginContainer/Scissors"]
+unique_name_in_owner = true
 layout_mode = 1
 anchors_preset = 10
 anchor_right = 1.0
@@ -246,7 +265,8 @@ texture = ExtResource("12_a4kkh")
 expand_mode = 1
 stretch_mode = 5
 
-[node name="HPNumber" type="Label" parent="MarginContainer/Rock"]
+[node name="RockDamage" type="Label" parent="MarginContainer/Rock"]
+unique_name_in_owner = true
 layout_mode = 1
 anchors_preset = 10
 anchor_right = 1.0

ui/card_template/skip_card.tscn

@@ -0,0 +1,274 @@
+[gd_scene load_steps=14 format=3 uid="uid://b60vuykleugjn"]
+
+[ext_resource type="Script" path="res://ui/card_template/card_base.gd" id="1_ci66m"]
+[ext_resource type="Texture2D" uid="uid://l2nxxhh0pvh8" path="res://assets/card_base/Frame.png" id="3_lbsr3"]
+[ext_resource type="Texture2D" uid="uid://crgrple0uik7x" path="res://assets/card_base/Stroke.png" id="4_avv1r"]
+[ext_resource type="Texture2D" uid="uid://c2qyx2k50v2vv" path="res://assets/card_base/Monster-InnerFill.png" id="5_3yv36"]
+[ext_resource type="Texture2D" uid="uid://dft4fbgoecbp4" path="res://assets/card_base/Illustrated BG.png" id="6_cfl8c"]
+[ext_resource type="Texture2D" uid="uid://b8accn4e2ojau" path="res://assets/monster/froggo 1.png" id="7_5xgn0"]
+[ext_resource type="Texture2D" uid="uid://cqttp0i3vph37" path="res://assets/card_base/Star.png" id="8_gh78y"]
+[ext_resource type="Theme" path="res://cards.tres" id="9_gwg6h"]
+[ext_resource type="Texture2D" uid="uid://cjmxetjq82rl2" path="res://assets/card_base/Pip.png" id="10_kd76d"]
+[ext_resource type="FontFile" uid="uid://08q3kkwmd4u6" path="res://assets/Inter-Regular.otf" id="11_ofcpo"]
+[ext_resource type="Texture2D" uid="uid://b0pclmv0j0r12" path="res://assets/card_base/kertas.png" id="12_dql2x"]
+[ext_resource type="Texture2D" uid="uid://ch04c20lkis6j" path="res://assets/card_base/gunting.png" id="13_0vsuw"]
+[ext_resource type="Texture2D" uid="uid://bywa8qlwvcksd" path="res://assets/card_base/batu.png" id="14_o8cdd"]
+
+[node name="SkipCard" type="Control"]
+custom_minimum_size = Vector2(220, 320)
+layout_mode = 3
+anchors_preset = 15
+anchor_right = 1.0
+anchor_bottom = 1.0
+offset_right = -1700.0
+offset_bottom = -760.0
+grow_horizontal = 2
+grow_vertical = 2
+scale = Vector2(0.7, 0.7)
+pivot_offset = Vector2(110, 160)
+size_flags_vertical = 8
+script = ExtResource("1_ci66m")
+
+[node name="Frame" type="TextureRect" parent="."]
+layout_mode = 1
+anchors_preset = 15
+anchor_right = 1.0
+anchor_bottom = 1.0
+grow_horizontal = 2
+grow_vertical = 2
+texture = ExtResource("3_lbsr3")
+expand_mode = 1
+
+[node name="MarginContainer" type="Control" parent="."]
+layout_mode = 1
+anchors_preset = 15
+anchor_right = 1.0
+anchor_bottom = 1.0
+offset_left = 4.0
+offset_top = 3.0
+offset_right = -5.0
+offset_bottom = -4.0
+grow_horizontal = 2
+grow_vertical = 2
+
+[node name="OuterStroke" type="NinePatchRect" parent="MarginContainer"]
+layout_mode = 1
+anchors_preset = 15
+anchor_right = 1.0
+anchor_bottom = 1.0
+grow_horizontal = 2
+grow_vertical = 2
+texture = ExtResource("4_avv1r")
+
+[node name="InnerFill" type="TextureRect" parent="MarginContainer"]
+layout_mode = 1
+anchors_preset = 15
+anchor_right = 1.0
+anchor_bottom = 1.0
+offset_top = 43.0
+grow_horizontal = 2
+grow_vertical = 2
+texture = ExtResource("5_3yv36")
+expand_mode = 1
+
+[node name="InnerStroke" type="NinePatchRect" parent="MarginContainer"]
+layout_mode = 1
+anchors_preset = 15
+anchor_right = 1.0
+anchor_bottom = 1.0
+offset_top = 42.0
+grow_horizontal = 2
+grow_vertical = 2
+texture = ExtResource("4_avv1r")
+
+[node name="TextureRect2" type="TextureRect" parent="MarginContainer"]
+layout_mode = 0
+offset_left = 9.0
+offset_top = 77.0
+offset_right = 199.0
+offset_bottom = 207.0
+pivot_offset = Vector2(95, 65)
+texture = ExtResource("6_cfl8c")
+expand_mode = 1
+stretch_mode = 5
+
+[node name="IconTextureRect" type="TextureRect" parent="MarginContainer/TextureRect2"]
+unique_name_in_owner = true
+visible = false
+layout_mode = 1
+anchors_preset = 15
+anchor_right = 1.0
+anchor_bottom = 1.0
+grow_horizontal = 2
+grow_vertical = 2
+texture = ExtResource("7_5xgn0")
+expand_mode = 1
+stretch_mode = 5
+
+[node name="EnergyStarsContainer" type="HBoxContainer" parent="MarginContainer"]
+unique_name_in_owner = true
+visible = false
+layout_mode = 0
+offset_left = 141.0
+offset_top = 55.0
+offset_right = 200.0
+offset_bottom = 70.0
+
+[node name="TextureRect3" type="TextureRect" parent="MarginContainer/EnergyStarsContainer"]
+layout_mode = 2
+texture = ExtResource("8_gh78y")
+expand_mode = 3
+stretch_mode = 5
+
+[node name="TextureRect2" type="TextureRect" parent="MarginContainer/EnergyStarsContainer"]
+layout_mode = 2
+texture = ExtResource("8_gh78y")
+expand_mode = 3
+stretch_mode = 5
+
+[node name="TextureRect" type="TextureRect" parent="MarginContainer/EnergyStarsContainer"]
+layout_mode = 2
+texture = ExtResource("8_gh78y")
+expand_mode = 3
+stretch_mode = 5
+
+[node name="HealthLabel" type="Label" parent="MarginContainer"]
+unique_name_in_owner = true
+visible = false
+layout_mode = 1
+anchors_preset = 10
+anchor_right = 1.0
+offset_left = 14.0
+offset_top = 44.0
+offset_right = -99.0
+offset_bottom = 80.0
+grow_horizontal = 2
+theme = ExtResource("9_gwg6h")
+theme_override_font_sizes/font_size = 16
+text = "HP 80"
+vertical_alignment = 1
+
+[node name="MonsterNameLabel" type="Label" parent="MarginContainer"]
+unique_name_in_owner = true
+layout_mode = 1
+anchors_preset = 10
+anchor_right = 1.0
+offset_left = 63.1429
+offset_top = 118.429
+offset_right = 58.1429
+offset_bottom = 154.429
+grow_horizontal = 2
+theme = ExtResource("9_gwg6h")
+theme_override_font_sizes/font_size = 26
+text = "SKIP"
+vertical_alignment = 1
+
+[node name="CardNumber" type="TextureRect" parent="MarginContainer"]
+visible = false
+layout_mode = 0
+offset_left = 7.0
+offset_top = 17.0
+offset_right = 26.0
+offset_bottom = 36.0
+texture = ExtResource("10_kd76d")
+expand_mode = 1
+stretch_mode = 5
+
+[node name="Label" type="Label" parent="MarginContainer/CardNumber"]
+layout_mode = 1
+anchors_preset = 8
+anchor_left = 0.5
+anchor_top = 0.5
+anchor_right = 0.5
+anchor_bottom = 0.5
+offset_left = -9.5
+offset_top = -7.0
+offset_right = 9.5
+offset_bottom = 7.0
+grow_horizontal = 2
+grow_vertical = 2
+theme = ExtResource("9_gwg6h")
+theme_override_colors/font_color = Color(0, 0, 0, 1)
+theme_override_fonts/font = ExtResource("11_ofcpo")
+theme_override_font_sizes/font_size = 6
+text = "#01"
+horizontal_alignment = 1
+vertical_alignment = 1
+
+[node name="Paper" type="TextureRect" parent="MarginContainer"]
+visible = false
+layout_mode = 0
+offset_left = 109.0
+offset_top = 183.0
+offset_right = 222.0
+offset_bottom = 356.0
+texture = ExtResource("12_dql2x")
+expand_mode = 1
+stretch_mode = 5
+
+[node name="PaperDamage" type="Label" parent="MarginContainer/Paper"]
+unique_name_in_owner = true
+layout_mode = 1
+anchors_preset = 10
+anchor_right = 1.0
+offset_left = 48.0
+offset_top = 32.0
+offset_right = -32.0
+offset_bottom = 73.0
+grow_horizontal = 2
+theme = ExtResource("9_gwg6h")
+theme_override_font_sizes/font_size = 20
+text = "10"
+vertical_alignment = 1
+
+[node name="Scissors" type="TextureRect" parent="MarginContainer"]
+visible = false
+layout_mode = 0
+offset_left = 43.0
+offset_top = 182.0
+offset_right = 156.0
+offset_bottom = 355.0
+texture = ExtResource("13_0vsuw")
+expand_mode = 1
+stretch_mode = 5
+
+[node name="ScissorsDamage" type="Label" parent="MarginContainer/Scissors"]
+unique_name_in_owner = true
+layout_mode = 1
+anchors_preset = 10
+anchor_right = 1.0
+offset_left = 48.0
+offset_top = 32.0
+offset_right = -32.0
+offset_bottom = 73.0
+grow_horizontal = 2
+theme = ExtResource("9_gwg6h")
+theme_override_font_sizes/font_size = 20
+text = "10"
+vertical_alignment = 1
+
+[node name="Rock" type="TextureRect" parent="MarginContainer"]
+visible = false
+layout_mode = 0
+offset_left = -23.0
+offset_top = 181.0
+offset_right = 90.0
+offset_bottom = 354.0
+texture = ExtResource("14_o8cdd")
+expand_mode = 1
+stretch_mode = 5
+
+[node name="RockDamage" type="Label" parent="MarginContainer/Rock"]
+unique_name_in_owner = true
+layout_mode = 1
+anchors_preset = 10
+anchor_right = 1.0
+offset_left = 48.0
+offset_top = 32.0
+offset_right = -32.0
+offset_bottom = 73.0
+grow_horizontal = 2
+theme = ExtResource("9_gwg6h")
+theme_override_font_sizes/font_size = 20
+text = "10"
+vertical_alignment = 1

ui/card_template/support_card_green.tscn

@@ -7,15 +7,19 @@
 [ext_resource type="Texture2D" uid="uid://blejyda8mendg" path="res://assets/card_base/InnerFill.png" id="4_pgomu"]
 [ext_resource type="Texture2D" uid="uid://by7ws88pn4tvb" path="res://assets/card_base/Separator.png" id="5_501uu"]
 [ext_resource type="Texture2D" uid="uid://0gxplli5krq2" path="res://assets/card_base/Pill.png" id="6_ce7hm"]
-[ext_resource type="Theme" uid="uid://cj3vs5hq2mcbp" path="res://cards.tres" id="7_va1d7"]
+[ext_resource type="Theme" path="res://cards.tres" id="7_va1d7"]
 [ext_resource type="Texture2D" uid="uid://rh3aswb0p7ri" path="res://assets/energy.png" id="8_4yq42"]
 [ext_resource type="FontFile" uid="uid://08q3kkwmd4u6" path="res://assets/Inter-Regular.otf" id="10_c2ugn"]
 
 [node name="CardBase" type="Control" node_paths=PackedStringArray("card_name_label", "card_desc_label", "icon_rect")]
+custom_minimum_size = Vector2(220, 320)
 layout_mode = 3
 anchors_preset = 0
 offset_right = 220.0
 offset_bottom = 320.0
+scale = Vector2(0.7, 0.7)
+pivot_offset = Vector2(110, 160)
+size_flags_vertical = 8
 script = ExtResource("1_rpopv")
 card_name_label = NodePath("MarginContainer/Label")
 card_desc_label = NodePath("MarginContainer/DescriptionLabel")
@@ -144,6 +148,7 @@ horizontal_alignment = 1
 vertical_alignment = 1
 
 [node name="Icon" type="TextureRect" parent="MarginContainer"]
+layout_mode = 0
 offset_left = 26.0
 offset_top = 74.0
 offset_right = 169.0
@@ -153,6 +158,7 @@ expand_mode = 1
 stretch_mode = 6
 
 [node name="DescriptionLabel" type="Label" parent="MarginContainer"]
+layout_mode = 0
 offset_left = 11.0
 offset_top = 224.0
 offset_right = 200.0

ui/card_template/support_card_red.tscn

@@ -7,15 +7,19 @@
 [ext_resource type="Texture2D" uid="uid://blejyda8mendg" path="res://assets/card_base/InnerFill.png" id="4_2fw8n"]
 [ext_resource type="Texture2D" uid="uid://by7ws88pn4tvb" path="res://assets/card_base/Separator.png" id="5_n3v14"]
 [ext_resource type="Texture2D" uid="uid://0gxplli5krq2" path="res://assets/card_base/Pill.png" id="6_wrd2a"]
-[ext_resource type="Theme" uid="uid://cj3vs5hq2mcbp" path="res://cards.tres" id="7_fp6ys"]
+[ext_resource type="Theme" path="res://cards.tres" id="7_fp6ys"]
 [ext_resource type="FontFile" uid="uid://08q3kkwmd4u6" path="res://assets/Inter-Regular.otf" id="9_vilw6"]
 [ext_resource type="Texture2D" uid="uid://rh3aswb0p7ri" path="res://assets/energy.png" id="10_2t0ey"]
 
 [node name="CardBase" type="Control" node_paths=PackedStringArray("card_name_label", "card_desc_label", "icon_rect")]
+custom_minimum_size = Vector2(220, 320)
 layout_mode = 3
 anchors_preset = 0
 offset_right = 220.0
 offset_bottom = 320.0
+scale = Vector2(0.7, 0.7)
+pivot_offset = Vector2(110, 160)
+size_flags_vertical = 8
 script = ExtResource("1_d22a5")
 card_name_label = NodePath("MarginContainer/Title")
 card_desc_label = NodePath("MarginContainer/DescriptionLabel")