<commit_before><script>
  import store from 'app/core/store'
  import { mapState } from 'vuex'
  import visualChalkboardModule from './visualChalkboardModule'

  /**
   * Converts a string such as "3 &lt; 2" into "3 < 2".
   * Reference: https://stackoverflow.com/a/7394787
   * @param {string} text
   * @returns {string} Text with escaped values decoded
   */
  function decodeHtml (text) {
    const txt = document.createElement('textarea')
    txt.innerHTML = text
    return txt.value
  }

  export default {
    data: () => ({
      displayed: false,
      displayInterval: null
    }),
    computed: {
      ...mapState({
        html: state => (state.visualChalkboard || {}).chalkboardHtml || '',
        chalkboardWidth: state => (state.visualChalkboard || {}).width || 45,
        chalkboardHeight: state => (state.visualChalkboard || {}).height || 80,
        xOffset: state => {
          // This getter returns either the onscreen xOffset or the value xOffsetHiddenOverride
          // that triggers the chalkboard to move off the screen.
          const xOffset = (state.visualChalkboard || {}).xOffset || 0
          const xOffsetHiddenOverride = (state.visualChalkboard || {}).xOffsetHiddenOverride || 0
          if (xOffsetHiddenOverride !== 0) {
            return xOffsetHiddenOverride
          } else {
            return xOffset
          }
        },
        yOffset: state => (state.visualChalkboard || {}).yOffset,
        transitionTime: state => (state.visualChalkboard || {}).transitionTime || 0
      }),

      compiledHtml () {
        return decodeHtml(this.html)
      }
    },

    mounted () {
      store.registerModule('visualChalkboard', visualChalkboardModule())

      // Hack: Fixes chalkboard flying across screen when loading
      this.displayInterval = setTimeout(() => { this.displayed = true }, 1200)
    },

    beforeDestroy () {
      clearInterval(this.displayInterval)
      store.unregisterModule('visualChalkboard')
    }
  }
</script>

<template>
  <div id="cinematic-chalkboard-container">
    <!-- TODO: Refactored to use vue transitions? -->
    <div
      v-if="displayed"
      id="chalkboard-modal"
      :style="{
        width: `${chalkboardWidth}%`,
        height: `${chalkboardHeight}%`,
        transform: `translateX(${xOffset}%) translateY(${yOffset}%)`,
        transition: `transform ${transitionTime}s`
      }"
    >
      <div id="chalkboard">
        <div class="chalkboard-decoration-container">
          <div class="chalkboard-decoration" />
        </div>
        <div
          id="markdown-contents"
          v-html="compiledHtml"
        />
      </div>
    </div>
  </div>
</template>

<style lang="scss">
#chalkboard-modal img {
  max-width: 80%;
  height: auto;
}
</style>

<style lang="scss">
  #markdown-contents {
    font-size: 24px;
    line-height: 28px;
    font-weight: normal;
    padding: 0.2vh 0.2vw;
    p {
      margin-bottom: 0;
    }
    span {
      font-size: 2vmax;
    }
  }
</style>

<style lang="scss" scoped>
#cinematic-chalkboard-container {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;

  display: flex;
  justify-content: center;
  align-items: center;

  overflow: hidden;

  #chalkboard-modal {
    width: 50%;
    height: 80%;

    display: flex;
    flex-direction: column;
  }

  #markdown-contents {
    width: 100%;<commit_msg>Fix large screen font size bug in Chalkboard (#616)<commit_after><script>
  import store from 'app/core/store'
  import { mapState } from 'vuex'
  import visualChalkboardModule from './visualChalkboardModule'

  /**
   * Converts a string such as "3 &lt; 2" into "3 < 2".
   * Reference: https://stackoverflow.com/a/7394787
   * @param {string} text
   * @returns {string} Text with escaped values decoded
   */
  function decodeHtml (text) {
    const txt = document.createElement('textarea')
    txt.innerHTML = text
    return txt.value
  }

  export default {
    data: () => ({
      displayed: false,
      displayInterval: null
    }),
    computed: {
      ...mapState({
        html: state => (state.visualChalkboard || {}).chalkboardHtml || '',
        chalkboardWidth: state => (state.visualChalkboard || {}).width || 45,
        chalkboardHeight: state => (state.visualChalkboard || {}).height || 80,
        xOffset: state => {
          // This getter returns either the onscreen xOffset or the value xOffsetHiddenOverride
          // that triggers the chalkboard to move off the screen.
          const xOffset = (state.visualChalkboard || {}).xOffset || 0
          const xOffsetHiddenOverride = (state.visualChalkboard || {}).xOffsetHiddenOverride || 0
          if (xOffsetHiddenOverride !== 0) {
            return xOffsetHiddenOverride
          } else {
            return xOffset
          }
        },
        yOffset: state => (state.visualChalkboard || {}).yOffset,
        transitionTime: state => (state.visualChalkboard || {}).transitionTime || 0
      }),

      compiledHtml () {
        return decodeHtml(this.html)
      }
    },

    mounted () {
      store.registerModule('visualChalkboard', visualChalkboardModule())

      // Hack: Fixes chalkboard flying across screen when loading
      this.displayInterval = setTimeout(() => { this.displayed = true }, 1200)
    },

    beforeDestroy () {
      clearInterval(this.displayInterval)
      store.unregisterModule('visualChalkboard')
    }
  }
</script>

<template>
  <div id="cinematic-chalkboard-container">
    <!-- TODO: Refactored to use vue transitions? -->
    <div
      v-if="displayed"
      id="chalkboard-modal"
      :style="{
        width: `${chalkboardWidth}%`,
        height: `${chalkboardHeight}%`,
        transform: `translateX(${xOffset}%) translateY(${yOffset}%)`,
        transition: `transform ${transitionTime}s`
      }"
    >
      <div id="chalkboard">
        <div class="chalkboard-decoration-container">
          <div class="chalkboard-decoration" />
        </div>
        <div
          id="markdown-contents"
          v-html="compiledHtml"
        />
      </div>
    </div>
  </div>
</template>

<style lang="scss">
#chalkboard-modal img {
  max-width: 80%;
  height: auto;
}
</style>

<style>
  #markdown-contents {
    font-size: 24px;
    line-height: 28px;
    font-weight: normal;
    padding: 0.2vh 0.2vw;
  }

  #markdown-contents p {
      margin-bottom: 0;
  }

  #markdown-contents span {
      font-size: min(2vmax, 24px);
  }
</style>

<style lang="scss" scoped>
#cinematic-chalkboard-container {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;

  display: flex;
  justify-content: center;
  align-items: center;

  overflow: hidden;

  #chalkboard-modal {
    width: 50%;
    height: 80%;

    display: flex;
    flex-direction: column;
  }

  #markdown-contents {
    width: 100%;
{'fraction_non_alphanumeric': 0.13908062857982081, 'fraction_numerical': 0.015127037744162138, 'mean_word_length': 2.508500772797527, 'pattern_counts': {'":': 0, '<': 45, '<?xml version=': 0, '>': 59, 'https://': 2, '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': '932082', 'n_tokens_mistral': 2224, 'n_tokens_neox': 2066, 'n_words': 485}