Changed Swap Score to Flip Score and made the dashboard nicer

RisingEmpires · Oct 1, 2023 · 709cfd0 · 709cfd0
1 parent 1e70604
commit 709cfd0
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 63 deletions.
diff --git a/src/dashboard/Panel.tsx b/src/dashboard/Panel.tsx
@@ -5,22 +5,17 @@ export function Panel() {
 
 	const [leftScore, set_leftScore] = useReplicant<number>('leftScore', 0);
 	const [rightScore, set_rightScore] = useReplicant<number>('rightScore', 0);
+
+	const [flipScore, set_flipScore] = useReplicant<boolean>('flipScore', false);
+
 	const [showScore, set_showScore] = useReplicant<boolean>('showScore', false);
 	const [showSpoilerOverlay, set_showSpoilerOverlay] = useReplicant<boolean>('showSpoilerOverlay', true);
 	const [betweenText, set_betweenText] = useReplicant<string>('betweenText', '')
 
-	const handleSubmit = (event) => {
-		event.preventDefault();
-		set_leftScore(event.target.leftScore.value)
-		set_leftScore(event.target.rightScore.value)
-	}
-
-	const swapScore = (event: any) => {
+	const FlipScore = (event: any) => {
 		event.preventDefault();
-		console.log("Swapping scores")
-		let temp = leftScore
-		set_leftScore(rightScore)
-		set_rightScore(temp)
+		console.log("Flipping scores")
+		set_flipScore(!flipScore)
 	}
 
 	const resetScore = (event: any) => {
@@ -31,73 +26,57 @@ export function Panel() {
 	}
 
 	return (
-		<>
+		<div className='m-2'>
 			<div>
 				<label>Between Text</label>
 				<input type="text" placeholder="Bo3" name="betweenText" value={betweenText} onChange={(event) => {
 					set_betweenText(event.target.value)
 				}} />
-			</div>
-			<hr />
-			<div>
-				<label>Left Score: </label>
-				<input type="number"
-					min={0}
-					max={9}
-					placeholder="0"
-					name="leftScore"
-					value={leftScore ?? 0}
-					onChange={(event) => {
-						set_leftScore(parseInt(event.target.value, 10));
-					}} />
-				<div style={{
-					padding: '5px 0px',
-					display: 'flex',
-					flexDirection: 'row',
-					justifyContent: 'center',
-					width: '100%'
-				}}>
-					<hr style={{
-						margin: '2rem',
-						width: '33.3%'
-					}} />
-					<button onClick={swapScore} className="swapButton" name="swapScore" style={{margin:'2px 2px'}}>
-						Swap Score
-					</button>
-					<button onClick={resetScore} className="toggleButton" name="resetScore" style={{margin:'2px 2px'}}>
-						Reset Score
+				<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" />
+					</div>
+
+					<button onClick={FlipScore} className="swapButton w-1/2" name="swapScore">
+						Flip Score
 					</button>
-					<hr style={{
-						margin: '2rem',
-						width: '33.3%'
-					}} />
 				</div>
-				<label>Right Score: </label>
-				<input type="number"
-					min={0}
-					max={9}
-					placeholder="0"
-					name="rightScore"
-					value={rightScore ?? 0}
-					onChange={(event) => {
-						set_rightScore(parseInt(event.target.value, 10));
-					}} />
+			</div>
+			<hr className='m-4' />
+
+			<div className='flex flex-row justify-evenly items-center'>
+				<div className='flex flex-col w-1/4 justify-center items-center'>
+					<button className='w-12 h-8 bg-blue-500 hover:bg-blue-700 text-white font-bold rounded' onClick={() => { leftScore >= 9 ? '' : set_leftScore(leftScore + 1) }}>+</button>
+					<h1 className='text-center text-6xl'>{leftScore}</h1>
+					<button className='w-12 h-8 bg-blue-500 hover:bg-blue-700 text-white font-bold rounded' onClick={() => { leftScore <= 0 ? '' : set_leftScore(leftScore - 1) }}>-</button>
+				</div>
+
+				<button onClick={resetScore} className="w-1/3 h-16 px-4 toggleButton" name="resetScore">
+					Reset Score
+				</button>
+
+				<div className='flex flex-col w-1/4 items-center'>
+					<button className='w-12 h-8 bg-blue-500 hover:bg-blue-700 text-white font-bold rounded' onClick={() => { rightScore >= 9 ? '' : set_rightScore(rightScore + 1) }}>+</button>
+					<h1 className='text-center text-6xl'>{rightScore}</h1>
+					<button className='w-12 h-8 bg-blue-500 hover:bg-blue-700 text-white font-bold rounded' onClick={() => { rightScore <= 0 ? '' : set_rightScore(rightScore - 1) }}>-</button>
+				</div>
 			</div>
 
-			<hr />
+			<hr className='m-4' />
 
 			<div className=''>
 				<label>Score Visible </label>
-				<input type='checkbox' checked={showScore} onChange={(() => set_showScore(!showScore))}/>
+				<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 />
+			<hr className='m-4' />
 			<div>
 				<label>Show Spoiler Overlay </label>
-				<input type='checkbox' checked={showSpoilerOverlay} onChange={(() => set_showSpoilerOverlay(!showSpoilerOverlay))}/> 
+				<input type='checkbox' checked={showSpoilerOverlay} onChange={(() => set_showSpoilerOverlay(!showSpoilerOverlay))} />
 			</div>
-		</>
+		</div>
 	)
 }
diff --git a/src/dashboard/panel.html b/src/dashboard/panel.html
@@ -3,6 +3,7 @@
 
 <head>
 	<meta charset="UTF-8" />
+	<script src="https://cdn.tailwindcss.com"></script>
 	<style>
 		body {
 			font-family: sans-serif;
@@ -40,7 +41,7 @@
 		}
 
 		.swapButton {
-			width: 100%;
+			width: 50%;
 			background-color: #4CAF50;
 			color: white;
 			padding: 14px 20px;

diff --git a/src/graphics/Index.tsx b/src/graphics/Index.tsx
@@ -13,6 +13,7 @@ export function Index() {
 	const [showScore, set_showScore] = useReplicant<boolean>('showScore', false);
 	const [showSpoilerOverlay, set_showSpoilerOverlay] = useReplicant<boolean>('showSpoilerOverlay', true);
 	const [betweenText, set_betweenText] = useReplicant<string>('betweenText', '')
+	const [flipScore, set_flipScore] = useReplicant<boolean>('flipScore', false);
 
 	return (
 		<>
@@ -23,8 +24,8 @@ export function Index() {
 			}} />
 
 			<div>
-				<ScoreDisplay score={leftScore} rotate={true} className={'leftScore'}/>
-				<ScoreDisplay score={rightScore} rotate={true} className={'rightScore'}/>
+				<ScoreDisplay score={leftScore} rotate={true} className={flipScore ? 'rightScore' : 'leftScore'}/>
+				<ScoreDisplay score={rightScore} rotate={true} className={flipScore ? 'leftScore' : 'rightScore'}/>
 			</div>
 
 			<h1 className='betweenText'>{betweenText}</h1> </div> : <> </>}