Add shop UI

Items/Shops/SnusDealer.tres

@@ -1,14 +1,54 @@
-[gd_resource type="Resource" script_class="Shop" load_steps=5 format=3 uid="uid://djqd88vdkoi6d"]
+[gd_resource type="Resource" script_class="Shop" load_steps=16 format=3 uid="uid://djqd88vdkoi6d"]
 
 [ext_resource type="Script" path="res://Items/Shop.cs" id="1_betbc"]
 [ext_resource type="Resource" uid="uid://cjsh0dcgbfn77" path="res://Items/Weapons/Bow.tres" id="1_ntroj"]
 [ext_resource type="Script" path="res://Items/ShopEntry.cs" id="2_xgvwu"]
+[ext_resource type="Resource" uid="uid://iqe6rgnb3jur" path="res://Items/Weapons/Pugio.tres" id="3_nfeft"]
+[ext_resource type="Resource" uid="uid://dkm216ug0vj2h" path="res://Items/Weapons/Shotgun.tres" id="4_aw0ju"]
 
 [sub_resource type="Resource" id="Resource_jdx0p"]
 script = ExtResource("2_xgvwu")
 Item = ExtResource("1_ntroj")
 MapStateCondition = ""
 
+[sub_resource type="Resource" id="Resource_min4b"]
+script = ExtResource("2_xgvwu")
+Item = ExtResource("3_nfeft")
+MapStateCondition = ""
+
+[sub_resource type="Resource" id="Resource_t0x08"]
+script = ExtResource("2_xgvwu")
+Item = ExtResource("4_aw0ju")
+MapStateCondition = ""
+
+[sub_resource type="Resource" id="Resource_exmab"]
+script = ExtResource("2_xgvwu")
+MapStateCondition = ""
+
+[sub_resource type="Resource" id="Resource_jlgb3"]
+script = ExtResource("2_xgvwu")
+MapStateCondition = ""
+
+[sub_resource type="Resource" id="Resource_8rd47"]
+script = ExtResource("2_xgvwu")
+MapStateCondition = ""
+
+[sub_resource type="Resource" id="Resource_pqgh5"]
+script = ExtResource("2_xgvwu")
+MapStateCondition = ""
+
+[sub_resource type="Resource" id="Resource_8mift"]
+script = ExtResource("2_xgvwu")
+MapStateCondition = ""
+
+[sub_resource type="Resource" id="Resource_4e8it"]
+script = ExtResource("2_xgvwu")
+MapStateCondition = ""
+
+[sub_resource type="Resource" id="Resource_jp7ms"]
+script = ExtResource("2_xgvwu")
+MapStateCondition = ""
+
 [resource]
 script = ExtResource("1_betbc")
-Entries = Array[Object]([SubResource("Resource_jdx0p")])
+Entries = Array[Object]([SubResource("Resource_jdx0p"), SubResource("Resource_min4b"), SubResource("Resource_t0x08"), SubResource("Resource_exmab"), SubResource("Resource_jlgb3"), SubResource("Resource_8rd47"), SubResource("Resource_pqgh5"), SubResource("Resource_8mift"), SubResource("Resource_4e8it"), SubResource("Resource_jp7ms")])

UI/Inventory/Hotbar.tscn

@@ -1,8 +1,10 @@
-[gd_scene load_steps=3 format=3 uid="uid://sfs8dpfitpdu"]
+[gd_scene load_steps=4 format=3 uid="uid://sfs8dpfitpdu"]
 
 [ext_resource type="Script" path="res://UI/Inventory/Hotbar.cs" id="1_2sak2"]
 [ext_resource type="PackedScene" uid="uid://dmvu2hjyrwc1y" path="res://UI/Inventory/HotbarSlot.tscn" id="2_3axfe"]
 
+[sub_resource type="StyleBoxEmpty" id="StyleBoxEmpty_6jbma"]
+
 [node name="Hotbar" type="GridContainer" node_paths=PackedStringArray("_slots")]
 anchors_preset = 1
 anchor_left = 1.0
@@ -17,9 +19,12 @@ _slots = [NodePath("InventorySlot"), NodePath("InventorySlot2"), NodePath("Inven
 
 [node name="InventorySlot" parent="." instance=ExtResource("2_3axfe")]
 layout_mode = 2
+theme_override_styles/panel = SubResource("StyleBoxEmpty_6jbma")
 
 [node name="InventorySlot2" parent="." instance=ExtResource("2_3axfe")]
 layout_mode = 2
+theme_override_styles/panel = SubResource("StyleBoxEmpty_6jbma")
 
 [node name="InventorySlot3" parent="." instance=ExtResource("2_3axfe")]
 layout_mode = 2
+theme_override_styles/panel = SubResource("StyleBoxEmpty_6jbma")

UI/Inventory/HotbarSlot.cs

@@ -1,32 +0,0 @@
-using Godot;
-using GodotUtilities;
-using GodotUtilities.SourceGenerators;
-
-namespace SupaLidlGame.UI.Inventory;
-
-[Scene]
-public partial class HotbarSlot : InventorySlot
-{
-    [Node("TextureRect")]
-    private TextureRect _textureRect;
-
-    [Node("Selected")]
-    private NinePatchRect _selected;
-
-    private static Texture2D _placeholderTexture;
-
-    private Items.ItemMetadata _item;
-
-    private bool _isSelected = false;
-
-    public bool IsSelected
-    {
-        get => _isSelected;
-        set
-        {
-            _isSelected = value;
-            _selected.Visible = _isSelected;
-            _frame.Visible = !_isSelected;
-        }
-    }
-}

UI/Inventory/HotbarSlot.tscn

@@ -1,10 +1,15 @@
-[gd_scene load_steps=3 format=3 uid="uid://dmvu2hjyrwc1y"]
+[gd_scene load_steps=4 format=3 uid="uid://dmvu2hjyrwc1y"]
 
 [ext_resource type="PackedScene" uid="uid://ctad0dkoyw8ad" path="res://UI/Inventory/InventorySlot.tscn" id="1_fb62b"]
+[ext_resource type="Texture2D" uid="uid://dp7osg05ip5oo" path="res://Assets/Sprites/sword.png" id="2_aqbyo"]
 [ext_resource type="Texture2D" uid="uid://dc1gcsbhkchvg" path="res://Assets/Sprites/UI/hotbar-active.png" id="2_bcv71"]
 
 [node name="InventorySlot" instance=ExtResource("1_fb62b")]
 
+[node name="TextureRect" parent="." index="0"]
+texture = ExtResource("2_aqbyo")
+expand_mode = 3
+
 [node name="SelectedFrame" type="NinePatchRect" parent="." index="2"]
 visible = false
 layout_mode = 2

UI/Inventory/InventoryGrid.cs

@@ -6,54 +6,167 @@ namespace SupaLidlGame.UI.Inventory;
 
 public partial class InventoryGrid : GridContainer
 {
-    private SupaLidlGame.Items.Inventory _inventorySource;
+    private SupaLidlGame.Items.IItemCollection _source;
 
     [Export]
     private PackedScene _slotScene;
 
-    public SupaLidlGame.Items.Inventory InventorySource
+    public ButtonGroup ButtonGroup { get; private set; }
+
+    public SupaLidlGame.Items.IItemCollection Source
     {
+        get => _source;
         set
         {
-            _inventorySource = value;
+            GD.Print("Set InventoryGrid source");
+            _source = value;
             Redraw();
         }
-        get => _inventorySource;
+    }
+
+    [Signal]
+    public delegate void SlotFocusedEventHandler(InventorySlot slot);
+
+    [Signal]
+    public delegate void SlotUnfocusedEventHandler(InventorySlot slot);
+
+    [Signal]
+    public delegate void SlotSelectedEventHandler(InventorySlot slot);
+
+    public InventoryGrid()
+    {
+        ButtonGroup = new();
     }
 
     public void Redraw()
     {
-        if (_inventorySource is null)
+        GD.Print("Redrawing inventory grid...");
+
+        if (_source is null)
         {
             this.QueueFreeChildren();
         }
 
         var children = GetChildren();
 
-        for (int i = children.Count; i < _inventorySource.InventoryCapacity; i++)
+        for (int i = children.Count; i < _source.Capacity; i++)
         {
-            AddChild(_slotScene.Instantiate<InventorySlot>());
+            AddInventorySlot();
         }
 
-        for (int i = children.Count - 1; i >= _inventorySource.InventoryCapacity; i--)
+        for (int i = children.Count - 1; i >= _source.Capacity; i--)
         {
             children[i].QueueFree();
         }
 
         children = GetChildren();
 
-        for (int i = 0; i < children.Count; i++)
+        // iterate through items and update the grid
+        using (var items = _source.GetItems().GetEnumerator())
         {
-            InventorySlot slot = children[i] as InventorySlot;
+            GD.Print("Updating items...");
-
+            int i;
-            if (i >= _inventorySource.Items.Count)
+            for (i = 0; items.MoveNext(); i++)
             {
+                InventorySlot slot = children[i] as InventorySlot;
+
+                ItemMetadata item = items.Current;
+                slot.Item = item;
+            }
+
+            // make remaining slots display empty
+            for (; i < _source.Capacity; i++)
+            {
+                InventorySlot slot = children[i] as InventorySlot;
+
                 slot.Item = null;
             }
-            else if (slot.Item != _inventorySource.Items[i])
+        }
+
+        for (int i = 0; i < children.Count; i++)
+        {
+            var child = children[i] as Control;
+            if (i > 0)
             {
-                slot.Item = _inventorySource.Items[i];
+                child.FocusPrevious = child.GetPathTo(children[i - 1]);
+            }
+            if (i < children.Count - 1)
+            {
+                child.FocusNext = child.GetPathTo(children[i + 1]);
             }
         }
+
+        if (children.Count > 0)
+        {
+            var button = children[0] as Button;
+            button.ButtonPressed = true;
+            button.GrabFocus();
+        }
+    }
+
+    private InventorySlot AddInventorySlot()
+    {
+        var slot = _slotScene.Instantiate<InventorySlot>();
+        AddChild(slot);
+        slot.ButtonGroup = ButtonGroup;
+
+        void focusedHandler()
+        {
+            EmitSignal(SignalName.SlotFocused, slot);
+        }
+
+        void unfocusedHandler()
+        {
+            EmitSignal(SignalName.SlotUnfocused, slot);
+        }
+
+        void toggledHandler()
+        {
+            EmitSignal(SignalName.SlotSelected, slot);
+        }
+
+        slot.Connect(
+            InventorySlot.SignalName.FocusEntered,
+            Callable.From(focusedHandler)
+        );
+
+        slot.Connect(
+            InventorySlot.SignalName.FocusExited,
+            Callable.From(unfocusedHandler)
+        );
+
+        slot.Connect(
+            InventorySlot.SignalName.MouseEntered,
+            Callable.From(focusedHandler)
+        );
+
+        slot.Connect(
+            InventorySlot.SignalName.MouseExited,
+            Callable.From(unfocusedHandler)
+        );
+
+        slot.Connect(
+            InventorySlot.SignalName.Pressed,
+            Callable.From(toggledHandler)
+        );
+
+        return slot;
+    }
+
+    private void RemoveInventorySlot(InventorySlot slot)
+    {
+        RemoveChild(slot);
+    }
+
+    public bool GrabSlotFocus()
+    {
+        var children = GetChildren();
+        if (children.Count > 0)
+        {
+            var button = children[0] as Button;
+            button.GrabFocus();
+            return true;
+        }
+        return false;
     }
 }

UI/Inventory/InventorySlot.cs

@@ -4,7 +4,7 @@ using GodotUtilities.SourceGenerators;
 
 namespace SupaLidlGame.UI.Inventory;
 
-public partial class InventorySlot : Container
+public partial class InventorySlot : Button
 {
     private bool _isSelected = false;
 
@@ -16,12 +16,15 @@ public partial class InventorySlot : Container
             _isSelected = value;
             if (_selectedFrame is not null)
             {
-                _selectedFrame.Visible = _isSelected;
+                //_selectedFrame.Visible = _isSelected;
-                _frame.Visible = !_isSelected;
+                //_frame.Visible = !_isSelected;
             }
         }
     }
 
+    [Export]
+    public bool UseFocusAsSelected { get; set; } = true;
+
     private TextureRect _textureRect;
 
     private NinePatchRect _frame;
@@ -41,11 +44,13 @@ public partial class InventorySlot : Container
 
             if (_item is null)
             {
-                _textureRect.Texture = null;
+                //_textureRect.Texture = null;
+                Icon = null;
             }
             else
             {
-                _textureRect.Texture = _item.Icon;
+                //_textureRect.Texture = _item.Icon;
+                Icon = _item.Icon;
             }
         }
     }
@@ -61,5 +66,30 @@ public partial class InventorySlot : Container
         _textureRect = GetNode<TextureRect>("TextureRect");
         _frame = GetNode<NinePatchRect>("Frame");
         _selectedFrame = GetNode<NinePatchRect>("SelectedFrame");
+
+        if (Item is null)
+        {
+            // do this to reset the icon
+            Item = null;
+        }
+
+        if (UseFocusAsSelected)
+        {
+            void focusEntered()
+            {
+                IsSelected = true;
+            }
+
+            void focusExited()
+            {
+                IsSelected = false;
+            }
+
+            Connect(SignalName.FocusEntered, Callable.From(focusEntered));
+            Connect(SignalName.FocusExited, Callable.From(focusExited));
+
+            Connect(SignalName.MouseEntered, Callable.From(focusEntered));
+            Connect(SignalName.MouseExited, Callable.From(focusExited));
+        }
     }
 }

UI/Inventory/InventorySlot.tscn

@@ -1,20 +1,41 @@
-[gd_scene load_steps=4 format=3 uid="uid://ctad0dkoyw8ad"]
+[gd_scene load_steps=8 format=3 uid="uid://ctad0dkoyw8ad"]
 
 [ext_resource type="Script" path="res://UI/Inventory/InventorySlot.cs" id="1_fju5i"]
+[ext_resource type="Theme" uid="uid://cksjbu3vrup5" path="res://UI/Themes/supalidl.tres" id="1_wnu7u"]
+[ext_resource type="StyleBox" uid="uid://nvb4etac7ee2" path="res://UI/Themes/InventorySlotButtonFocus.tres" id="2_3wx0v"]
 [ext_resource type="Texture2D" uid="uid://dc1gcsbhkchvg" path="res://Assets/Sprites/UI/hotbar-active.png" id="2_m56j3"]
+[ext_resource type="StyleBox" uid="uid://pqtn0115bqtp" path="res://UI/Themes/InventorySlotButtonPressed.tres" id="3_46bp6"]
+[ext_resource type="StyleBox" uid="uid://cfqp0ycwvwx7c" path="res://UI/Themes/InventorySlotButtonNormal.tres" id="4_cc2jo"]
 
-[sub_resource type="StyleBoxEmpty" id="StyleBoxEmpty_6jbma"]
+[sub_resource type="PlaceholderTexture2D" id="PlaceholderTexture2D_ajutj"]
+size = Vector2(24, 24)
 
-[node name="InventorySlot" type="PanelContainer"]
+[node name="InventorySlot" type="Button"]
 custom_minimum_size = Vector2(32, 32)
-theme_override_styles/panel = SubResource("StyleBoxEmpty_6jbma")
+theme = ExtResource("1_wnu7u")
+theme_type_variation = &"InventorySlotButton"
+theme_override_styles/focus = ExtResource("2_3wx0v")
+theme_override_styles/pressed = ExtResource("3_46bp6")
+theme_override_styles/normal = ExtResource("4_cc2jo")
+toggle_mode = true
+action_mode = 0
+icon_alignment = 1
 script = ExtResource("1_fju5i")
 
 [node name="TextureRect" type="TextureRect" parent="."]
+visible = false
 layout_mode = 2
+offset_right = 32.0
+offset_bottom = 32.0
+mouse_filter = 2
+texture = SubResource("PlaceholderTexture2D_ajutj")
+expand_mode = 2
 stretch_mode = 3
 
 [node name="Frame" type="NinePatchRect" parent="."]
+visible = false
 self_modulate = Color(1, 1, 1, 0.5)
 layout_mode = 2
+offset_right = 32.0
+offset_bottom = 32.0
 texture = ExtResource("2_m56j3")

UI/Inventory/ItemTooltip.cs

@@ -0,0 +1,44 @@
+using Godot;
+using SupaLidlGame.Items;
+
+namespace SupaLidlGame.UI.Inventory;
+
+public partial class ItemTooltip : Control
+{
+    private ItemMetadata _item;
+
+    public ItemMetadata Item
+    {
+        get => _item;
+        set
+        {
+            _item = value;
+            if (IsNodeReady())
+            {
+                Render();
+            }
+        }
+    }
+
+    public override void _Ready()
+    {
+        Render();
+    }
+
+    public void Render()
+    {
+        if (_item is null)
+        {
+            GetNode<Label>("%ItemLabel").Text = "Nothing here";
+            GetNode<TextureRect>("%ItemTexture").Texture = null;
+            GetNode<RichTextLabel>("%ItemDescription").Text = "We are ready for My Summer Car";
+            GetNode<Label>("%Ingredients/Label").Text = "0 Shillings";
+            return;
+        }
+
+        GetNode<Label>("%ItemLabel").Text = _item.Name;
+        GetNode<TextureRect>("%ItemTexture").Texture = _item.Icon;
+        GetNode<RichTextLabel>("%ItemDescription").Text = _item.Description;
+        GetNode<Label>("%Ingredients/Label").Text = _item.BuyPrice + " Shillings";
+    }
+}

UI/Inventory/ItemTooltip.tscn

@@ -0,0 +1,127 @@
+[gd_scene load_steps=12 format=3 uid="uid://bsheehtfcdwhh"]
+
+[ext_resource type="Theme" uid="uid://cksjbu3vrup5" path="res://UI/Themes/supalidl.tres" id="1_elbte"]
+[ext_resource type="Script" path="res://UI/Inventory/ItemTooltip.cs" id="2_entlu"]
+[ext_resource type="Texture2D" uid="uid://b16461tjso0j7" path="res://Assets/Sprites/UI/hotbar-inactive.png" id="2_mcttf"]
+[ext_resource type="Texture2D" uid="uid://cd8ak8gu0104t" path="res://Assets/Sprites/UI/border.png" id="2_sxqyx"]
+[ext_resource type="Texture2D" uid="uid://dc1gcsbhkchvg" path="res://Assets/Sprites/UI/hotbar-active.png" id="2_vjw5e"]
+
+[sub_resource type="Animation" id="Animation_mmh32"]
+resource_name = "wipe"
+
+[sub_resource type="AnimationLibrary" id="AnimationLibrary_4bp3t"]
+_data = {
+"wipe": SubResource("Animation_mmh32")
+}
+
+[sub_resource type="StyleBoxTexture" id="StyleBoxTexture_xhduc"]
+content_margin_left = 0.0
+content_margin_top = 0.0
+content_margin_right = 0.0
+content_margin_bottom = 0.0
+texture = ExtResource("2_mcttf")
+texture_margin_left = 16.0
+texture_margin_top = 16.0
+texture_margin_right = 16.0
+texture_margin_bottom = 16.0
+
+[sub_resource type="StyleBoxTexture" id="StyleBoxTexture_rhjxi"]
+content_margin_left = 4.0
+content_margin_top = 4.0
+content_margin_right = 4.0
+content_margin_bottom = 4.0
+texture = ExtResource("2_vjw5e")
+texture_margin_left = 8.0
+texture_margin_top = 8.0
+texture_margin_right = 8.0
+texture_margin_bottom = 8.0
+
+[sub_resource type="PlaceholderTexture2D" id="PlaceholderTexture2D_qnr6k"]
+size = Vector2(24, 24)
+
+[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_idehr"]
+bg_color = Color(0.976471, 0.956863, 0.956863, 1)
+
+[node name="ItemTooltip" type="BoxContainer"]
+offset_right = 92.0
+offset_bottom = 161.0
+theme = ExtResource("1_elbte")
+script = ExtResource("2_entlu")
+
+[node name="AnimationPlayer" type="AnimationPlayer" parent="."]
+libraries = {
+"": SubResource("AnimationLibrary_4bp3t")
+}
+
+[node name="VBoxContainer" type="VBoxContainer" parent="."]
+layout_mode = 2
+size_flags_horizontal = 3
+theme_override_constants/separation = 0
+
+[node name="PanelContainer" type="PanelContainer" parent="VBoxContainer"]
+layout_mode = 2
+theme_override_styles/panel = SubResource("StyleBoxTexture_xhduc")
+
+[node name="Margin" type="MarginContainer" parent="VBoxContainer/PanelContainer"]
+layout_mode = 2
+
+[node name="VBoxContainer" type="VBoxContainer" parent="VBoxContainer/PanelContainer/Margin"]
+layout_mode = 2
+alignment = 1
+
+[node name="HBoxContainer" type="HBoxContainer" parent="VBoxContainer/PanelContainer/Margin/VBoxContainer"]
+layout_mode = 2
+theme_override_constants/separation = 8
+
+[node name="PanelContainer" type="PanelContainer" parent="VBoxContainer/PanelContainer/Margin/VBoxContainer/HBoxContainer"]
+layout_mode = 2
+size_flags_vertical = 0
+theme_override_styles/panel = SubResource("StyleBoxTexture_rhjxi")
+
+[node name="ItemTexture" type="TextureRect" parent="VBoxContainer/PanelContainer/Margin/VBoxContainer/HBoxContainer/PanelContainer"]
+unique_name_in_owner = true
+layout_mode = 2
+texture = SubResource("PlaceholderTexture2D_qnr6k")
+stretch_mode = 2
+
+[node name="ItemLabel" type="Label" parent="VBoxContainer/PanelContainer/Margin/VBoxContainer/HBoxContainer"]
+unique_name_in_owner = true
+layout_mode = 2
+size_flags_horizontal = 3
+text = "Really long item name"
+autowrap_mode = 2
+
+[node name="VBoxContainer" type="VBoxContainer" parent="VBoxContainer/PanelContainer/Margin/VBoxContainer/HBoxContainer"]
+visible = false
+layout_mode = 2
+size_flags_horizontal = 3
+
+[node name="NinePatchRect" type="NinePatchRect" parent="VBoxContainer/PanelContainer/Margin/VBoxContainer/HBoxContainer/VBoxContainer"]
+layout_mode = 2
+texture = ExtResource("2_sxqyx")
+region_rect = Rect2(0, 6, 48, 5)
+patch_margin_left = 16
+patch_margin_top = 5
+patch_margin_right = 16
+
+[node name="ItemDescription" type="RichTextLabel" parent="VBoxContainer/PanelContainer/Margin/VBoxContainer"]
+unique_name_in_owner = true
+layout_mode = 2
+theme_override_colors/default_color = Color(0.937255, 0.854902, 0.854902, 1)
+text = "Speed, violence, momentum"
+fit_content = true
+
+[node name="PanelContainer2" type="PanelContainer" parent="VBoxContainer"]
+layout_mode = 2
+theme_override_styles/panel = SubResource("StyleBoxFlat_idehr")
+
+[node name="Ingredients" type="MarginContainer" parent="VBoxContainer/PanelContainer2"]
+unique_name_in_owner = true
+layout_mode = 2
+theme_override_constants/margin_top = 2
+theme_override_constants/margin_bottom = 2
+
+[node name="Label" type="Label" parent="VBoxContainer/PanelContainer2/Ingredients"]
+layout_mode = 2
+theme_override_colors/font_color = Color(0, 0, 0, 1)
+text = "250 Shillings"

UI/Inventory/ShopItem.tscn

@@ -1,44 +0,0 @@
-[gd_scene load_steps=4 format=3 uid="uid://bsheehtfcdwhh"]
-
-[ext_resource type="Theme" uid="uid://cksjbu3vrup5" path="res://UI/Themes/supalidl.tres" id="1_elbte"]
-[ext_resource type="Texture2D" uid="uid://dp7osg05ip5oo" path="res://Assets/Sprites/sword.png" id="2_5jpi0"]
-
-[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_idehr"]
-bg_color = Color(0.976471, 0.956863, 0.956863, 1)
-
-[node name="ShopItem" type="BoxContainer"]
-offset_right = 67.0
-offset_bottom = 16.0
-theme = ExtResource("1_elbte")
-
-[node name="VBoxContainer" type="VBoxContainer" parent="."]
-layout_mode = 2
-theme_override_constants/separation = 0
-
-[node name="Item Margin" type="MarginContainer" parent="VBoxContainer"]
-layout_mode = 2
-
-[node name="HBoxContainer" type="HBoxContainer" parent="VBoxContainer/Item Margin"]
-layout_mode = 2
-
-[node name="TextureRect" type="TextureRect" parent="VBoxContainer/Item Margin/HBoxContainer"]
-layout_mode = 2
-texture = ExtResource("2_5jpi0")
-
-[node name="Label" type="Label" parent="VBoxContainer/Item Margin/HBoxContainer"]
-layout_mode = 2
-text = "Your mom's Item"
-
-[node name="PanelContainer2" type="PanelContainer" parent="VBoxContainer"]
-layout_mode = 2
-theme_override_styles/panel = SubResource("StyleBoxFlat_idehr")
-
-[node name="DescriptionMargin" type="MarginContainer" parent="VBoxContainer/PanelContainer2"]
-layout_mode = 2
-theme_override_constants/margin_top = 2
-theme_override_constants/margin_bottom = 2
-
-[node name="Label" type="Label" parent="VBoxContainer/PanelContainer2/DescriptionMargin"]
-layout_mode = 2
-theme_override_colors/font_color = Color(0, 0, 0, 1)
-text = "250 Shillings"

UI/Inventory/ShopMenu.cs

@@ -1,4 +1,5 @@
 using Godot;
+using System.Collections.Generic;
 
 namespace SupaLidlGame.UI.Inventory;
 
@@ -20,6 +21,8 @@ public partial class ShopMenu : Control, IModal
     [Export]
     private InventoryGrid _inventoryGrid;
 
+    private InventorySlot _selected;
+
     public void HideModal()
     {
         Hide();
@@ -34,5 +37,48 @@ public partial class ShopMenu : Control, IModal
             GD.Print("Loaded shop");
             Source = shop;
         };
+
+        _inventoryGrid.SlotFocused += (InventorySlot slot) =>
+        {
+            GD.Print("SlotFocused " + slot.Name);
+            if (slot.Item is not null)
+            {
+                SetTooltipItem(slot);
+            }
+        };
+
+        _inventoryGrid.SlotUnfocused += (InventorySlot slot) =>
+        {
+            SetTooltipItem(_selected);
+        };
+
+        _inventoryGrid.SlotSelected += (InventorySlot slot) =>
+        {
+            _selected = slot;
+            SetTooltipItem(slot);
+            GetNode<Button>("%BuyButton").GrabFocus();
+        };
+
+        GetNode<Button>("%BuyButton").GuiInput += (Godot.InputEvent @event) =>
+        {
+            if (@event.IsAction("ui_cancel"))
+            {
+                _selected?.GrabFocus();
+            }
+        };
+    }
+
+    private void SetTooltipItem(InventorySlot slot)
+    {
+        GetNode<ItemTooltip>("%ItemTooltip").Item = slot?.Item;
+
+        if (slot == _selected)
+        {
+            GetNode<Button>("%BuyButton").Disabled = false;
+        }
+        else
+        {
+            GetNode<Button>("%BuyButton").Disabled = true;
+        }
     }
 }

UI/Inventory/ShopMenu.tscn

@@ -1,30 +1,27 @@
-[gd_scene load_steps=6 format=3 uid="uid://cyggkyqosjk36"]
+[gd_scene load_steps=9 format=3 uid="uid://cyggkyqosjk36"]
 
-[ext_resource type="Texture2D" uid="uid://uhmowtsi3wfh" path="res://Assets/Sprites/UI/menu-rect-no-bg-white.png" id="2_puklu"]
+[ext_resource type="StyleBox" uid="uid://bqhotx2ogucye" path="res://UI/Themes/Panel.tres" id="1_2ffty"]
+[ext_resource type="Script" path="res://UI/Inventory/ShopMenu.cs" id="1_8c1y7"]
 [ext_resource type="FontFile" uid="uid://cgwa8bjiyv534" path="res://Assets/Fonts/alagard.ttf" id="3_aj4jx"]
-[ext_resource type="PackedScene" uid="uid://ctad0dkoyw8ad" path="res://UI/Inventory/InventorySlot.tscn" id="4_wawb8"]
+[ext_resource type="PackedScene" uid="uid://bsheehtfcdwhh" path="res://UI/Inventory/ItemTooltip.tscn" id="4_n61n7"]
+[ext_resource type="PackedScene" uid="uid://chmokkxsy5vas" path="res://UI/Inventory/InventoryGrid.tscn" id="4_sl632"]
+[ext_resource type="PackedScene" uid="uid://baawkwo8aiwbu" path="res://UI/Inventory/ShopSlot.tscn" id="5_kfyl0"]
+[ext_resource type="Theme" uid="uid://cksjbu3vrup5" path="res://UI/Themes/supalidl.tres" id="7_rvp1r"]
 
 [sub_resource type="StyleBoxFlat" id="StyleBoxFlat_gm1xk"]
-bg_color = Color(0, 0, 0, 0.752941)
+bg_color = Color(0, 0, 0, 0.784314)
 border_width_left = 16
 border_width_top = 16
 border_width_right = 16
 border_width_bottom = 16
-border_color = Color(0, 0, 0, 0)
+border_color = Color(0.145098, 0.145098, 0.145098, 0)
 border_blend = true
 corner_radius_top_left = 16
 corner_radius_top_right = 16
 corner_radius_bottom_right = 16
 corner_radius_bottom_left = 16
 
-[sub_resource type="StyleBoxTexture" id="StyleBoxTexture_bvu21"]
+[node name="Panel" type="PanelContainer" node_paths=PackedStringArray("_inventoryGrid")]
-texture = ExtResource("2_puklu")
-texture_margin_left = 32.0
-texture_margin_top = 32.0
-texture_margin_right = 32.0
-texture_margin_bottom = 32.0
-
-[node name="Panel" type="PanelContainer"]
 anchors_preset = 6
 anchor_left = 1.0
 anchor_top = 0.5
@@ -36,43 +33,45 @@ offset_bottom = 175.5
 grow_horizontal = 0
 grow_vertical = 2
 theme_override_styles/panel = SubResource("StyleBoxFlat_gm1xk")
+script = ExtResource("1_8c1y7")
+_inventoryGrid = NodePath("PanelContainer/VBoxContainer/ScrollContainer/InventoryGrid")
 
 [node name="PanelContainer" type="PanelContainer" parent="."]
 layout_mode = 2
-theme_override_styles/panel = SubResource("StyleBoxTexture_bvu21")
+theme_override_styles/panel = ExtResource("1_2ffty")
 
 [node name="VBoxContainer" type="VBoxContainer" parent="PanelContainer"]
 layout_mode = 2
 
-[node name="Label" type="Label" parent="PanelContainer/VBoxContainer"]
+[node name="HBoxContainer" type="HBoxContainer" parent="PanelContainer/VBoxContainer"]
+layout_mode = 2
+
+[node name="Label" type="Label" parent="PanelContainer/VBoxContainer/HBoxContainer"]
 layout_mode = 2
 theme_override_fonts/font = ExtResource("3_aj4jx")
 text = "Snus Dealer"
 
-[node name="GridContainer" type="GridContainer" parent="PanelContainer/VBoxContainer"]
+[node name="ScrollContainer" type="ScrollContainer" parent="PanelContainer/VBoxContainer"]
 layout_mode = 2
-columns = 4
+size_flags_vertical = 3
+follow_focus = true
+horizontal_scroll_mode = 0
 
-[node name="InventorySlot" parent="PanelContainer/VBoxContainer/GridContainer" instance=ExtResource("4_wawb8")]
+[node name="InventoryGrid" parent="PanelContainer/VBoxContainer/ScrollContainer" instance=ExtResource("4_sl632")]
+layout_mode = 2
+size_flags_vertical = 3
+_slotScene = ExtResource("5_kfyl0")
+
+[node name="ItemTooltip" parent="PanelContainer/VBoxContainer" instance=ExtResource("4_n61n7")]
+unique_name_in_owner = true
 layout_mode = 2
 
-[node name="InventorySlot2" parent="PanelContainer/VBoxContainer/GridContainer" instance=ExtResource("4_wawb8")]
+[node name="HBoxContainer2" type="HBoxContainer" parent="PanelContainer/VBoxContainer"]
 layout_mode = 2
 
-[node name="InventorySlot3" parent="PanelContainer/VBoxContainer/GridContainer" instance=ExtResource("4_wawb8")]
+[node name="BuyButton" type="Button" parent="PanelContainer/VBoxContainer/HBoxContainer2"]
-layout_mode = 2
+unique_name_in_owner = true
-
-[node name="InventorySlot4" parent="PanelContainer/VBoxContainer/GridContainer" instance=ExtResource("4_wawb8")]
-layout_mode = 2
-
-[node name="InventorySlot5" parent="PanelContainer/VBoxContainer/GridContainer" instance=ExtResource("4_wawb8")]
-layout_mode = 2
-
-[node name="InventorySlot6" parent="PanelContainer/VBoxContainer/GridContainer" instance=ExtResource("4_wawb8")]
-layout_mode = 2
-
-[node name="InventorySlot7" parent="PanelContainer/VBoxContainer/GridContainer" instance=ExtResource("4_wawb8")]
-layout_mode = 2
-
-[node name="InventorySlot8" parent="PanelContainer/VBoxContainer/GridContainer" instance=ExtResource("4_wawb8")]
 layout_mode = 2
+size_flags_horizontal = 3
+theme = ExtResource("7_rvp1r")
+text = "Buy"

UI/Inventory/ShopSlot.tscn

@@ -0,0 +1,14 @@
+[gd_scene load_steps=3 format=3 uid="uid://baawkwo8aiwbu"]
+
+[ext_resource type="PackedScene" uid="uid://ctad0dkoyw8ad" path="res://UI/Inventory/InventorySlot.tscn" id="1_tdkv2"]
+[ext_resource type="Texture2D" uid="uid://b16461tjso0j7" path="res://Assets/Sprites/UI/hotbar-inactive.png" id="2_af1qu"]
+
+[node name="ShopSlot" instance=ExtResource("1_tdkv2")]
+
+[node name="Frame" parent="." index="1"]
+texture = ExtResource("2_af1qu")
+
+[node name="SelectedFrame" type="NinePatchRect" parent="." index="2"]
+visible = false
+layout_mode = 2
+texture = ExtResource("2_af1qu")

UI/Themes/InventorySlotButtonFocus.tres

@@ -0,0 +1,14 @@
+[gd_resource type="StyleBoxTexture" load_steps=2 format=3 uid="uid://nvb4etac7ee2"]
+
+[ext_resource type="Texture2D" uid="uid://b16461tjso0j7" path="res://Assets/Sprites/UI/hotbar-inactive.png" id="1_el8jk"]
+
+[resource]
+content_margin_left = 4.0
+content_margin_top = 4.0
+content_margin_right = 4.0
+content_margin_bottom = 4.0
+texture = ExtResource("1_el8jk")
+texture_margin_left = 4.0
+texture_margin_top = 4.0
+texture_margin_right = 4.0
+texture_margin_bottom = 4.0

UI/Themes/InventorySlotButtonNormal.tres

@@ -0,0 +1,15 @@
+[gd_resource type="StyleBoxTexture" load_steps=2 format=3 uid="uid://cfqp0ycwvwx7c"]
+
+[ext_resource type="Texture2D" uid="uid://b16461tjso0j7" path="res://Assets/Sprites/UI/hotbar-inactive.png" id="1_r3gsw"]
+
+[resource]
+content_margin_left = 4.0
+content_margin_top = 4.0
+content_margin_right = 4.0
+content_margin_bottom = 4.0
+texture = ExtResource("1_r3gsw")
+texture_margin_left = 4.0
+texture_margin_top = 4.0
+texture_margin_right = 4.0
+texture_margin_bottom = 4.0
+modulate_color = Color(1, 1, 1, 0.498039)

UI/Themes/InventorySlotButtonPressed.tres

@@ -0,0 +1,15 @@
+[gd_resource type="StyleBoxTexture" load_steps=2 format=3 uid="uid://pqtn0115bqtp"]
+
+[ext_resource type="Texture2D" uid="uid://b16461tjso0j7" path="res://Assets/Sprites/UI/hotbar-inactive.png" id="1_1ahpp"]
+
+[resource]
+content_margin_left = 4.0
+content_margin_top = 4.0
+content_margin_right = 4.0
+content_margin_bottom = 4.0
+texture = ExtResource("1_1ahpp")
+texture_margin_left = 4.0
+texture_margin_top = 4.0
+texture_margin_right = 4.0
+texture_margin_bottom = 4.0
+modulate_color = Color(0.941176, 0.843137, 0.470588, 1)

UI/Themes/Panel.tres

@@ -0,0 +1,14 @@
+[gd_resource type="StyleBoxTexture" load_steps=2 format=3 uid="uid://bqhotx2ogucye"]
+
+[ext_resource type="Texture2D" uid="uid://uhmowtsi3wfh" path="res://Assets/Sprites/UI/menu-rect-no-bg-white.png" id="1_cb20l"]
+
+[resource]
+content_margin_left = 16.0
+content_margin_top = 16.0
+content_margin_right = 16.0
+content_margin_bottom = 16.0
+texture = ExtResource("1_cb20l")
+texture_margin_left = 32.0
+texture_margin_top = 32.0
+texture_margin_right = 32.0
+texture_margin_bottom = 32.0

UI/Themes/supalidl.tres

@@ -1,10 +1,58 @@
-[gd_resource type="Theme" load_steps=2 format=3 uid="uid://cksjbu3vrup5"]
+[gd_resource type="Theme" load_steps=11 format=3 uid="uid://cksjbu3vrup5"]
 
 [ext_resource type="FontFile" uid="uid://6bvgjbmqovau" path="res://Assets/Fonts/calamity/calamity.ttf" id="1_334fe"]
+[ext_resource type="StyleBox" uid="uid://nvb4etac7ee2" path="res://UI/Themes/InventorySlotButtonFocus.tres" id="2_3w5h1"]
+[ext_resource type="Texture2D" uid="uid://b16461tjso0j7" path="res://Assets/Sprites/UI/hotbar-inactive.png" id="2_6sv27"]
+[ext_resource type="StyleBox" uid="uid://bqhotx2ogucye" path="res://UI/Themes/Panel.tres" id="2_jlgx8"]
+[ext_resource type="StyleBox" uid="uid://cfqp0ycwvwx7c" path="res://UI/Themes/InventorySlotButtonNormal.tres" id="3_nuiio"]
+[ext_resource type="StyleBox" uid="uid://pqtn0115bqtp" path="res://UI/Themes/InventorySlotButtonPressed.tres" id="4_mllnb"]
+
+[sub_resource type="StyleBoxTexture" id="StyleBoxTexture_wk5ww"]
+content_margin_left = 4.0
+content_margin_top = 4.0
+content_margin_right = 4.0
+content_margin_bottom = 4.0
+texture = ExtResource("2_6sv27")
+texture_margin_left = 16.0
+texture_margin_top = 16.0
+texture_margin_right = 16.0
+texture_margin_bottom = 16.0
+modulate_color = Color(0.105882, 0.0470588, 0.117647, 1)
+
+[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_5w4ck"]
+bg_color = Color(0.937255, 0.854902, 0.854902, 1)
+
+[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_2qibe"]
+content_margin_left = 2.0
+content_margin_top = 2.0
+content_margin_right = 2.0
+content_margin_bottom = 2.0
+bg_color = Color(0.976471, 0.956863, 0.956863, 1)
+
+[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_iyd8w"]
+bg_color = Color(0.105882, 0.0470588, 0.117647, 1)
 
 [resource]
 default_font = ExtResource("1_334fe")
 default_font_size = 15
 /colors/background = Color(0.105882, 0.0470588, 0.117647, 1)
-/font_sizes/Normal = 16
+/font_sizes/Normal = 15
 /fonts/Calamity = ExtResource("1_334fe")
+Button/colors/font_color = Color(0.105882, 0.0470588, 0.117647, 1)
+Button/colors/font_focus_color = Color(0.105882, 0.0470588, 0.117647, 1)
+Button/colors/font_hover_color = Color(0.105882, 0.0470588, 0.117647, 1)
+Button/colors/font_pressed_color = Color(0.976471, 0.956863, 0.956863, 1)
+Button/styles/focus = SubResource("StyleBoxTexture_wk5ww")
+Button/styles/hover = SubResource("StyleBoxFlat_5w4ck")
+Button/styles/normal = SubResource("StyleBoxFlat_2qibe")
+Button/styles/pressed = SubResource("StyleBoxFlat_iyd8w")
+InventorySlotButton/base_type = &"Button"
+InventorySlotButton/styles/focus = ExtResource("2_3w5h1")
+InventorySlotButton/styles/hover = ExtResource("2_3w5h1")
+InventorySlotButton/styles/normal = ExtResource("3_nuiio")
+InventorySlotButton/styles/pressed = ExtResource("4_mllnb")
+MarginContainer/constants/margin_bottom = 8
+MarginContainer/constants/margin_left = 8
+MarginContainer/constants/margin_right = 8
+MarginContainer/constants/margin_top = 8
+PanelContainer/styles/panel = ExtResource("2_jlgx8")