Add Tooltips, Extra Info to Display, Between text in lobby,

RisingEmpires · Oct 9, 2023 · 1ab91e6 · 1ab91e6
1 parent 023cc66
commit 1ab91e6
Show file tree

Hide file tree

Showing 6 changed files with 145 additions and 17 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "graphics": [
       {
         "file": "index.html",
+        "title": "Ingame Score Display",
         "width": 1920,
         "height": 1080,
         "singleInstance": false
@@ -96,7 +97,9 @@
     "react": "*",
     "react-dom": "*",
     "react-select": "^5.7.3",
+    "react-tooltip": "^5.21.5",
     "ts-node": "*",
+    "tw-elements-react": "^1.0.0-alpha1",
     "use-nodecg": "^0.4.1-2"
   },
   "devDependencies": {
@@ -107,8 +110,8 @@
     "@parcel/validator-typescript": "*",
     "@types/node": "*",
     "concurrently": "*",
-    "nodecg-cli": "^8.6.8",
     "glob": "10.3.0",
+    "nodecg-cli": "^8.6.8",
     "nodemon": "*",
     "trash-cli": "*",
     "typescript": "*",

diff --git a/src/dashboard/Panel.tsx b/src/dashboard/Panel.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { useReplicant } from 'use-nodecg';
+import { Tooltip as ReactTooltip } from "react-tooltip";
 
 export function Panel() {
 
@@ -12,6 +13,10 @@ export function Panel() {
 	const [showSpoilerOverlay, set_showSpoilerOverlay] = useReplicant<boolean>('showSpoilerOverlay', true);
 	const [betweenText, set_betweenText] = useReplicant<string>('betweenText', '')
 
+	const [extraInfo1, set_extraInfo1] = useReplicant<string>('extraInfo1', '')
+	const [extraInfo2, set_extraInfo2] = useReplicant<string>('extraInfo2', '')
+
+
 	const FlipScore = (event: any) => {
 		event.preventDefault();
 		console.log("Flipping scores")
@@ -28,17 +33,50 @@ export function Panel() {
 	return (
 		<div className='m-2'>
 			<div>
-				<label>Between Text</label>
+				<label className='extraInfo'><span className='text-3xl align-middle'>🛈</span>Round Info</label>
+				<input type="text" placeholder="Extra Info 1" name="extraInfo1" value={extraInfo1} onChange={(event) => {
+					set_extraInfo1(event.target.value)
+				}} />
+				<input type="text" placeholder="Extra Info 2" name="extraInfo2" value={extraInfo2} onChange={(event) => {
+					set_extraInfo2(event.target.value)
+				}} />
+				<ReactTooltip
+					anchorSelect=".extraInfo"
+					id="tooltip1"
+					place="bottom"
+					//@ts-ignore
+					content={<span>2 Boxes for Extra Info displayed in the Lobby Score</span>}
+				/>
+			</div>
+
+			<div>
+				<label className='betweenText'><span className='text-3xl align-middle'>🛈</span>Between Text</label>
 				<input type="text" placeholder="Bo3" name="betweenText" value={betweenText} onChange={(event) => {
 					set_betweenText(event.target.value)
 				}} />
-				<div className='flex flew-row px-12'>
-					<div className='flex flew-row w-1/2 text-center justify-center items-center'>
-						<label className="text-xl pr-4">Flip Score</label>
-						<input type='checkbox' checked={flipScore} onChange={(() => set_flipScore(!flipScore))} className="w-6 h-6" />
+
+				<ReactTooltip
+					anchorSelect=".betweenText"
+					id="tooltip1"
+					place="bottom"
+					//@ts-ignore
+					content={<span>The text between the scores InGame. Can be anything</span>}
+				/>
+
+				<div className='flex flew-row px-6'>
+					<div className='flipScore flex flew-row w-4/6 pr-6 text-center justify-center items-center'>
+						<label className="text-xl w-full"><span className='text-3xl align-middle'>🛈</span> Flip Score</label>
+						<input type='checkbox' checked={flipScore} onChange={(() => set_flipScore(!flipScore))} className="w-6 h-6 pr-4" />
+						<ReactTooltip
+							anchorSelect=".flipScore"
+							id="tooltip1"
+							place="bottom"
+							//@ts-ignore
+							content={<span>Flips the Score Displayed in the Ingame Score Displays. <br /> Doesn't affect the Lobby Score</span>}
+						/>
 					</div>
 
-					<button onClick={FlipScore} className="swapButton w-1/2" name="swapScore">
+					<button onClick={FlipScore} className="swapButton w-2/6" name="swapScore">
 						Flip Score
 					</button>
 				</div>
@@ -66,16 +104,30 @@ export function Panel() {
 			<hr className='m-4' />
 
 			<div className=''>
-				<label>Score Visible </label>
+				<label className='scoreVisible'><span className='text-3xl align-middle'>🛈</span>Score Visible </label>
+				<ReactTooltip
+					anchorSelect=".scoreVisible"
+					id="tooltip1"
+					place="bottom"
+					//@ts-ignore
+					content={<span>Shows or Hides the score in the Ingame Score Displays.<br /> Doesn't affect the Lobby Score<br />Useful when not casting a Series</span>}
+				/>
 				<input type='checkbox' checked={showScore} onChange={(() => set_showScore(!showScore))} />
 				<button onClick={(() => set_showScore(!showScore))} className="toggleButton w-36" name="toggleButton">
 					Toggle Score
 				</button>
 			</div>
 			<hr className='m-4' />
-			<div>
-				<label>Show Spoiler Overlay </label>
+			<div className='spoilerOverlay'>
+				<label><span className='text-3xl align-middle'>🛈</span>Show Spoiler Overlay </label>
 				<input type='checkbox' checked={showSpoilerOverlay} onChange={(() => set_showSpoilerOverlay(!showSpoilerOverlay))} />
+				<ReactTooltip
+					anchorSelect=".spoilerOverlay"
+					id="tooltip1"
+					place="bottom"
+					//@ts-ignore
+					content={<span>Shows or Hides the "Spoiler Overlay" in the bottom right <br />in the 1v1 Ingame Scene.<br /> Covers the speed controls which can spoil that a game <br />will end soon</span>}
+				/>
 			</div>
 		</div>
 	)

diff --git a/src/graphics/Index.tsx b/src/graphics/Index.tsx
@@ -36,8 +36,8 @@ export function Index() {
 			}} />
 
 				<div>
-					<ScoreDisplay score={leftScore} rotate={true} className={flipScore ? 'score-rightScore' : 'score-leftScore'} />
-					<ScoreDisplay score={rightScore} rotate={true} className={flipScore ? 'score-leftScore' : 'score-rightScore'} />
+					<ScoreDisplay score={leftScore} rotate={true} className={`score-scoreContainer ${flipScore ? 'score-rightScore' : 'score-leftScore'}`} />
+					<ScoreDisplay score={rightScore} rotate={true} className={`score-scoreContainer ${flipScore ? 'score-leftScore' : 'score-rightScore'}`} />
 				</div>
 
 				<h1 className='score-betweenText'>{betweenText}</h1> </div> : <> </>}

diff --git a/src/graphics/LobbyScore.tsx b/src/graphics/LobbyScore.tsx
@@ -15,6 +15,9 @@ export function LobbyScore() {
 	const [betweenText, set_betweenText] = useReplicant<string>('betweenText', '')
 	const [flipScore, set_flipScore] = useReplicant<boolean>('flipScore', false);
 
+	const [extraInfo1, set_extraInfo1] = useReplicant<string>('extraInfo1', '')
+	const [extraInfo2, set_extraInfo2] = useReplicant<string>('extraInfo2', '')
+
 	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(<></>)
@@ -29,10 +32,11 @@ export function LobbyScore() {
 	return (
 		<>
 			{themeDiv}
-			<div>
-				<ScoreDisplay score={leftScore} rotate={true} className={'lobbyScore-leftScore'} />
-				<ScoreDisplay score={rightScore} rotate={true} className={'lobbyScore-rightScore'} />
-			</div>
+			<div className='lobbyScore-extraInfo lobbyScore-extraInfo1'>{extraInfo1}</div>
+			<div className='lobbyScore-extraInfo lobbyScore-extraInfo2'>{extraInfo2}</div>
+			<div className='lobbyScore-betweenText'>{betweenText}</div>
+			<ScoreDisplay score={leftScore} rotate={true} className={'lobbyScore-scoreContainer lobbyScore-leftScore'} />
+			<ScoreDisplay score={rightScore} rotate={true} className={'lobbyScore-scoreContainer lobbyScore-rightScore'} />
 		</>
 	);
 }
diff --git a/src/graphics/ScoreDisplay.tsx b/src/graphics/ScoreDisplay.tsx
@@ -10,7 +10,7 @@ type ScoreDisplayProps = {
 
 export const ScoreDisplay = ({ score, rotate, className }: ScoreDisplayProps) => {
     return (
-        <div className={`score-scoreContainer ${className}`}>
+        <div className={className}>
             <h1>{score}</h1>
             <img src={GoldenCircle} className={rotate ? 'score-goldCircle score-rotate' : 'score-goldCircle'}/>
         </div>