diff options
Diffstat (limited to 'src/page/flash.js')
| -rw-r--r-- | src/page/flash.js | 418 |
1 files changed, 213 insertions, 205 deletions
diff --git a/src/page/flash.js b/src/page/flash.js index a4b3b9b..3ce7646 100644 --- a/src/page/flash.js +++ b/src/page/flash.js @@ -2,16 +2,8 @@ // Flash page and index specifications. -// Imports - -import fixWS from 'fix-whitespace'; - -import * as html from '../util/html.js'; - import {getFlashLink} from '../util/wiki-data.js'; -// Page exports - export function condition({wikiData}) { return wikiData.wikiInfo.enableFlashesAndGames; } @@ -32,6 +24,7 @@ export function write(flash, {wikiData}) { getArtistString, getFlashCover, getThemeString, + html, link, language, }) => ({ @@ -41,79 +34,80 @@ export function write(flash, {wikiData}) { ]), main: { - content: fixWS` - <h1>${language.$('flashPage.title', { - flash: flash.name, - })}</h1> - ${generateCoverLink({ - src: getFlashCover(flash), - alt: language.$('misc.alt.flashArt'), - })} - <p>${language.$('releaseInfo.released', { - date: language.formatDate(flash.date), - })}</p> - ${ - (flash.page || flash.urls?.length) && - `<p>${language.$('releaseInfo.playOn', { - links: language.formatDisjunctionList( - [ - flash.page && getFlashLink(flash), - ...(flash.urls ?? []), - ].map((url) => fancifyFlashURL(url, flash)) + content: [ + html.tag('h1', + language.$('flashPage.title', { + flash: flash.name, + })), + + generateCoverLink({ + src: getFlashCover(flash), + alt: language.$('misc.alt.flashArt'), + }), + + html.tag('p', + language.$('releaseInfo.released', { + date: language.formatDate(flash.date), + })), + + (flash.page || flash.urls?.length) && + html.tag('p', + language.$('releaseInfo.playOn', { + links: language.formatDisjunctionList( + [ + flash.page && getFlashLink(flash), + ...(flash.urls ?? []), + ].map((url) => fancifyFlashURL(url, flash)) + ), + })), + + ...flash.featuredTracks?.length ? [ + html.tag('p', + `Tracks featured in <i>${ + flash.name.replace(/\.$/, '') + }</i>:`), + + html.tag('ul', + flash.featuredTracks.map(track => + html.tag('li', + language.$('trackList.item.withArtists', { + track: link.track(track), + by: `<span class="by">${ + language.$('trackList.item.withArtists.by', { + artists: getArtistString( + track.artistContribs ), - })}</p>` - } - ${ - flash.featuredTracks && - fixWS` - <p>Tracks featured in <i>${flash.name.replace( - /\.$/, - '' - )}</i>:</p> - <ul> - ${flash.featuredTracks - .map((track) => - language.$('trackList.item.withArtists', { - track: link.track(track), - by: `<span class="by">${language.$( - 'trackList.item.withArtists.by', - { - artists: getArtistString( - track.artistContribs - ), - } - )}</span>`, - }) - ) - .map((row) => `<li>${row}</li>`) - .join('\n')} - </ul> - ` - } - ${ - flash.contributorContribs.length && - fixWS` - <p>${language.$('releaseInfo.contributors')}</p> - <ul> - ${flash.contributorContribs - .map( - (contrib) => - `<li>${getArtistString([contrib], { - showContrib: true, - showIcons: true, - })}</li>` - ) - .join('\n')} - </ul> - ` - } - `, + }) + }</span>`, + })))), + ] : [], + + ...flash.contributorContribs.length ? [ + html.tag('p', + language.$('releaseInfo.contributors')), + + html.tag('ul', + flash.contributorContribs.map(contrib => + html.tag('li', + getArtistString([contrib], { + showContrib: true, + showIcons: true, + })))), + ] : [], + ], }, - sidebarLeft: generateSidebarForFlash(flash, {link, language, wikiData}), + sidebarLeft: generateSidebarForFlash(flash, { + html, + language, + link, + wikiData, + }), + nav: generateNavForFlash(flash, { generateChronologyLinks, generatePreviousNextLinks, + html, link, language, wikiData, @@ -124,54 +118,70 @@ export function write(flash, {wikiData}) { return [page]; } -export function writeTargetless({wikiData}) { +export function writeTargetless({ + wikiData, +}) { const {flashActData} = wikiData; const page = { type: 'page', path: ['flashIndex'], - page: ({getFlashGridHTML, getLinkThemeString, link, language}) => ({ + page: ({ + getFlashGridHTML, + getLinkThemeString, + html, + language, + link, + }) => ({ title: language.$('flashIndex.title'), main: { classes: ['flash-index'], - content: fixWS` - <h1>${language.$('flashIndex.title')}</h1> - <div class="long-content"> - <p class="quick-info">${language.$('misc.jumpTo')}</p> - <ul class="quick-info"> - ${flashActData - .filter((act) => act.jump) - .map( - ({anchor, jump, jumpColor}) => fixWS` - <li><a href="#${anchor}" style="${getLinkThemeString( - jumpColor - )}">${jump}</a></li> - ` - ) - .join('\n')} - </ul> - </div> - ${flashActData - .map( - (act, i) => fixWS` - <h2 id="${act.anchor}" style="${getLinkThemeString( - act.color - )}">${link.flash(act.flashes[0], { - text: act.name, - })}</h2> - <div class="grid-listing"> - ${getFlashGridHTML({ - entries: act.flashes.map((flash) => ({ - item: flash, - })), - lazy: i === 0 ? 4 : true, - })} - </div> - ` - ) - .join('\n')} - `, + content: [ + html.tag('h1', + language.$('flashIndex.title')), + + html.tag('div', + {class: 'long-content'}, + [ + html.tag('p', + {class: 'quick-info'}, + language.$('misc.jumpTo')), + + html.tag('ul', + {class: 'quick-info'}, + flashActData + .filter(act => act.jump) + .map(({anchor, jump, jumpColor}) => + html.tag('li', + html.tag('a', + { + href: '#' + anchor, + style: getLinkThemeString(jumpColor), + }, + jump)))), + ]), + + ...flashActData.flatMap((act, i) => [ + html.tag('h2', + { + id: '#' + act.anchor, + style: getLinkThemeString(act.color), + }, + link.flash(act.flashes[0], { + text: act.name, + })), + + html.tag('div', + {class: 'grid-listing'}, + getFlashGridHTML({ + entries: act.flashes.map((flash) => ({ + item: flash, + })), + lazy: i === 0 ? 4 : true, + })), + ]), + ], }, nav: {simple: true}, @@ -183,10 +193,14 @@ export function writeTargetless({wikiData}) { // Utility functions -function generateNavForFlash( - flash, - {generateChronologyLinks, generatePreviousNextLinks, link, language, wikiData} -) { +function generateNavForFlash(flash, { + generateChronologyLinks, + generatePreviousNextLinks, + html, + language, + link, + wikiData +}) { const {flashData} = wikiData; const previousNextLinks = generatePreviousNextLinks(flash, { @@ -211,19 +225,21 @@ function generateNavForFlash( bottomRowContent: previousNextLinks && `(${previousNextLinks})`, - content: fixWS` - <div> - ${generateChronologyLinks(flash, { - headingString: 'misc.chronology.heading.flash', - contribKey: 'contributorContribs', - getThings: (artist) => artist.flashesAsContributor, - })} - </div> - `, + content: html.tag('div', + generateChronologyLinks(flash, { + headingString: 'misc.chronology.heading.flash', + contribKey: 'contributorContribs', + getThings: (artist) => artist.flashesAsContributor, + })), }; } -function generateSidebarForFlash(flash, {link, language, wikiData}) { +function generateSidebarForFlash(flash, { + html, + language, + link, + wikiData, +}) { // all hard-coded, sorry :( // this doesnt have a super portable implementation/design...yet!! @@ -244,82 +260,74 @@ function generateSidebarForFlash(flash, {link, language, wikiData}) { const currentAct = flash && flash.act; return { - content: fixWS` - <h1>${link.flashIndex('', { - text: language.$('flashIndex.title'), - })}</h1> - <dl> - ${flashActData - .filter( - (act) => - act.name.startsWith('Act 1') || - act.name.startsWith('Act 6 Act 1') || - act.name.startsWith('Hiveswap') || - // Sorry not sorry -Yiffy - (({index = flashActData.indexOf(act)} = {}) => - index < act6 - ? side === 1 - : index < outsideCanon - ? side === 2 - : true)() - ) - .flatMap((act) => [ - (act.name.startsWith('Act 1') && - html.tag( - 'dt', - {class: ['side', side === 1 && 'current']}, - link.flash(act.flashes[0], { - color: '#4ac925', - text: `Side 1 (Acts 1-5)`, - }) - )) || - (act.name.startsWith('Act 6 Act 1') && - html.tag( - 'dt', - {class: ['side', side === 2 && 'current']}, - link.flash(act.flashes[0], { - color: '#1076a2', - text: `Side 2 (Acts 6-7)`, - }) - )) || - (act.name.startsWith('Hiveswap Act 1') && - html.tag( - 'dt', - {class: ['side', side === 3 && 'current']}, - link.flash(act.flashes[0], { - color: '#008282', - text: `Outside Canon (Misc. Games)`, - }) - )), - (({index = flashActData.indexOf(act)} = {}) => - index < act6 - ? side === 1 - : index < outsideCanon - ? side === 2 - : true)() && - html.tag( - 'dt', - {class: act === currentAct && 'current'}, - link.flash(act.flashes[0], {text: act.name}) - ), - act === currentAct && - fixWS` - <dd><ul> - ${act.flashes - .map((f) => - html.tag( - 'li', - {class: f === flash && 'current'}, - link.flash(f) - ) - ) - .join('\n')} - </ul></dd> - `, - ]) - .filter(Boolean) - .join('\n')} - </dl> - `, + content: [ + html.tag('h1', + link.flashIndex('', { + text: language.$('flashIndex.title'), + })), + + html.tag('dl', + flashActData + .filter( + (act) => + act.name.startsWith('Act 1') || + act.name.startsWith('Act 6 Act 1') || + act.name.startsWith('Hiveswap') || + // Sorry not sorry -Yiffy + (({index = flashActData.indexOf(act)} = {}) => + index < act6 + ? side === 1 + : index < outsideCanon + ? side === 2 + : true)()) + .flatMap((act) => [ + (act.name.startsWith('Act 1') && + html.tag( + 'dt', + {class: ['side', side === 1 && 'current']}, + link.flash(act.flashes[0], { + color: '#4ac925', + text: `Side 1 (Acts 1-5)`, + }) + )) || + (act.name.startsWith('Act 6 Act 1') && + html.tag( + 'dt', + {class: ['side', side === 2 && 'current']}, + link.flash(act.flashes[0], { + color: '#1076a2', + text: `Side 2 (Acts 6-7)`, + }) + )) || + (act.name.startsWith('Hiveswap Act 1') && + html.tag( + 'dt', + {class: ['side', side === 3 && 'current']}, + link.flash(act.flashes[0], { + color: '#008282', + text: `Outside Canon (Misc. Games)`, + }) + )), + (({index = flashActData.indexOf(act)} = {}) => + index < act6 + ? side === 1 + : index < outsideCanon + ? side === 2 + : true)() && + html.tag( + 'dt', + {class: act === currentAct && 'current'}, + link.flash(act.flashes[0], {text: act.name}) + ), + act === currentAct && + html.tag('dd', + html.tag('ul', + act.flashes + .map(f => + html.tag('li', + {class: f === flash && 'current'}, + link.flash(f))))), + ])), + ], }; } |