diff --git a/client/src/components/infoview/main.tsx b/client/src/components/infoview/main.tsx index 061ae5f..fa39b04 100644 --- a/client/src/components/infoview/main.tsx +++ b/client/src/components/infoview/main.tsx @@ -20,7 +20,7 @@ import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js' import { GameIdContext } from '../../app'; import { useAppDispatch, useAppSelector } from '../../hooks'; -import { LevelInfo } from '../../state/api'; +import { LevelInfo, useGetGameInfoQuery } from '../../state/api'; import { changedInventory, levelCompleted, selectCode, selectCompleted, selectInventory } from '../../state/progress'; import Markdown from '../markdown'; @@ -38,6 +38,8 @@ import { Hints, MoreHelpButton, filterHints } from '../hints'; import { DocumentPosition } from '../../../../node_modules/lean4-infoview/src/infoview/util'; import { DiagnosticSeverity } from 'vscode-languageclient'; import { useTranslation } from 'react-i18next'; +import path from 'path'; + /** Wrapper for the two editors. It is important that the `div` with `codeViewRef` is * always present, or the monaco editor cannot start. @@ -260,6 +262,7 @@ const goalFilter = { showLetValue: true } +// TODD: Mark for translation! /** The display of a single entered lean command */ function Command({ proof, i, deleteProof }: { proof: ProofState, i: number, deleteProof: any }) { // The first step will always have an empty command @@ -274,8 +277,8 @@ function Command({ proof, i, deleteProof }: { proof: ProofState, i: number, dele } else { return
{proof?.steps[i].command}
-
} @@ -398,6 +401,11 @@ export function TypewriterInterface({props}) { const model = editor.getModel() const uri = model.uri.toString() + const gameInfo = useGetGameInfoQuery({game: gameId}) + const {worldId, levelId} = React.useContext(WorldLevelIdContext) + let image: string = gameInfo.data?.worlds.nodes[worldId].image + + const [disableInput, setDisableInput] = React.useState(false) const [loadingProgress, setLoadingProgress] = React.useState(0) const { setDeletedChat, showHelp, setShowHelp } = React.useContext(DeletedChatContext) @@ -498,7 +506,16 @@ export function TypewriterInterface({props}) { return
+
+ {image && + + } + +
+ {/*
+ +
*/}
diff --git a/client/src/components/level.tsx b/client/src/components/level.tsx index 3ca08ae..1c5b1b9 100644 --- a/client/src/components/level.tsx +++ b/client/src/components/level.tsx @@ -494,10 +494,9 @@ function Introduction({impressum, setImpressum, toggleInfo, togglePreferencesPop : -
+
{image && - // TODO: Temporary for testing - + }
diff --git a/client/src/css/level.css b/client/src/css/level.css index 5e4852c..323f989 100644 --- a/client/src/css/level.css +++ b/client/src/css/level.css @@ -348,13 +348,18 @@ td code { .world-image-container { display: flex; flex-direction: column; - justify-content: center; + min-height: 0px; /* somehow this has a desired affect, but why? */ } .world-image-container img.contain { object-fit: contain; } +.world-image-container.center { + justify-content: center; +} + + .world-image-container img.cover { height: 100%; object-fit: cover;