User:DarthPhallus/GGSTCharNavTable

Rough outline of what this is supposed to be

Table of Contents

Label Test

Table of Contents

Character Name Pull Test

Anji Mito, Asuka R, Axl Low, Baiken, Bedman, Bridget, Chipp Zanuff, Faust, Giovanna, Goldlewis Dickinson, Happy Chaos, I-No, Jack-O, Johnny, Ky Kiske, Leo Whitefang, May, Millia Rage, Nagoriyuki, Potemkin, Ramlethal Valentine, Sin Kiske, Sol Badguy, Testament, Zato-1

 
local p = {}

function p.drawTierList(frame)
  local wikitext = "<div class=\"tierList\">" -- initialize the wikitext with the container for the list
  local GAME = frame.args[1]:gsub("%s+", "") -- capture the target game from the first arg
  local character = "default"
  local numberOfTiers = tablelength(frame.args)
  local colors = {'b8ff89', 'fdff89', 'ffdf7f', 'ffbf7f', 'e98d87', 'ff7ff0', 'd17fff', '7fbfff', '7feeff', '7fffc3' } -- an array of pre-defined colors

  for index=2,numberOfTiers do
    local currentTier = trim(frame.args[index]) -- use the argument at the current index as current tier data
    local tierLabel = string.match(currentTier, '(.*);') -- capture tier label from all characters before first ';'
    currentTier = string.match(currentTier, ";(.*)") -- remove the tier label from the current tier data

    --Inject tier label
    if index == 2 then -- first tier should have a rounded top corner
      wikitext = wikitext .. "<div class=\"tierHeader\" style=\"background-color: #" .. colors[1] .. "; border-top-left-radius: 4px;\">" .. tierLabel .. "</div>"
    elseif index == numberOfTiers then -- middle tiers are normal
      wikitext = wikitext .. "<div class=\"tierHeader\" style=\"background-color: #" .. colors[index-1] .. "; border-bottom-left-radius: 4px;\">" .. tierLabel .. "</div>"
    else -- final tier has a roudned bottom corner
      wikitext = wikitext .. "<div class=\"tierHeader\" style=\"background-color: #" .. colors[index-1] .. ";\">" .. tierLabel .. "</div>"
    end
    
    -- open a new tier container
    if index ~= numberOfTiers then 
      wikitext = wikitext .. "<div class=\"tierGroup tierUnderline\">"
    else -- final tier does not have an underline
      wikitext = wikitext .. "<div class=\"tierGroup\">"
    end

    -- iterate over tokens in current tier, sperrated by ',' character
    for token in string.gmatch(currentTier, '([^,]+)') do
      character = token
      -- inject character label
      local characterLabel = frame:expandTemplate{ title = 'Character Label', args = { GAME, character, '32px' } }
      wikitext = wikitext .. "<div>" .. characterLabel .. "</div>"
    end
  
    -- close the current tier container
    wikitext = wikitext .. "</div>"

  end

  -- close the entire tier list
  wikitext = wikitext .. "</div>"

  return wikitext
end

-- Return the size of a table by iterating over it and counting
function tablelength(T)
  local count = 0
  for _ in pairs(T) do count = count + 1 end
  return count
end

function trim(s)
  return (string.gsub(s, "^%s*(.-)%s*$", "%1"))
end

return p

Understanding This Lua Script:

Index starts at 1 not 0.

Line 1 - Generic Script setup?
Line 3 - Creating a function called drawTierList, frame is the arguments. can be multiple. Returns a big wikitext chunk which contains everything actually being put on the page.
Line 4 - Setting up the wikitext that is getting returned when drawTierList is called. The div is the first chunk of the wikitext, more gets appended.
Line 5 - finding the name of the game by pulling the first argument from args. gsub is being used to delete all whitespace.
Line 6 - Init and declaration for character variable used latter to create character labels.
Line 7 - finding the total number of tiers, pulled from the number of arguments passed into drawTierList. Is actually 1+ the number of tiers but since Lua indexes at 1 this just works?
Line 8 - Just colors. Probably not useful for my purposes.

10 - Setting up a loop, starts at 2 which is the first (top) tier. Iterates to the last (bottom) tier which is equal to the number of arguments.
11 - Calls a trim function. Not 100% what it does? just clears out all extra characters besides the tier and characters maybe? I believe this is just the cleaned argument at each tier level.
13 - Uses String.Match to return the matched text, in this instance it's looking for the tier label which is before the characters from "currentTier".
14 - Using string.match again to set currentTier equal to itself with the tierlabel removed.
17-23 : First checks index to find if on the first tier, if so we append to the wikitext. The append is some HTML / CSS needed to construct the tier minus characters. There's a condition for the middle and final tier, which have slightly differing wikitext to append.

26-30: Appending wikitext, exactly what depends on if it's the final tier or not. The div appended is for the tiergroup as in group of characters?

33-38: For loop that iterates through characters in the tier. Pattern matching is beyond me but I think it's separating them by commas? expandTemplate is the equivalent of a mediawiki template call. So this is calling the "Character Label" template and passing it the game, character, and size of the character icon as arguments. This template call is saved as characterLabel and appended to the wikitext.
Rest of the lines in the main fuction are just closing the loops and appending closing div tags.

Thoughts on Design

Do I format this as something like a flexbox with block elements inside or as a table?
Either way I think the best idea would to figure out the number of squares in the TOC first, generate those elements then iterate back through and fill them with characters till we run out of characters.
- Finding the number of squares would be finding the smallest square number greater than the number of characters, then making the dimensions of the TOC the root of that number.