Merge branch 'master' of https://github.com/debatecore/debate-tools i…

…nto 88-add-pnd-2024-motions
debatecore · Aug 15, 2024 · a8f9d06 · a8f9d06
2 parents feb1c9a + e0c0827
commit a8f9d06
Show file tree

Hide file tree

Showing 7 changed files with 393 additions and 92 deletions.
diff --git a/src/app/oxford-debate/page.tsx b/src/app/oxford-debate/page.tsx
@@ -69,6 +69,7 @@ export default function OxfordDebate() {
   const startspeech = useLang("startspeech");
   const stopspeech = useLang("stopspeech");
   const debateconfig = useLang("oxfordDebateConfiguration");
+  const debateFinishedEnthusiastic = useLang("debateFinishedEnthusiastic");
 
   const conf = useContext(DebateContext).conf;
 
@@ -103,7 +104,11 @@ export default function OxfordDebate() {
       <p className="uppercase text-neutral-500">{anoxfordformatdebate}</p>
       <div className="relative flex flex-row justify-center mt-4 py-4">
         {/*  */}
-        <div className="hidden lg:flex w-1/3 text-right flex-col items-end">
+        <div
+          className={`hidden lg:flex w-1/3 text-right flex-col items-end ${
+            stage === 8 && "opacity-[.15]"
+          }`}
+        >
           <h2 className="text-2xl">
             {debate.conf.proTeam || "Anonymous" || "The Proposition"}
           </h2>
@@ -118,8 +123,8 @@ export default function OxfordDebate() {
         {/*  */}
         {/*  */}
         {/*  */}
-        <div className="w-full lg:w-1/3 text-center flex flex-col space-y-2 items-center">
-          <div>
+        <div className="w-full lg:w-1/3 text-center flex flex-col space-y-2 items-center relative">
+          <div className={stage === 8 ? "opacity-[.15]" : ""}>
             <p className="text-neutral-500 uppercase">
               {!adVocem ? stage_strings[stage] : "ad vocem"}
             </p>
@@ -146,12 +151,24 @@ export default function OxfordDebate() {
             beepProtected={debate.conf.beepProtectedTime && !adVocem}
             protectedTime={debate.conf.endProtectedTime}
             protectStart={!!debate.conf.startProtectedTime}
+            moreClass={stage === 8 ? "opacity-[.15]" : ""}
           />
+          {/* debate finished */}
+          {stage === 8 && (
+            <div className="w-full h-full flex flex-col gap-5 justify-center items-center absolute">
+              <p className="text-3xl font-semibold">{debateFinishedEnthusiastic}</p>
+              <p className="animate-wiggle text-6xl">{"🎉"}</p>
+            </div>
+          )}
         </div>
         {/*  */}
         {/*  */}
         {/*  */}
-        <div className="hidden lg:flex w-1/3 text-left flex-col items-start">
+        <div
+          className={`hidden lg:flex w-1/3 text-left flex-col items-start ${
+            stage === 8 && "opacity-[.15]"
+          }`}
+        >
           <h2 className="text-2xl">
             {debate.conf.oppTeam || "Anonymous" || "The Opposition"}
           </h2>

diff --git a/src/components/Clock.tsx b/src/components/Clock.tsx
@@ -14,6 +14,7 @@ const Clock = (props: {
   beepProtected?: boolean;
   protectedTime?: number;
   protectStart?: boolean;
+  moreClass?: string;
 }) => {
   const [time, setTime] = useState<number>(props.maxTime);
   const refCircle = useRef<SVGCircleElement>(null);
@@ -35,7 +36,7 @@ const Clock = (props: {
   const overtime = useLang("overtime");
 
   const delayInMs = 1000;
-  const clockColorsTransitionDuration = "350ms"
+  const clockColorsTransitionDuration = "350ms";
   const fullvolume = 1; // useAudio volume range is 0-1
 
   useEffect(() => {
@@ -52,7 +53,9 @@ const Clock = (props: {
   useInterval(() => setTime(time - 1), props.running ? delayInMs : null);
   return (
     <>
-      <div className="aspect-square min-w-64 flex flex-col space-y-1 justify-center items-center relative select-none">
+      <div
+        className={`aspect-square min-w-64 flex flex-col space-y-1 justify-center items-center relative select-none ${props.moreClass}`}
+      >
         <h2 className="text-5xl z-30">
           {time > 0 && (
             <>