Skip to content

Commit

Permalink
Update TeamGames to use NodeCG Themer
Browse files Browse the repository at this point in the history
  • Loading branch information
@Coow
Coow committed Nov 8, 2023
1 parent 36a024c commit 0e88aed
Show file tree
Hide file tree
Showing 3 changed files with 50 additions and 129 deletions.
37 changes: 28 additions & 9 deletions src/graphics/TeamGameIOU.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, { useEffect, useState } from 'react';
import { useReplicant } from 'use-nodecg';
//@ts-ignore
import StreamOverlay from './2v2IOU.png'
Expand All @@ -21,26 +21,42 @@ export function TeamGameIOU() {
const [showSpoilerOverlay, set_showSpoilerOverlay] = useReplicant<boolean>('showSpoilerOverlay', true);
const [betweenText, set_betweenText] = useReplicant<string>('betweenText', '')

const [flipScore, set_flipScore] = useReplicant<boolean>('flipScore', false);

//
const [leftName, set_leftName] = useReplicant<string>('leftName', '', { namespace: 'aoe-4-civ-draft' });
const [rightName, set_rightName] = useReplicant<string>('rightName', '', { namespace: 'aoe-4-civ-draft' });

const [extraInfo1, set_extraInfo1] = useReplicant<string>('extraInfo1', '')
const [extraInfo2, set_extraInfo2] = useReplicant<string>('extraInfo2', '')

//Used if you have the Aoe-4-team-games bundle
const [leftSideIcon, set_leftSideIcon] = useReplicant<DropdownOption>('leftSideIcon', { value: '', label: '' }, { namespace: 'aoe-4-team-games' });
const [rightSideIcon, set_rightSideIcon] = useReplicant<DropdownOption>('rightSideIcon', { value: '', label: '' }, { namespace: 'aoe-4-team-games' });
const [showIcons, set_showIcons] = useReplicant<boolean>('showIcons', true, { namespace: 'aoe-4-team-games' });

const [theme, set_theme] = useReplicant<{ value: string; label: string; }>('theme', { value: '../../../assets/nodecg-themer/themes/default.css', label: 'default' }, { namespace: 'nodecg-themer' });

const [themeDiv, set_themeDiv] = useState(<></>)

useEffect(() => {
console.log(theme)
if (!theme) return;
console.log(theme)
set_themeDiv(<link rel='stylesheet' type='text/css' href={theme.value} />)
}, [theme])

return (
<>
<img src={StreamOverlay} style={{
{themeDiv}
<img src={StreamOverlay} className="teamGameImprovedObserverUI-scoreboardOverlay" style={{
position: 'absolute',
width: '100vw',
height: '100vh'
}} />

<h1 className='teamName leftName'>{leftName}</h1>
<h1 className='teamName rightName'>{rightName}</h1>
<h1 className='teamGameImprovedObserverUI-teamName teamGameImprovedObserverUI-leftName'>{leftName}</h1>
<h1 className='teamGameImprovedObserverUI-teamName teamGameImprovedObserverUI-rightName'>{rightName}</h1>

{showScore ? <div>
<img src={ScoreboardOverlay} style={{
Expand All @@ -50,19 +66,22 @@ export function TeamGameIOU() {
}} />

<div>
<ScoreDisplay score={leftScore} rotate={true} className={'leftScore'} />
<ScoreDisplay score={rightScore} rotate={true} className={'rightScore'} />
<ScoreDisplay score={leftScore} rotate={true} className={`teamGameImprovedObserverUI-scoreContainer ${flipScore ? 'teamGameImprovedObserverUI-rightScore' : 'teamGameImprovedObserverUI-leftScore'}`} />
<ScoreDisplay score={rightScore} rotate={true} className={`teamGameImprovedObserverUI-scoreContainer ${flipScore ? 'teamGameImprovedObserverUI-leftScore' : 'teamGameImprovedObserverUI-rightScore'}`} />
</div>

<h1 className='betweenText'>{betweenText}</h1>
<h1 className='teamGameImprovedObserverUI-betweenText'>{betweenText}</h1>
</div> : <> </>}

{showIcons ? <div>
<img src={leftSideIcon.value} className='leftSideIcon' />
<img src={leftSideIcon.value} className='teamGameImprovedObserverUI-leftSideIcon' />

<img src={rightSideIcon.value} className='rightSideIcon' />
<img src={rightSideIcon.value} className='teamGameImprovedObserverUI-rightSideIcon' />

</div> : <> </>}

<h1 className='teamGameImprovedObserverUI-extraInfo teamGameImprovedObserverUI-extraInfo1 hidden absolute'>{extraInfo1}</h1>
<h1 className='teamGameImprovedObserverUI-extraInfo teamGameImprovedObserverUI-extraInfo2 hidden absolute'>{extraInfo2}</h1>
</>
);
}
111 changes: 0 additions & 111 deletions src/graphics/TeamGameNoUI.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,118 +4,7 @@
<head>
<meta charset="UTF-8" />
<style>
@font-face {
font-family: Monsterrat;
src: url('Montserrat.ttf');
}

body {
font-family: Monsterrat;
font-weight: 900;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}

.rotate {
animation: rotation 120s infinite linear;
}

@keyframes rotation {
from {
transform: rotate(0deg);
}

to {
transform: rotate(359deg);
}
}

.rightScore img {
animation-direction: reverse;
}

.leftScore {
position: absolute;
transform: translate(-50%, -50%);
top: 3.5%;
left: 44.7%;
}

.rightScore {
position: absolute;
transform: translate(50%, -50%);
top: 3.5%;
right: 44.7%;
}

.scoreContainer img {
width: 90px;
}

.scoreContainer {
color: white;
}

.scoreContainer h1 {
position: absolute;
transform: translate(-50%, -50%);
top: 23%;
text-shadow: 2px 2px 0px #000000;
left: 50%;
}

.betweenText {
color: white;
transform: translate(-50%, -50%);
position: absolute;
text-shadow: 2px 2px 0px #000000;
top: -0.1%;
left: 50%;
font-size: x-large;
}

.spoilerCover {
position: absolute;
width: 100vw;
height: 100vh;
}

.leftSideIcon {
width: 80px;
height: 80px;
transform: translate(-50%, -50%);
position: absolute;
top: 4%;
left: 26.5%;
}

.rightSideIcon {
width: 80px;
height: 80px;
transform: translate(50%, -50%);
position: absolute;
top: 4%;
right: 26.5%;
}

.teamName {
text-transform: uppercase;
color: white;
top: 0%;
}

.leftName {
transform: translate(-50%, -50%);
position: absolute;
left: 35.9%;
}

.rightName {
transform: translate(50%, -50%);
position: absolute;
right: 35.9%;
}
</style>
</head>

Expand Down
31 changes: 22 additions & 9 deletions src/graphics/TeamGameNoUI.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, { useEffect, useState } from 'react';
import { useReplicant } from 'use-nodecg';
//@ts-ignore
import StreamOverlay from './2v2NO_IOU.png'
Expand Down Expand Up @@ -30,32 +30,45 @@ export function TeamGameNoUI() {
const [rightSideIcon, set_rightSideIcon] = useReplicant<DropdownOption>('rightSideIcon', { value: '', label: '' }, { namespace: 'aoe-4-team-games' });
const [showIcons, set_showIcons] = useReplicant<boolean>('showIcons', true, { namespace: 'aoe-4-team-games' });

const [flipScore, set_flipScore] = useReplicant<boolean>('flipScore', false);

const [theme, set_theme] = useReplicant<{ value: string; label: string; }>('theme', { value: '../../../assets/nodecg-themer/themes/default.css', label: 'default' }, { namespace: 'nodecg-themer' });

const [themeDiv, set_themeDiv] = useState(<></>)

useEffect(() => {
console.log(theme)
if (!theme) return;
console.log(theme)
set_themeDiv(<link rel='stylesheet' type='text/css' href={theme.value} />)
}, [theme])

return (
<>
<img src={StreamOverlay} style={{
{themeDiv}
<img src={StreamOverlay} className='teamGame-scoreboardOverlay' style={{
position: 'absolute',
width: '100vw',
height: '100vh'
}} />

<h1 className='teamName leftName'>{leftName}</h1>
<h1 className='teamName rightName'>{rightName}</h1>
<h1 className='teamGame-teamName teamGame-leftName'>{leftName}</h1>
<h1 className='teamGame-teamName teamGame-rightName'>{rightName}</h1>

{showScore ? <div>

<div>
<ScoreDisplay score={leftScore} rotate={true} className={'leftScore'} />
<ScoreDisplay score={rightScore} rotate={true} className={'rightScore'} />
<ScoreDisplay score={leftScore} rotate={true} className={`teamGame-scoreContainer ${flipScore ? 'teamGame-rightScore' : 'teamGame-leftScore'}`} />
<ScoreDisplay score={rightScore} rotate={true} className={`teamGame-scoreContainer ${flipScore ? 'teamGame-leftScore' : 'teamGame-rightScore'}`} />
</div>

<h1 className='betweenText'>{betweenText}</h1>
<h1 className='teamGame-betweenText'>{betweenText}</h1>
</div> : <> </>}

{showIcons ? <div>
<img src={leftSideIcon.value} className='leftSideIcon' />
<img src={leftSideIcon.value} className='teamGame-leftSideIcon' />

<img src={rightSideIcon.value} className='rightSideIcon' />
<img src={rightSideIcon.value} className='teamGame-rightSideIcon' />

</div> : <> </>}
</>
Expand Down

0 comments on commit 0e88aed

Please sign in to comment.