Added button to sidebar to show world completion modal. Cleaned up Wo…

…rld Completion modal.
ProjektAdLer · Feb 11, 2025 · 66fc20e · 66fc20e
1 parent dad78ed
commit 66fc20e
Show file tree

Hide file tree

Showing 15 changed files with 110 additions and 51 deletions.
diff --git a/src/Components/Core/DependencyInjection/Presentation/PRESENTATION_TYPES.ts b/src/Components/Core/DependencyInjection/Presentation/PRESENTATION_TYPES.ts
@@ -19,6 +19,9 @@ const PRESENTATION_TYPES = {
   IBreakTimeNotificationOverviewPresenter: Symbol(
     "IBreakTimeNotificationOverviewPresenter",
   ),
+  ILearningWorldCompletionModalPresenter: Symbol(
+    "ILearningWorldCompletionModalPresenter",
+  ),
 };
 
 export default PRESENTATION_TYPES;
diff --git a/src/Components/Core/Presentation/React/LearningSpaceDisplay/SideBar/ISideBarController.ts b/src/Components/Core/Presentation/React/LearningSpaceDisplay/SideBar/ISideBarController.ts
@@ -4,4 +4,5 @@ export default interface ISideBarController {
   onSpaceMenuButtonClicked(): void;
   onControlsExplanationButtonClicked(): void;
   onBreakTimeButtonClicked(): void;
+  onWorldCompletionModalButtonClicked(): void;
 }
diff --git a/src/Components/Core/Presentation/React/LearningSpaceDisplay/SideBar/ISideBarPresenter.ts b/src/Components/Core/Presentation/React/LearningSpaceDisplay/SideBar/ISideBarPresenter.ts
@@ -1,3 +1,3 @@
 import ILearningWorldAdapter from "src/Components/Core/Application/Ports/LearningWorldPort/ILearningWorldAdapter";
 
-export default interface ISideBarPresenter {}
+export default interface ISideBarPresenter extends ILearningWorldAdapter {}
diff --git a/src/Components/Core/Presentation/React/LearningSpaceDisplay/SideBar/SideBar.tsx b/src/Components/Core/Presentation/React/LearningSpaceDisplay/SideBar/SideBar.tsx
@@ -12,6 +12,7 @@ import BUILDER_TYPES from "~DependencyInjection/Builders/BUILDER_TYPES";
 import worldIcon from "../../../../../../Assets/icons/world-menu.svg";
 import spaceMenuIcon from "../../../../../../Assets/icons/space-menu.svg";
 import controlsIcon from "../../../../../../Assets/icons/controls.svg";
+import worldCompletedIcon from "../../../../../../Assets/icons/world-completed.svg";
 import smartphoneIcon from "../../../../../../Assets/icons/smartphone.svg";
 // import pauseIcon from "../../../../../../Assets/icons/pause.svg";
 import { AdLerUIComponent } from "src/Components/Core/Types/ReactTypes";
@@ -21,9 +22,10 @@ import HelpDeskModal from "~ReactComponents/GeneralComponents/HelpDeskModal/Help
 import { useTranslation } from "react-i18next";
 
 export default function SideBar({ className }: Readonly<AdLerUIComponent>) {
-  const [, controller] = useBuilder<SideBarViewModel, SideBarController>(
-    BUILDER_TYPES.IMenuBarBuilder,
-  );
+  const [viewModel, controller] = useBuilder<
+    SideBarViewModel,
+    SideBarController
+  >(BUILDER_TYPES.IMenuBarBuilder);
   const { t: translate } = useTranslation("learningSpace");
   const [time, setTime] = useState(new Date());
 
@@ -50,24 +52,24 @@ export default function SideBar({ className }: Readonly<AdLerUIComponent>) {
       initialOpen={false}
       useAsTriggerOnly={true}
     >
-      {/*<StyledContainer className="flex flex-col p-2 rounded-lg w-44 lg:w-64 border-8 border-black bg-whitetrans ">*/}
+      {/*<StyledContainer className="flex flex-col p-2 border-8 border-black rounded-lg w-44 lg:w-64 bg-whitetrans ">*/}
       <StyledContainer className="relative w-[11rem] md:w-[13rem] lg:w-60 border-8 rounded-2xl mobile-landscape:w-[60vw] border-adlerdarkblue bg-white flex flex-col z-0">
-        <header className="flex justify-between w-full items-center mt-1 relative z-20">
-          <span className="ml-1 text-2xs font-bold lg:text-md text-adlerdarkblue">
+        <header className="relative z-20 flex items-center justify-between w-full mt-1">
+          <span className="ml-1 font-bold text-2xs lg:text-md text-adlerdarkblue">
             {time.toLocaleDateString()}
           </span>
           <span className="bg-adlerdarkblue h-2 w-2 rounded-full absolute left-[calc(50%-0.25rem)] mobile-landscape:hidden"></span>
-          <span className="mr-1 text-2xs text-right font-bold lg:text-md text-adlerdarkblue">
+          <span className="mr-1 font-bold text-right text-2xs lg:text-md text-adlerdarkblue">
             {time.toLocaleTimeString()} Uhr
           </span>
         </header>
         <span className="bg-adlerdarkblue h-2 w-2 rounded-full absolute left-[calc(50%-0.25rem)] mobile-landscape:left-2 mobile-landscape:top-[calc(50%-0.25rem)]"></span>
-        <div className="grid mobile-landscape:ml-4 mobile-landscape:grid-flow-col mobile-landscape:auto-cols-max mobile-landscape:grid-rows-2 mobile-landscape:grid-cols-auto grid-flow-row auto-rows-max gap-1 p-1 rounded-lg grid-cols-3 z-20">
+        <div className="z-20 grid grid-flow-row grid-cols-3 gap-1 p-1 rounded-lg mobile-landscape:ml-4 mobile-landscape:grid-flow-col mobile-landscape:auto-cols-max mobile-landscape:grid-rows-2 mobile-landscape:grid-cols-auto auto-rows-max">
           <div className="flex flex-col justify-start items-center max-h-[25%]">
             <StyledButton onClick={controller.onMainMenuButtonClicked}>
               <img src={engineLogo} alt="" />
             </StyledButton>
-            <p className="text-2xs text-center font-bold lg:text-md text-adlerdarkblue text-outline">
+            <p className="font-bold text-center text-2xs lg:text-md text-adlerdarkblue text-outline">
               {translate("sidebar_mainMenu")}
             </p>
           </div>
@@ -76,7 +78,7 @@ export default function SideBar({ className }: Readonly<AdLerUIComponent>) {
             <StyledButton onClick={controller.onWorldMenuButtonClicked}>
               <img src={worldIcon} alt="" />
             </StyledButton>
-            <p className="text-2xs text-center font-bold lg:text-md text-adlerdarkblue text-outline">
+            <p className="font-bold text-center text-2xs lg:text-md text-adlerdarkblue text-outline">
               {translate("sidebar_learningWorldMenu")}
             </p>
           </div>
@@ -85,7 +87,7 @@ export default function SideBar({ className }: Readonly<AdLerUIComponent>) {
             <StyledButton onClick={controller.onSpaceMenuButtonClicked}>
               <img src={spaceMenuIcon} alt="" />
             </StyledButton>
-            <p className="text-2xs text-center font-bold lg:text-md text-adlerdarkblue text-outline">
+            <p className="font-bold text-center text-2xs lg:text-md text-adlerdarkblue text-outline">
               {translate("sidebar_learningSpaceMenu")}
             </p>
           </div>
@@ -94,7 +96,7 @@ export default function SideBar({ className }: Readonly<AdLerUIComponent>) {
             <StyledButton onClick={controller.onBreakTimeButtonClicked}>
               <img src={pauseIcon} alt="" />
             </StyledButton>
-            <p className="text-2xs text-center font-bold lg:text-md text-adlerdarkblue text-outline">
+            <p className="font-bold text-center text-2xs lg:text-md text-adlerdarkblue text-outline">
               {translate("sidebar_breakTime")}
             </p>
           </div> */}
@@ -105,45 +107,46 @@ export default function SideBar({ className }: Readonly<AdLerUIComponent>) {
             >
               <img src={controlsIcon} alt="Steuerungserklärung" />
             </StyledButton>
-            <p className="text-2xs text-center font-bold lg:text-md text-adlerdarkblue text-outline">
+            <p className="font-bold text-center text-2xs lg:text-md text-adlerdarkblue text-outline">
               {translate("sidebar_controls")}
             </p>
           </div>
 
           <div className="flex flex-col justify-startr items-center max-h-[25%]">
             <FullscreenSwitch />
-            <p className="text-2xs text-center font-bold lg:text-md text-adlerdarkblue text-outline">
+            <p className="font-bold text-center text-2xs lg:text-md text-adlerdarkblue text-outline">
               {translate("sidebar_fullScreen")}
             </p>
           </div>
 
           <div className="flex flex-col justify-start items-center max-h-[25%]">
             <HelpDeskButton />
             <HelpDeskModal />
-            <p className="text-2xs text-center font-bold lg:text-md text-adlerdarkblue text-outline">
+            <p className="font-bold text-center text-2xs lg:text-md text-adlerdarkblue text-outline">
               {translate("sidebar_help")}
             </p>
           </div>
 
-          {/* Empty placeholder containers for future functions/buttons */}
-          <div className="flex flex-col justify-start items-center max-h-[25%] invisible">
+          <div className="flex flex-col justify-start items-center max-h-[25%]">
             <StyledButton
-              onClick={controller.onControlsExplanationButtonClicked}
+              disabled={!viewModel.allowWorldCompletionModalButtonClick}
+              onClick={controller.onWorldCompletionModalButtonClicked}
             >
-              <img src={controlsIcon} alt="Steuerungserklärung" />
+              <img src={worldCompletedIcon} alt="Weltabschlussmodal" />
             </StyledButton>
-            <p className="text-2xs text-center font-bold lg:text-md text-adlerdarkblue text-outline">
-              {translate("sidebar_controls")}
+            <p className="font-bold text-center text-2xs lg:text-md text-adlerdarkblue text-outline">
+              {translate("sidebar_worldCompleted")}
             </p>
           </div>
 
+          {/* Empty placeholder containers for future functions/buttons */}
           <div className="flex flex-col justify-start items-center max-h-[25%] invisible ">
             <StyledButton
               onClick={controller.onControlsExplanationButtonClicked}
             >
               <img src={controlsIcon} alt="Steuerungserklärung" />
             </StyledButton>
-            <p className="text-2xs text-center font-bold lg:text-md text-adlerdarkblue text-outline">
+            <p className="font-bold text-center text-2xs lg:text-md text-adlerdarkblue text-outline">
               {translate("sidebar_controls")}
             </p>
           </div>
@@ -154,7 +157,7 @@ export default function SideBar({ className }: Readonly<AdLerUIComponent>) {
             >
               <img src={controlsIcon} alt="Steuerungserklärung" />
             </StyledButton>
-            <p className="text-2xs text-center font-bold lg:text-md text-adlerdarkblue text-outline">
+            <p className="font-bold text-center text-2xs lg:text-md text-adlerdarkblue text-outline">
               {translate("sidebar_controls")}
             </p>
           </div>
@@ -165,7 +168,7 @@ export default function SideBar({ className }: Readonly<AdLerUIComponent>) {
             >
               <img src={controlsIcon} alt="Steuerungserklärung" />
             </StyledButton>
-            <p className="text-2xs text-center font-bold lg:text-md text-adlerdarkblue text-outline">
+            <p className="font-bold text-center text-2xs lg:text-md text-adlerdarkblue text-outline">
               {translate("sidebar_controls")}
             </p>
           </div>
@@ -176,7 +179,7 @@ export default function SideBar({ className }: Readonly<AdLerUIComponent>) {
             >
               <img src={controlsIcon} alt="Steuerungserklärung" />
             </StyledButton>
-            <p className="text-2xs text-center font-bold lg:text-md text-adlerdarkblue text-outline">
+            <p className="font-bold text-center text-2xs lg:text-md text-adlerdarkblue text-outline">
               {translate("sidebar_controls")}
             </p>
           </div>
@@ -187,7 +190,7 @@ export default function SideBar({ className }: Readonly<AdLerUIComponent>) {
             >
               <img src={controlsIcon} alt="Steuerungserklärung" />
             </StyledButton>
-            <p className="text-2xs text-center font-bold lg:text-md text-adlerdarkblue text-outline">
+            <p className="font-bold text-center text-2xs lg:text-md text-adlerdarkblue text-outline">
               {translate("sidebar_controls")}
             </p>
           </div>
@@ -197,7 +200,7 @@ export default function SideBar({ className }: Readonly<AdLerUIComponent>) {
         <img
           src={engineLogo}
           alt="inventory background"
-          className="mobile-landscape:w-48 mobile-landscape:bottom-4 w-64 opacity-20 absolute bottom-24 right-0 z-10"
+          className="absolute right-0 z-10 w-64 mobile-landscape:w-48 mobile-landscape:bottom-4 opacity-20 bottom-24"
         />
       </StyledContainer>
     </CustomDropdown>

diff --git a/src/Components/Core/Presentation/React/LearningSpaceDisplay/SideBar/SideBarBuilder.ts b/src/Components/Core/Presentation/React/LearningSpaceDisplay/SideBar/SideBarBuilder.ts
@@ -5,6 +5,11 @@ import SideBarViewModel from "./SideBarViewModel";
 import SideBarPresenter from "./SideBarPresenter";
 import ISideBarController from "./ISideBarController";
 import ISideBarPresenter from "./ISideBarPresenter";
+import CoreDIContainer from "~DependencyInjection/CoreDIContainer";
+import AbstractPort from "src/Components/Core/Application/Ports/AbstractPort/AbstractPort";
+import ILearningWorldAdapter from "src/Components/Core/Application/Ports/LearningWorldPort/ILearningWorldAdapter";
+import PORT_TYPES from "~DependencyInjection/Ports/PORT_TYPES";
+import { HistoryWrapper } from "~ReactComponents/ReactRelated/ReactEntryPoint/HistoryWrapper";
 
 @injectable()
 export default class SideBarBuilder extends PresentationBuilder<
@@ -16,4 +21,12 @@ export default class SideBarBuilder extends PresentationBuilder<
   constructor() {
     super(SideBarViewModel, SideBarController, undefined, SideBarPresenter);
   }
+
+  buildPresenter(): void {
+    super.buildPresenter();
+
+    CoreDIContainer.get<AbstractPort<ILearningWorldAdapter>>(
+      PORT_TYPES.ILearningWorldPort,
+    ).registerAdapter(this.presenter!, HistoryWrapper.currentLocationScope());
+  }
 }
diff --git a/src/Components/Core/Presentation/React/LearningSpaceDisplay/SideBar/SideBarController.ts b/src/Components/Core/Presentation/React/LearningSpaceDisplay/SideBar/SideBarController.ts
@@ -4,6 +4,7 @@ import CoreDIContainer from "~DependencyInjection/CoreDIContainer";
 import PRESENTATION_TYPES from "~DependencyInjection/Presentation/PRESENTATION_TYPES";
 import IControlsExplanationModalPresenter from "~ReactComponents/GeneralComponents/ControlsExplanationModal/IControlsExplanationModalPresenter";
 import IBreakTimeNotificationOverviewPresenter from "~ReactComponents/GeneralComponents/BreakTimeNotificationOverview/IBreakTimeNotificationOverviewPresenter";
+import ILearningWorldCompletionModalPresenter from "~ReactComponents/LearningSpaceMenu/LearningWorldCompletionModal/ILearningWorldCompletionModalPresenter";
 
 export default class SideBarController implements ISideBarController {
   onMainMenuButtonClicked(): void {
@@ -29,4 +30,9 @@ export default class SideBarController implements ISideBarController {
       PRESENTATION_TYPES.IBreakTimeNotificationOverviewPresenter,
     ).openModal();
   }
+  onWorldCompletionModalButtonClicked(): void {
+    CoreDIContainer.get<ILearningWorldCompletionModalPresenter>(
+      PRESENTATION_TYPES.ILearningWorldCompletionModalPresenter,
+    ).openModal();
+  }
 }
diff --git a/src/Components/Core/Presentation/React/LearningSpaceDisplay/SideBar/SideBarPresenter.ts b/src/Components/Core/Presentation/React/LearningSpaceDisplay/SideBar/SideBarPresenter.ts
@@ -1,6 +1,19 @@
+import LearningWorldTO from "src/Components/Core/Application/DataTransferObjects/LearningWorldTO";
 import ISideBarPresenter from "./ISideBarPresenter";
 import SideBarViewModel from "./SideBarViewModel";
+import LearningWorldScoreTO from "src/Components/Core/Application/DataTransferObjects/LearningWorldScoreTO";
 
 export default class SideBarPresenter implements ISideBarPresenter {
   constructor(private viewModel: SideBarViewModel) {}
+
+  onLearningWorldLoaded(world: LearningWorldTO): void {
+    this.viewModel.allowWorldCompletionModalButtonClick = world.spaces.every(
+      (space) => space.currentScore >= space.requiredScore,
+    );
+  }
+
+  onLearningWorldScored(learningWorldScoreTO: LearningWorldScoreTO): void {
+    this.viewModel.allowWorldCompletionModalButtonClick =
+      learningWorldScoreTO.currentScore >= learningWorldScoreTO.requiredScore;
+  }
 }
diff --git a/src/Components/Core/Presentation/React/LearningSpaceDisplay/SideBar/SideBarViewModel.ts b/src/Components/Core/Presentation/React/LearningSpaceDisplay/SideBar/SideBarViewModel.ts
@@ -1 +1,3 @@
-export default class SideBarViewModel {}
+export default class SideBarViewModel {
+  allowWorldCompletionModalButtonClick: boolean = false;
+}
diff --git a/.../LearningSpaceMenu/LearningWorldCompletionModal/ILearningWorldCompletionModalPresenter.ts b/.../LearningSpaceMenu/LearningWorldCompletionModal/ILearningWorldCompletionModalPresenter.ts
@@ -1,4 +1,6 @@
 import ILearningWorldAdapter from "src/Components/Core/Application/Ports/LearningWorldPort/ILearningWorldAdapter";
 
 export default interface ILearningWorldCompletionModalPresenter
-  extends ILearningWorldAdapter {}
+  extends ILearningWorldAdapter {
+  openModal(): void;
+}
diff --git a/...ion/React/LearningSpaceMenu/LearningWorldCompletionModal/LearningWorldCompletionModal.tsx b/...ion/React/LearningSpaceMenu/LearningWorldCompletionModal/LearningWorldCompletionModal.tsx
@@ -31,7 +31,7 @@ export default function LearningWorldCompletionModal({
         "flex flex-col items-center justify-center",
       )}
       title={translate("learningWorldCompleted").toString()}
-      showModal={showModal && !viewModel.wasClosedOnce}
+      showModal={showModal}
       onClose={() => {
         controller.CloseButtonClicked();
       }}
@@ -60,7 +60,7 @@ export default function LearningWorldCompletionModal({
           <p>
             {translate("link_Homepage")}
             <a
-              className="font-bold underline  text-adlergreen"
+              className="font-bold underline text-adlergreen"
               href="https://projekt-adler.eu"
               target="_blank"
               rel="noreferrer"

diff --git a/...act/LearningSpaceMenu/LearningWorldCompletionModal/LearningWorldCompletionModalBuilder.ts b/...act/LearningSpaceMenu/LearningWorldCompletionModal/LearningWorldCompletionModalBuilder.ts
@@ -10,6 +10,7 @@ import AbstractPort from "src/Components/Core/Application/Ports/AbstractPort/Abs
 import PORT_TYPES from "~DependencyInjection/Ports/PORT_TYPES";
 import ILearningWorldAdapter from "src/Components/Core/Application/Ports/LearningWorldPort/ILearningWorldAdapter";
 import { HistoryWrapper } from "~ReactComponents/ReactRelated/ReactEntryPoint/HistoryWrapper";
+import PRESENTATION_TYPES from "~DependencyInjection/Presentation/PRESENTATION_TYPES";
 
 @injectable()
 export default class LearningWorldCompletionModalBuilder extends PresentationBuilder<
@@ -23,15 +24,28 @@ export default class LearningWorldCompletionModalBuilder extends PresentationBui
       LearningWorldCompletionModalViewModel,
       LearningWorldCompletionModalController,
       undefined,
-      LearningWorldCompletionModalPresenter
+      LearningWorldCompletionModalPresenter,
     );
   }
 
   override buildPresenter(): void {
     super.buildPresenter();
 
+    if (
+      CoreDIContainer.isBound(
+        PRESENTATION_TYPES.ILearningWorldCompletionModalPresenter,
+      )
+    )
+      CoreDIContainer.unbind(
+        PRESENTATION_TYPES.ILearningWorldCompletionModalPresenter,
+      );
+
+    CoreDIContainer.bind<ILearningWorldCompletionModalPresenter>(
+      PRESENTATION_TYPES.ILearningWorldCompletionModalPresenter,
+    ).toConstantValue(this.presenter!);
+
     CoreDIContainer.get<AbstractPort<ILearningWorldAdapter>>(
-      PORT_TYPES.ILearningWorldPort
+      PORT_TYPES.ILearningWorldPort,
     ).registerAdapter(this.presenter!, HistoryWrapper.currentLocationScope());
   }
 }
diff --git a/.../LearningSpaceMenu/LearningWorldCompletionModal/LearningWorldCompletionModalController.ts b/.../LearningSpaceMenu/LearningWorldCompletionModal/LearningWorldCompletionModalController.ts
@@ -10,15 +10,17 @@ export default class LearningWorldCompletionModalController
   private setWorldCompletionModalToShown: ISetWorldCompletionModalToShownUseCase;
   constructor(private viewModel: LearningWorldCompletionModalViewModel) {
     this.setWorldCompletionModalToShown = CoreDIContainer.get(
-      USECASE_TYPES.ISetWorldCompletionModalToShownUseCase
+      USECASE_TYPES.ISetWorldCompletionModalToShownUseCase,
     );
   }
 
   CloseButtonClicked(): void {
-    this.viewModel.showModal.Value = false;
-    this.viewModel.wasClosedOnce = true;
-    this.setWorldCompletionModalToShown.execute({
-      worldID: this.viewModel.currentWorldId.Value,
-    });
+    if ((this.viewModel.wasClosedOnce = true)) {
+      this.viewModel.showModal.Value = false;
+      this.viewModel.wasClosedOnce = true;
+      this.setWorldCompletionModalToShown.execute({
+        worldID: this.viewModel.currentWorldId.Value,
+      });
+    }
   }
 }