44 lines
1.2 KiB
JavaScript
44 lines
1.2 KiB
JavaScript
import React from "react";
|
|
import GameQuestion from "./GameQuestion";
|
|
import { useGame } from "../../hooks/useGame";
|
|
|
|
export default function GameObjects({ blocks }) {
|
|
const { setCurrentGameModal, answers } = useGame();
|
|
|
|
if (!blocks) return null;
|
|
|
|
return (
|
|
<>
|
|
{blocks.map((block, id) => {
|
|
const hasAnswered = answers && answers[id]?.userAnswer;
|
|
return (
|
|
<img
|
|
className={`lhoist-blocks-focus-object ${
|
|
hasAnswered ? "lhoist-blocks-focus-object--inactive" : ""
|
|
}`}
|
|
style={{
|
|
height: `${block.attrs.objectScale}%`,
|
|
top: `${block.attrs.objectPosition?.y * 100}%`,
|
|
left: `${block.attrs.objectPosition?.x * 100}%`,
|
|
}}
|
|
key={id}
|
|
src={block.attrs.objectPictureUrl}
|
|
alt={block.attrs.objectPictureAlt}
|
|
draggable='false'
|
|
// onClick={() => console.log(block.attrs.objectBehaviourDescription)}
|
|
// onClick={() => console.log(block.attrs.objectBehaviourDescription)}
|
|
onClick={() =>
|
|
setCurrentGameModal(
|
|
<GameQuestion
|
|
questionId={id}
|
|
correctAnswer={block.attrs.behaviourType}
|
|
/>
|
|
)
|
|
}
|
|
/>
|
|
);
|
|
})}
|
|
</>
|
|
);
|
|
}
|