<commit_before><template>
  <!-- TODO: Canvas needs to be responsive to scaling up and down. -->
  <!-- Currently fixed size to the aspect ratio of our play view. -->
  <div id="cinematic-canvas-div">
    <div id="cinematic-div" ref="cinematic-div" v-on:click="skipShot">
      <canvas
        id="cinematic-canvas"
        ref="cinematic-canvas"
        :width="width"
        :height="height"
        :style="{ width: width+'px', height: height+'px' }">
      </canvas>
    </div>
    <button :disabled="enterDisabled" v-on:click="nextShot">Enter</button>
  </div>
</template>

<script>
/**
 * This vue component initializes the cinematic experience via the
 * CinematicController.
 */
import { CinematicController } from '../../../../engine/cinematic/cinematicController'

export default {
  props: {
    cinematicData: {
      type: Object,
      required: true
    }
  },
  data: () => ({
    controller: null,
    enterDisabled: false,
    width: 1280,
    height: 850
  }),
  mounted: function() {
    if (!me.hasCinematicAccess()) {
      return application.router.navigate('/', { trigger: true })
    }
    const canvas = this.$refs['cinematic-canvas']
    const canvasDiv = this.$refs['cinematic-div']
    this.controller = new CinematicController({
      canvas,
      canvasDiv,
      cinematicData: this.cinematicData,
      handlers: {
        onPlay: this.handlePlay,
        onPause: this.handleWait,
        onCompletion: () => this.$emit('completed')
      }})
    window.addEventListener('keypress', this.handleKeyboardCancellation)
  },
  methods: {
    handlePlay: function() {
      this.enterDisabled = true
    },
    handleWait: function() {
      this.enterDisabled = false
    },
    nextShot: function() {
      this.controller && this.controller.runShot()
    },
    skipShot: function() {
      this.controller.cancelShot()
    },
    handleKeyboardCancellation: function(e) {
      const code = e.code || e.key
      if (code === "Enter") {
        this.skipShot()
      }
    }
  },
  beforeDestroy: function()  {
    if (this.controller) {
      this.controller.destroy()
    }
    window.removeEventListener('keypress', this.handleKeyboardCancellation)
  },
}
</script>

<style scoped>
#cinematic-div {
  position: relative;
  font-size: 1.5em;
  height: 850px;
  width: 1280px;
}

#cinematic-div canvas {
  display: block;
  position: absolute;
}
</style><commit_msg>Change cinematic canvas dimensions to 1366 by 768 (#5371)<commit_after><template>
  <!-- TODO: Canvas needs to be responsive to scaling up and down. -->
  <!-- Currently fixed size to the aspect ratio of our play view. -->
  <div id="cinematic-canvas-div">
    <div id="cinematic-div" ref="cinematic-div" v-on:click="skipShot">
      <canvas
        id="cinematic-canvas"
        ref="cinematic-canvas"
        :width="width"
        :height="height"
        :style="{ width: width+'px', height: height+'px' }">
      </canvas>
    </div>
    <button :disabled="enterDisabled" v-on:click="nextShot">Enter</button>
  </div>
</template>

<script>
/**
 * This vue component initializes the cinematic experience via the
 * CinematicController.
 */
import { CinematicController } from '../../../../engine/cinematic/cinematicController'

export default {
  props: {
    cinematicData: {
      type: Object,
      required: true
    }
  },
  data: () => ({
    controller: null,
    enterDisabled: false,
    width: 1366,
    height: 768
  }),
  mounted: function() {
    if (!me.hasCinematicAccess()) {
      return application.router.navigate('/', { trigger: true })
    }
    const canvas = this.$refs['cinematic-canvas']
    const canvasDiv = this.$refs['cinematic-div']
    this.controller = new CinematicController({
      canvas,
      canvasDiv,
      cinematicData: this.cinematicData,
      handlers: {
        onPlay: this.handlePlay,
        onPause: this.handleWait,
        onCompletion: () => this.$emit('completed')
      }})
    window.addEventListener('keypress', this.handleKeyboardCancellation)
  },
  methods: {
    handlePlay: function() {
      this.enterDisabled = true
    },
    handleWait: function() {
      this.enterDisabled = false
    },
    nextShot: function() {
      this.controller && this.controller.runShot()
    },
    skipShot: function() {
      this.controller.cancelShot()
    },
    handleKeyboardCancellation: function(e) {
      const code = e.code || e.key
      if (code === "Enter") {
        this.skipShot()
      }
    }
  },
  beforeDestroy: function()  {
    if (this.controller) {
      this.controller.destroy()
    }
    window.removeEventListener('keypress', this.handleKeyboardCancellation)
  },
}
</script>

<style scoped>
#cinematic-div {
  position: relative;
  font-size: 1.5em;
  height: 768px;
  width: 1366px;
}

#cinematic-div canvas {
  display: block;
  position: absolute;
}
</style>
{'fraction_non_alphanumeric': 0.14748349834983498, 'fraction_numerical': 0.00886963696369637, 'mean_word_length': 2.779423226812159, 'pattern_counts': {'":': 0, '<': 35, '<?xml version=': 0, '>': 39, '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': '6718258', 'n_tokens_mistral': 1573, 'n_tokens_neox': 1497, 'n_words': 327}