Day 23

buy_screen.lua

@@ -60,13 +60,35 @@ function BuyScreen:on_enter(from, level, units)
       [25] = {0, 55, 45},
     }
     self.cards = {}
-    self.selected_card_index = 1
+    self.selected_index = 1
     self.cards[1] = ShopCard{group = self.main, x = 60, y = 75, w = 80, h = 90, unit = random:table(tier_to_characters[random:weighted_pick(unpack(level_to_tier_weights[self.level]))]), parent = self}
-    self.cards[2] = ShopCard{group = self.main, x = 155, y = 75, w = 80, h = 90, unit = random:table(tier_to_characters[random:weighted_pick(unpack(level_to_tier_weights[self.level]))]), parent = self}
+    self.cards[2] = ShopCard{group = self.main, x = 140, y = 75, w = 80, h = 90, unit = random:table(tier_to_characters[random:weighted_pick(unpack(level_to_tier_weights[self.level]))]), parent = self}
-    self.cards[3] = ShopCard{group = self.main, x = 250, y = 75, w = 80, h = 90, unit = random:table(tier_to_characters[random:weighted_pick(unpack(level_to_tier_weights[self.level]))]), parent = self}
+    self.cards[3] = ShopCard{group = self.main, x = 220, y = 75, w = 80, h = 90, unit = random:table(tier_to_characters[random:weighted_pick(unpack(level_to_tier_weights[self.level]))]), parent = self}
     self.shop_text_sy = 1
     self.shop_text = Text({{text = '[wavy_mid, fg]shop', font = pixul_font, alignment = 'center'}}, global_text_tags)
-    self.party_text = Text({{text = '[wavy_mid, fg]your party', font = pixul_font, alignment = 'center'}}, global_text_tags)
+    self.gold_text = Text2{group = self.main, x = 88, y = 20, lines = {{text = '[fg]- your gold: [yellow]' .. gold, font = pixul_font, alignment = 'center'}}}
+
+    self.characters = {}
+    local y = 40
+    for i, unit in ipairs(self.units) do
+      table.insert(self.characters, CharacterPart{group = self.main, x = gw - 30, y = y + (i-1)*20, character = unit.character, level = unit.level, reserve = unit.reserve})
+    end
+    self.party_text = Text({{text = '[wavy_mid, fg]party', font = pixul_font, alignment = 'center'}}, global_text_tags)
+
+    self.sets = {}
+    for i, class in ipairs(get_classes(self.units)) do
+      local x, y = math.index_to_coordinates(i, 2)
+      table.insert(self.sets, ClassIcon{group = self.main, x = 319 + (x-1)*20, y = 45 + (y-1)*56, class = class, units = self.units})
+    end
+    self.sets_text = Text({{text = '[wavy_mid, fg]sets', font = pixul_font, alignment = 'center'}}, global_text_tags)
+
+    self.items_text = Text({{text = '[wavy_mid, fg]items', font = pixul_font, alignment = 'center'}}, global_text_tags)
+    self.under_text = Text2{group = self.main, x = 140, y = gh - 60, r = -math.pi/48, lines = {
+      {text = '[light_bg]under', font = fat_font, alignment = 'center'},
+      {text = '[light_bg]construction', font = fat_font, alignment = 'center'},
+    }}
+
+    RerollButton{group = self.main, x = 255, y = 140, parent = self}
   end
 end
 
@@ -126,7 +148,9 @@ function BuyScreen:update(dt)
 
   else
     if self.shop_text then self.shop_text:update(dt) end
+    if self.sets_text then self.sets_text:update(dt) end
     if self.party_text then self.party_text:update(dt) end
+    if self.items_text then self.items_text:update(dt) end
   end
 end
 
@@ -134,24 +158,76 @@ end
 function BuyScreen:draw()
   self.main:draw()
   self.top:draw()
+  if self.items_text then self.items_text:draw(32, 150) end
   self.ui:draw()
 
   if self.level == 0 then
     if self.title then self.title:draw(3.25*gw/4, 32, 0, 1, self.title_sy) end
   else
     if self.shop_text then self.shop_text:draw(32, 20, 0, 1, self.shop_text_sy) end
-    if self.party_text then self.party_text:draw(48, 190) end
+    if self.sets_text then self.sets_text:draw(328, 20) end
+    if self.party_text then self.party_text:draw(440, 20) end
   end
 end
 
 
 
 
+RerollButton = Object:extend()
+RerollButton:implement(GameObject)
+function RerollButton:init(args)
+  self:init_game_object(args)
+  self.shape = Rectangle(self.x, self.y, 54, 16)
+  self.interact_with_mouse = true
+  self.text = Text({{text = '[bg10]reroll: [yellow]2', font = pixul_font, alignment = 'center'}}, global_text_tags)
+end
+
+
+function RerollButton:update(dt)
+  self:update_game_object(dt)
+end
+
+
+function RerollButton:draw()
+  graphics.push(self.x, self.y, 0, self.spring.x, self.spring.y)
+    graphics.rectangle(self.x, self.y, self.shape.w, self.shape.h, 4, 4, self.selected and fg[0] or bg[1])
+    self.text:draw(self.x, self.y + 1)
+  graphics.pop()
+end
+
+
+function RerollButton:on_mouse_enter()
+  self.selected = true
+  self.text:set_text{{text = '[fgm5]reroll: 2', font = pixul_font, alignment = 'center'}}
+  self.spring:pull(0.2, 200, 10)
+end
+
+function RerollButton:on_mouse_exit()
+  self.text:set_text{{text = '[bg10]reroll: [yellow]2', font = pixul_font, alignment = 'center'}}
+  self.selected = false
+end
+
+
+
+
 CharacterPart = Object:extend()
 CharacterPart:implement(GameObject)
 function CharacterPart:init(args)
   self:init_game_object(args)
-  
+  self.shape = Rectangle(self.x, self.y, self.sx*20, self.sy*20)
+  self.interact_with_mouse = true
+  self.parts = {}
+  local x = self.x - 20
+  if self.reserve then
+    if self.reserve[2] == 1 then
+      table.insert(self.parts, CharacterPart{group = main.current.main, x = x, y = self.y, character = self.character, level = 2})
+      x = x - 20
+    end
+    for i = 1, self.reserve[1] do
+      table.insert(self.parts, CharacterPart{group = main.current.main, x = x, y = self.y, character = self.character, level = 1, sx = 0.9, sy = 0.9})
+      x = x - 20
+    end
+  end
 end
 
 
@@ -161,7 +237,7 @@ end
 
 
 function CharacterPart:draw()
-  graphics.push(self.x, self.y, 0, self.spring.x, self.spring.x)
+  graphics.push(self.x, self.y, 0, self.sx*self.spring.x, self.sy*self.spring.x)
     graphics.rectangle(self.x, self.y, 14, 14, 3, 3, character_colors[self.character])
     graphics.print_centered(self.level, pixul_font, self.x + 0.5, self.y + 2, 0, 1, 1, 0, 0, _G[character_color_strings[self.character]][-5])
   graphics.pop()
@@ -169,11 +245,22 @@ end
 
 
 function CharacterPart:on_mouse_enter()
+  local get_sale_price = function()
+    local total = 0
+    total = total + self.level
+    if self.reserve then
+      if self.reserve[2] then total = total + self.reserve[2]*2 end
+      if self.reserve[1] then total = total + self.reserve[1] end
+    end
+    return total
+  end
+
   self.spring:pull(0.2, 200, 10)
   self.info_text = InfoText{group = main.current.ui}
   self.info_text:activate({
-    {text = '[' .. character_color_strings[self.character] .. ']' .. self.character:capitalize() .. '[fg] - cost: [yellow]' .. self.parent.cost, font = pixul_font, alignment = 'center', height_multiplier = 1.25},
+    {text = '[' .. character_color_strings[self.character] .. ']' .. self.character:capitalize() .. '[fg] - [yellow]Lv.' .. self.level .. '[fg] - sells for [yellow]' .. get_sale_price(),
-    {text = character_descriptions[self.character](get_character_stat(self.character, 1, 'dmg')), font = pixul_font, alignment = 'center'},
+    font = pixul_font, alignment = 'center', height_multiplier = 1.25},
+    {text = character_descriptions[self.character](get_character_stat(self.character, self.level, 'dmg')), font = pixul_font, alignment = 'center'},
   }, nil, nil, nil, nil, 16, 4, nil, 2)
   self.info_text.x, self.info_text.y = gw/2, gh/2 + 10
 end
@@ -198,7 +285,7 @@ function ShopCard:init(args)
     local x = self.x
     if #character_classes[self.unit] == 2 then x = self.x - 10
     elseif #character_classes[self.unit] == 3 then x = self.x - 20 end
-    table.insert(self.class_icons, ClassIcon{group = main.current.top, x = x + (i-1)*20, y = self.y + 6, class = class, parent = self})
+    table.insert(self.class_icons, ClassIcon{group = main.current.top, x = x + (i-1)*20, y = self.y + 6, class = class, units = self.parent.units})
   end
   self.cost = character_tiers[self.unit]
 end
@@ -318,7 +405,7 @@ end
 
 function ClassIcon:draw()
   graphics.push(self.x, self.y, 0, self.spring.x, self.spring.x)
-    local i, j, n = class_set_numbers[self.class](self.parent.parent.units)
+    local i, j, n = class_set_numbers[self.class](self.units)
     graphics.rectangle(self.x, self.y, 16, 24, 4, 4, (n >= i) and class_colors[self.class] or bg[3])
     _G[self.class]:draw(self.x, self.y, 0, 0.3, 0.3, 0, 0, (n >= i) and _G[class_color_strings[self.class]][-5] or bg[10])
     graphics.rectangle(self.x, self.y + 26, 16, 16, 3, 3, bg[3])
@@ -341,7 +428,7 @@ end
 
 function ClassIcon:on_mouse_enter()
   self.spring:pull(0.2, 200, 10)
-  local i, j, owned = class_set_numbers[self.class](self.parent.parent.units)
+  local i, j, owned = class_set_numbers[self.class](self.units)
   self.info_text = InfoText{group = main.current.ui}
   self.info_text:activate({
     {text = '[' .. class_color_strings[self.class] .. ']' .. self.class:capitalize() .. '[fg] - owned: [yellow]' .. owned, font = pixul_font, alignment = 'center', height_multiplier = 1.25},

devlog.md

@@ -351,3 +351,12 @@ different objects and a UI coordination issue that seems to stop me.
 # Day 22 - 10/03/21
 
 More UI progress on buy screen.
+
+# Day 23 - 11/03/21
+
+Finished all visual progress on the main buy screen. Now all I have to do is make it all work logically, which is actually a lot easier than making it all work visually. This fact tells me that most of my problems with UI programming
+have to do with visuals and not much else. I would wager that most of it has to do with not knowing how the overall UI should look, and the rest is just building each UI component visually in a quick and easy way.
+
+The first problem can be fixed by just trying to draw the UI beforehand, which I never do but maybe I should start doing. The second problem is more involved and essentially it involves writing UI components that are generic enough
+like buttons, labels, image buttons, lists, etc, but also allow for enough specialization that I can make them really juicy, as this generally requires a lot of detail fiddling the inner works of the object. I think the Node refactor
+I'm planning will probably help with this, especially the idea of everything simply being a Node and classes being able to be defined inline by just defining update/draw/on_enter/etc functions.

main.lua

@@ -87,11 +87,11 @@ function init()
     ['warrior'] = yellow[0],
     ['ranger'] = green[0],
     ['healer'] = green[0],
-    ['conjurer'] = yellow[0],
+    ['conjurer'] = orange[0],
     ['mage'] = blue[0],
-    ['nuker'] = blue[0],
+    ['nuker'] = purple[0],
     ['rogue'] = red[0],
-    ['enchanter'] = red[0],
+    ['enchanter'] = blue[0],
     ['psy'] = fg[0],
   }
 
@@ -99,11 +99,11 @@ function init()
     ['warrior'] = 'yellow',
     ['ranger'] = 'green',
     ['healer'] = 'green',
-    ['conjurer'] = 'yellow',
+    ['conjurer'] = 'orange',
     ['mage'] = 'blue',
-    ['nuker'] = 'blue',
+    ['nuker'] = 'purple',
     ['rogue'] = 'red',
-    ['enchanter'] = 'red',
+    ['enchanter'] = 'blue',
     ['psy'] = 'fg',
   }
 
@@ -117,17 +117,17 @@ function init()
     ['outlaw'] = red[0],
     ['blade'] = yellow[0],
     ['elementor'] = blue[0],
-    ['saboteur'] = red[0],
+    ['saboteur'] = orange[0],
-    ['stormweaver'] = red[0],
+    ['stormweaver'] = blue[0],
-    ['sage'] = blue[0],
+    ['sage'] = purple[0],
     ['squire'] = yellow[0],
-    ['cannoneer'] = green[0],
+    ['cannoneer'] = orange[0],
     ['dual_gunner'] = green[0],
     ['hunter'] = green[0],
     ['chronomancer'] = blue[0],
     ['spellblade'] = blue[0],
     ['psykeeper'] = fg[0],
-    ['engineer'] = yellow[0],
+    ['engineer'] = orange[0],
   }
 
   character_color_strings = {
@@ -140,17 +140,17 @@ function init()
     ['outlaw'] = 'red',
     ['blade'] = 'yellow',
     ['elementor'] = 'blue',
-    ['saboteur'] = 'red',
+    ['saboteur'] = 'orange',
-    ['stormweaver'] = 'red',
+    ['stormweaver'] = 'blue',
-    ['sage'] = 'blue',
+    ['sage'] = 'purple',
     ['squire'] = 'yellow',
-    ['cannoneer'] = 'green',
+    ['cannoneer'] = 'orange',
     ['dual_gunner'] = 'green',
     ['hunter'] = 'green',
     ['chronomancer'] = 'blue',
     ['spellblade'] = 'blue',
     ['psykeeper'] = 'fg',
-    ['engineer'] = 'yellow',
+    ['engineer'] = 'orange',
   }
 
   character_classes = {
@@ -202,7 +202,7 @@ function init()
   get_character_stat_string = function(character, level)
     local group = Group():set_as_physics_world(32, 0, 0, {'player', 'enemy', 'projectile', 'enemy_projectile'})
     local mock = Player{group = group, leader = true, character = character, level = level}
-    mock:update(1/60)
+    mock:update(0)
     return '[red]HP: [red]' .. mock.max_hp .. '[fg], [red]DMG: [red]' .. mock.dmg .. '[fg], [green]ASPD: [green]' .. math.round(mock.aspd_m, 2) .. 'x[fg], [blue]AREA: [blue]' ..
     math.round(mock.area_dmg_m*mock.area_size_m, 2) ..  'x[fg], [yellow]DEF: [yellow]' .. math.round(mock.def, 2) .. '[fg], [green]MVSPD: [green]' .. math.round(mock.v, 2) .. '[fg]'
   end
@@ -210,7 +210,7 @@ function init()
   get_character_stat = function(character, level, stat)
     local group = Group():set_as_physics_world(32, 0, 0, {'player', 'enemy', 'projectile', 'enemy_projectile'})
     local mock = Player{group = group, leader = true, character = character, level = level}
-    mock:update(1/60)
+    mock:update(0)
     return math.round(mock[stat], 2)
   end
 
@@ -251,8 +251,8 @@ function init()
     ['saboteur'] = {hp = 1, dmg = 1, aspd = 1, area_dmg = 1, area_size = 1, def = 1, mvspd = 1.4},
   }
 
-  local ylb1 = function(lvl) return (lvl == 1 and 'yellow' or 'light_bg') end
+  local ylb1 = function(lvl) return (lvl >= 1 and 'yellow' or 'light_bg') end
-  local ylb2 = function(lvl) return (lvl == 2 and 'yellow' or 'light_bg') end
+  local ylb2 = function(lvl) return (lvl >= 2 and 'yellow' or 'light_bg') end
   class_descriptions = {
     ['ranger'] = function(lvl) return '[' .. ylb1(lvl) .. ']2[' .. ylb2(lvl) .. ']/4 [fg]- [' .. ylb1(lvl) .. ']10%[' .. ylb2(lvl) .. ']/20% [fg]chance to release a barrage on attack to allied rangers' end,
     ['warrior'] = function(lvl) return '[' .. ylb1(lvl) .. ']2[' .. ylb2(lvl) .. ']/4 [fg]- [' .. ylb1(lvl) .. ']+25[' .. ylb2(lvl) .. ']/+50 [fg]defense to allied warriors' end,
@@ -320,6 +320,14 @@ function init()
     return {ranger = rangers, warrior = warriors, healer = healers, mage = mages, nuker = nukers, conjurer = conjurers, rogue = rogues, enchanter = enchanters, psy = psys}
   end
 
+  get_classes = function(units)
+    local classes = {}
+    for _, unit in ipairs(units) do
+      table.insert(classes, table.copy(character_classes[unit.character]))
+    end
+    return table.unify(table.flatten(classes))
+  end
+
   class_set_numbers = {
     ['ranger'] = function(units) return 2, 4, get_number_of_units_per_class(units).ranger end,
     ['warrior'] = function(units) return 2, 4, get_number_of_units_per_class(units).warrior end,
@@ -332,11 +340,17 @@ function init()
     ['psy'] = function(units) return 1, 2, get_number_of_units_per_class(units).psy end,
   }
 
-  resource = 0
+  gold = 0
 
   main = Main()
   main:add(BuyScreen'buy_screen')
-  main:go_to('buy_screen', 1, {{character = 'vagrant'}, {character = 'swordsman'}, {character = 'wizard'}, {character = 'archer'}, {character = 'scout'}, {character = 'cleric'}})
+  local rsv = function() return {random:int(0, 2), random:int(0, 1)} end
+  main:go_to('buy_screen', 1, {
+    {character = 'vagrant', level = 1, reserve = rsv()}, {character = 'swordsman', level = 1, reserve = rsv()}, {character = 'wizard', level = 1, reserve = rsv()},
+    {character = 'archer', level = 1, reserve = rsv()}, {character = 'scout', level = 1, reserve = rsv()}, {character = 'cleric', level = 1, reserve = rsv()},
+    {character = 'elementor', level = 1, reserve = rsv()}, {character = 'cannoneer', level = 1, reserve = rsv()}, {character = 'blade', level = 1, reserve = rsv()},
+    {character = 'sage', level = 1, reserve = rsv()}, {character = 'outlaw', level = 1, reserve = rsv()},
+  })
 end
 
 

shared.lua

@@ -429,8 +429,10 @@ global_text_tags = {
   purple = TextTag{draw = function(c, i, text) graphics.set_color(purple[0]) end},
   blue = TextTag{draw = function(c, i, text) graphics.set_color(blue[0]) end},
   bg = TextTag{draw = function(c, i, text) graphics.set_color(bg[0]) end},
+  bg10 = TextTag{draw = function(c, i, text) graphics.set_color(bg[10]) end},
   light_bg = TextTag{draw = function(c, i, text) graphics.set_color(bg[5]) end},
   fg = TextTag{draw = function(c, i, text) graphics.set_color(fg[0]) end},
+  fgm5 = TextTag{draw = function(c, i, text) graphics.set_color(fg[-5]) end},
   wavy = TextTag{update = function(c, dt, i, text) c.oy = 2*math.sin(4*time + i) end},
   wavy_mid = TextTag{update = function(c, dt, i, text) c.oy = 0.75*math.sin(3*time + i) end},
   wavy_mid2 = TextTag{update = function(c, dt, i, text) c.oy = 0.5*math.sin(3*time + i) end},