Antoine/lhoist-stay-safe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactoring game object for pictogramme after being answered

Browse Source
This commit is contained in:
Antoine M 2024-03-19 17:43:18 +01:00
parent c3bc891927
commit e6585658fc
2 changed files with 43 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/assets/css/pages/Game.scss
View File

@ -32,16 +32,32 @@
@apply w-fit h-full relative;
.lhoist-blocks-focus-object {
// user-drag: none;
// cursor: url("../../img/cursors/cursor-hand-pointer.svg"), auto;
cursor: url("../../img/cursors/cursor-hand-glass@2x.png"), auto;
@apply absolute w-auto block object-contain;
// filter: brightness(10%) sepia(100%) saturate(10000%) hue-rotate(10deg);
&--inactive {
img {
@apply h-full;
}
&--inactive img {
filter: contrast(50%) saturate(0%) brightness(1.6);
pointer-events: none;
}
&--unsafe::after,
&--safe::after {
@apply block absolute top-1/2 left-1/2 w-16 h-16;
content: "";
z-index: 11;
transform: translate(-50%, -50%);
}
&--unsafe::after {
background-image: url("../../img/icons/anwser_icon_unsafe.svg");
}
&--safe::after {
background-image: url("../../img/icons/anwser_icon_safe.svg");
}
}
}
}

46
src/components/game/GameObjects.jsx
View File

@ -11,39 +11,39 @@ export default function GameObjects({ blocks }) {
<>
{blocks.map((block, id) => {
const hasAnswered = answers && answers[id]?.userAnswer;
const correctAnswerType = answers && answers[id]?.correctAnswer;
return (
<img
<div
className={`lhoist-blocks-focus-object ${
hasAnswered ? "lhoist-blocks-focus-object--inactive" : ""
} ${
hasAnswered && answers[id]?.userAnsweredCorrectly === true
? "lhoist-blocks-focus-object--answered-correctly"
: hasAnswered &&
answers[id]?.userAnsweredCorrectly === false
? "lhoist-blocks-focus-object--answered-incorrectly"
: "lhoist-blocks-focus-object--unanswered"
}`}
hasAnswered && correctAnswerType
? "lhoist-blocks-focus-object--" + correctAnswerType
: ""
} `}
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}
/>
)
}
/>
key={id}>
<img
src={block.attrs.objectPictureUrl}
alt={block.attrs.objectPictureAlt}
draggable='false'
onClick={() =>
setCurrentGameModal(
<GameQuestion
questionId={id}
correctAnswer={
block.attrs.behaviourType
}
/>
)
}
/>
</div>
);
})}
</>