knowyt/client/src/components/CollectQuotesExplain.vue

<template>
  <div class="collect-quotes-explain">
    <Infobox>
      <div class="collect-quotes-explain__open-close-toggle" @click="toggleOpenClose">
        <span v-if="explainOpen">X</span>
        <span v-else>&gt;</span>
      </div>
      <div v-if="!explainOpen">
        <div class="collect-quotes-explain__explain" @click="toggleOpenClose">
          <p>Erklärung zum Spiel</p>
        </div>
      </div>
      <div v-if="explainOpen">
        <div class="collect-quotes-explain__explain">
          <p>
            Das Spiel besteht aus zwei Phasen. In der ersten Phase werden von den
            Mitspielenden Aussagen gesammelt. In der zweiten Phase versucht
            man, die Aussagen den richtigen Personen zuzuordnen. Wir befinden
            uns in der ersten Phase.
          </p>
          <p>
            Schreibe in 3-5 einzelnen Aussagen etwas über dich.
          </p>
        </div>
        <div class="collect-quotes-explain__example">
          <div class="collect-quotes-explain__example-title">Beispiel</div>
          <div class="collect-quotes-explain__example-subtitle">(anklicken für nächstes)</div>
        </div>
        <div class="collect-quotes-explain__example-container" @click="showNextExampleQuote">
          <transition name="collect-quotes-explain-fade" mode="out-in">
            <div class="collect-quotes-explain__example-text" :key="quoteNr">
              {{ exampleQuotes[quoteNr] }}
            </div>
          </transition>
        </div>
      </div>
    </Infobox>
  </div>
</template>

<script>

export default {
  data() {
    return {
      quoteNr: 0,
      lastUpdate: new Date().getTime(),
      explainOpen: true,
      exampleQuotes: [
        'Um mir mein Studium zu finanzieren habe ich den Taxischein gemacht. Ich bin jedoch nie gefahren.',
        'Ich mag jede Nudelsorte ausser Spaghetti, die kann ich nicht ausstehen.',
        'Etwa 5 Jahre lang habe ich Kontrabass im Jugendorchester gespielt.',
        'Zuerst wollte ich Baugestaltung und Architekturgeschichte studieren. Der Studiengang war aber so voll, dass ich mich nach nur drei Vorlesungen umentschieden und statt dessen Informatik studiert habe.',
        'Nach dem Abi habe ich fast ein Jahr lang in einer Tierarztpraxis gejobbt.',
        'Ich habe drei Mal meinem/meiner Partner:in zuliebe angefangen, "Herr der Ringe" zu schauen und bin jedes Mal dabei eingeschlafen.',
        'Ich habe vier Meerschweinchen: Tick, Trick, Track und Alfred.',
      ],
    }
  },
  methods: {
    showNextExampleQuote() {
      this.quoteNr = (this.quoteNr + 1) % this.exampleQuotes.length
      this.lastUpdate = new Date().getTime()
    },
    toggleOpenClose() {
      this.explainOpen = !this.explainOpen
    },
  },
  beforeMount() {
    this.quoteNr = Math.floor(Math.random() * this.exampleQuotes.length),
    this.timer = window.setInterval(function() {
      if (new Date().getTime() > this.lastUpdate + 15000) {
        this.showNextExampleQuote()
      }
    }.bind(this), 2000)
  },
  beforeDestroy() {
    window.clearInterval(this.timer)
  },
}
</script>

<style lang="scss">
@import '~/assets/css/components';

.collect-quotes-explain {
  &__open-close-toggle {
    float: right;
    margin: 16px -16px 16px 16px;
    padding: 12px;
    border: 1px solid #ffffff;
    border-radius: 8px;
    background-color: $primary-background-color;
    font-family: "Wendy One";
    color: #ffffff;
    cursor: pointer;

    &:hover {
      background-color: $primary-box-background-color;
    }
  }

  &__explain {
    margin-bottom: 40px;
    font-size: 24px;
    font-family: Dosis;
    color: #ffffff;
  }

  &__example {
    font-family: Dosis;
    color: #ffffff;
    &-title {
      font-size: 24px;
    }
    &-subtitle {
      font-size: 16px;
      margin-bottom: 10px;
    }

    &-container {
      height: 8em;
    }
    &-text {
      font-family: Dosis;
      font-size: 24px;
      color: #ffffff;
      cursor: pointer;

      &:before {
        content: '„';
      }
      &:after {
        content: '“';
      }
    }
  }
}
.collect-quotes-explain-fade-enter-active,
.collect-quotes-explain-fade-leave-active {
  transition: all 0.4s ease;
}
.collect-quotes-explain-fade-enter,
.collect-quotes-explain-fade-leave-to {
  opacity: 0;
}

</style>