Skip to content

Commit

Permalink
fix(ui): switches for playback, playground & stream (eesast#1695)
Browse files Browse the repository at this point in the history
  • Loading branch information
FranGuam authored Mar 30, 2024
1 parent 75afd74 commit a475600
Show file tree
Hide file tree
Showing 7 changed files with 215 additions and 353 deletions.
2 changes: 1 addition & 1 deletion src/app/ContestSite/Components/THUAI6/StreamNative.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const THUAI6: React.FC<StreamProps> = ({ url }) => {
const [student4Loc, setStudent4Loc] = useState<Loc>({ x: 0, y: 0 });
const [trickerLoc, setTrickerLoc] = useState<Loc>({ x: 0, y: 0 });
useEffect(() => {
const client = new AvailableServiceClient(url + ":8879");
const client = new AvailableServiceClient(url);
const request = new Message2Server.IDMsg();
request.setPlayerId(99);
client.tryConnection(
Expand Down
1 change: 0 additions & 1 deletion src/app/ContestSite/IntroPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ const IntroPage: React.FC<ContestProps> = ({ mode, user }) => {
contest_id: Contest_id,
},
});
console.log(totalTeamNumData);
const { data: totalMemberNumData } =
graphql.useGetTotalMemberNumSuspenseQuery({
variables: {
Expand Down
72 changes: 45 additions & 27 deletions src/app/ContestSite/PlaybackPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,48 @@ import { Suspense } from "react";
import styled from "styled-components";
import { ContestProps } from ".";
import ReactRouterPrompt from "react-router-prompt";
import NotImplemented from "./Components/NotImplemented";

const Container = styled.div`
height: calc(100vh - 72px);
width: 100%;
display: flex;
align-items: center;
justify-content: center;
`;

const PlaybackPage: React.FC<ContestProps> = ({ mode, user }) => {
const url = useUrl();
const Contest_id = url.query.get("contest");
const room_id = url.query.get("room");
const playback_speed = url.query.get("speed");

const { data: contestNameData, error: contestNameError } =
graphql.useGetContestNameSuspenseQuery({
variables: {
contest_id: Contest_id,
},
});
useEffect(() => {
if (contestNameError) {
message.error("获取比赛信息失败");
console.log(contestNameError.message);
}
});

const { data: contestSwitchData, error: contestSwitchError } =
graphql.useGetContestSwitchSubscription({
variables: {
contest_id: Contest_id,
},
});
useEffect(() => {
if (contestSwitchError) {
message.error("获取比赛状态失败");
console.log(contestSwitchError.message);
}
});

const {
data: scoreteamListData,
//loading: scoreteamListLoading,
Expand All @@ -42,23 +77,10 @@ const PlaybackPage: React.FC<ContestProps> = ({ mode, user }) => {
}
});

const getWebGLPath = (contest: string | null) => {
// TODO: 这里应该改成数据库查询
const sharedUrl = process.env.REACT_APP_STATIC_URL! + "/public/WebGL/";
let projectUrl = sharedUrl + "THUAI6/";
let projectName = "THUAI6_WebGL";
if (contest === "19cece8f-3cfa-4098-9cbe-cbf2b5f50ebe") {
projectUrl = sharedUrl + "Jump/";
projectName = "JumpJump-Build";
}
if (contest === "b4e3f620-49f7-4883-ba0f-81cbfdcf6196") {
projectUrl = sharedUrl + "THUAI7/";
projectName = "interface_localExecutable";
}
return { projectUrl, projectName };
};

const { projectUrl, projectName } = getWebGLPath(Contest_id);
const projectUrl =
process.env.REACT_APP_STATIC_URL! +
`/public/WebGL/${contestNameData?.contest_by_pk?.name ?? "Jump"}/`;
const projectName = "Playback";

const handleCacheControl = (url: string) => {
if (url.match(/\.data/) || url.match(/\.wasm/) || url.match(/\.bundle/)) {
Expand Down Expand Up @@ -159,14 +181,6 @@ const PlaybackPage: React.FC<ContestProps> = ({ mode, user }) => {
}
};

const Container = styled.div`
height: calc(100vh - 72px);
width: 100%;
display: flex;
align-items: center;
justify-content: center;
`;

const Loading = () => {
return (
<Container>
Expand All @@ -175,7 +189,7 @@ const PlaybackPage: React.FC<ContestProps> = ({ mode, user }) => {
);
};

return (
return contestSwitchData?.contest_by_pk?.playback_switch ? (
<Layout>
<Row>
{isLoaded === false && (
Expand Down Expand Up @@ -209,7 +223,7 @@ const PlaybackPage: React.FC<ContestProps> = ({ mode, user }) => {
requestFullscreen(true);
}}
/>
{Contest_id === "19cece8f-3cfa-4098-9cbe-cbf2b5f50ebe" && (
{contestNameData?.contest_by_pk?.name === "THUAI6" && (
<FloatButton
description="加载回放"
badge={{ dot: true }}
Expand Down Expand Up @@ -322,6 +336,10 @@ const PlaybackPage: React.FC<ContestProps> = ({ mode, user }) => {
)}
</ReactRouterPrompt>
</Layout>
) : (
<Container>
<NotImplemented />
</Container>
);
};

Expand Down
69 changes: 58 additions & 11 deletions src/app/ContestSite/PlaygroundPage.tsx
Original file line number Diff line number Diff line change
@@ -1,21 +1,68 @@
import React from "react";
import React, { useEffect } from "react";
import { ContestProps } from ".";
import { useUrl } from "@/api/hooks/url";
import NotImplementedPage from "./Components/NotImplemented";
import * as graphql from "@/generated/graphql";
import NotImplemented from "./Components/NotImplemented";
import { message } from "antd";
import styled from "styled-components";

const Container = styled.div`
height: calc(100vh - 72px);
width: 100%;
display: flex;
align-items: center;
justify-content: center;
`;

const PlaygroundPage: React.FC<ContestProps> = ({ mode, user }) => {
const url = useUrl();
const contest = url.query.get("contest");

if (contest === "b4e3f620-49f7-4883-ba0f-81cbfdcf6196") {
return (
<div>
<h1>Playground for THUAI7, not implemented yet.</h1>
</div>
);
} else {
return <NotImplementedPage />;
}
const { data: contestNameData, error: contestNameError } =
graphql.useGetContestNameSuspenseQuery({
variables: {
contest_id: contest,
},
});
useEffect(() => {
if (contestNameError) {
message.error("获取比赛信息失败");
console.log(contestNameError.message);
}
});

const { data: contestSwitchData, error: contestSwitchError } =
graphql.useGetContestSwitchSubscription({
variables: {
contest_id: contest,
},
});
useEffect(() => {
if (contestSwitchError) {
message.error("获取比赛状态失败");
console.log(contestSwitchError.message);
}
});

const projectUrl =
process.env.REACT_APP_STATIC_URL! +
`/public/WebGL/${contestNameData?.contest_by_pk?.name ?? "Jump"}/`;
const projectName = "Playground";

return contestSwitchData?.contest_by_pk?.playground_switch ? (
// TODO: Copy from PlaybackPage.tsx
<div>
<h1>Playground for THUAI7, not implemented yet.</h1>
<br />
<p>Project URL: {projectUrl}</p>
<br />
<p>Project Name: {projectName}</p>
</div>
) : (
<Container>
<NotImplemented />
</Container>
);
};

export default PlaygroundPage;
63 changes: 58 additions & 5 deletions src/app/ContestSite/StreamPage.tsx
Original file line number Diff line number Diff line change
@@ -1,22 +1,75 @@
import { useState } from "react";
import { useState, useEffect } from "react";
import React from "react";
import { useUrl } from "../../api/hooks/url";
import { ContestProps } from ".";
import THUAI6 from "./Components/THUAI6/StreamNative";
import * as graphql from "@/generated/graphql";
import { message } from "antd";
import styled from "styled-components";
import NotImplemented from "./Components/NotImplemented";

export interface StreamProps {
url: string;
}

const Container = styled.div`
height: calc(100vh - 72px);
width: 100%;
display: flex;
align-items: center;
justify-content: center;
`;

const StreamPage: React.FC<ContestProps> = ({ mode, user }) => {
const url = useUrl();
const Contest_id = url.query.get("contest");
const [streamUrl, setStreamUrl] = useState<string>("https://api.eesast.com");
const contest = url.query.get("contest");

const { data: contestNameData, error: contestNameError } =
graphql.useGetContestNameSuspenseQuery({
variables: {
contest_id: contest,
},
});
useEffect(() => {
if (contestNameError) {
message.error("获取比赛信息失败");
console.log(contestNameError.message);
}
});

const { data: contestSwitchData, error: contestSwitchError } =
graphql.useGetContestSwitchSubscription({
variables: {
contest_id: contest,
},
});
useEffect(() => {
if (contestSwitchError) {
message.error("获取比赛状态失败");
console.log(contestSwitchError.message);
}
});

const [streamUrl, setStreamUrl] = useState<string>(
"https://api.eesast.com:8879",
);
if (url.query.get("url") !== null) {
setStreamUrl("http://" + url.query.get("url"));
}
if (Contest_id === "211b9ac2-f004-489d-bd71-4bdde335b597")
return <THUAI6 url={streamUrl} />;

const Stream = (props: StreamProps) => {
if (contestNameData?.contest_by_pk?.name === "THUAI6")
return <THUAI6 url={props.url} />;
else return <NotImplemented />;
};

return contestSwitchData?.contest_by_pk?.stream_switch ? (
<Stream url={streamUrl} />
) : (
<Container>
<NotImplemented />
</Container>
);
};

export default StreamPage;
Loading

0 comments on commit a475600

Please sign in to comment.