programmingMaze/resource/TutorialBase.qml

0001 /* GCompris - TutorialBase.qml
0002  *
0003  * SPDX-FileCopyrightText: 2021 Timothée Giet <animtim@gcompris.net>
0004  *
0005  * Authors:
0006  *   Timothée Giet <animtim@gcompris.net>
0007  *
0008  *   SPDX-License-Identifier: GPL-3.0-or-later
0009  */
0010 import QtQuick 2.12
0011 import GCompris 1.0
0012
0013 import "../../../core"
0014 import "../"
0015 import "../programmingMaze.js" as Activity
0016
0017 Image {
0018     id: tutorialBase
0019     anchors.fill: parent
0020     fillMode: Image.PreserveAspectFit
0021     source: "qrc:/gcompris/src/activities/programmingMaze/resource/background-pm.svg"
0022     readonly property int levelNumber: items.currentLevel
0023     property string activeAreaTuto: "instruction"
0024     property bool instructionTextVisible
0025     property bool mainVisible: false
0026     property bool procedureVisible: false
0027     property bool loopVisible: false
0028
0029     Item {
0030         id: layoutTuto
0031         width: parent.paintedWidth
0032         height: parent.paintedHeight
0033         anchors.verticalCenter: parent.verticalCenter
0034         anchors.horizontalCenter: parent.horizontalCenter
0035         property int buttonWidth: width / 10
0036         property int buttonHeight: height / 15.3
0037         property int stepX: layoutTuto.width / 10
0038         property int stepY: (layoutTuto.height - layoutTuto.height / 10) / 10
0039
0040         Repeater {
0041             id: mazeModelTuto
0042             anchors.left: layoutTuto.left
0043             anchors.top: layoutTuto.top
0044             model: items.levels[levelNumber].map
0045
0046             Image {
0047                 id: iceBlockTuto
0048                 x: modelData.x * width
0049                 y: modelData.y * height
0050                 width: layoutTuto.stepX
0051                 height: layoutTuto.stepY
0052                 source: Activity.reverseCountUrl + "ice-block.svg"
0053             }
0054         }
0055
0056         Image {
0057             id: fishTuto
0058             width: layoutTuto.width / 12
0059             sourceSize.width: width
0060             source: Activity.reverseCountUrl + "fish-blue.svg"
0061             x: items.levels[levelNumber].fish.x * layoutTuto.stepX + (layoutTuto.stepX - width) / 2
0062             y: items.levels[levelNumber].fish.y * layoutTuto.stepY + (layoutTuto.stepY - height) / 2
0063         }
0064
0065         Image {
0066             id: playerTuto
0067             source: "qrc:/gcompris/src/activities/maze/resource/tux_top_south.svg"
0068             width: fishTuto.width
0069             sourceSize.width: width
0070             rotation: 270
0071             x: items.levels[levelNumber].map[0].x * layoutTuto.stepX + (layoutTuto.stepX - width) / 2
0072             y: items.levels[levelNumber].map[0].y * layoutTuto.stepY + (layoutTuto.stepY - height) / 2
0073         }
0074
0075         Rectangle {
0076             id: activeCodeAreaTuto
0077             color: "#1dade4"
0078             opacity: 0.5
0079             radius: 8 * ApplicationInfo.ratio
0080             border.width: 2 * ApplicationInfo.ratio
0081             border.color: "white"
0082             anchors.fill: activeAreaTuto === "instruction" ? instructionAreaTuto :
0083                             ( activeAreaTuto === "main" ? wholeMainArea : wholeProcedureArea)
0084         }
0085
0086         GridView {
0087             id: instructionAreaTuto
0088             width: layoutTuto.width * 0.5
0089             height: layoutTuto.height * 0.17
0090             cellWidth: layoutTuto.buttonWidth
0091             cellHeight: layoutTuto.buttonHeight
0092
0093             anchors.left: layoutTuto.left
0094             anchors.top: mazeModelTuto.bottom
0095             anchors.topMargin: layoutTuto.height * 0.4
0096
0097             interactive: false
0098             model: instructionModel
0099             header: HeaderArea {
0100                 width: instructionAreaTuto.width
0101                 height: layoutTuto.height / 11
0102                 radius: 4 * ApplicationInfo.ratio
0103                 headerOpacity: 1
0104                 headerText: instructionArea.instructionText
0105             }
0106
0107             delegate: Item {
0108                     id: instructionItemTuto
0109                     width: layoutTuto.buttonWidth
0110                     height: layoutTuto.buttonHeight * 1.18
0111
0112                     Rectangle {
0113                         id: imageHolderTuto
0114                         width: parent.width - 1 * ApplicationInfo.ratio
0115                         height: parent.height - 1 * ApplicationInfo.ratio
0116                         border.width: 1.2 * ApplicationInfo.ratio
0117                         border.color: "#2a2a2a"
0118                         anchors.centerIn: parent
0119                         radius: width / 18
0120                         color: "#ffffff"
0121
0122                         Image {
0123                             id: iconTuto
0124                             source: Activity.url + name + ".svg"
0125                             width: Math.round(parent.width / 1.2)
0126                             height: Math.round(parent.height / 1.2)
0127                             sourceSize.width: height
0128                             sourceSize.height: height
0129                             anchors.centerIn: parent
0130                             fillMode: Image.PreserveAspectFit
0131                             mipmap: true
0132                         }
0133                     }
0134             }
0135         }
0136
0137         ListModel {
0138             id: mainFunctionModelTuto1
0139             ListElement {
0140                 name: "move-forward"
0141             }
0142         }
0143
0144         ListModel {
0145             id: mainFunctionModelTuto2
0146             ListElement {
0147                 name: "call-procedure"
0148             }
0149         }
0150
0151         ListModel {
0152             id: mainFunctionModelTuto3
0153             ListElement {
0154                 name: "execute-loop"
0155             }
0156         }
0157
0158         ListModel {
0159             id: procedureModelTuto
0160             ListElement {
0161                 name: "move-forward"
0162             }
0163             ListElement {
0164                 name: "move-forward"
0165             }
0166             ListElement {
0167                 name: "turn-right"
0168             }
0169         }
0170
0171         HeaderArea {
0172             id: mainFunctionHeaderTuto
0173             headerText: mainFunctionHeader.headerText
0174             headerOpacity: activeAreaTuto === "main" ? 1 : 0.5
0175             width: parent.width * 0.4
0176             height: parent.height / 10
0177             radius: 4 * ApplicationInfo.ratio
0178             anchors.top: layoutTuto.top
0179             anchors.right: layoutTuto.right
0180             visible: mainVisible
0181         }
0182
0183         GridView {
0184             id: mainFunctionCodeAreaTuto
0185             visible: mainVisible
0186             width: parent.width * 0.4
0187             height: parent.height * 0.29
0188             cellWidth: layoutTuto.buttonWidth
0189             cellHeight: layoutTuto.buttonHeight
0190
0191             anchors.right: parent.right
0192             anchors.top: mainFunctionHeaderTuto.bottom
0193
0194             interactive: false
0195             model: activeAreaTuto === "procedure" ? mainFunctionModelTuto2 : (activeAreaTuto === "loop" ? mainFunctionModelTuto3 : mainFunctionModelTuto1)
0196
0197             delegate: Item {
0198                     id: mainItemTuto
0199                     width: layoutTuto.buttonWidth
0200                     height: layoutTuto.buttonHeight
0201
0202                     Rectangle {
0203                         width: parent.width - 1 * ApplicationInfo.ratio
0204                         height: parent.height - 1 * ApplicationInfo.ratio
0205                         border.width: 1.2 * ApplicationInfo.ratio
0206                         border.color: "#2a2a2a"
0207                         anchors.centerIn: parent
0208                         radius: width / 18
0209                         color: "#ffffff"
0210
0211                         Image {
0212                             source: Activity.url + name + ".svg"
0213                             width: Math.round(parent.width / 1.2)
0214                             height: Math.round(parent.height / 1.2)
0215                             sourceSize.width: height
0216                             sourceSize.height: height
0217                             anchors.centerIn: parent
0218                             fillMode: Image.PreserveAspectFit
0219                             mipmap: true
0220                         }
0221                     }
0222             }
0223         }
0224
0225         Item {
0226             id: wholeMainArea
0227             width: mainFunctionHeaderTuto.width
0228             height: mainFunctionHeaderTuto.height + mainFunctionCodeAreaTuto.height
0229             anchors.top: mainFunctionHeaderTuto.top
0230             anchors.left: mainFunctionHeaderTuto.left
0231         }
0232
0233         HeaderArea {
0234             id: procedureHeaderTuto
0235             headerText: procedureHeader.headerText
0236             headerIcon: procedureHeader.headerIcon
0237             headerOpacity: 1
0238             width: parent.width * 0.4
0239             height: parent.height / 10
0240             radius: 4 * ApplicationInfo.ratio
0241             visible: procedureVisible || loopVisible
0242             anchors.top: mainFunctionCodeAreaTuto.bottom
0243             anchors.right: parent.right
0244         }
0245
0246         Item {
0247             id: loopCounterTuto
0248             visible: loopVisible
0249             width: layoutTuto.buttonWidth * 3
0250             height: layoutTuto.buttonHeight
0251             anchors.top: procedureHeaderTuto.bottom
0252             anchors.horizontalCenter: procedureHeaderTuto.horizontalCenter
0253
0254             Rectangle {
0255                 id: decreaseButton
0256                 width: parent.width * 0.3
0257                 height: parent.height
0258                 anchors.left: parent.left
0259                 anchors.leftMargin: 1.2 * ApplicationInfo.ratio
0260                 border.width: 1.2 * ApplicationInfo.ratio
0261                 border.color: "grey"
0262                 radius: decreaseButton.width * 0.1
0263
0264                 GCText {
0265                     id: decreaseSign
0266                     anchors.fill: parent
0267                     horizontalAlignment: Text.AlignHCenter
0268                     verticalAlignment: Text.AlignVCenter
0269                     fontSizeMode: Text.Fit
0270                     wrapMode: Text.WordWrap
0271                     color: "#373737"
0272                     text: Activity.LoopEnumValues.MINUS_SIGN
0273                 }
0274             }
0275
0276             Rectangle {
0277                 id: loopCounter
0278                 width: parent.width * 0.3
0279                 height: parent.height
0280                 anchors.left: decreaseButton.right
0281                 anchors.leftMargin: 1.2 * ApplicationInfo.ratio
0282                 border.width: 1.2 * ApplicationInfo.ratio
0283                 border.color: "grey"
0284                 radius: loopCounter.width * 0.1
0285
0286                 GCText {
0287                     id: loopCounterText
0288                     anchors.fill: parent
0289                     horizontalAlignment: Text.AlignHCenter
0290                     verticalAlignment: Text.AlignVCenter
0291                     fontSizeMode: Text.Fit
0292                     wrapMode: Text.WordWrap
0293                     color: "#373737"
0294                     text: "1"
0295                 }
0296             }
0297
0298             Rectangle {
0299                 id: increaseButton
0300                 width: parent.width * 0.3
0301                 height: parent.height
0302                 anchors.left: loopCounter.right
0303                 anchors.leftMargin: 1.2 * ApplicationInfo.ratio
0304                 border.width: 1.2 * ApplicationInfo.ratio
0305                 border.color: "grey"
0306                 radius: increaseButton.width * 0.1
0307
0308                 GCText {
0309                     id: increaseSign
0310                     anchors.fill: parent
0311                     horizontalAlignment: Text.AlignHCenter
0312                     verticalAlignment: Text.AlignVCenter
0313                     fontSizeMode: Text.Fit
0314                     wrapMode: Text.WordWrap
0315                     color: "#373737"
0316                     text: Activity.LoopEnumValues.PLUS_SIGN
0317                 }
0318             }
0319         }
0320
0321         GridView {
0322             id: procedureCodeAreaTuto
0323             visible: procedureVisible || loopVisible
0324             width: parent.width * 0.4
0325             height: parent.height * 0.29
0326             cellWidth: layoutTuto.buttonWidth
0327             cellHeight: layoutTuto.buttonHeight
0328
0329             anchors.right: parent.right
0330             anchors.top: loopVisible ? loopCounterTuto.bottom : procedureHeaderTuto.bottom
0331
0332             interactive: false
0333             model: procedureModelTuto
0334
0335             delegate: Item {
0336                     id: procedureItemTuto
0337                     width: layoutTuto.buttonWidth
0338                     height: layoutTuto.buttonHeight
0339
0340                     Rectangle {
0341                         width: parent.width - 1 * ApplicationInfo.ratio
0342                         height: parent.height - 1 * ApplicationInfo.ratio
0343                         border.width: 1.2 * ApplicationInfo.ratio
0344                         border.color: "#2a2a2a"
0345                         anchors.centerIn: parent
0346                         radius: width / 18
0347                         color: "#ffffff"
0348
0349                         Image {
0350                             source: Activity.url + name + ".svg"
0351                             width: Math.round(parent.width / 1.2)
0352                             height: Math.round(parent.height / 1.2)
0353                             sourceSize.width: height
0354                             sourceSize.height: height
0355                             anchors.centerIn: parent
0356                             fillMode: Image.PreserveAspectFit
0357                             mipmap: true
0358                         }
0359                     }
0360             }
0361         }
0362
0363         Item {
0364             id: wholeProcedureArea
0365             width: procedureHeaderTuto.width
0366             height: procedureHeaderTuto.height + procedureCodeAreaTuto.height
0367             anchors.top: procedureHeaderTuto.top
0368             anchors.left: procedureHeaderTuto.left
0369         }
0370
0371         Rectangle {
0372             id: highlightArea
0373             color: "#00000000"
0374             border.width: 3 * ApplicationInfo.ratio
0375             border.color: "#E63B3B"
0376             anchors.fill: activeAreaTuto === "instruction" ? instructionAreaTuto :
0377                             ( activeAreaTuto === "main" ? wholeMainArea : wholeProcedureArea)
0378             scale: 1.05
0379         }
0380
0381         Rectangle {
0382             id: constraintInstructionTuto
0383             anchors.left: parent.left
0384             anchors.top: instructionAreaTuto.bottom
0385             anchors.topMargin: 5 * ApplicationInfo.ratio
0386             width: parent.width / 2.3
0387             height: parent.height / 8.9
0388             radius: 5
0389             z: 3
0390             color: "#E8E8E8" //paper white
0391             border.width: 1 * ApplicationInfo.ratio
0392             border.color: "#87A6DD"  //light blue
0393             visible: instructionTextVisible
0394
0395             GCText {
0396                 id: instructionTextTuto
0397                 anchors.fill: parent
0398                 anchors.margins: parent.border.width
0399                 horizontalAlignment: Text.AlignHCenter
0400                 verticalAlignment: Text.AlignVCenter
0401                 fontSizeMode: Text.Fit
0402                 wrapMode: Text.WordWrap
0403
0404                 text: instructionText.text
0405             }
0406         }
0407
0408         Item {
0409             id: runCodeLayout
0410             height: constraintInstructionTuto.height
0411             anchors.left: constraintInstructionTuto.right
0412             anchors.right: mainFunctionCodeAreaTuto.left
0413             anchors.verticalCenter: constraintInstructionTuto.verticalCenter
0414
0415             Image {
0416                 id: runCode
0417                 height: Math.min(parent.width, parent.height)
0418                 width: height
0419                 sourceSize.width: height
0420                 sourceSize.height: height
0421                 anchors.centerIn: parent
0422                 source:"qrc:/gcompris/src/core/resource/bar_ok.svg"
0423                 fillMode: Image.PreserveAspectFit
0424             }
0425         }
0426
0427     }
0428 }