118 lines
2.4 KiB
Vue
118 lines
2.4 KiB
Vue
<template>
|
|
<div>
|
|
<!-- Game Captures -->
|
|
<game-capture
|
|
id="GameCapture1"
|
|
class="BorderLeft"
|
|
:style="{
|
|
left: '745px',
|
|
top: '0px',
|
|
width: '1175px',
|
|
height: '940px',
|
|
}"
|
|
/>
|
|
|
|
<!-- Crowd Camera Capture -->
|
|
<div
|
|
v-if="!online && crowdCam"
|
|
id="CameraCaptureCrowd"
|
|
class="Capture BorderBottom"
|
|
:style="{
|
|
left: '0px',
|
|
top: '0px',
|
|
width: '745px',
|
|
height: '114px',
|
|
}"
|
|
/>
|
|
|
|
<!-- Camera Captures -->
|
|
<div
|
|
id="CameraCapture1"
|
|
class="Capture"
|
|
:style="{
|
|
left: '0px',
|
|
top: !online && crowdCam ? '114px' : '0px',
|
|
width: '745px',
|
|
height: !online && crowdCam ? '262px' : '420px',
|
|
}"
|
|
/>
|
|
|
|
<!-- General Run Info -->
|
|
<div
|
|
class="Fixed FlexColumn BorderBottom"
|
|
:style="{
|
|
left: '0px',
|
|
top: '420px',
|
|
width: '745px',
|
|
height: '340px',
|
|
}"
|
|
>
|
|
<player />
|
|
<commentators-reader />
|
|
<commentators-reader show-reader />
|
|
|
|
<!-- Run Game Info/Timer -->
|
|
<div
|
|
class="FlexColumn"
|
|
:style="{
|
|
flex: '1',
|
|
width: '100%',
|
|
}"
|
|
>
|
|
<run-info />
|
|
<timer />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Media Box -->
|
|
<media-box
|
|
:font-size="40"
|
|
:style="{
|
|
left: '0px',
|
|
top: '716px',
|
|
width: '745px',
|
|
height: '284px',
|
|
}"
|
|
/>
|
|
|
|
<!-- Donation Bar -->
|
|
<donation-bar
|
|
class="BorderLeft"
|
|
:style="{
|
|
left: '745px',
|
|
top: '940px',
|
|
width: '1175px',
|
|
height: '60px',
|
|
}"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import MediaBox from '@shared/graphics/mediabox';
|
|
import { Component, Vue } from 'vue-property-decorator';
|
|
import { State } from 'vuex-class';
|
|
import CommentatorsReader from './components/CommentatorsReader.vue';
|
|
import DonationBar from './components/DonationBar.vue';
|
|
import GameCapture from './components/GameCapture.vue';
|
|
import Player from './components/Player.vue';
|
|
import RunInfo from './components/RunInfo.vue';
|
|
import Timer from './components/Timer.vue';
|
|
|
|
@Component({
|
|
components: {
|
|
GameCapture,
|
|
Player,
|
|
CommentatorsReader,
|
|
RunInfo,
|
|
Timer,
|
|
MediaBox,
|
|
DonationBar,
|
|
},
|
|
})
|
|
export default class extends Vue {
|
|
@State((s) => s.gameLayouts.crowdCamera) readonly crowdCam!: boolean;
|
|
online = nodecg.bundleConfig.event.online;
|
|
}
|
|
</script>
|