remotelist.html

<? require './views/mcss.js' as mcss ?>

<style t:view='mcss' scoped>

  ServerList {
    li {
      span.detail {
        flex: 1;
        color: #888;
        text-align: right
      }
    }
    $selectList
  }

  RemoteList {
    flex: 1;
    li {
      span.nickname {
        flex: 2;
      }
      span.detail {
        flex: 1;
        color: #888;
        text-align: right;
      }
      meter {
        width: 50px;
        margin: 2px 4px;
      }
    }
    $selectList
  }

  RemotePanel {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 10px;
    font-size: 120%;

    h1 {
      font-weight: normal;
      font-size: 120%;
      margin-bottom: 4px;
      margin-top:0;
    }

    h2 {
      display: flex;
      input {
        flex: 1;
      }
    }

    div.info {

    }
  }

  ConnectForm {
    display:flex;
    input.server {
      flex: 1;
    }
  }

  ToggleButton {
    text-decoration: none;
    font-size: 11px;
    padding: 2px 5px;
    border-radius: 4px;
    display: inline-block;
    border: #6B806B 1px solid;
    background: #6F6F6F;
    color: #D0D0D0;

    -mute {
      border-color: #806B6B;

      -active {
        background: #573236;
        color: #EBBB27;
        :after {
          background: #EBBB27;
        }
      }

      :hover {
        border-color: #BD8484;
        color: #FFC9C9;
      }
    }

    -active {
      background: #325736;
      :after {
        background: #82D182;
      }

    }

    :hover {
      border-color: #84BD89;
      color: #D6FFC9;
    }

    :after {
      display: inline-block;
      border-radius: 3px;
      width: 6px;
      height: 6px;
      background: #AAA4A4;
      content: '';
      margin-left: 2px;
      vertical-align: middle;
    }

  }

  $selectList {
    padding: 0;
    margin: 10px 0;

    li {
      position: relative;
      border-radius: 5px;
      padding: 4px;
      cursor: pointer;
      display: flex;

      :hover {
        background: rgba(173, 133, 3, 0.2);
      }
    }
  }
</style>

<div class="RemotePanel" t:by='state'>
  <t:placeholder t:when='connected'>
    <h1><strong>Connected to</strong> <span t:bind='server' /></h1>
    <div>as <input data-preserve-attribute='value' t:bind:value='nickname' data-behavior='changeNickname' /></div>
    <div class=".info">
      <p t:if='remotes:isEmpty'>No other participants</p>
    </div>
    <ul class='RemoteList'>
      <li t:repeat='remotes'>
        <span class=".nickname" t:bind='.nickname' />
        <t:placeholder class='.controls' t:if='.isPlayer'>
          <a class="ToggleButton -mute"  data-behavior='mute' t:bind:data-id='.id' href='#mute'>mute</a>
          <meter min='-20' data-behavior='vu' t:bind:data-id='.id' high='0' value='-20' max='6' />
        </t:placeholder>
        <span class='.detail' t:unless='.isPlayer'>
          listener
        </span>
      </li>
    </ul>
    <button data-behavior='disconnect'>Disconnect</button>
  </t:placeholder>

  <t:placeholder t:when='connecting'>
    <h1><strong>Connecting to</strong> <span t:bind='server' />...</h1>
  </t:placeholder>

  <t:placeholder t:when='disconnected'>
    <h1>Not connected</h1>
    <ul class='ServerList'>
      <li data-server='loopjs.com:7777' data-behavior='connect'>
        <span>Public Server</span>
        <span class='.detail'>loopjs.com:7777</span>
      </li>
      <li data-server='localhost:7777' data-behavior='connect'>
        <span class='.name'>Local Server</span>
        <span class='.detail'>localhost:7777</span>
      </li>
    </ul>
    <div class='ConnectForm' data-behavior='connectForm'>
      <input data-preserve-attribute='value' placeholder='localhost:7777' t:bind:value='server' class='.server' />

      <button class='.connect'>Connect</button>
    </div>
  </t:placeholder>
</div>