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; @apply w-fit h-full relative;
.lhoist-blocks-focus-object { .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; cursor: url("../../img/cursors/cursor-hand-glass@2x.png"), auto;
@apply absolute w-auto block object-contain; @apply absolute w-auto block object-contain;
// filter: brightness(10%) sepia(100%) saturate(10000%) hue-rotate(10deg); img {
&--inactive { @apply h-full;
}
&--inactive img {
filter: contrast(50%) saturate(0%) brightness(1.6); filter: contrast(50%) saturate(0%) brightness(1.6);
pointer-events: none; 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) => { {blocks.map((block, id) => {
const hasAnswered = answers && answers[id]?.userAnswer; const hasAnswered = answers && answers[id]?.userAnswer;
const correctAnswerType = answers && answers[id]?.correctAnswer;
return ( return (
<img <div
className={`lhoist-blocks-focus-object ${ className={`lhoist-blocks-focus-object ${
hasAnswered ? "lhoist-blocks-focus-object--inactive" : "" hasAnswered ? "lhoist-blocks-focus-object--inactive" : ""
} ${ } ${
hasAnswered && answers[id]?.userAnsweredCorrectly === true hasAnswered && correctAnswerType
? "lhoist-blocks-focus-object--answered-correctly" ? "lhoist-blocks-focus-object--" + correctAnswerType
: hasAnswered && : ""
answers[id]?.userAnsweredCorrectly === false } `}
? "lhoist-blocks-focus-object--answered-incorrectly"
: "lhoist-blocks-focus-object--unanswered"
}`}
style={{ style={{
height: `${block.attrs.objectScale}%`, height: `${block.attrs.objectScale}%`,
top: `${block.attrs.objectPosition?.y * 100}%`, top: `${block.attrs.objectPosition?.y * 100}%`,
left: `${block.attrs.objectPosition?.x * 100}%`, left: `${block.attrs.objectPosition?.x * 100}%`,
}} }}
key={id} key={id}>
src={block.attrs.objectPictureUrl} <img
alt={block.attrs.objectPictureAlt} src={block.attrs.objectPictureUrl}
draggable='false' alt={block.attrs.objectPictureAlt}
// onClick={() => console.log(block.attrs.objectBehaviourDescription)} draggable='false'
// onClick={() => console.log(block.attrs.objectBehaviourDescription)} onClick={() =>
onClick={() => setCurrentGameModal(
setCurrentGameModal( <GameQuestion
<GameQuestion questionId={id}
questionId={id} correctAnswer={
correctAnswer={block.attrs.behaviourType} block.attrs.behaviourType
/> }
) />
} )
/> }
/>
</div>
); );
})} })}
</> </>