Skip to content

Commit

Permalink
Merge branch 'graphics-revamp'
Browse files Browse the repository at this point in the history
# Conflicts:
#	apps/graphics/package-lock.json
#	apps/graphics/package.json
  • Loading branch information
ifrog800 committed Jan 6, 2025
2 parents a8de9db + ad02827 commit c727523
Show file tree
Hide file tree
Showing 92 changed files with 9,213 additions and 9,194 deletions.
13,005 changes: 4,892 additions & 8,113 deletions apps/graphics/package-lock.json

Large diffs are not rendered by default.

45 changes: 22 additions & 23 deletions apps/graphics/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -35,13 +35,14 @@
"serialport": "^10.4.0",
"uuid": "^8.3.2",
"vuedraggable": "^4.1.0",
"vuetify": "^3.1.11"
"vuetify": "^3.7.1"
},
"devDependencies": {
"@mdi/font": "^7.4.47",
"@types/animejs": "^3.1.7",
"@types/color": "^3.0.3",
"@types/fs-extra": "^11.0.1",
"@types/node": "^16.11.47",
"@types/node": "^22.5.4",
"@types/uuid": "^8.3.4",
"@types/xml2js": "^0.4.14",
"@vitejs/plugin-vue": "^2.3.3",
Expand All @@ -53,10 +54,10 @@
"npm-run-all": "^4.1.5",
"pino-pretty": "^9.1.1",
"sass": "^1.54.4",
"typescript": "^4.7.4",
"vite": "^3.2.11",
"typescript": "^5.5.4",
"vite": "^5.4.3",
"vite-plugin-checker": "^0.4.9",
"vite-plugin-nodecg": "^1.0.2",
"vite-plugin-nodecg": "^2.1.0",
"vite-plugin-vuetify": "^1.0.2",
"vue": "^3.2.37",
"vue-tsc": "^0.39.5"
Expand Down Expand Up @@ -110,36 +111,29 @@
"name": "image-selection",
"title": "Image Selection",
"file": "image-selection.html",
"workspace": "Images",
"width": "8"
},
{
"name": "image-editor",
"title": "Image Editor",
"file": "image-editor.html",
"workspace": "Images",
"workspace": "Graphics",
"width": "8"
},
{
"name": "lower-third",
"title": "Lower Third",
"title": "Lower Thirds",
"file": "lower-third.html",
"workspace": "Images",
"width": "8"
},
{
"name": "slideshow",
"title": "Slideshow",
"file": "slideshow.html",
"workspace": "Post Game",
"width": "8"
"workspace": "Graphics",
"width": "10"
},
{
"name": "statistics",
"title": "Statistics",
"file": "statistics.html",
"workspace": "Statistics",
"width": "10"
},
{
"name": "fullscreen",
"title": "Fullscreen",
"file": "fullscreen.html",
"workspace": "Graphics",
"width": "10"
}
],
"graphics": [
Expand All @@ -157,6 +151,11 @@
"file": "minimal-scoreboard.html",
"width": 1920,
"height": 1080
},
{
"file": "preview.html",
"width": 1920,
"height": 1080
}
],
"assetCategories": [
Expand Down
64 changes: 51 additions & 13 deletions apps/graphics/plugins/vuetify.ts
Original file line number Diff line number Diff line change
@@ -1,22 +1,60 @@
import '@fortawesome/fontawesome-free/css/all.css'
import 'vuetify/styles'
import {createVuetify, ThemeDefinition} from 'vuetify'
import {aliases, fa} from 'vuetify/iconsets/fa-svg';

const glimpseTheme: ThemeDefinition = {
dark: true,
colors: {
background: "#2f3a4f"
}
}
import 'vuetify/styles';
import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader
import { createVuetify } from 'vuetify';
import { VNumberInput } from 'vuetify/labs/VNumberInput';
import { aliases, mdi } from 'vuetify/iconsets/mdi';

export default createVuetify({
components: {
VNumberInput
},
icons: {
defaultSet: 'fa',
defaultSet: 'mdi',
aliases,
sets: { fa }
sets: {
mdi,
},
},
theme: {
defaultTheme: 'dark'
},
defaults: {
VBtn: {
variant: "outlined",
class: "text-none",
},
VChip: {
label: true,
variant: "outlined",
},
VColorPicker: {
hideInputs: true,
modes: ["hex", "rgb"],
},
VCombobox: {
clearable: true,
variant: "outlined",
},
VExpansionPanels: {
style: {
width: "400px",
},
variant: "accordion"
},
VNumberInput: {
variant: "outlined",
step: 0.5
},
VSelect: {
variant: "outlined"
},
VSwitch: {
inset: true,
color: "primary",
},
VTextField: {
clearable: true,
variant: "outlined"
}
}
})
Binary file added apps/graphics/src/assets/espn/FullScreen.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/graphics/src/assets/espn/Swiss721Thin.ttf
Binary file not shown.
Binary file added apps/graphics/src/assets/espn/playerBio.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
168 changes: 140 additions & 28 deletions apps/graphics/src/browser-common/replicants.ts

Large diffs are not rendered by default.

17 changes: 17 additions & 0 deletions apps/graphics/src/common/Credit.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
export class Credit {
public people: string[];
public peopleColor: string;
public peopleSize: number;
public title: string;
public titleColor: string;
public titleSize: number;

public constructor() {
this.people = [];
this.peopleColor = "";
this.peopleSize = 0;
this.title = "";
this.titleColor = "";
this.titleSize = 0;
}
}
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div>
<n-checkbox class="ml-10" v-model:checked="showPenalties"
v-if="replicants.gameSettings.style.value === 'espn' || replicants.gameSettings.style.value === 'rpitv-style7'">
v-if="replicants.gameSettings.style.value !== 'football'">
Show Penalties
</n-checkbox>
<n-grid :cols="2" :x-gap="10" :y-gap="10">
Expand All @@ -17,7 +17,7 @@
<h2>Global</h2>
<AnnouncementsSection v-model:announcements="globalMessages" :global-announcements="true"/>
</n-grid-item>
<n-grid-item v-if="(replicants.gameSettings.style.value === 'espn' || replicants.gameSettings.style.value === 'rpitv-style7') &&
<n-grid-item v-if="(replicants.gameSettings.style.value !== 'football') &&
replicants.gameSettings.periods.shootouts.value">
<h2>Shootouts</h2>
<Shootouts/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,14 @@
<n-data-table
:columns="tableCols"
:data="tableData"
:row-key="(row) => row.id"
:row-key="(row: AnnouncementRow) => row.id"
:summary="createFooter"
@update:checked-row-keys="(newSelectedRows) => selectedRows = newSelectedRows"/>
@update:checked-row-keys="(newSelectedRows: RowKey[]) => selectedRows = newSelectedRows"/>
</div>
<h4>Quickplay Buttons</h4>
<div v-if="!globalAnnouncements" class="quickplay">
<!--Hockey-->
<span v-if="replicants.gameSettings.style.value === 'espn' || replicants.gameSettings.style.value === 'rpitv-style7'">
<span v-if="replicants.gameSettings.style.value !== 'football'">
<NButton @click="addAnnouncement('Power Play', '2:00')">2:00 Power Play</NButton>
<NButton @click="addAnnouncement('Power Play', '5:00')">5:00 Power Play</NButton>
<NButton @click="addAnnouncement('Man Up', '0:30')">0:30 Man Up</NButton>
Expand All @@ -29,7 +29,7 @@
<NButton @click="addAnnouncement('Timeout', '')">Timeout</NButton>
</div>
<div v-else>
<span v-if="replicants.gameSettings.style.value === 'espn' || replicants.gameSettings.style.value === 'rpitv-style7'">
<span v-if="replicants.gameSettings.style.value !== 'football'">
<NButton @click="addAnnouncement('Official Review', '')">Official Review</NButton>
<NButton @click="addAnnouncement('Delayed Penalty', '')">Delayed Penalty</NButton>
<NButton @click="addAnnouncement('Empty Net', '')">Empty Net</NButton>
Expand Down
2 changes: 1 addition & 1 deletion apps/graphics/src/dashboard/clock/ClockPeriodControl.vue
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
:min="1"
:max="sliderMaxValue"
v-model:value="currentPeriod"
:format-tooltip="(val) => formatPeriod(val, periodCount, overtimeCount, areShootoutsEnabled)"
:format-tooltip="(val: number) => formatPeriod(val, periodCount, overtimeCount, areShootoutsEnabled)"
:marks="sliderMarks"
/>
<n-button
Expand Down
4 changes: 2 additions & 2 deletions apps/graphics/src/dashboard/command-palette/ComandPalette.vue
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,8 @@ const palette = ref<HTMLElement|null>(null);
const isScoreboardShown = replicants.scoreboard.visible;
function showScoreboard() {
if (replicants.gameSettings.style.value === "football" && replicants.lowerThird.bug.value)
replicants.lowerThird.bug.value = false;
if (replicants.gameSettings.style.value === "football" && replicants.lowerThird.bug.show.value)
replicants.lowerThird.bug.show.value = false;
isScoreboardShown.value = !isScoreboardShown.value;
}
Expand Down
9 changes: 9 additions & 0 deletions apps/graphics/src/dashboard/fullscreen.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { createApp } from 'vue';
import App from './fullscreen/main.vue';
import {pinia} from "./pinia";
import vuetify from "../../plugins/vuetify";

const app = createApp(App);
app.use(pinia);
app.use(vuetify);
app.mount('#app');
43 changes: 43 additions & 0 deletions apps/graphics/src/dashboard/fullscreen/Editors/CreditsEditor.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<template>
<v-expansion-panels>
<v-expansion-panel title="Credits">
<v-expansion-panel-text>
<div class="btns">
<v-btn @click="fullscreenCredits.credit.value = [...fullscreenCredits.credit.value, new Credit()]">Add Credit</v-btn>
<v-spacer />
<v-btn @click="fullscreenCredits.credit.value = []" color="red" :disabled="fullscreenCredits.credit.value.length === 0">Delete All Credits</v-btn>
</div>
</v-expansion-panel-text>
</v-expansion-panel>
<v-expansion-panel v-for="(credit, i) in fullscreenCredits.credit.value" :key="i" :title="`Credit ${i + 1}`">
<v-expansion-panel-text>
<v-combobox label="Title" :items="titles" v-model="credit.title" />
<v-number-input label="Title Size" v-model="credit.titleSize" />
<v-color-picker v-model="credit.titleColor" />
<v-text-field label="Title Color" v-model="credit.titleColor" width="300" />
<v-divider />
<br>
<v-combobox label="People" multiple chips v-model="credit.people" />
<v-number-input label="People Size" v-model="credit.peopleSize" />
<v-color-picker v-model="credit.peopleColor" />
<v-text-field label="People Color" v-model="credit.peopleColor" width="300" />
<v-btn color="red" @click="fullscreenCredits.credit.value = fullscreenCredits.credit.value.toSpliced(i, 1)" >Delete Credit</v-btn>
</v-expansion-panel-text>
</v-expansion-panel>
</v-expansion-panels>
</template>

<script setup lang="ts">
import { loadReplicants } from "../../../browser-common/replicants";
import { Credit } from "../../../common/Credit";
const replicants = await loadReplicants();
const fullscreenCredits = replicants.fullscreen.credits;
const titles = ["Director", "Producer", "Replay", "Graphics", "Camera Operator"];
</script>

<style scoped lang="scss">
.btns {
display: flex;
}
</style>
41 changes: 41 additions & 0 deletions apps/graphics/src/dashboard/fullscreen/Fullscreen.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<template>
<div class="table">
<v-table>
<thead>
<tr>
<th>Name</th>
<th>Preview</th>
<th>Editor</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td><h2>Credits</h2></td>
<td><iframe :src="previewLocation + '?credits'" /></td>
<td><CreditsEditor /></td>
<td><v-switch v-model="replicants.fullscreen.credits.show.value" /></td>
</tr>
</tbody>
</v-table>
<br>
</div>
</template>

<script setup lang="ts">
import { loadReplicants } from "../../browser-common/replicants";
import { computed, ref } from "vue";
import CreditsEditor from "./Editors/CreditsEditor.vue";
const replicants = await loadReplicants();
const previewLocation = `/bundles/graphics/graphics/preview.html`;
</script>

<style scoped lang="scss">
iframe {
border: none;
aspect-ratio: 16/9;
width: 550px;
background-color: white;
}
</style>
20 changes: 20 additions & 0 deletions apps/graphics/src/dashboard/fullscreen/main.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<template>
<n-config-provider :theme="darkTheme">
<Suspense>
<Fullscreen />
<template #fallback>
Loading...
</template>
</Suspense>
</n-config-provider>
</template>

<script setup lang="ts">
import {NConfigProvider, darkTheme} from "naive-ui";
import Fullscreen from "./Fullscreen.vue";
</script>

<style scoped>
</style>
2 changes: 1 addition & 1 deletion apps/graphics/src/dashboard/game-settings/ApiSettings.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<h1 @click="openApiLink" title="Open API Docs" id="h1ApiLabel">API</h1>
<h1 @click="openApiLink" title="Open API Docs" id="h1ApiLabel">API (<u>Docs</u>)</h1>
<label>Enable API? </label>
<n-checkbox v-model:checked="replicants.gameSettings.api.enabled.value"/>
<div v-if="replicants.gameSettings.api.enabled.value">
Expand Down
12 changes: 2 additions & 10 deletions apps/graphics/src/dashboard/game-settings/GameSettingsControl.vue
Original file line number Diff line number Diff line change
Expand Up @@ -44,16 +44,8 @@ const styles = ref([
value: 'espn'
},
{
label: 'RPI TV (Modern)',
value: 'rpitv-modern'
},
{
label: 'RPI TV (Classic)',
value: 'rpitv-classic'
},
{
label: 'RPI TV (Style 7)',
value: 'rpitv-style7'
label: 'RPI TV',
value: 'rpitv'
},
{
label: 'Football',
Expand Down
Loading

0 comments on commit c727523

Please sign in to comment.