<commit_before><template>
  <div class="menu-component">
    <div v-bind:class="{ 'show': !playing, 'hide': playing }">
      <div class="options-list">
        <div class="options-element">
          <span>{{hintLabel}}</span>
          <div class="menu-button options-button" v-bind:class="{ 'button-disabled': !displayHints }" v-on:click="toggleHints()">{{hintStatus}}</div>
        </div>
        <div class="options-element">
          <span>{{progressbarLabel}}</span>
          <div class="menu-button" v-bind:class="{ 'fa fa-arrow-circle-right fa-2x': !arrowButtonTop, 'fa fa-arrow-circle-up fa-2x': arrowButtonTop }" v-on:click="switchTimerPosition()"></div>
        </div>
        <div class="options-element">
          <span>{{rankedLabel}}</span>
          <div class="menu-button options-button" v-bind:class="{ 'button-disabled': !isRankedEnabled }" v-on:click="toggleRanked()">{{isRankedEnabledText}}</div>
        </div>
        <div class="options-element">
          <span>{{numberOfQuestionsLabel}}</span>
          <el-slider class="slider" :min="1" :max="20" v-model="numberOfQuestions" :disabled="isRankedEnabled"></el-slider>
        </div>
        <div class="options-element">
          <span>Genres (default Série/Film): </span>
          <div class="flex-container">
            <el-checkbox :border="true" class=" checkbox" v-for="genre in genres" :label="genre.ID" v-model="checkedGenres" :key="genre.ID">{{ genre.name }}</el-checkbox>
          </div>
        </div>
      </div>
      <div v-on:click="startGame()" class="menu-button menu-start-button" :disabled="playing == 1">{{ start }}</div>
    </div>
    <quizz-game v-bind:class="{ 'show': playing, 'hide': !playing }" v-bind:displayPropositions="displayHints" v-bind:genres="checkedGenres" v-bind:arrowButtonTop="arrowButtonTop" v-bind:numberOfQuestions="numberOfQuestions" v-on:return="endGame()"></quizz-game>
  </div>
</template>

<script>
  import QuizzGame from './QuizzGame.vue'
  import axios from 'axios'

  export default {
    name: 'menu-component',
    data () {
      return {
        menu: 'Menu',
        playing: false,
        start: 'Start Playing',
        hintLabel: 'Display 4 answer propositions: ',
        hintStatus: 'Enabled',
        displayHints: true,
        progressbarLabel: 'Timer position: ',
        arrowButtonTop: true,
        numberOfQuestionsLabel: 'Number of questions: ',
        numberOfQuestions: 5,
        checkedGenres: [],
        genres: [],
        rankedLabel: 'Ranked mode: ',
        isRankedEnabled: false,
        isRankedEnabledText: 'Disabled'
      }
    },
    methods: {
      toggleHints () {
        if (this.hintStatus === 'Enabled') {
          this.hintStatus = 'Disabled'
          this.displayHints = false
        } else {
          this.hintStatus = 'Enabled'
          this.displayHints = true
        }
      },

      toggleRanked () {
        if (this.isRankedEnabledText === 'Enabled') {
          this.isRankedEnabledText = 'Disabled'
          this.isRankedEnabled = false
        } else {
          this.isRankedEnabledText = 'Enabled'
          this.isRankedEnabled = true
          this.numberOfQuestions = 5
        }
      },

      switchTimerPosition () {
        this.arrowButtonTop = !this.arrowButtonTop
      },

      startGame () {
        this.playing = true
      },

      endGame () {
        this.playing = false
      }
    },
    components: {
      QuizzGame
    },
    mounted: function () {
      axios.get('http://localhost:8082/api/genre.php', {headers:
      {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'POST,GET,OPTIONS,PUT,DELETE',
        'Access-Control-Allow-Headers': 'Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers'
      }})
        .then((response) => {
          this.genres = response.data.genres
        })
      .catch(function (error) {
        console.log(error)
      })
    }
  }
</script>

<style>
  h1{
    color: #232323
  }
  .show{
    display: inline;
  }
  .hide{
    display: none;<commit_msg>Add button to see top scores<commit_after><template>
  <div class="menu-component">
    <div v-bind:class="{ 'show': !playing, 'hide': playing }">
      <div class="options-list">
        <div class="options-element">
          <span>{{hintLabel}}</span>
          <div class="menu-button options-button" v-bind:class="{ 'button-disabled': !displayHints }" v-on:click="toggleHints()">{{hintStatus}}</div>
        </div>
        <div class="options-element">
          <el-popover ref="popover4" placement="right" width="400" trigger="click">
            <el-table :data="rankingData">
              <el-table-column width="150" property="rank" label="Rank"></el-table-column>
              <el-table-column width="100" property="user" label="Username"></el-table-column>
              <el-table-column width="300" property="score" label="Score"></el-table-column>
            </el-table>
          </el-popover>

          <el-button v-popover:popover4>See top scores</el-button>
        </div>
        <div class="options-element">
          <span>{{progressbarLabel}}</span>
          <div class="menu-button" v-bind:class="{ 'fa fa-arrow-circle-right fa-2x': !arrowButtonTop, 'fa fa-arrow-circle-up fa-2x': arrowButtonTop }" v-on:click="switchTimerPosition()"></div>
        </div>
        <div class="options-element">
          <span>{{rankedLabel}}</span>
          <div class="menu-button options-button" v-bind:class="{ 'button-disabled': !isRankedEnabled }" v-on:click="toggleRanked()">{{isRankedEnabledText}}</div>
        </div>
        <div class="options-element">
          <span>{{numberOfQuestionsLabel}}</span>
          <el-slider class="slider" :min="1" :max="20" v-model="numberOfQuestions" :disabled="isRankedEnabled"></el-slider>
        </div>
        <div class="options-element">
          <span>Genres (default Série/Film): </span>
          <div class="flex-container">
            <el-checkbox :border="true" class=" checkbox" v-for="genre in genres" :label="genre.ID" v-model="checkedGenres" :key="genre.ID">{{ genre.name }}</el-checkbox>
          </div>
        </div>
      </div>
      <div v-on:click="startGame()" class="menu-button menu-start-button" :disabled="playing == 1">{{ start }}</div>
    </div>
    <quizz-game v-bind:class="{ 'show': playing, 'hide': !playing }" v-bind:displayPropositions="displayHints" v-bind:genres="checkedGenres" v-bind:arrowButtonTop="arrowButtonTop" v-bind:numberOfQuestions="numberOfQuestions" v-on:return="endGame()"></quizz-game>
  </div>
</template>

<script>
  import QuizzGame from './QuizzGame.vue'
  import axios from 'axios'

  export default {
    name: 'menu-component',
    data () {
      return {
        menu: 'Menu',
        playing: false,
        start: 'Start Playing',
        hintLabel: 'Display 4 answer propositions: ',
        hintStatus: 'Enabled',
        displayHints: true,
        progressbarLabel: 'Timer position: ',
        arrowButtonTop: true,
        numberOfQuestionsLabel: 'Number of questions: ',
        numberOfQuestions: 5,
        checkedGenres: [],
        genres: [],
        rankedLabel: 'Ranked mode: ',
        isRankedEnabled: false,
        isRankedEnabledText: 'Disabled',
        rankingData: []
      }
    },
    methods: {
      toggleHints () {
        if (this.hintStatus === 'Enabled') {
          this.hintStatus = 'Disabled'
          this.displayHints = false
        } else {
          this.hintStatus = 'Enabled'
          this.displayHints = true
        }
      },

      toggleRanked () {
        if (this.isRankedEnabledText === 'Enabled') {
          this.isRankedEnabledText = 'Disabled'
          this.isRankedEnabled = false
        } else {
          this.isRankedEnabledText = 'Enabled'
          this.isRankedEnabled = true
          this.numberOfQuestions = 5
        }
      },

      switchTimerPosition () {
        this.arrowButtonTop = !this.arrowButtonTop
      },

      startGame () {
        this.playing = true
      },

      endGame () {
        this.playing = false
      }
    },
    components: {
      QuizzGame
    },
    mounted: function () {
      axios.get('http://localhost:8082/api/genre.php', {headers:
      {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'POST,GET,OPTIONS,PUT,DELETE',
        'Access-Control-Allow-Headers': 'Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers'
      }})
        .then((response) => {
          this.genres = response.data.genres
        })
      .catch(function (error) {
        console.log(error)
      })
      axios.get('http://localhost:8082/api/topScores.php', {headers:
      {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'POST,GET,OPTIONS,PUT,DELETE',
        'Access-Control-Allow-Headers': 'Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers'
      }})
        .then((response) => {
          console.log(response.data.scores)
          this.rankingData = response.data.scores.slice(0, 10)
        })
      .catch(function (error) {
        console.log(error)
      })
    }
  }
</script>

<style>
  h1{
    color: #232323
  }
  .show{
    display: inline;
  }
  .hide{
    display: none;
{'fraction_non_alphanumeric': 0.16238686592296359, 'fraction_numerical': 0.0064197011155546204, 'mean_word_length': 2.49375, 'pattern_counts': {'":': 0, '<': 111, '<?xml version=': 0, '>': 114, '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': '923344', 'n_tokens_mistral': 3006, 'n_tokens_neox': 2878, 'n_words': 505}