MediaWiki:SmutstoneViewer.js

$(document).ready(function {    console.log('SmutstoneViewer: Check if page needs this Smutstone Viewer');    if (mw.config.values.wgPageName != 'Table_of_max_evolved_cards' && mw.config.values.wgPageName != 'Table_of_cards') { return 0; }   console.log('SmutstoneViewer: Page needs this Smutstone Viewer');

'use strict';

/**    * URL location of the game webpack content. */   const confJsUrl = 'https://smutstone.miraheze.org/w/index.php?title=MediaWiki:Smutstone.conf.js&action=raw&ctype=text/javascript';

/**    * URL location of game images. */   const imagesUrl = 'https://cdn.smutstone.com/s2'

//   // Rest of program //

let webpack

class Webpack { constructor { this.index = { battleEffects: undefined, cardEffects: undefined, cardSets: undefined, cards: undefined, }       }

static colorText = ['Colorless', 'Red', 'Green', 'Blue', 'White', 'Black'] static elementText = ['Colorless', 'Fire', 'Earth', 'Water', 'Light', 'Dark'] static rarityText = ['No rarity', 'Common', 'Rare', 'Epic', 'Legendary', 'Mythic', 'Arcane']

async load(url) { console.log(`Load webpackJsonp from '${url}'`) const origWebpackJsonp = window.webpackJsonp let resourceContent window.webpackJsonp = function (r, resource, a) { resourceContent = resource }           let script const thisWebpack = this; await new Promise((resolve, reject) => {               script = document.createElement('script')                document.body.appendChild(script)                script.onload = function  {                    console.log('Loaded ' + url)                    thisWebpack.unpack(resourceContent)                    resolve                };                script.onerror = reject                script.async = true                script.src = url            }); document.body.removeChild(script) window.webpackJsonp = origWebpackJsonp }

static formatText(text, options) { let result = text Object.entries(options || {}).forEach(([key, value]) =>               result = result.replace(new RegExp(`\{${key}\}`, 'g'), value)                    .replace(new RegExp(`\{${key}PC\}`, 'g'), Math.round(value * 100))) return result }

unpack(resourceContent) { const unpackExport = function (packFunction) { var e = {} packFunction(e, {}, function (i) {                   if (i == 2) {                        return { _tr: Webpack.formatText }                    }                    return unpackExport(resourceContent[i])                }); return e.exports };           const resourceIndex = window.location.origin.includes('nutaku') ? 16 : 15           const webpackIndex = unpackExport(resourceContent[resourceIndex]) for (const key in this.index) { const value = webpackIndex.get(key) this[key] = value }           console.log('this webpack', this) }   }

function getImageUrl(imageHash) { if (!imageHash) { return undefined }       return `${imagesUrl}/${imageHash}` }

function getEffectHtml(effectId) { if (!effectId) { return undefined }       const be = webpack.battleEffects[effectId] const ce = webpack.cardEffects[effectId] let html = "" const iconUrl = getImageUrl(ce?.icons?._1x) if (iconUrl) { html += `` }       html += ` ${ce.name}` if (ce.id != ce.name.replace(/ /g, '')) { html += ` (${ce.id})` }       html += ' ' html += ` ${Webpack.formatText(ce.info, be)} ` if (ce?.events) { html += ' Events: ' + Object.keys(ce.events).join(', ') + ' ' }       if (be?.effects) { html += ' Effects: ' + be.effects.join(', ') + ' ' }       return html }

function getCardHtml(card) { if (!card) { return undefined }       const imageUrl = getImageUrl(card.evolution?.stages?.[0]?.changes?.images?._1x) const effectHtml = getEffectHtml(card.effect)

// HTML copied and stripped from https://smutstone.miraheze.org/wiki/Water_Elemental return ` `   }

async function install { webpack = new Webpack; await webpack.load(confJsUrl)

$('.table-of-cards td:nth-child(2) a').hover(async event => {           const element = $(event.currentTarget)            if (element.hasClass('card-tooltip')) {                return            }            const cardId = element.closest('td').prev.text            console.log(`cardId`, cardId)            const card = webpack.cards.find(c => c.cardId == cardId)            if (!card) {                return            }            console.log(`card`, card)

element.addClass('card-tooltip') element.append($(' ').addClass('card-tooltip-text').html(getCardHtml(card))) })   }

install });