src/core/ErrorRectangle.qml

0001 /* GCompris - ErrorRectangle.qml
0002  *
0003  * SPDX-FileCopyrightText: 2024 Timothée Giet <animtim@gmail.com>
0004  *
0005  * Authors:
0006  *   Timothée Giet <animtim@gmail.com>
0007  *
0008  *   SPDX-License-Identifier: GPL-3.0-or-later
0009  */
0010 import QtQuick 2.12
0011 import GCompris 1.0
0012
0013 /**
0014  * A QML component to give wrong answer visual feedback
0015  *
0016  * When using it, think about setting its position, size and radius depending on the context.
0017  * Also set the errorImage size if needed.
0018  *
0019  * Always add it after the components it should overlay in the qml file.
0020  *
0021  * Use startAnimation() to display it on wrong answer.
0022  *
0023  * Redefine locally releaseControls() depending on the variable used to lock controls in the activity.
0024  *
0025  * Redefine locally startAnimation() if you need more actions.
0026  *
0027  * Always call resetState() on level init to avoid issues.
0028  *
0029  * @inherit QtQuick.Rectangle
0030  */
0031 Rectangle {
0032     id: errorRectangle
0033     width: 0
0034     height: 0
0035     radius: 0
0036     color: "#80808080"
0037     opacity: 0
0038
0039     property alias errorAnimation: errorAnimation
0040     property alias imageSize: errorImage.width
0041
0042     Image {
0043         id: errorImage
0044         anchors.centerIn: parent
0045         source: "qrc:/gcompris/src/core/resource/cross.svg"
0046         width: 30 * ApplicationInfo.ratio
0047         height: width
0048         sourceSize.width: width
0049         sourceSize.height: width
0050     }
0051     SequentialAnimation {
0052         id: errorAnimation
0053         running: false
0054         NumberAnimation { target: errorRectangle; property: "opacity"; to: 1; duration: 200 }
0055         PauseAnimation { duration: 1000 }
0056         NumberAnimation { target: errorRectangle; property: "opacity"; to: 0; duration: 200 }
0057         ScriptAction { script: releaseControls() }
0058     }
0059     function releaseControls() {
0060         return;
0061     }
0062     function startAnimation() {
0063         errorAnimation.restart();
0064     }
0065     function resetState() {
0066         errorAnimation.stop();
0067         errorRectangle.opacity = 0;
0068     }
0069 }