<commit_before><style lang="stylus" scoped>

  @import '../stylus/colors'

  h2 {
    font-weight normal
  }

  .LessonSelection {
    &-close {
      display block
      float right
      width 1em
      height 1em

      border 0
      background-color transparent
      background-image url('../assets/close.svg')
      background-repeat no-repeat
      background-position center
      background-size 50%

      color grey
      font-size 2em
      line-height 0.5rem

      z-index 1000
    }

    &-footer {
      margin-left -1em
      margin-right -1em
      margin-bottom -1em

      padding 1em
      background-color grey-light
      text-align center
    }
  }

  .Lessons {
    margin-top 1em
    margin-bottom 1em

    list-style-type none
  }

  .Lesson {
    display flex
    padding-top 0.5em
    padding-bottom 0.5em

    border-top 1px solid grey-light

    &:last-child {
      border-bottom 1px solid grey-light
    }

    &-left {
      flex 1
    }

    &-right {

    }
  }
</style>

<template>
  <tb-modal :active="selectionActive">
    <button class="LessonSelection-close" @click="deactivateLessonSelection"></button>
    <h2>Choose a lesson</h2>
    <p>
      You can do the excercises in any order you want – although it'd probably be wise to do them in order, if you are new to the Bash.
    </p>

    <ul class="Lessons">
      <li class="Lesson" v-for="lesson in lessons">
        <div class="Lesson-left">
          {{lesson.title}}
        </div>

        <div class="Lesson-right">
          <tb-button :color="getColor(lesson)" @click="lesson.active && !lesson.done ? deactivateLessonSelection() : openLesson($index)">
            {{ getButtontext(lesson) }}
          </tb-button>
        </div>
      </li>
    </ul>

    <div class="LessonSelection-footer">
      <tb-button color="red" @click="reset">Reset all your data and start again</tb-button>
    </div>
  </tb-modal>
</template>

<script>
  import Modal from 'components/Modal'
  import Button from 'components/Button'

  import { getLessons, getLessonSelectionActive } from '../vuex/getters'
  import { reset, openLesson, deactivateLessonSelection } from '../vuex/actions'

  module.exports = {
    vuex: {
      actions: {
        reset,
        openLesson,
        deactivateLessonSelection
      },

      getters: {
        lessons: getLessons,
        selectionActive: getLessonSelectionActive
      }
    },

    components: {
      'tb-modal': Modal,
      'tb-button': Button
    },

    methods: {
      getColor (lesson) {
        return lesson.active ? 'yellow' : 'green'
      },

      getButtontext (lesson) {
        let text = 'Start'
        if (lesson.active) text = 'Continue'
        if (lesson.done) text = 'Play Again'
        return text
      }
    }
  }
</script>
<commit_msg>LessonSelection: Make cursor a pointer on close<commit_after><style lang="stylus" scoped>

  @import '../stylus/colors'

  h2 {
    font-weight normal
  }

  .LessonSelection {
    &-close {
      display block
      float right
      width 1em
      height 1em

      border 0
      background-color transparent
      background-image url('../assets/close.svg')
      background-repeat no-repeat
      background-position center
      background-size 50%

      color grey
      font-size 2em
      line-height 0.5rem

      z-index 1000
      cursor pointer
    }

    &-footer {
      margin-left -1em
      margin-right -1em
      margin-bottom -1em

      padding 1em
      background-color grey-light
      text-align center
    }
  }

  .Lessons {
    margin-top 1em
    margin-bottom 1em

    list-style-type none
  }

  .Lesson {
    display flex
    padding-top 0.5em
    padding-bottom 0.5em

    border-top 1px solid grey-light

    &:last-child {
      border-bottom 1px solid grey-light
    }

    &-left {
      flex 1
    }

    &-right {

    }
  }
</style>

<template>
  <tb-modal :active="selectionActive">
    <button class="LessonSelection-close" @click="deactivateLessonSelection"></button>
    <h2>Choose a lesson</h2>
    <p>
      You can do the excercises in any order you want – although it'd probably be wise to do them in order, if you are new to the Bash.
    </p>

    <ul class="Lessons">
      <li class="Lesson" v-for="lesson in lessons">
        <div class="Lesson-left">
          {{lesson.title}}
        </div>

        <div class="Lesson-right">
          <tb-button :color="getColor(lesson)" @click="lesson.active && !lesson.done ? deactivateLessonSelection() : openLesson($index)">
            {{ getButtontext(lesson) }}
          </tb-button>
        </div>
      </li>
    </ul>

    <div class="LessonSelection-footer">
      <tb-button color="red" @click="reset">Reset all your data and start again</tb-button>
    </div>
  </tb-modal>
</template>

<script>
  import Modal from 'components/Modal'
  import Button from 'components/Button'

  import { getLessons, getLessonSelectionActive } from '../vuex/getters'
  import { reset, openLesson, deactivateLessonSelection } from '../vuex/actions'

  module.exports = {
    vuex: {
      actions: {
        reset,
        openLesson,
        deactivateLessonSelection
      },

      getters: {
        lessons: getLessons,
        selectionActive: getLessonSelectionActive
      }
    },

    components: {
      'tb-modal': Modal,
      'tb-button': Button
    },

    methods: {
      getColor (lesson) {
        return lesson.active ? 'yellow' : 'green'
      },

      getButtontext (lesson) {
        let text = 'Start'
        if (lesson.active) text = 'Continue'
        if (lesson.done) text = 'Play Again'
        return text
      }
    }
  }
</script>

{'fraction_non_alphanumeric': 0.11794871794871795, 'fraction_numerical': 0.009902740937223696, 'mean_word_length': 2.055645596974608, 'pattern_counts': {'":': 0, '<': 59, '<?xml version=': 0, '>': 59, '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': '2957780', 'n_tokens_mistral': 1868, 'n_tokens_neox': 1759, 'n_words': 440}