kiwec
/
osu-ranked-lobbies



123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ranked lobbies for osu!</title>
    <link rel="stylesheet" href="/styles.min.css?v=4">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <script defer src="/twemoji.min.js"></script>
    <script defer src="/base.js?v=2" type="module"></script>
    <script defer src="/extra.js?v=3" type="module"></script>
  </head>
  <body class="bg-zinc-800">
    <header class="h-16 bg-zinc-900">
      <nav class="flex max-w-5xl m-auto p-1">
        <div>
          <a class="opacity-75 hover:opacity-100" href="/faq/">
            <img class="p-1 h-14" src="/images/o!RL-logo.png" />
          </a>
        </div>
        <div class="flex-auto self-center text-center">
          <a class="p-1 opacity-75 hover:opacity-100" href="/lobbies/">
            <span class="text-2xl">Lobbies</span>
          </a>
          <i class="border opacity-75 ml-1 mr-2"> </i>
          <a class="p-1 opacity-75 hover:opacity-100" href="/leaderboard/">
            <span class="text-2xl">Leaderboard</span>
          </a>
        </div>
        <div class="max-sm:absolute max-sm:top-16 max-sm:right-2 flex self-center">
          <a class="p-2 opacity-75 hover:opacity-100" href="https://kiwec.net/discord">
            <img class="h-8" src="/images/discord.png" />
          </a>
          <div class="relative">
            <button id="toggle-rulesets-dropdown-btn" class="p-2 opacity-75 hover:opacity-100">
              <img class="h-8" src="/images/mode-osu.png" />
            </button>
            <div id="rulesets-dropdown" class="absolute hidden z-10 mt-4 -ml-12 bg-zinc-700 rounded-md">
              <button class="choose-ruleset flex p-2 w-36 opacity-75 hover:opacity-100 hover:bg-zinc-900" data-ruleset="osu">
                <img class="h-8" src="/images/mode-osu.png" />
                <span class="px-2 leading-7">osu!</span>
              </button>
              <button class="choose-ruleset flex p-2 w-36 opacity-75 hover:opacity-100 hover:bg-zinc-900" data-ruleset="taiko">
                <img class="h-8" src="/images/mode-taiko.png" />
                <span class="px-2 leading-7">osu!taiko</span>
              </button>
              <button class="choose-ruleset flex p-2 w-36 opacity-75 hover:opacity-100 hover:bg-zinc-900" data-ruleset="catch">
                <img class="h-8" src="/images/mode-catch.png" />
                <span class="px-2 leading-7">osu!catch</span>
              </button>
              <button class="choose-ruleset flex p-2 w-36 opacity-75 hover:opacity-100 hover:bg-zinc-900" data-ruleset="mania">
                <img class="h-8" src="/images/mode-mania.png" />
                <span class="px-2 leading-7">osu!mania</span>
              </button>
            </div>
          </div>

          <a class="login-btn p-2 opacity-75 hover:opacity-100" href="/me/">
            <img class="h-8 rounded-full" src="/images/login.png" />
          </a>
        </div>
      </nav>
    </header>

    <main class="p-8 max-sm:pt-16">
      <div class="loading-placeholder text-center mt-24">
        <p>Loading...</p>
        <svg class="animate-spin m-auto my-4 h-10 w-10 text-orange-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
        </svg>
      </div>
    </main>

    <template id="lobbies-template">
      <div class="max-w-5xl m-auto">
        <div class="lobby-creation-banner border-2 border-orange-600 rounded-lg p-3 text-center mx-2 mb-2">
          <span class="pl-2 pr-4">Not satisfied?</span><button class="go-to-create-lobby default-btn">Create your own!</button>
        </div>
        <div class="open-lobby-list flex flex-wrap"></div>
        <h3 class="mt-4">Recently closed lobbies</h3>
        <div class="closed-lobby-list flex flex-wrap"></div>
      </div>
    </template>

    <template id="command-list-template">
      <div class="command-list">
        <ul>
          <li>
            !info or !discord - Display some information for new players.
          </li>
          <li>
            !start -  Count down 30 seconds then start the map. Useful when some players are AFK or forget to ready up. Anybody can use this command.
          </li>
          <li>
            !wait - Cancel !start. Use it when you're not done downloading.
          </li>
          <li>
            !skip - Skip current map. You must have played 5 games in the lobby to unlock the command.
          </li>
          <li>
            !abort - Vote to abort the match. At least 1/4 of the lobby must vote to abort for a match to get aborted.
          </li>
          <li>
            !kick (player) - Vote to kick a player. You should probably use the in-game ignoring and reporting features instead.
          </li>
          <li>
            !rank (player) - Display your rank or the rank of another player.
          </li>
          <li>
            !close - Close the lobby. Only the lobby creator can use this command.
          </li>
        </ul>
      </div>
    </template>

    <template id="manual-lobby-creation-template">
      <div class="max-w-5xl m-auto">
        <p>Unfortunately, the bot couldn't create the lobby automatically. This happens when there are too many bot-created lobbies.</p>
        <p>But don't worry, you can still create it yourself! Just follow these steps:</p>

        <ul class="mb-2">
          <li>Create a lobby in osu!</li>
          <li>In the #multiplayer chat, send <strong>!mp addref botkiwec</strong></li>
          <li>BanchoBot should have sent a match history link. Copy the URL and paste it here.</li>
        </ul>

        <input class="mt-1 p-1.5 w-96 text-sm" type="text" name="tournament-url" placeholder="https://osu.ppy.sh/community/matches/123456789">
        <button class="create-lobby-with-ref-btn default-btn m-1 py-1">Create lobby</button>
      </div>
    </template>

    <template id="lobby-created-template">
      <div class="max-w-5xl m-auto">
        <h3 class="mt-4">Lobby created successfully!</h3>
        <div class="open-lobby-list flex flex-wrap mt-4">
          <div class="lobby"></div>
        </div>
        <div class="info mt-4"></div>
      </div>
    </template>

    <template id="lobby-creation-template">
      <div class="max-w-5xl m-auto">
        <h1 class="mb-6 font-bold">New lobby</h1>

        <div class="lobby-settings">
          <div class="title-settings">
            <div class="flex mt-2 cursor-pointer select-none">
              <div class="collapser"></div>
              <h3 class="underline">Title</h3>
            </div>
            <div class="hidden mb-4">
              <p>You can use <span class="mono">$min_xxx</span>, <span class="mono">$avg_xxx</span>, <span class="mono">$max_xxx</span> for <span class="mono">elo</span>, <span class="mono">pp</span> and <span class="mono">stars</span> to set the lobby title automatically.</p>
              <input class="mt-1 mb-1 p-1 w-72 text-sm" type="text" name="title" value="$min_stars-$max_stars* | o!RL (!info)">
              <p>Preview: <span class="mono preview">0-11* | o!RL (!info)</span></p>
            </div>
          </div>

          <div class="flex mt-2 cursor-pointer select-none">
            <div class="collapser"></div>
            <h3 class="underline">Map selection</h3>
          </div>
          <div class="hidden mb-4">
            <div class="radio-area flex border-2 border-orange-600 hover:bg-zinc-700 rounded-md m-1 max-w-xl cursor-pointer">
              <div class="radio flex align-center justify-center p-1.5 bg-orange-600"><input type="radio" name="map-selection-type" value="random"></div>
              <div class="info py-2 px-3 leading-5">
                <span class="font-bold">Random</span>
                <p>Pick any map that matches the given filters.</p>
              </div>
            </div>
            <div class="radio-area flex border-2 border-orange-600 hover:bg-zinc-700 rounded-md m-1 max-w-xl cursor-pointer">
              <div class="radio flex align-center justify-center p-1.5 bg-orange-600"><input type="radio" name="map-selection-type" value="pp" checked></div>
              <div class="info py-2 px-3 leading-5">
                <span class="font-bold">Performance Points</span>
                <p>Pick maps close to the lobby players's pp.</p>
              </div>
            </div>
          </div>

          <div class="flex mt-2 cursor-pointer select-none">
            <div class="collapser"></div>
            <h3 class="underline">Map pool</h3>
          </div>
          <div class="hidden mb-4">
            <div class="radio-area flex border-2 border-orange-600 hover:bg-zinc-700 rounded-md m-1 max-w-xl cursor-pointer">
              <div class="radio flex align-center justify-center p-1.5 bg-orange-600"><input type="radio" name="map-pool" value="leaderboarded" checked></div>
              <div class="info py-2 px-3 leading-5">
                <span class="font-bold">All maps with a leaderboard</span>
                <p>F2 gaming.</p>
              </div>
            </div>
            <div class="radio-area flex border-2 border-orange-600 hover:bg-zinc-700 rounded-md m-1 max-w-xl cursor-pointer">
              <div class="radio flex align-center justify-center p-1.5 bg-orange-600"><input type="radio" name="map-pool" value="collection"></div>
              <div class="info py-2 px-3 leading-5">
                <span class="font-bold">Custom <a href="https://osucollector.com/" target="_blank">osu!collector</a> collection</span>
                <input class="mt-1 p-1 w-72 text-sm" type="text" name="collection-url" placeholder="https://osucollector.com/collections/44">
              </div>
            </div>
          </div>

          <div class="mod-settings">
            <div class="flex mt-2 cursor-pointer select-none">
              <div class="collapser"></div>
              <h3 class="underline">Mods</h3>
            </div>
            <div class="hidden mb-4">
              <div>
                <div class="mod-btn nm">
                  <img class="h-8" src="/images/[email protected]" title="None" alt="None" />
                  <div>NM</div>
                </div>
                <div class="mod-btn ez">
                  <img class="h-8" src="/images/[email protected]" title="Easy" alt="Easy" />
                  <div>EZ</div>
                </div>
                <div class="mod-btn ht">
                  <img class="h-8" src="/images/[email protected]" title="Half Time" alt="Half Time" />
                  <div>HT</div>
                </div>
                <div class="mod-btn mr hidden">
                  <img class="h-8" src="/images/[email protected]" title="Mirror" alt="Mirror" />
                  <div>MR</div>
                </div>
                <div class="mod-btn co hidden">
                  <img class="h-8" src="/images/[email protected]" title="Co-op" alt="Co-op" />
                  <div>CO</div>
                </div>
              </div>

              <div>
                <div class="mod-btn">
                  <img class="h-8" src="/images/[email protected]" title="Hidden" alt="Hidden" />
                  <div>HD</div>
                </div>
                <div class="mod-btn hr">
                  <img class="h-8" src="/images/[email protected]" title="Hard Rock" alt="Hard Rock" />
                  <div>HR</div>
                </div>
                <div class="mod-btn dt">
                  <img class="h-8" src="/images/[email protected]" title="Double Time" alt="Double Time" />
                  <div>DT</div>
                </div>
                <div class="mod-btn nc hidden">
                  <img class="h-8" src="/images/[email protected]" title="Nightcore" alt="Nightcore" />
                  <div>NC</div>
                </div>
                <div class="mod-btn fi hidden">
                  <img class="h-8" src="/images/[email protected]" title="Fade In" alt="Fade In" />
                  <div>FI</div>
                </div>
                <div class="mod-btn">
                  <img class="h-8" src="/images/[email protected]" title="Flashlight" alt="Flashlight" />
                  <div>FL</div>
                </div>
                <div class="mod-btn">
                  <img class="h-8" src="/images/[email protected]" title="Sudden Death" alt="Sudden Death" />
                  <div>SD</div>
                </div>
              </div>
              <div class="mb-4">
                Enabling "NM" stops players from being able to pick the mods they want.
              </div>
            </div>
          </div>

          <div class="flex mt-2 cursor-pointer select-none">
            <div class="collapser"></div>
            <h3 class="underline">Filters</h3>
          </div>
          <div class="hidden mb-4">
            <div class="flex flex-wrap filter-list">
            </div>
          </div>

          <div class="mania-keycount-settings"></div>

          <button class="create-lobby-btn default-btn mt-8">Create lobby</button>
        </div>
      </div>
    </template>

    <footer class="p-4 text-center m-auto">o!rl is a hobby project and is not affiliated with <a href="https://osu.ppy.sh/" target="_blank">osu!</a>.</footer>
  </body>
</html>