<commit_before><template>
  <div id="root">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'root',
}
</script>

<style lang="scss">
  html, body, #app, #root, #game {
    height: 100%;
  }

  .content {
    background-color: #ccc;
    width: 80%;
    margin: 30px auto;
    color: #333;
    font-size: 20px;
    font-weight: 700;
    padding: 17px;
  }

  .btn {
    cursor: pointer;
    background-color: #333;
    color: white;
    width: 80%;
    margin: 5px auto;
    padding: 14px;
    border-radius: 20px;
    margin-top: 20px;
  }

  .larger {
    font-size: 35px;
  }
</style><commit_msg>implement error alert on the mobile app<commit_after><template>
  <div id="root">
    <div v-if="err_msg" class="alert-box">
      <div class="alert error" v-html="err_msg"></div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'root',
  mounted() {
    this.$game_connection.on_disconnect = (data) => {
      this.err_msg = `Uh Oh! Server semes to be down, retrying... <span class="fa fa-cog fa-spin"></span>`;
    };
  },

  data() {
    return {
      err_msg: null
    };
  }
}
</script>

<style lang="scss">
  html, body, #app, #root, #game {
    height: 100%;
  }

  .content {
    background-color: #ccc;
    width: 80%;
    margin: 30px auto;
    color: #333;
    font-size: 20px;
    font-weight: 700;
    padding: 17px;
  }

  .btn {
    cursor: pointer;
    background-color: #333;
    color: white;
    width: 80%;
    margin: 5px auto;
    padding: 14px;
    border-radius: 20px;
    margin-top: 20px;
  }

  .larger {
    font-size: 35px;
  }

  .alert-box {
    position: absolute;
    width: 100%;
    top: 20px;
  }

  .alert {
    width: 80%;
    background-color: #ccc;
    font-size: 18px;
    border-radius: 10px;
    color: #333;
    margin: 0 auto;
    padding: 17px;
  }

  .alert.error {
    background-color: #f2dede;
    border-color: #ebcccc;
    color: #a94442;
  }
</style>
{'fraction_non_alphanumeric': 0.16675037669512807, 'fraction_numerical': 0.04269211451531894, 'mean_word_length': 2.364864864864865, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 30, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3471412', 'n_tokens_mistral': 851, 'n_tokens_neox': 760, 'n_words': 181}