Skip to content

Commit

Permalink
styled StoryElement and edited MockBackend
Browse files Browse the repository at this point in the history
  • Loading branch information
@AdLer-Lukas
AdLer-Lukas committed Feb 1, 2024
1 parent 2ec5390 commit 0a632ed
Show file tree
Hide file tree
Showing 5 changed files with 197 additions and 96 deletions.
6 changes: 5 additions & 1 deletion src/Components/Core/Adapters/BackendAdapter/MockBackendAdapter.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -891,7 +891,11 @@ export default class MockBackendAdapter implements IBackendPort {
spaceTemplateStyle: "Campus",
spaceStory: {
introStory: {
storyTexts: ["Hallo", "Ich bin ein Story-Element"],
storyTexts: [
"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolorekasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
],
elementModel: "a_npc_defaultnpc",
},
outroStory: {
Expand Down
275 changes: 184 additions & 91 deletions src/Components/Core/Presentation/React/LearningSpaceDisplay/StoryElement/StoryElement.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,12 @@
import campusNPC from "../../../../../../Assets/misc/quizBackgrounds/a_npc_dozentlukas.png";
import campusNPCClose from "../../../../../../Assets/misc/quizBackgrounds/a_npc_dozentlukas_close.png";
import arcadeNPC from "../../../../../../Assets/misc/quizBackgrounds/a_npc_sheriffjustice.png";
import arcadeNPCClose from "../../../../../../Assets/misc/quizBackgrounds/a_npc_sheriffjustice_close.png";
import defaultNPC from "../../../../../../Assets/misc/quizBackgrounds/a_npc_defaultnpc.png";
import defaultNPCClose from "../../../../../../Assets/misc/quizBackgrounds/a_npc_defaultnpc_close.png";
import robotNPC from "../../../../../../Assets/misc/quizBackgrounds/a_npc_alerobot.png";
import robotNPCClose from "../../../../../../Assets/misc/quizBackgrounds/a_npc_alerobot_close.png";

import { AdLerUIComponent } from "src/Components/Core/Types/ReactTypes";
import useBuilder from "~ReactComponents/ReactRelated/CustomHooks/useBuilder";
import StoryElementViewModel from "./StoryElementViewModel";
Expand All @@ -6,10 +15,31 @@ import BUILDER_TYPES from "~DependencyInjection/Builders/BUILDER_TYPES";
import useObservable from "~ReactComponents/ReactRelated/CustomHooks/useObservable";
import { useCallback } from "react";
import { useTranslation } from "react-i18next";
import StyledModal from "~ReactComponents/ReactRelated/ReactBaseComponents/StyledModal";
import tailwindMerge from "../../../Utils/TailwindMerge";
import { StoryElementType } from "src/Components/Core/Domain/Types/StoryElementType";
import StyledButton from "~ReactComponents/ReactRelated/ReactBaseComponents/StyledButton";
import StyledContainer from "~ReactComponents/ReactRelated/ReactBaseComponents/StyledContainer";
import {
LearningElementModel,
LearningElementModelTypeEnums,
} from "src/Components/Core/Domain/LearningElementModels/LearningElementModelTypes";

function getNPCImage(
model: LearningElementModel | null,
close: boolean
): string {
switch (model) {
case LearningElementModelTypeEnums.QuizElementModelTypes.RobotNPC:
return close ? robotNPCClose : robotNPC;
case LearningElementModelTypeEnums.QuizElementModelTypes.ArcadeNPC:
return close ? arcadeNPCClose : arcadeNPC;
case LearningElementModelTypeEnums.QuizElementModelTypes.CampusNPC:
return close ? campusNPCClose : campusNPC;
case LearningElementModelTypeEnums.QuizElementModelTypes.DefaultNPC:
default:
return close ? defaultNPCClose : defaultNPC;
}
}

export default function StoryElement({ className }: AdLerUIComponent<{}>) {
const [viewModel, controller] = useBuilder<
Expand All @@ -19,6 +49,7 @@ export default function StoryElement({ className }: AdLerUIComponent<{}>) {
const [isOpen, setOpen] = useObservable<boolean>(viewModel?.isOpen);
const [pageId] = useObservable<number>(viewModel?.pageId);
const [type] = useObservable<StoryElementType>(viewModel?.type);

useObservable<boolean>(viewModel?.showOnlyIntro);
useObservable<boolean>(viewModel?.showOnlyOutro);
useObservable<boolean>(viewModel?.outroUnlocked);
Expand Down Expand Up @@ -87,101 +118,163 @@ export default function StoryElement({ className }: AdLerUIComponent<{}>) {
} else {
return null;
}

return (
<StyledModal
title={titleText}
onClose={() => {
closeModal();
controller.closePanel();
}}
showModal={isOpen}
className={tailwindMerge(
className,
"flex flex-col justify-center gap-2 p-5 rounded-lg"
)}
>
{!complexStory && createBasicLayout(contentTexts, pageId, controller)}
{complexStory && (
<>
{!viewModel.showOnlyIntro.Value && !viewModel.showOnlyOutro.Value && (
<>
<StyledButton
shape="freefloatcenter"
onClick={controller.onIntroButtonClicked}
>
{translate("introStoryTitle").toString()}
</StyledButton>
<StyledContainer className={tailwindMerge(className, "")}>
<div className="z-50 fixed top-0 bottom-0 left-0 right-0 flex flex-col items-center justify-center w-screen h-full lg:grid lg:grid-rows-3 lg:items-start">
{/* Background NPC */}
<div className="flex items-end justify-start invisible w-full row-start-2 pl-16 lg:visible lg:h-full">
<img
className="z-20 invisible object-contain h-0 -scale-x-100 brightness-125 lg:visible lg:h-full "
alt="LearningImage!"
src={getNPCImage(viewModel.modelType.Value, true)}
></img>
</div>
{/* Modal */}
<div className="flex items-start justify-center pb-2 w-full lg:w-[95vw] max-w-7xl h-full lg:h-[32vh] pt-2 lg:pt-0 row-start-3 ">
<div className="grid grid-rows-5 p-2 xl:px-8 rounded-lg bg-gradient-to-br from-adlerbggradientfrom to-adlerbggradientto h-full w-full max-w-[95%] max-h-[95%] lg:max-h-[100%] overflow-auto">
{/* Header */}
<div className="z-20 flex items-start justify-center w-full h-20 gap-2 p-2 pb-3 overflow-hidden text-xl font-bold text-adlerdarkblue lg:roboto-black lg:text-2xl ">
<img
className="visible h-16 -scale-x-100 lg:invisible lg:h-0"
alt="LearningImage!"
src={getNPCImage(viewModel.modelType.Value, false)}
></img>

<div className="w-full lg:text-xl">{titleText}</div>

<StyledButton
shape="freefloatcenter"
onClick={controller.onOutroButtonClicked}
onClick={controller.closePanel}
className="w-8 h-8 p-1 text-xs roboto-black xl:w-10 xl:h-10 lg:w-10 lg:h-10 md:w-10 md:h-10 sm:w-10 sm:h-10"
shape="closebutton"
>
{translate("outroStoryTitle").toString()}
X
</StyledButton>
</>
)}
{(viewModel.showOnlyIntro.Value || viewModel.showOnlyOutro.Value) &&
createBasicLayoutWithBackButton(
contentTexts,
pageId,
controller,
translate("backButton").toString()
)}
</>
)}
</StyledModal>
);
}

function createBasicLayout(
contentTexts: string[],
pageId: number,
controller: IStoryElementController
) {
return (
<>
{contentTexts[pageId].toString()}
<div className="flex justify-center gap-2">
{pageId < contentTexts.length - 1 && (
<StyledButton shape="square" onClick={controller.increasePageId}>
{">"}
</StyledButton>
)}
{pageId > 0 && (
<StyledButton shape="square" onClick={controller.decreasePageId}>
{"<"}
</StyledButton>
)}
</div>
<div className="row-span-4 items-center justify-center w-full grid grid-rows-4 lg:px-4">
{!complexStory &&
createBasicLayout(contentTexts, pageId, controller)}
{complexStory && (
<>
{!viewModel.showOnlyIntro.Value &&
!viewModel.showOnlyOutro.Value && (
<>
<StyledButton
shape="freefloatcenter"
onClick={controller.onIntroButtonClicked}
className="!text-xl w-32"
>
{translate("introStoryTitle").toString()}
</StyledButton>
<StyledButton
shape="freefloatcenter"
onClick={controller.onOutroButtonClicked}
className="!text-xl w-32"
>
{translate("outroStoryTitle").toString()}
</StyledButton>
</>
)}
{(viewModel.showOnlyIntro.Value ||
viewModel.showOnlyOutro.Value) &&
createBasicLayoutWithBackButton(
contentTexts,
pageId,
controller,
translate("backButton").toString()
)}
</>
)}
</div>
</div>
</div>
</div>
</>
</StyledContainer>
);
}
function createBasicLayoutWithBackButton(
contentTexts: string[],
pageId: number,
controller: IStoryElementController,
backbuttonText: string
) {
return (
<>
{contentTexts[pageId].toString()}
<div className="flex justify-center gap-2">
{pageId < contentTexts.length - 1 && (
<StyledButton shape="square" onClick={controller.increasePageId}>
{">"}
</StyledButton>
)}
{pageId > 0 && (
<StyledButton shape="square" onClick={controller.decreasePageId}>
{"<"}

function createBasicLayout(
contentTexts: string[],
pageId: number,
controller: IStoryElementController
) {
return (
<>
<div className="row-span-3 flex justify-center items-center bg-buttonbgblue p-2 rounded-xl">
{contentTexts[pageId].toString()}
</div>
<div className="flex lg:w-[80vw] max-w-5xl justify-between">
<div className="grid grid-cols-2 w-32">
<div>
{" "}
{pageId > 0 && (
<StyledButton
shape="closebutton"
onClick={controller.decreasePageId}
>
{"<"}
</StyledButton>
)}
</div>

<div className="col-start-2">
{pageId < contentTexts.length - 1 && (
<StyledButton
shape="closebutton"
onClick={controller.increasePageId}
>
{">"}
</StyledButton>
)}
</div>
</div>
</div>
</>
);
}
function createBasicLayoutWithBackButton(
contentTexts: string[],
pageId: number,
controller: IStoryElementController,
backbuttonText: string
) {
return (
<>
<div className="row-span-3 flex justify-center items-center bg-buttonbgblue p-2 rounded-xl">
{contentTexts[pageId].toString()}
</div>
<div className="flex lg:w-[80vw] max-w-5xl justify-between">
<StyledButton
shape="freefloatleft"
onClick={controller.backToMenuButtonClicked}
>
{backbuttonText}
</StyledButton>
)}
<StyledButton
shape="freefloatleft"
onClick={controller.backToMenuButtonClicked}
>
{backbuttonText}
</StyledButton>
</div>
</>
);
<div className="grid grid-cols-2 w-32">
<div>
{" "}
{pageId > 0 && (
<StyledButton
shape="closebutton"
onClick={controller.decreasePageId}
>
{"<"}
</StyledButton>
)}
</div>

<div className="col-start-2">
{pageId < contentTexts.length - 1 && (
<StyledButton
shape="closebutton"
onClick={controller.increasePageId}
>
{">"}
</StyledButton>
)}
</div>
</div>
</div>
</>
);
}
}
1 change: 1 addition & 0 deletions ...onents/Core/Presentation/React/LearningSpaceDisplay/StoryElement/StoryElementPresenter.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export default class StoryElementPresenter implements IStoryElementPresenter {

onLearningSpaceLoaded(learningSpaceTO: LearningSpaceTO): void {
this.viewModel.type.Value = learningSpaceTO.storyElement.storyType;
this.viewModel.modelType.Value = learningSpaceTO.storyElement.modelType;
this.viewModel.introTexts.Value =
learningSpaceTO.storyElement.introStoryTexts;
this.viewModel.outroTexts.Value =
Expand Down
3 changes: 3 additions & 0 deletions ...onents/Core/Presentation/React/LearningSpaceDisplay/StoryElement/StoryElementViewModel.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { StoryElementType } from "src/Components/Core/Domain/Types/StoryElementType";
import Observable from "../../../../../../Lib/Observable";
import { LearningElementModel } from "src/Components/Core/Domain/LearningElementModels/LearningElementModelTypes";

export default class StoryElementViewModel {
introTexts: Observable<string[] | null> = new Observable<string[] | null>(
Expand All @@ -17,4 +18,6 @@ export default class StoryElementViewModel {
//MenuNavigation
showOnlyIntro: Observable<boolean> = new Observable<boolean>(false);
showOnlyOutro: Observable<boolean> = new Observable<boolean>(false);
modelType: Observable<LearningElementModel | null> =
new Observable<LearningElementModel | null>(null);
}
8 changes: 4 additions & 4 deletions src/localize/de/learningSpace.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,12 @@
"exitRoomTitle": "Raum verlassen?",
"exitRoomButton": "Raum verlassen",

"introStoryTitle": "Lernraum Einführung",
"outroStoryTitle": "Lernraum Abschluss",
"introOutroStoryTitle": "Lernraum Einführung & Abschluss",
"introStoryTitle": "Intro",
"outroStoryTitle": "Outro",
"introOutroStoryTitle": "Wähle zwischen Intro oder Outro der Lernraumstory",
"outroLockedTitle": "Lernraum Abschluss gesperrt",
"outroLockedText": "Dieses Element ist noch nicht verfügbar. Schließe zuerst den Raum ab!",
"backButton": "Zurück zur Auswahl",
"backButton": "Intro/Outro Auswahl",

"spaceScore": "{{current}} von {{required}}",

Expand Down

0 comments on commit 0a632ed

Please sign in to comment.