---
layout: post
title: The Rabbit Hole
thumbnail: /gallery/rabbit-hole/images/thumbnail.png
tagline: A Wikipedia game for Ludum Dare 48
sort-key: 400
meta-title: The Rabbit Hole
meta-description: A Wikipedia game for Ludum Dare 48
meta-image: /gallery/rabbit-hole/images/thumbnail.png
---

This is my [entry](https://ldjam.com/events/ludum-dare/48/the-rabbit-hole) for [Ludum Dare 48](https://ldjam.com/events/ludum-dare/48) which had a theme of **deeper and deeper**.

This "game" explores the idea of [Wikipedia rabbit holes](https://en.wikipedia.org/wiki/Wiki_rabbit_hole). Starting at one article, click through the links to get to the target article.

---

<h2 id="level"></h2>
<p id="help">Click a link below to go down the rabbit hole.</p>
<p id="level-text"></p>
<p id="answer" onclick="showAnswer()" style="font-size:small; cursor:pointer; margin-top:0;">(Click here to show the answer.)</p>
<p id="current-clicks">Clicks: 0</p>
<p id="history"></p>
<div id="win-level-panel" style="display:none">
  <h2>You reached the end of the rabbit hole! 🎉</h2>
  <button onclick="nextLevel()"><h3>Next rabbit hole 🐇🕳</h3></button>
</div>

<div id="win-game-panel" style="display:none">
  <h2>You beat the game! 🎉🎉🎉</h2>
  <p>Thank you for playing. Consider <a href="https://donate.wikimedia.org/">donating to Wikipedia</a>.</p>
  <button onclick="restart()"><h3>Restart 🐇🕳</h3></button>
</div>

<hr>

<h1 id="article-title"></h1>
<div id="article-container" style="border: thin solid #323232; padding: 5px;"></div>

<hr>

<script>
class Level {
  constructor(start, goal, par, answer) {
    this.start = start;
    this.goal = goal;
    this.par = par;
    this.answer = answer;
  }
}

class Page {
  constructor(id, title = id) {
    this.id = id;
    this.title = title;
  }
}

const levels = [
  new Level(new Page('Cat'), new Page('House_mouse', 'House mouse'), 2,
      'Cat -> Mice -> House mouse'),
  new Level(new Page('Ludum_Dare', 'Ludum Dare'), new Page('Video_game_monetization', 'Video game monetization'), 3,
      'Ludum Dare -> Video game -> Video game industry -> Video game monetization'),
  new Level(new Page('JavaScript'), new Page('Babylonian_mathematics', 'Babylonian mathematics'), 3,
      'JavaScript -> Programming_language -> Algorithm -> Babylonian_mathematics'),
  new Level(new Page('Wikipedia'), new Page('Endangered_language', 'Endangered language'), 3,
      'Wikipedia -> Wiki -> Hawaiian_language -> Endangered_language'),
  new Level(new Page('Rabbit'), new Page('Dracula'), 4,
      'Rabbit -> Mammal -> Bat -> Vampire -> Dracula'),
  new Level(new Page('Dinosaur'), new Page('Emoji'), 4,
      'Dinosaur -> Jurassic Park -> Computer-generated imagery -> Virtual world -> Emoji'),
  new Level(new Page('Art'), new Page('Precognition'), 4,
      'Art -> Aesthetics -> Nature -> Supernatural -> Precognition'),
  new Level(new Page('Walking'), new Page('Good_and_evil', 'Good and evil'), 5,
      'Walking -> Arthropod -> Brain -> Human brain -> Reason -> Good and evil'),
  new Level(new Page('Sandwich'), new Page('Tactile_paving', 'Tactile paving'), 6,
      'Sandwich -> Picnic -> Picnic table -> Accessibility -> Universal design -> Dropped curb -> Tactile paving'),
  new Level(new Page('Kevin_Bacon', 'Kevin Bacon'), new Page('Socrates'), 6,
      'Kevin Bacon -> Six Degrees of Kevin Bacon -> Charitable organization -> Education -> Pedagogy -> Socratic method -> Socrates'),
];

let levelIndex = 0;
let currentClicks = 0;
let currentHistory = [];

async function getArticle(pageId, preventHistory){
  if (pageId.includes('#')) {
    pageId = pageId.substring(0, pageId.indexOf('#'));
  }

  document.getElementById('article-title').innerText = 'Loading...';
  document.getElementById('article-container').innerText = 'Loading...';

  const response = await fetch('https://en.wikipedia.org/w/api.php?action=parse&page=' + pageId +
      '&prop=text&formatversion=2&format=json&mobileformat=true&origin=*');
  const json = await response.json();
  const title = json.parse.title;
  const html = json.parse.text;

  const div = document.createElement('div');
  div.innerHTML = html;

  // Handle redirects
  if (html.includes('redirectText')) {
    const link = div.querySelector('a');
    const href = link.getAttribute('href');
    const article = href.substring(6);
    document.getElementById('article-container').innerText = 'Redirecting to ' + article + '...';
    getArticle(article);
    return;
  }

  const section = div.querySelector('#mf-section-0');

  // Remove citations
  for(const sup of section.querySelectorAll('sup')){
    sup.remove();
  }

  const outDiv = document.createElement('div');

  // Copy image
  const image = div.querySelector('img');
  if (image) {
    outDiv.appendChild(image);
  }

  // Remove tables (after image because images can be in tables)
  for (const table of section.querySelectorAll('table')) {
    table.remove();
  }

  // Copy paragraphs
  for (const p of section.querySelectorAll('p')) {
    outDiv.appendChild(p);
  }

  // Replace links
  for (const link of outDiv.querySelectorAll('a')) {
    const href = link.getAttribute('href');

    if(!href.startsWith('/wiki/')){
      link.removeAttribute('href');
      continue;
    }

    const article = href.substring(6);

    link.onclick = (event) => {
      articleClicked(article);
      event.preventDefault();
      return false;
    };
    
    link.href = 'https://en.wikipedia.org' + href;
    link.style.fontWeight = 'bold';
  }

  document.getElementById('article-title').innerText = title;
  const articleContainer = document.getElementById('article-container');
  articleContainer.innerHTML = '';
  articleContainer.appendChild(outDiv);

  if (!preventHistory) {
    currentHistory.push(new Page(pageId, title));
    refreshHistory();
  }

  if (title == levels[levelIndex].goal.title) {

    if (levelIndex < levels.length -1) {
      const winLevelPanel = document.getElementById('win-level-panel');
      winLevelPanel.style.display = 'block';
    } else {
      const winGamePanel = document.getElementById('win-game-panel');
      winGamePanel.style.display = 'block';
    }

    document.getElementById('level').scrollIntoView();
  }
}

function refreshHistory() {

  const history = document.getElementById('history');
  history.innerText = 'History: ';

  for(let i = 0; i < currentHistory.length; i++) {
    const link = document.createElement('a');

    link.innerText = currentHistory[i].title;
    link.href = 'https://en.wikipedia.org/wiki/' + currentHistory[i].id;
    link.style.fontWeight = 'bold';

    history.appendChild(link);

    link.onclick = (event) => {
      currentHistory.length = i + 1;
      refreshHistory();
      getArticle(currentHistory[i].id, true);
      currentClicks = i;
      document.getElementById('current-clicks').innerText = 'Clicks: ' + currentClicks;
      event.preventDefault();
      return false;
    };

    if (i < currentHistory.length -1) {
      history.appendChild(document.createTextNode(' -> '));
    }
  }
}

function articleClicked(article) {
  document.getElementById('help').style.display = 'none';
  document.getElementById('level').scrollIntoView();
  currentClicks++;
  document.getElementById('current-clicks').innerText = 'Clicks: ' + currentClicks;
  getArticle(article);
}

function showAnswer() {
  document.getElementById('answer').innerText = levels[levelIndex].answer;
}

function startLevel(level) {
  document.getElementById('level').innerText = 'Level ' + (levelIndex + 1) + ': ' + level.start.title;
  document.getElementById('level-text').innerHTML =
      'Get from <strong>' + level.start.title + '</strong> to <strong>' + level.goal.title + '</strong> in ' +
      '<strong>' + level.par + '</strong> clicks!';
  getArticle(level.start.id);
}

function nextLevel() {
  document.getElementById('win-level-panel').style.display = 'none';
  levelIndex++;
  currentClicks = 0;
  document.getElementById('current-clicks').innerText = 'Clicks: ' + currentClicks;
  currentHistory = [];
  refreshHistory();

  document.getElementById('answer').innerText = '(Click here to show the answer.)';

  startLevel(levels[levelIndex]);
}

function restart() {
  document.getElementById('win-game-panel').style.display = 'none';
  levelIndex = -1;
  nextLevel();
}

startLevel(levels[0]);
</script>