Implement a basic color changing card

Characters/Player.gd

@@ -1,3 +1,17 @@
 extends Node2D
 
-export var starting_pos : Vector2 = Vector2.ZERO
+export var map_position : Vector2 = Vector2.ZERO
+
+var target_position : Vector2 = Vector2.ZERO
+var moving : bool = false
+
+
+func _physics_process(delta):
+	
+	# If the 2 positions are close enough, then not moving
+	moving = false if target_position.round() == position.round() else true
+	
+	if not moving: return
+	
+	#TODO: Replace with tween magic
+	position += (target_position - position)/2.5

Scenes/BattleScene.gd

@@ -25,5 +25,11 @@ func _physics_process(delta):
 		if movement_queue.find(Vector2.ZERO) != -1:
 			movement_queue.remove(movement_queue.find(Vector2.ZERO))
 	
+	if len(movement_queue) == 0:
+		return
 	
-	
+	#move the character once space in the queue if not moving
+	if not $Player.moving:
+		$Player.map_position += movement_queue.pop_front()
+		$Player.target_position = $TileMap.map_to_world($Player.map_position)
+		$Player.target_position += $TileMap.cell_size/2

UI/Card.gd

@@ -0,0 +1,25 @@
+tool
+extends Control
+
+
+enum TYPE {
+	DAMAGE = 0
+	UTILITY = 1
+	SPECIAL = 2
+	EFFECT = 3
+}
+
+const TYPE_COLORS = [
+	Color("#db4758"), # DAMAGE
+	Color("#3cc361"), # UTILITY
+	Color("#ddd55c"), # SPECIAL
+	Color("#bc5ec6"), # EFFECT
+]
+
+export (TYPE) var type
+
+
+func _ready():
+	var card_style = $PanelContainer.get('custom_styles/panel').duplicate(true)
+	card_style.set_bg_color(TYPE_COLORS[type])
+	$PanelContainer.set('custom_styles/panel', card_style)

UI/Card.tscn

@@ -0,0 +1,16 @@
+[gd_scene load_steps=3 format=2]
+
+[ext_resource path="res://UI/Card.gd" type="Script" id=1]
+[ext_resource path="res://UI/CardStyle.tres" type="StyleBox" id=2]
+
+[node name="Card" type="Control"]
+anchor_right = 1.0
+anchor_bottom = 1.0
+size_flags_horizontal = 3
+size_flags_vertical = 3
+script = ExtResource( 1 )
+
+[node name="PanelContainer" type="PanelContainer" parent="."]
+anchor_right = 1.0
+anchor_bottom = 1.0
+custom_styles/panel = ExtResource( 2 )

UI/CardStyle.tres

@@ -0,0 +1,7 @@
+[gd_resource type="StyleBoxFlat" format=2]
+
+[resource]
+corner_radius_top_left = 20
+corner_radius_top_right = 20
+corner_radius_bottom_right = 20
+corner_radius_bottom_left = 20

UI/CardView.tscn

@@ -0,0 +1,35 @@
+[gd_scene load_steps=2 format=2]
+
+[ext_resource path="res://UI/Card.tscn" type="PackedScene" id=1]
+
+[node name="CardView" type="Control"]
+anchor_right = 1.0
+anchor_bottom = 1.0
+
+[node name="HBox" type="HBoxContainer" parent="."]
+anchor_right = 1.0
+anchor_bottom = 1.0
+custom_constants/separation = 50
+
+[node name="Card1" parent="HBox" instance=ExtResource( 1 )]
+anchor_right = 0.0
+anchor_bottom = 0.0
+margin_right = 308.0
+margin_bottom = 600.0
+type = 1
+
+[node name="Card2" parent="HBox" instance=ExtResource( 1 )]
+anchor_right = 0.0
+anchor_bottom = 0.0
+margin_left = 358.0
+margin_right = 666.0
+margin_bottom = 600.0
+type = 2
+
+[node name="Card3" parent="HBox" instance=ExtResource( 1 )]
+anchor_right = 0.0
+anchor_bottom = 0.0
+margin_left = 716.0
+margin_right = 1024.0
+margin_bottom = 600.0
+type = 3