diff options
| -rw-r--r-- | src/content/dependencies/generateFlashInfoPage.js | 6 | ||||
| -rw-r--r-- | src/content/dependencies/generateFlashSidebar.js | 236 |
2 files changed, 242 insertions, 0 deletions
diff --git a/src/content/dependencies/generateFlashInfoPage.js b/src/content/dependencies/generateFlashInfoPage.js index af92ddff..702cdd02 100644 --- a/src/content/dependencies/generateFlashInfoPage.js +++ b/src/content/dependencies/generateFlashInfoPage.js @@ -6,6 +6,7 @@ export default { 'generateContributionList', 'generateFlashCoverArtwork', 'generateFlashNavAccent', + 'generateFlashSidebar', 'generatePageLayout', 'generateTrackList', 'linkExternal', @@ -39,6 +40,9 @@ export default { relations.layout = relation('generatePageLayout'); + relations.sidebar = + relation('generateFlashSidebar', flash); + if (query.urls) { relations.externalLinks = query.urls.map(url => relation('linkExternal', url)); @@ -167,6 +171,8 @@ export default { sec.nav.flashNavAccent.slots({ showFlashNavigation: true, }), + + ...relations.sidebar, }); }, }; diff --git a/src/content/dependencies/generateFlashSidebar.js b/src/content/dependencies/generateFlashSidebar.js new file mode 100644 index 00000000..2efb973b --- /dev/null +++ b/src/content/dependencies/generateFlashSidebar.js @@ -0,0 +1,236 @@ +import {stitchArrays} from '../../util/sugar.js'; + +export default { + contentDependencies: ['linkFlash', 'linkFlashIndex'], + extraDependencies: ['html', 'wikiData'], + + // So help me Gog, the flash sidebar is heavily hard-coded. + + sprawl: ({flashActData}) => ({flashActData}), + + query(sprawl, flash) { + const flashActs = + sprawl.flashActData.slice(); + + const act6 = + flashActs + .findIndex(act => act.name.startsWith('Act 6')); + + const postCanon = + flashActs + .findIndex(act => act.name.includes('Post Canon')); + + const outsideCanon = + postCanon + + flashActs + .slice(postCanon) + .findIndex(act => !act.name.includes('Post Canon')); + + const currentAct = flash.act; + + const actIndex = + flashActs + .indexOf(currentAct); + + const side = + (actIndex < 0 + ? 0 + : actIndex < act6 + ? 1 + : actIndex < outsideCanon + ? 2 + : 3); + + const sideActs = + flashActs + .filter((act, index) => + act.name.startsWith('Act 1') || + act.name.startsWith('Act 6 Act 1') || + act.name.startsWith('Hiveswap') || + index >= outsideCanon); + + const currentSideIndex = + sideActs + .findIndex(act => { + if (act.name.startsWith('Act 1')) { + return side === 1; + } else if (act.name.startsWith('Act 6 Act 1')) { + return side === 2; + } else if (act.name.startsWith('Hiveswap Act 1')) { + return side === 3; + } else { + return act === currentAct; + } + }) + + const sideNames = + sideActs + .map(act => { + if (act.name.startsWith('Act 1')) { + return `Side 1 (Acts 1-5)`; + } else if (act.name.startsWith('Act 6 Act 1')) { + return `Side 2 (Acts 6-7)`; + } else if (act.name.startsWith('Hiveswap Act 1')) { + return `Outside Canon (Misc. Games)`; + } else { + return act.name; + } + }); + + const sideColors = + sideActs + .map(act => { + if (act.name.startsWith('Act 1')) { + return '#4ac925'; + } else if (act.name.startsWith('Act 6 Act 1')) { + return '#1076a2'; + } else if (act.name.startsWith('Hiveswap Act 1')) { + return '#008282'; + } else { + return act.color; + } + }); + + const sideFirstFlashes = + sideActs + .map(act => act.flashes[0]); + + const scopeActs = + flashActs + .filter((act, index) => { + if (index < act6) { + return side === 1; + } else if (index < outsideCanon) { + return side === 2; + } else { + return false; + } + }); + + const currentScopeActIndex = + scopeActs.indexOf(currentAct); + + const scopeActNames = + scopeActs + .map(act => act.name); + + const scopeActFirstFlashes = + scopeActs + .map(act => act.flashes[0]); + + const currentActFlashes = + currentAct.flashes; + + const currentFlashIndex = + currentActFlashes + .indexOf(flash); + + return { + currentSideIndex, + sideNames, + sideColors, + sideFirstFlashes, + + currentScopeActIndex, + scopeActNames, + scopeActFirstFlashes, + + currentActFlashes, + currentFlashIndex, + }; + }, + + relations: (relation, query) => ({ + flashIndexLink: + relation('linkFlashIndex'), + + sideFirstFlashLinks: + query.sideFirstFlashes + .map(flash => relation('linkFlash', flash)), + + scopeActFirstFlashLinks: + query.scopeActFirstFlashes + .map(flash => relation('linkFlash', flash)), + + currentActFlashLinks: + query.currentActFlashes + .map(flash => relation('linkFlash', flash)), + }), + + data: (query) => ({ + currentSideIndex: query.currentSideIndex, + sideColors: query.sideColors, + sideNames: query.sideNames, + + currentScopeActIndex: query.currentScopeActIndex, + scopeActNames: query.scopeActNames, + + currentFlashIndex: query.currentFlashIndex, + }), + + generate(data, relations, {html}) { + const currentActFlashList = + html.tag('ul', + relations.currentActFlashLinks + .map((flashLink, index) => + html.tag('li', + {class: index === data.currentFlashIndex && 'current'}, + flashLink))); + + return { + leftSidebarContent: html.tags([ + html.tag('h1', relations.flashIndexLink), + + html.tag('dl', + stitchArrays({ + sideFirstFlashLink: relations.sideFirstFlashLinks, + sideColor: data.sideColors, + sideName: data.sideNames, + }).map(({sideFirstFlashLink, sideColor, sideName}, index) => [ + // Side acts are displayed whether part of Homestuck proper or + // not, and they're always the same regardless the current flash + // page. Scope acts, if applicable, and the list of flashes + // belonging to the current act, will be inserted after the + // heading of the current side. + html.tag('dt', + {class: [ + 'side', + index === data.currentSideIndex && 'current', + ]}, + sideFirstFlashLink.slots({ + color: sideColor, + content: sideName, + })), + + // Scope acts are only applicable when inside Homestuck proper. + // Hiveswap and all acts beyond are each considered to be its + // own "side". + index === data.currentSideIndex && + data.currentScopeActIndex !== -1 && + stitchArrays({ + scopeActFirstFlashLink: relations.scopeActFirstFlashLinks, + scopeActName: data.scopeActNames, + }).map(({scopeActFirstFlashLink, scopeActName}, index) => [ + html.tag('dt', + {class: index === data.currentScopeActIndex && 'current'}, + scopeActFirstFlashLink.slot('content', scopeActName)), + + // Inside Homestuck proper, the flash list of the current + // act should show after the heading for the relevant + // scope act. + index === data.currentScopeActIndex && + html.tag('dd', currentActFlashList), + ]), + + // Outside of Homestuck proper, the current act is represented + // by a side instead of a scope act, so place its flash list + // after the heading for the relevant side. + index === data.currentSideIndex && + data.currentScopeActIndex === -1 && + html.tag('dd', currentActFlashList), + ])), + + ]), + }; + }, +}; |