• Home

Stack With Friends Demo

 import QtQuick 2.0
 import Felgo 3.0

 Flickable {
   id: levelList

   contentWidth: grid.width
   contentHeight: grid.height+offset.height
   flickableDirection: Flickable.VerticalFlick

   /*!
     Connect this property with either LevelEditor::authorGeneratedLevels, LevelEditor::applicationJSONLevels or LevelEditor::applicationQMLLevels. The level array will then be displayed with the levelItemDelegate. See \l{Example Usage} for an example.
    */
   property variant levelMetaDataArray: levelScene.levelArrayFromState()

   /*!
     This alias property provides access to the \l Column element used for the level list. You can change the default spacing for example from 2 to any other value.

     For a reference how the LevelSelectionList is implemented see \l{LevelSelectionList Source Code}.
    */
   property alias levelColumn: grid

   /*!
     This property defines the delegate for a single level in the  LevelSelectionList. You can access all of the LevelData::levelMetaData like the \c levelName with \c modelData.levelName.

     By default, a SimpleButton is used for the delegate:
     \code
     SimpleButton {
       height: 20
       width: levelSelectionList.width
       text: modelData.levelName
       onClicked: {
         levelSelectionList.levelSelected(modelData)
       }
     }
     \endcode

     \note: It is required to set the height of the delegate so it can be displayed in the LevelSelectionList. The width of the delegate is set by default to the width you set for the LevelSelectionList.
    */
   property Component levelItemDelegate: LevelItem {}

   signal nextPageClicked
   signal prevPageClicked

   onLevelMetaDataArrayChanged: {
     updateList()
   }

   function updateList() {

     // this removes the elements immediately to see an instant level loading screen
     // we could also leave the old data there!
     levelListRepeater.model = null

     isLoading = true
     changeModel.start()
   }

   function nextPage() {
     if(page>=pageCount) return;
     page++
     // don't update the list immediately, but load first
     //updateList()

     nextPageClicked()
   }

   function prevPage() {
     if(page<=1) return;

     page--
     //updateList()

     prevPageClicked()
   }

   property int pageSize: -1
   property int page: 1
   property int pageCount: 1

   // is used to only show the next and prev buttons when it is not loading
   property alias isLoading: loading.visible

   Timer {
     id: changeModel
     interval: 100
     onTriggered: {
       if(levelMetaDataArray) {
         levelListRepeater.model = levelMetaDataArray
       } else {
         isLoading = false
       }
     }
   }

   MultiResolutionImage {
     id: loading
     source: "../../assets/img/splash-text.png"
     anchors.centerIn: parent
     visible: false
   }

   Grid {
     id: grid
     // the default spacing is 2 pixels
     columns: 5
     spacing: 5

     Repeater {
       id: levelListRepeater

       // delegate is the default property of Repeater
       delegate: levelItemDelegate

       onModelChanged: {
         console.debug("LevelList: listModel changed to", model, ", stringified:", JSON.stringify(model))
         isLoading = false
       }
     }// end of Repeater
   }// end of Column

   Item {
     id: offset
     width: parent.width