Improve Card Visuals

AutoGridContainer - Full Version/AutoGridContainer.gd

@@ -0,0 +1,103 @@
+extends Control
+
+#"soft" because it isn't enforced if the grid wouldn't fit otherwise
+export var soft_minimum_columns : int = 2
+#these should come from the theme or from theme overrides
+export var grid_hseperation : int = 4
+export var grid_vseperation : int = 4
+
+var _node_width = -1
+var _node_height = -1
+
+onready var grid_container = $Scroll/VBox/GridContainer
+
+func _update_node_size():
+	if len(grid_container.get_children()) == 0:
+		return -1
+
+	#duplicate a node, assuming they are all the same
+	$MinSizeTesting.add_child(grid_container.get_child(0).duplicate())
+	#set the size to the minimum
+	$MinSizeTesting.get_child(0).rect_size = Vector2(0, 0)
+
+	#get the smallest possible size they can contain
+	_node_width = $MinSizeTesting.get_child(0).rect_size.x
+	_node_height = $MinSizeTesting.get_child(0).rect_size.y
+	#plus any seperation due to the grid
+	_node_width += grid_hseperation
+	_node_height += grid_vseperation
+
+	#remove the copied node
+	$MinSizeTesting.get_child(0).queue_free()
+
+
+func _process(_delta: float) -> void:
+	_move_children_to_grid()
+
+	#don't do anything if there are no children
+	if len(grid_container.get_children()) == 0:
+		return
+	#don't do anything if the node's haven't got a size yet
+	if _node_width == -1 or _node_height == -1:
+		_update_node_size()
+		return
+
+	#window_size in case an issue occures with resizing
+	var screen_width = min(rect_size.x, OS.window_size.x)
+	var screen_height = min(rect_size.y, OS.window_size.y)
+
+	#(columns - 1) means that it can still shrink in size
+	grid_container.columns = max(1, int(screen_width/_node_width) - 1)
+	#don't allow more columns than children (wasted space)
+	grid_container.columns = min(grid_container.columns, grid_container.get_child_count())
+
+	#this is used to adjust the columns so that maximum space avalible is used
+	for _i in 10:
+		var empty_rows = _calculate_empty_rows(grid_container.columns, screen_height)
+
+		#check if perfect height already
+		if empty_rows <= 0:
+			break
+
+		#disallow single width (unless required previously)
+		if grid_container.columns <= soft_minimum_columns:
+			break
+
+		#check that it won't need to scroll if columns change
+		if _get_rows(grid_container.columns - 1) * _node_height > screen_height:
+			break
+
+		grid_container.columns -= 1
+
+
+func _calculate_empty_rows(columns, screen_height):
+	var rows = _get_rows(columns)
+
+	var height_not_used : int = screen_height - rows * _node_height
+	var empty_rows : int = height_not_used / _node_height
+
+	return empty_rows
+
+
+func _get_rows(columns):
+	# rows = children // columns + 1 (if remainder)
+	var rows = grid_container.get_child_count() / columns
+	rows += 1 if grid_container.get_child_count() % columns != 0 else 0
+
+	return rows
+
+
+func _move_children_to_grid():
+	#puts the children into the grid container
+	#ignores the first 2 children (container and size tester)
+	for _i in range(2, get_child_count()):
+		var child = get_child(2)
+		remove_child(child)
+		grid_container.add_child(child)
+
+#allow getting nodes from the grid (null, no error version)
+func get_node_from_grid(node_path : NodePath) -> Node:
+	if grid_container.has_node(node_path):
+		return grid_container.get_node(node_path)
+	else:
+		return null

AutoGridContainer - Full Version/AutoGridContainer.tscn

@@ -0,0 +1,32 @@
+[gd_scene load_steps=2 format=2]
+
+[ext_resource path="res://AutoGridContainer - Full Version/AutoGridContainer.gd" type="Script" id=1]
+
+[node name="AutoGridContainer" type="Control"]
+margin_right = 1024.0
+margin_bottom = 600.0
+size_flags_horizontal = 3
+size_flags_vertical = 3
+script = ExtResource( 1 )
+
+[node name="Scroll" type="ScrollContainer" parent="."]
+anchor_right = 1.0
+anchor_bottom = 1.0
+size_flags_horizontal = 3
+size_flags_vertical = 3
+scroll_horizontal_enabled = false
+
+[node name="VBox" type="VBoxContainer" parent="Scroll"]
+margin_right = 1024.0
+margin_bottom = 600.0
+size_flags_horizontal = 3
+size_flags_vertical = 3
+
+[node name="GridContainer" type="GridContainer" parent="Scroll/VBox"]
+margin_right = 1024.0
+margin_bottom = 600.0
+size_flags_horizontal = 3
+size_flags_vertical = 3
+columns = 3
+
+[node name="MinSizeTesting" type="Node" parent="."]

UI/Card.gd

@@ -7,7 +7,7 @@ export (Resource) var card_info
 const TYPE_COLORS = [
 	Color("#db4758"), # DAMAGE
 	Color("#3cc361"), # UTILITY
-	Color("#ddd55c"), # SPECIAL
+	Color("#bcb64f"), # SPECIAL
 	Color("#bc5ec6"), # EFFECT
 	Color("#a4a4a4"), # MOVEMENT
 ]

UI/Card.tscn

@@ -1,15 +1,37 @@
-[gd_scene load_steps=4 format=2]
+[gd_scene load_steps=12 format=2]
 
 [ext_resource path="res://UI/Card.gd" type="Script" id=1]
-[ext_resource path="res://Assets/CardDB/Move.tres" type="Resource" id=2]
+[ext_resource path="res://Assets/CardDB/Damage.tres" type="Resource" id=2]
+[ext_resource path="res://Assets/Metropolis-font/Metropolis-Bold.ttf" type="DynamicFontData" id=3]
+[ext_resource path="res://Assets/DiceInput.png" type="Texture" id=4]
+[ext_resource path="res://AutoGridContainer - Full Version/AutoGridContainer.tscn" type="PackedScene" id=5]
+[ext_resource path="res://Assets/Metropolis-font/Metropolis-Medium.ttf" type="DynamicFontData" id=6]
 
-[sub_resource type="StyleBoxFlat" id=1]
+[sub_resource type="StyleBoxFlat" id=6]
 bg_color = Color( 0.858824, 0.278431, 0.345098, 1 )
 corner_radius_top_left = 20
 corner_radius_top_right = 20
 corner_radius_bottom_right = 20
 corner_radius_bottom_left = 20
 
+[sub_resource type="DynamicFontData" id=4]
+font_path = "res://Assets/Metropolis-font/Metropolis-Bold.ttf"
+
+[sub_resource type="DynamicFont" id=2]
+size = 20
+use_filter = true
+font_data = SubResource( 4 )
+
+[sub_resource type="DynamicFont" id=7]
+size = 64
+use_filter = true
+font_data = ExtResource( 6 )
+
+[sub_resource type="DynamicFont" id=5]
+size = 20
+use_filter = true
+font_data = ExtResource( 3 )
+
 [node name="Card" type="Control"]
 anchor_right = 1.0
 anchor_bottom = 1.0
@@ -21,4 +43,58 @@ card_info = ExtResource( 2 )
 [node name="PanelContainer" type="PanelContainer" parent="."]
 anchor_right = 1.0
 anchor_bottom = 1.0
-custom_styles/panel = SubResource( 1 )
+custom_styles/panel = SubResource( 6 )
+
+[node name="VBox" type="VBoxContainer" parent="."]
+anchor_right = 1.0
+anchor_bottom = 1.0
+margin_left = 10.0
+margin_top = 10.0
+margin_right = -10.0
+margin_bottom = -10.0
+
+[node name="Name" type="Label" parent="VBox"]
+margin_right = 1004.0
+margin_bottom = 21.0
+custom_fonts/font = SubResource( 2 )
+text = "The Card Name"
+align = 1
+autowrap = true
+
+[node name="AutoGridContainer" parent="VBox" instance=ExtResource( 5 )]
+margin_top = 25.0
+margin_right = 1004.0
+margin_bottom = 486.0
+
+[node name="InputDice0" type="TextureRect" parent="VBox/AutoGridContainer"]
+margin_left = 9.0
+margin_right = 209.0
+margin_bottom = 200.0
+rect_min_size = Vector2( 100, 100 )
+size_flags_horizontal = 3
+size_flags_vertical = 3
+texture = ExtResource( 4 )
+expand = true
+stretch_mode = 6
+
+[node name="Number" type="Label" parent="VBox/AutoGridContainer/InputDice0"]
+anchor_right = 1.0
+anchor_bottom = 1.0
+size_flags_horizontal = 3
+size_flags_vertical = 3
+custom_colors/font_color = Color( 0, 0, 0, 1 )
+custom_fonts/font = SubResource( 7 )
+text = "20"
+align = 1
+valign = 1
+
+[node name="Description" type="Label" parent="VBox"]
+margin_top = 490.0
+margin_right = 1004.0
+margin_bottom = 580.0
+rect_min_size = Vector2( 0, 90 )
+custom_fonts/font = SubResource( 5 )
+text = "Description"
+align = 1
+valign = 1
+autowrap = true

UI/CardView.tscn

@@ -1,10 +1,6 @@
-[gd_scene load_steps=6 format=2]
+[gd_scene load_steps=2 format=2]
 
 [ext_resource path="res://UI/Card.tscn" type="PackedScene" id=1]
-[ext_resource path="res://Assets/CardDB/Damage.tres" type="Resource" id=2]
-[ext_resource path="res://Assets/DiceInput.png" type="Texture" id=3]
-[ext_resource path="res://Assets/Dice/Dice2.png" type="Texture" id=4]
-[ext_resource path="res://Assets/CardDB/Effect.tres" type="Resource" id=5]
 
 [node name="CardView" type="Control"]
 anchor_right = 1.0
@@ -29,7 +25,6 @@ anchor_bottom = 0.0
 margin_left = 274.0
 margin_right = 498.0
 margin_bottom = 323.0
-card_info = ExtResource( 2 )
 
 [node name="Card3" parent="HBox" instance=ExtResource( 1 )]
 anchor_right = 0.0
@@ -37,23 +32,3 @@ anchor_bottom = 0.0
 margin_left = 548.0
 margin_right = 772.0
 margin_bottom = 323.0
-card_info = ExtResource( 5 )
-
-[node name="DiceInput" type="Sprite" parent="."]
-position = Vector2( 111, 109 )
-scale = Vector2( 0.2, 0.2 )
-texture = ExtResource( 3 )
-
-[node name="DiceInput2" type="Sprite" parent="."]
-position = Vector2( 662, 109 )
-scale = Vector2( 0.2, 0.2 )
-texture = ExtResource( 3 )
-
-[node name="DiceInput3" type="Sprite" parent="."]
-position = Vector2( 387, 108 )
-scale = Vector2( 0.2, 0.2 )
-texture = ExtResource( 3 )
-
-[node name="Dice2" type="Sprite" parent="DiceInput3"]
-position = Vector2( -1390, 15 )
-texture = ExtResource( 4 )