RTAiJS2024用配色変更、ポケモン用レイアウト追加 (#749)

* RTAiJS2024用配色変更、ポケモン用レイアウト追加

* lintfix

* 画像ファイル系の配置場所間違えを修正

package.json

@@ -114,6 +114,14 @@
 				"headerColor": "#00BEBE",
 				"workspace": "2-misc"
 			},
+			{
+				"name": "poke",
+				"title": "ポケモン捕獲数",
+				"file": "poke.html",
+				"width": 2,
+				"headerColor": "#00BEBE",
+				"workspace": "2-misc"
+			},
 			{
 				"name": "camera",
 				"title": "カメラ",

schemas/poke.json

@@ -0,0 +1,4 @@
+{
+	"$schema": "http://json-schema.org/draft-07/schema",
+	"type": "number"
+}

src/browser/dashboard/views/poke.tsx

@@ -0,0 +1,50 @@
+import "../styles/global";
+
+import CssBaseline from "@mui/material/CssBaseline";
+import {useReplicant} from "../../use-replicant";
+import {useState, useEffect} from "react";
+import {render} from "../../render";
+
+const pokeRep = nodecg.Replicant("poke");
+
+const App = () => {
+	const poke = useReplicant("poke");
+	const [pokeState, setPoke] = useState(0);
+
+	useEffect(() => {
+		if (poke) {
+			setPoke(poke);
+		}
+	}, [poke]);
+
+	return (
+		<div
+			style={{
+				padding: "8px",
+			}}
+		>
+			<label>ポケモン捕獲数</label>
+			<input
+				value={pokeState}
+				type='number'
+				onChange={(e) => {
+					setPoke(Number(e.target.value));
+				}}
+			/>
+			<button
+				onClick={() => {
+					pokeRep.value = pokeState;
+				}}
+			>
+				更新
+			</button>
+		</div>
+	);
+};
+
+render(
+	<>
+		<CssBaseline />
+		<App />
+	</>,
+);

src/browser/graphics/components/game-info/vertical.tsx

@@ -9,11 +9,11 @@ import {GameTimer} from "../lib/timer";
 const gradientBackground = `
 	linear-gradient(
 		to right,
-		rgba(40, 15, 20, 0),
-		rgba(40, 15, 20, 0.4) 20%,
-		rgba(40, 15, 20, 0.5) 50%,
-		rgba(40, 15, 20, 0.4) 80%,
-		rgba(40, 15, 20, 0) 100%
+		rgba(0, 40, 110, 0),
+		rgba(0, 40, 110, 0.4) 20%,
+		rgba(0, 40, 110, 0.5) 50%,
+		rgba(0, 40, 110, 0.4) 80%,
+		rgba(0, 20, 60, 0) 100%
 	)
 `;
 

src/browser/graphics/styles/colors.ts

@@ -34,15 +34,15 @@ export const border = {
 
 export const background = {
 	/** カメラ枠 背景 */
-	camera: "rgba(40, 15, 20, 0.4)",
+	camera: "rgba(0, 20, 60, 0.4)",
 	/** スポンサー枠 背景 */
-	sponsor: "rgba(40, 15, 20, 0.4)",
+	sponsor: "rgba(0, 20, 60, 0.4)",
 	/** 走者名枠、解説者名枠 背景 */
-	name: "rgba(40, 15, 20, 0.2)",
+	name: "rgba(0, 20, 60, 0.2)",
 	/** 下部帯 背景 */
 	omnibar: "rgb(230,230,230)",
 	/** Twitter枠 背景 */
-	tweet: "rgba(40, 15, 20, 0.4)",
+	tweet: "rgba(0, 20, 60, 0.4)",
 	/** エンドロール枠 背景 */
 	credit: "rgba(37, 48, 58, 0.8)",
 };

src/browser/graphics/views/game-scene/10x9-2-poke.tsx

@@ -0,0 +1,34 @@
+import {TemplateH300} from "./templates/H300";
+import {ThinText} from "../../components/lib/text";
+import {background, border} from "../../styles/colors";
+import {useReplicant} from "../../../use-replicant";
+
+export default () => {
+	const poke = useReplicant("poke");
+
+	return (
+		<TemplateH300>
+			<div
+				style={{
+					height: "50px",
+					borderRadius: "7px",
+					borderColor: border.name,
+					borderStyle: "solid",
+					borderWidth: "2px",
+					display: "grid",
+					gridTemplateColumns: "1fr",
+					placeContent: "stretch",
+					placeItems: "center",
+					background: background.name,
+					position: "absolute",
+					fontSize: "24px",
+					top: "649px",
+					left: "1002px",
+					width: "690px",
+				}}
+			>
+				<ThinText>捕獲数 {String(poke).padStart(3, "0")}/150</ThinText>
+			</div>
+		</TemplateH300>
+	);
+};

src/nodecg/replicants.d.ts

@@ -16,6 +16,7 @@ import {CameraName} from "./generated/camera-name";
 import {CameraState} from "./generated/camera-state";
 import {BidWar} from "./generated/bid-war";
 import {BidChallenge} from "./generated/bid-challenge";
+import {Poke} from "./generated/poke";
 
 import type {AccessToken} from "@twurple/auth";
 import {Runners} from "./generated/runners";
@@ -75,6 +76,7 @@ type ReplicantMap = {
 	"assets:interval-video": Assets[];
 	announcements: Announcements;
 	"playing-music": PlayingMusic;
+	poke: Poke;
 };
 
 export type {
@@ -105,4 +107,5 @@ export type {
 	BidChallenge,
 	Announcements,
 	PlayingMusic,
+	Poke,
 };