README.md


1
2
3
4
5
6
7
8
9
10
11
12

# Lingo Archipelago Tracker
[Archipelago](https://archipelago.gg) is an open-source project that supports randomizing a number of different games and combining them into one cooperative experience. Items from each game are hidden in other games. For more information about Archipelago, you can look at their website. For more information about playing the game Lingo with Archipelago, see [lingo-archipelago](https://code.fourisland.com/lingo-archipelago/about/).

This app is a tool that helps you keep track of your game state when playing Lingo as a part of an Archipelago multiworld. It shows a map of the world that, when connected to an Archipelago server, automatically updates to show you what areas you have access to and what locations can be checked / have already been checked. It supports all modes of play: door shuffle, color shuffle, and painting shuffle.

## Download

Releases of the tracker can be found [on the releases page](https://code.fourisland.com/lingo-ap-tracker/about/CHANGELOG.md).

## Acknowledgments

Thanks to Kinrah for making the subway map image!
body#main-body {
  height: 100%;
  font-family: sans-serif;
}

#container {
  height: 100%;
  margin: 10px auto;
  width: 75%; /* 66% */
  box-sizing: border-box;
  min-width: 910px;
}

#banner {
  background-image: image-url("fourisland_header.png");
  width: 900px;
  height: 200px;
  margin: 0 auto;

  h1 {
    margin: 0;

    a {
      display: block;
      width: 900px;
      height: 200px;
      text-indent: -5000px;
      text-decoration: none;
      margin: 0;
    }
  }
}

#page-body {
  display: flex;
}

#main {
  width: 70%;
}

#content {
  box-sizing: border-box;
  padding: 1em 0;
}

#flash {
  width: 100%;
  text-align: center;
  padding: .25em;
  font-weight: bold
}

.flash-notice {
  background-color: #fffde8;
}

.flash-alert {
  background-color: #ff6a6a;
}

#sidebar {
  box-sizing: border-box;
  width: 30%;
  font-size: .75em;
  color: black;
  margin-top: 1em;
  margin-bottom: 2em;
  font-family: sans-serif;
}

#sidebar h2 {
  font-size: 1em;
}

.sidebar-module {
  padding: 0 1em;

  & + .sidebar-module {
    margin-top: 1em;
  }
}

.sidebar-module p {
  margin-bottom: 0;
}

.sidebar-module ul {
  padding-left: 0;
  margin-bottom: 0;
}

.sidebar-module li {
  list-style-type: none;
}

.sidebar-module a {
  text-decoration: none;
}

.sidebar-module a:hover {
  text-decoration: underline;
}

.sidebar-module a:visited {
  color: #352712;
}

blockquote.bubble {
  margin: 0;
  border: 1px solid #c9c2c1;
  background-color: #fff;
  position: relative;

  div {
    margin: 10px;
    padding: 0;
  }
}

.bubble {
  width: auto;
  margin-bottom: 24px;
  padding: 0 1em 1em;

  &.rounded {
    margin-bottom: 10px;
    border: 3px solid #fff;
    background-color: #b7e0ff;
    border-radius: 10px;

    blockquote {
      border: 0;
      background-color: transparent;

      div {
        margin: 0 10px;
      }
    }
  }

  &.pimped {
    color: white;
    border: 3px solid white;
    background-color: #111;
  }

  div.bquote blockquote {
    margin: 0;
    padding: 0;
    border: 1px solid #c9c2c1;
    background-color: white;
  }
}

cite.bubble {
  font-style: normal;
  position: relative;
  margin: 0;
  padding: 7px 0px 0px 15px;
}

blockquote.bubble::after {
  /* (B1-1) ATTACH TRANSPARENT BORDERS */
  content: "";
  border: 10px solid transparent;

  /* (B1-2) NECESSARY TO POSITION THE "TAIL" */
  position: absolute;
}

/* (B2) BOTTOM "CALLOUT TAIL" */
blockquote.bubble.bottom::after {
  /* (B2-1) DOWN TRIANGLE */
  border-top-color: #b7e0ff;
  border-bottom: 0;

  /* (B2-2) POSITION AT BOTTOM */
  bottom: -10px;
  left: 3.5em;
  margin-left: -20px;

  &.pimped {
    border-top-color: black;
  }
}

.breadcrumb {
  margin-left: 1em;
  margin-bottom: 1em;

  a, a:visited {
    color: #555d66;
    text-decoration: none;
    font-size: .75em;
  }

  a:hover {
    text-decoration: underline;
  }
}

.clear {
  clear: both;
}

h2.centered {
  text-align: center;
}

.fun-links {
  a {
    font-size: 1.1em;
    vertical-align: super;
    text-decoration: none;
  }
}