Module:Falloff: Difference between revisions

Damage falloff chart
TeamSpec theme: colours move from inline styles to MediaWiki:Common.css classes
 
Line 4: Line 4:
local p = {}
local p = {}


local BAR = '#5b8def'
local LINE = '#a2a9b1'


function p.chart(frame)
function p.chart(frame)
Line 22: Line 20:
local out = {}
local out = {}
table.insert(out, '<div class="ts-falloff" style="max-width:640px;margin:8px 0 4px 0;">')
table.insert(out, '<div class="ts-falloff" style="max-width:640px;margin:8px 0 4px 0;">')
table.insert(out, '<div class="ts-falloff-plot" style="position:relative;height:180px;border-left:1px solid ' .. LINE
table.insert(out, '<div class="ts-falloff-plot">')
.. ';border-bottom:1px solid ' .. LINE .. ';display:flex;align-items:flex-end;">')
-- The full-damage line.
-- The full-damage line.
table.insert(out, string.format('<div style="position:absolute;left:0;right:0;bottom:%.2f%%;border-top:1px dashed %s;"></div>',
table.insert(out, string.format('<div class="ts-falloff-full" style="bottom:%.2f%%;"></div>', 100 / top))
100 / top, LINE))
for _, t in ipairs(w.thresholds) do
for _, t in ipairs(w.thresholds) do
table.insert(out, string.format(
table.insert(out, string.format(
'<div style="position:absolute;top:0;bottom:0;left:%.2f%%;border-left:1px dotted %s;"></div>',
'<div class="ts-falloff-threshold" style="left:%.2f%%;"></div>',
t / w.max * 100, LINE))
t / w.max * 100))
end
end
for _, s in ipairs(w.samples) do
for _, s in ipairs(w.samples) do
table.insert(out, string.format(
table.insert(out, string.format(
'<div class="ts-falloff-bar" title="%s" data-readout="%s" style="flex:1;height:%.2f%%;background:%s;border-right:1px solid #fff;cursor:crosshair;"></div>',
'<div class="ts-falloff-bar" title="%s" data-readout="%s" style="height:%.2f%%;"></div>',
mw.text.encode(s[3]), mw.text.encode(s[3]), s[2] / top * 100, BAR))
mw.text.encode(s[3]), mw.text.encode(s[3]), s[2] / top * 100))
end
end
table.insert(out, '</div>')
table.insert(out, '</div>')
Line 48: Line 44:
mw.language.getContentLanguage():formatNum(math.floor(w.max * 10 + 0.5) / 10)))
mw.language.getContentLanguage():formatNum(math.floor(w.max * 10 + 0.5) / 10)))
table.insert(out, '</div>')
table.insert(out, '</div>')
table.insert(out, '<div style="font-size:85%;color:#54595d;">Hover or touch the chart to read the damage at each distance. The dashed line is full damage; dotted lines mark where the falloff changes.</div>')
table.insert(out, '<div class="ts-falloff-caption">Hover or touch the chart to read the damage at each distance. The dashed line is full damage; dotted lines mark where the falloff changes.</div>')
table.insert(out, '</div>')
table.insert(out, '</div>')
return table.concat(out)
return table.concat(out)