Sat Aug 28 2021
Copied to clipboard! Copy reply
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
<template>
  <!-- <a href="#" @mouseenter="onNavLinkHover" @click.prevent="onNavLinkClick">
    <span>
      <span>
        {{ value }}
      </span>
    </span>
  </a> -->
  <!-- <div>
    <span>{{ genre.name }}</span>
    <span>
      <span class="checkbox__input">
        <input v-model="isChecked" type="checkbox" />
      </span>
    </span>
  </div> -->
  <p>
    <input type="checkbox" :id="genre.name" />
    <label :for="genre.name">{{ genre.name }}</label>
  </p>
</template>
<script>
import { mapState } from 'vuex'
export default {
  props: ['genre'],
  data() {
    return {
      sounds: [
        'LSC_Perc_04',
        'LSDC_Kick_05',
        'LSDC_Perc_01',
        'OSTR_Kick_03',
        'OSTR_Perc_04',
        'OSTR_Snare_01',
        'OSTR_Snare_02',
        'OSTR_Snare_03',
        'OSTR_Snare_04',
      ],
    }
  },
  computed: {
    ...mapState(['genres']),

    isChecked: {
      get() {
        return this.genres.find((o) => o.name === this.genre.name).isChecked
      },
      set(v) {
        this.$store.dispatch('updateGenreCheckbox', {
          name: this.genre.name,
          isChecked: v,
        })
      },
    },
  },

  methods: {
    /**
     * Plays a sound when hovering over the nav links
     */
    onNavLinkHover() {
      if (this.$store.state.isPlaying) {
        return
      }
      // Pick random array element
      const file = this.sounds[Math.floor(Math.random() * this.sounds.length)]
      const sound = new Audio(`/audio/beats/${file}.wav`)
      try {
        sound.play()
      } catch (e) {
        // Sound didn't play because user didn't interact with document first
      }
    },

    /**
     * Handles click on the genre links on navbar.
     * We fire a whole bunch of APIs for each music service (soundcloud, youtube, etc)
     */
    onNavLinkClick() {
      this.$store.dispatch('fetchSpotify', {
        genre: 'synthwave',
        token: this.$store.state.tokens.spotify.accessToken,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
p {
  font-weight: 800;
  color: var(--pink);
  text-shadow: 0 2px 3px rgba(246, 73, 167, 40%);
  //transition: all 300ms ease-in 0s;
  margin: 10px 0;
  position: relative;
  letter-spacing: 2px;
  display: flex;
  &:hover {
    text-shadow: 0 2px 7px rgba(246, 73, 167, 90%);
  }

  label {
    width: 100%;
  }
}

/* Base for label styling */
[type='checkbox']:not(:checked),
[type='checkbox']:checked {
  position: absolute;
  right: 0;
  opacity: 0.01;
}
[type='checkbox']:not(:checked) + label,
[type='checkbox']:checked + label {
  position: relative;
  font-size: 1.05em;
  line-height: 1.7;
  cursor: pointer;
}

/* checkbox aspect */
[type='checkbox']:not(:checked) + label::before,
[type='checkbox']:checked + label::before {
  content: '';
  position: absolute;
  right: 0;
  top: 6px;
  width: 1em;
  height: 1em;
  border: 1px solid #aaa;
  background: transparent;
  border-radius: 0.2em;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 0 rgba(203, 34, 237, 0.2);
  -webkit-transition: all 0.275s;
  transition: all 0.275s;
}

/* checked mark aspect */
[type='checkbox']:not(:checked) + label::after,
[type='checkbox']:checked + label::after {
  content: '✕';
  position: absolute;
  top: 14px;
  right: 2px;
  font-size: 1.375em;
  color: #cb22ed;
  line-height: 0;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

/* checked mark aspect changes */
[type='checkbox']:not(:checked) + label::after {
  opacity: 0;
  -webkit-transform: scale(0) rotate(45deg);
  transform: scale(0) rotate(45deg);
}

[type='checkbox']:checked + label::after {
  opacity: 1;
  -webkit-transform: scale(1) rotate(0);
  transform: scale(1) rotate(0);
}

/* Disabled checkbox */
[type='checkbox']:disabled:not(:checked) + label::before,
[type='checkbox']:disabled:checked + label::before {
  box-shadow: none;
  border-color: #bbb;
  background-color: #e9e9e9;
}

[type='checkbox']:disabled:checked + label::after {
  color: #777;
}

[type='checkbox']:disabled + label {
  color: #aaa;
}

/* Accessibility */
[type='checkbox']:checked:focus + label::before,
[type='checkbox']:not(:checked):focus + label::before {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1),
    0 0 0 6px rgba(203, 34, 237, 0.2);
}
</style>