content, client: "Random Pages" listing

5 files changed, 215 insertions, 143 deletions

diff --git a/src/content/dependencies/generateListRandomPageLinksGroupSection.js b/src/content/dependencies/generateListRandomPageLinksGroupSection.js
new file mode 100644
index 00000000..9a46e2c3
--- /dev/null
+++ b/src/content/dependencies/generateListRandomPageLinksGroupSection.js
@@ -0,0 +1,79 @@
+import {stitchArrays} from '../../util/sugar.js';
+
+export default {
+  contentDependencies: ['generateColorStyleVariables', 'linkGroup'],
+  extraDependencies: ['html', 'language', 'wikiData'],
+
+  sprawl: ({albumData}) => ({albumData}),
+
+  query: (sprawl, group) => ({
+    albums:
+      sprawl.albumData
+        .filter(album => album.groups.includes(group)),
+  }),
+
+  relations: (relation, query, sprawl, group) => ({
+    groupLink:
+      relation('linkGroup', group),
+
+    albumColorVariables:
+      query.albums
+        .map(() => relation('generateColorStyleVariables')),
+  }),
+
+  data: (query, sprawl, group) => ({
+    groupDirectory:
+      group.directory,
+
+    albumColors:
+      query.albums
+        .map(album => album.color),
+
+    albumDirectories:
+      query.albums
+        .map(album => album.directory),
+
+    albumNames:
+      query.albums
+        .map(album => album.name),
+  }),
+
+  generate: (data, relations, {html, language}) =>
+    html.tags([
+      html.tag('dt',
+        language.$('listingPage.other.randomPages.group', {
+          group: relations.groupLink,
+
+          randomAlbum:
+            html.tag('a',
+              {href: '#', 'data-random': 'album-in-' + data.groupDirectory},
+              language.$('listingPage.other.randomPages.group.randomAlbum')),
+
+          randomTrack:
+            html.tag('a',
+              {href: '#', 'data-random': 'track-in-' + data.groupDirectory},
+              language.$('listingPage.other.randomPages.group.randomTrack')),
+        })),
+
+      html.tag('dd',
+        html.tag('ul',
+          stitchArrays({
+            colorVariables: relations.albumColorVariables,
+            color: data.albumColors,
+            directory: data.albumDirectories,
+            name: data.albumNames,
+          }).map(({colorVariables, color, directory, name}) =>
+              html.tag('li',
+                language.$('listingPage.other.randomPages.album', {
+                  album:
+                    html.tag('a', {
+                      href: '#',
+                      'data-random': 'track-in-album',
+                      style:
+                        colorVariables.slot('color', color).content +
+                        '; ' +
+                        `--album-directory: ${directory}`,
+                    }, name),
+                }))))),
+    ]),
+};
diff --git a/src/content/dependencies/listRandomPageLinks.js b/src/content/dependencies/listRandomPageLinks.js
index 28a925ac..43bf7dd5 100644
--- a/src/content/dependencies/listRandomPageLinks.js
+++ b/src/content/dependencies/listRandomPageLinks.js
@@ -1,28 +1,91 @@
 export default {
-  contentDependencies: ['generateListingPage'],
-  extraDependencies: ['html', 'wikiData'],
+  contentDependencies: [
+    'generateListingPage',
+    'generateListRandomPageLinksGroupSection',
+  ],
 
-  sprawl() {
-    return {};
+  extraDependencies: ['html', 'language', 'wikiData'],
+
+  sprawl({groupData}) {
+    return {groupData};
   },
 
   query(sprawl, spec) {
+    const group = directory =>
+      sprawl.groupData.find(group => group.directory === directory);
+
     return {
       spec,
+      officialGroup: group('official'),
+      fandomGroup: group('fandom'),
+      beyondGroup: group('beyond'),
     };
   },
 
   relations(relation, query) {
     return {
       page: relation('generateListingPage', query.spec),
+
+      officialSection:
+        relation('generateListRandomPageLinksGroupSection', query.officialGroup),
+
+      fandomSection:
+        relation('generateListRandomPageLinksGroupSection', query.fandomGroup),
+
+      beyondSection:
+        relation('generateListRandomPageLinksGroupSection', query.beyondGroup),
     };
   },
 
-  generate(relations, {html}) {
+  generate(relations, {html, language}) {
     return relations.page.slots({
       type: 'custom',
-      content:
-        html.tag('p', `Alright alright, this is a stub page! Coming soon!`),
+      content: [
+        html.tag('p',
+          language.$('listingPage.other.randomPages.chooseLinkLine')),
+
+        html.tag('p',
+          {class: 'js-hide-once-data'},
+          language.$('listingPage.other.randomPages.dataLoadingLine')),
+
+        html.tag('p',
+          {class: 'js-show-once-data'},
+          language.$('listingPage.other.randomPages.dataLoadedLine')),
+
+        html.tag('dl', [
+          html.tag('dt',
+            language.$('listingPage.other.randomPages.misc')),
+
+          html.tag('dd',
+            html.tag('ul', [
+              html.tag('li', [
+                html.tag('a',
+                  {href: '#', 'data-random': 'artist'},
+                  language.$('listingPage.other.randomPages.misc.randomArtist')),
+
+                '(' +
+                html.tag('a',
+                  {href: '#', 'data-random': 'artist-more-than-one-contrib'},
+                  language.$('listingPage.other.randomPages.misc.atLeastTwoContributions')) +
+                ')',
+              ]),
+
+              html.tag('li',
+                html.tag('a',
+                  {href: '#', 'data-random': 'album'},
+                  language.$('listingPage.other.randomPages.misc.randomAlbumWholeSite'))),
+
+              html.tag('li',
+                html.tag('a',
+                  {href: '#', 'data-random': 'track'},
+                  language.$('listingPage.other.randomPages.misc.randomTrackWholeSite'))),
+            ])),
+
+          relations.officialSection,
+          relations.fandomSection,
+          relations.beyondSection,
+        ]),
+      ],
     });
   },
 };
diff --git a/src/listing-spec.js b/src/listing-spec.js
index e19b90e8..402cb6fd 100644
--- a/src/listing-spec.js
+++ b/src/listing-spec.js
@@ -240,96 +240,6 @@ listingSpec.push({
   stringsKey: 'other.randomPages',
   contentFunction: 'listRandomPageLinks',
   groupUnderOther: true,
-
-  /*
-  data: ({wikiData: {albumData}}) => [
-    {
-      name: 'Official',
-      randomCode: 'official',
-      albums: albumData
-        .filter((album) => album.groups
-          .some((group) => group.directory === OFFICIAL_GROUP_DIRECTORY)),
-    },
-    {
-      name: 'Fandom',
-      randomCode: 'fandom',
-      albums: albumData
-        .filter((album) => album.groups
-          .every((group) => group.directory !== OFFICIAL_GROUP_DIRECTORY)),
-    },
-  ],
-
-  html: (data, {getLinkThemeString, html}) =>
-    html.fragment([
-      html.tag('p',
-        `Choose a link to go to a random page in that category or album! If your browser doesn't support relatively modern JavaScript or you've disabled it, these links won't work - sorry.`),
-
-      html.tag('p',
-        {class: 'js-hide-once-data'},
-        `(Data files are downloading in the background! Please wait for data to load.)`),
-
-      html.tag('p',
-        {class: 'js-show-once-data'},
-        `(Data files have finished being downloaded. The links should work!)`),
-
-      html.tag('dl', [
-        html.tag('dt',
-          `Miscellaneous:`),
-
-        html.tag('dd',
-          html.tag('ul', [
-            html.tag('li', [
-              html.tag('a',
-                {href: '#', 'data-random': 'artist'},
-                `Random Artist`),
-              '(' +
-                html.tag('a',
-                  {href: '#', 'data-random': 'artist-more-than-one-contrib'},
-                  `>1 contribution`) +
-                ')',
-            ]),
-
-            html.tag('li',
-              html.tag('a',
-                {href: '#', 'data-random': 'album'},
-                `Random Album (whole site)`)),
-
-            html.tag('li',
-              html.tag('a',
-                {href: '#', 'data-random': 'track'},
-                `Random Track (whole site)`)),
-          ])),
-
-        ...data.flatMap(({albums, name, randomCode}) => [
-          html.tag('dt', [
-            name + ':',
-            '(' +
-              html.tag('a',
-                {href: '#', 'data-random': 'album-in-' + randomCode},
-                `Random Album`) +
-              ', ' +
-              html.tag('a',
-                {href: '#', 'data-random': 'track-in' + randomCode},
-                'Random Track') +
-              ')',
-          ]),
-
-          html.tag('dd',
-            html.tag('ul',
-              albums.map(album =>
-                html.tag('li',
-                  html.tag('a',
-                    {
-                      href: '#',
-                      'data-random': 'track-in-album',
-                      style: getLinkThemeString(album.color) +
-                        `; --album-directory: ${album.directory}`,
-                    },
-                    album.name))))),
-        ]),
-      ]),
-    ]),
-  */
 });
 
 {
diff --git a/src/static/client2.js b/src/static/client2.js
index dab92ffc..36dba2d1 100644
--- a/src/static/client2.js
+++ b/src/static/client2.js
@@ -12,7 +12,7 @@ import {getColors} from '../util/colors.js';
 import {getArtistNumContributions} from '../util/wiki-data.js';
 
 let albumData, artistData;
-let officialAlbumData, fandomAlbumData;
+let officialAlbumData, fandomAlbumData, beyondAlbumData;
 
 let ready = false;
 
@@ -96,56 +96,62 @@ for (const a of document.body.querySelectorAll('[data-random]')) {
       return;
     }
 
+    const tracks = albumData =>
+      albumData
+        .map(album => album.tracks)
+        .reduce((acc, tracks) => acc.concat(tracks), []);
+
     setTimeout(() => {
       a.href = rebase('js-disabled');
     });
+
     switch (a.dataset.random) {
       case 'album':
-        return (a.href = openAlbum(pick(albumData).directory));
-      case 'album-in-fandom':
-        return (a.href = openAlbum(pick(fandomAlbumData).directory));
+        a.href = openAlbum(pick(albumData).directory);
+        break;
+
       case 'album-in-official':
-        return (a.href = openAlbum(pick(officialAlbumData).directory));
+        a.href = openAlbum(pick(officialAlbumData).directory);
+        break;
+
+      case 'album-in-fandom':
+        a.href = openAlbum(pick(fandomAlbumData).directory);
+        break;
+
+      case 'album-in-beyond':
+        a.href = openAlbum(pick(beyondAlbumData).directory);
+        break;
+
       case 'track':
-        return (a.href = openTrack(
-          getRefDirectory(
-            pick(
-              albumData.map((a) => a.tracks).reduce((a, b) => a.concat(b), [])
-            )
-          )
-        ));
+        a.href = openTrack(getRefDirectory(pick(tracks(albumData))));
+        break;
+
       case 'track-in-album':
-        return (a.href = openTrack(getRefDirectory(pick(getAlbum(a).tracks))));
-      case 'track-in-fandom':
-        return (a.href = openTrack(
-          getRefDirectory(
-            pick(
-              fandomAlbumData.reduce(
-                (acc, album) => acc.concat(album.tracks),
-                []
-              )
-            )
-          )
-        ));
+        a.href = openTrack(getRefDirectory(pick(getAlbum(a).tracks)));
+        break;
+
       case 'track-in-official':
-        return (a.href = openTrack(
-          getRefDirectory(
-            pick(
-              officialAlbumData.reduce(
-                (acc, album) => acc.concat(album.tracks),
-                []
-              )
-            )
-          )
-        ));
+        a.href = openTrack(getRefDirectory(pick(tracks(officialAlbumData))));
+        break;
+
+      case 'track-in-fandom':
+        a.href = openTrack(getRefDirectory(pick(tracks(fandomAlbumData))));
+        break;
+
+      case 'track-in-beyond':
+        a.href = openTrack(getRefDirectory(pick(tracks(beyondAlbumData))));
+        break;
+
       case 'artist':
-        return (a.href = openArtist(pick(artistData).directory));
+        a.href = openArtist(pick(artistData).directory);
+        break;
+
       case 'artist-more-than-one-contrib':
-        return (a.href = openArtist(
-          pick(
-            artistData.filter((artist) => getArtistNumContributions(artist) > 1)
-          ).directory
-        ));
+        a.href =
+          openArtist(
+            pick(artistData.filter((artist) => getArtistNumContributions(artist) > 1))
+              .directory);
+        break;
     }
   });
 }
@@ -201,12 +207,14 @@ fetch(rebase('data.json', 'rebaseShared'))
     albumData = data.albumData;
     artistData = data.artistData;
 
-    officialAlbumData = albumData.filter((album) =>
-      album.groups.includes('group:official')
-    );
-    fandomAlbumData = albumData.filter(
-      (album) => !album.groups.includes('group:official')
-    );
+    const albumsInGroup = directory =>
+      albumData
+        .filter(album =>
+          album.groups.includes(`group:${directory}`));
+
+    officialAlbumData = albumsInGroup('official');
+    fandomAlbumData = albumsInGroup('fandom');
+    beyondAlbumData = albumsInGroup('beyond');
 
     for (const element of elements1) element.style.display = 'none';
     for (const element of elements2) element.style.display = 'block';
diff --git a/src/strings-default.json b/src/strings-default.json
index 82a046f5..8d7756ad 100644
--- a/src/strings-default.json
+++ b/src/strings-default.json
@@ -469,6 +469,18 @@
   "listingPage.other.allAdditionalFiles.file.withMultipleFiles": "{TITLE} ({FILES})",
   "listingPage.other.randomPages.title": "Random Pages",
   "listingPage.other.randomPages.title.short": "Random Pages",
+  "listingPage.other.randomPages.chooseLinkLine": "Choose a link to go to a random page in that category or album! If your browser doesn't support relatively modern JavaScript or you've disabled it, these links won't work - sorry.",
+  "listingPage.other.randomPages.dataLoadingLine": "(Data files are downloading in the background! Please wait for data to load.)",
+  "listingPage.other.randomPages.dataLoadedLine": "(Data files have finished being downloaded. The links should work!)",
+  "listingPage.other.randomPages.misc": "Miscellaneous:",
+  "listingPage.other.randomPages.misc.randomArtist": "Random Artist",
+  "listingPage.other.randomPages.misc.atLeastTwoContributions": "at least 2 contributions",
+  "listingPage.other.randomPages.misc.randomAlbumWholeSite": "Random Album (whole site)",
+  "listingPage.other.randomPages.misc.randomTrackWholeSite": "Random Track (whole site)",
+  "listingPage.other.randomPages.group": "From {GROUP}: ({RANDOM_ALBUM}, {RANDOM_TRACK})",
+  "listingPage.other.randomPages.group.randomAlbum": "Random Album",
+  "listingPage.other.randomPages.group.randomTrack": "Random Track",
+  "listingPage.other.randomPages.album": "{ALBUM}",
   "listingPage.misc.trackContributors": "Track Contributors",
   "listingPage.misc.artContributors": "Art Contributors",
   "listingPage.misc.flashContributors": "Flash & Game Contributors",