User:DarthPhallus/GGSTCharNavTable/doc: Difference between revisions

From Dustloop Wiki
(Created page with "{| class="wikitable" ! colspan=5 | Table of Contents |- |45px|link=https://www.dustloop.com/w/GGST/Happy_Chaos/Matchups#Anji||Image:GGST_Axl_Ico...")
 
No edit summary
 
(9 intermediate revisions by the same user not shown)
Line 1: Line 1:
{| class="wikitable"
Rough outline of what this is supposed to be
! colspan=5 | Table of Contents
{| class="wikitable" style="border-style: hidden"
! colspan=5 | Table of Contents  
|-
|-
|[[Image:GGST_Anji_Icon.png|45px|link=https://www.dustloop.com/w/GGST/Happy_Chaos/Matchups#Anji]]||[[Image:GGST_Axl_Icon.png|45px|link=https://www.dustloop.com/w/GGST/Happy_Chaos/Matchups#Axl]]||[[Image:GGST_Baiken_Icon.png|45px|link=https://www.dustloop.com/w/GGST/Happy_Chaos/Matchups#Baiken]]||[[Image:GGST_Chipp_Icon.png|45px|link=https://www.dustloop.com/w/GGST/Happy_Chaos/Matchups#Chipp]]||[[Image:GGST_Faust_Icon.png|45px|link=https://www.dustloop.com/w/GGST/Happy_Chaos/Matchups#Faust]]
|[[Image:GGST_Anji_Icon.png|45px|link={{FULLPAGENAME}}#Anji]]||[[Image:GGST_Axl_Icon.png|45px|link={{FULLPAGENAME}}#Axl]]||[[Image:GGST_Baiken_Icon.png|45px|link={{FULLPAGENAME}}#Baiken]]||[[Image:GGST_Chipp_Icon.png|45px|link={{FULLPAGENAME}}#Chipp]]||[[Image:GGST_Faust_Icon.png|45px|link={{FULLPAGENAME}}#Faust]]
|-
|-  
|[[Image:GGST_Giovanna_Icon.png|45px|link=https://www.dustloop.com/w/GGST/Happy_Chaos/Matchups#Giovanna]]||[[Image:GGST_Goldlewis_Icon.png|45px|link=https://www.dustloop.com/w/GGST/Happy_Chaos/Matchups#Goldlewis]]||[[Image:GGST_Happy_Chaos_Icon.png|45px|link=https://www.dustloop.com/w/GGST/Happy_Chaos/Matchups#Happy_Chaos]]||[[Image:GGST_I-No_Icon.png|45px|link=https://www.dustloop.com/w/GGST/Happy_Chaos/Matchups#I-No]]||[[Image:GGST_Jack-O_Icon.png|45px|link=https://www.dustloop.com/w/GGST/Happy_Chaos/Matchups#Jack-O]]
|[[Image:GGST_Giovanna_Icon.png|45px|link={{FULLPAGENAME}}#Giovanna]]||[[Image:GGST_Goldlewis_Icon.png|45px|link={{FULLPAGENAME}}#Goldlewis]]||[[Image:GGST_Happy_Chaos_Icon.png|45px|link={{FULLPAGENAME}}#Happy_Chaos]]||[[Image:GGST_I-No_Icon.png|45px|link={{FULLPAGENAME}}#I-No]]||[[Image:GGST_Jack-O_Icon.png|45px|link={{FULLPAGENAME}}#Jack-O]]
|-
|-  
|[[Image:GGST_Ky_Icon.png|45px|link=https://www.dustloop.com/w/GGST/Happy_Chaos/Matchups#Ky]] || [[Image:GGST_Leo_Icon.png|45px|link=https://www.dustloop.com/w/GGST/Happy_Chaos/Matchups#Leo]]||[[Image:GGST_May_Icon.png|45px|link=https://www.dustloop.com/w/GGST/Happy_Chaos/Matchups#May]]||[[Image:GGST_Millia_Icon.png|45px|link=https://www.dustloop.com/w/GGST/Happy_Chaos/Matchups#Millia]]||[[Image:GGST_Nagoriyuki_Icon.png|45px|link=https://www.dustloop.com/w/GGST/Happy_Chaos/Matchups#Nagoriyuki]]
|[[Image:GGST_Ky_Icon.png|45px|link={{FULLPAGENAME}}#Ky]] || [[Image:GGST_Leo_Icon.png|45px|link={{FULLPAGENAME}}#Leo]]||[[Image:GGST_May_Icon.png|45px|link={{FULLPAGENAME}}#May]]||[[Image:GGST_Millia_Icon.png|45px|link={{FULLPAGENAME}}#Millia]]||[[Image:GGST_Nagoriyuki_Icon.png|45px|link={{FULLPAGENAME}}#Nagoriyuki]]
|-
|-  
|[[Image:GGST_Potemkin_Icon.png|45px|link=https://www.dustloop.com/w/GGST/Happy_Chaos/Matchups#Potemkin]]||[[Image:GGST_Ramlethal_Icon.png|45px|link=https://www.dustloop.com/w/GGST/Happy_Chaos/Matchups#Ramlethal]]||[[Image:GGST_Sol_Icon.png|45px|link=https://www.dustloop.com/w/GGST/Happy_Chaos/Matchups#Sol]]||[[Image:GGST_Testament_Icon.png|45px|link=https://www.dustloop.com/w/GGST/Happy_Chaos/Matchups#Testament]]||[[Image:GGST_Zato_Icon.png|45px|link=https://www.dustloop.com/w/GGST/Happy_Chaos/Matchups#Zato]]
|[[Image:GGST_Potemkin_Icon.png|45px|link={{FULLPAGENAME}}#Potemkin]]||[[Image:GGST_Ramlethal_Icon.png|45px|link={{FULLPAGENAME}}#Ramlethal]]||[[Image:GGST_Sol_Icon.png|45px|link={{FULLPAGENAME}}#Sol]]||[[Image:GGST_Testament_Icon.png|45px|link={{FULLPAGENAME}}#Testament]]||[[Image:GGST_Zato_Icon.png|45px|link={{FULLPAGENAME}}#Zato]]
|}
|}


Want it to look like this
==Label Test==
 
<div class="tierHeader" style="background-color: green"> Table of Contents </div>
 
 
==Character Name Pull Test==
 
{{CharacterList|GGST}}
 
<pre>
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
</pre>
 
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==


Problems:
* Do I format this as something like a flexbox with block elements inside or as a table?
* I want to make it include different games with different numbers of characters. So I need to find a way to generate tables as rectangles dynamically based on the number of characters? Or is that too much?
* 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.
* Needs to navigate to the right page, just doing link=#character works but might have issues on edge cases? May need to figure out how magicwords work. https://www.mediawiki.org/wiki/Help:Magic_words#URL_data
** 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.
* Table might need some light styling. Get rid of cell borders?

Latest revision as of 00:30, 7 August 2022

Rough outline of what this is supposed to be

Table of Contents
GGST Anji Icon.png GGST Axl Icon.png GGST Baiken Icon.png GGST Chipp Icon.png GGST Faust Icon.png
GGST Giovanna Icon.png GGST Goldlewis Icon.png GGST Happy Chaos Icon.png GGST I-No Icon.png GGST Jack-O Icon.png
GGST Ky Icon.png GGST Leo Icon.png GGST May Icon.png GGST Millia Icon.png GGST Nagoriyuki Icon.png
GGST Potemkin Icon.png GGST Ramlethal Icon.png GGST Sol Icon.png GGST Testament Icon.png GGST Zato Icon.png

Label Test

Table of Contents


Character Name Pull Test

A.B.A, Anji Mito, Asuka R, Axl Low, Baiken, Bedman, Bridget, Chipp Zanuff, Elphelt Valentine, 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.