[Kool]

Hi All,

I’m exploring refactoring my ‘game’ to a VPlay App. I found that I did not need physics, collision detection, etc and using VPlay Apps has been considerably easier for developing the UI and gameplay.

A crucial component in the WebStorage, which documentation says VPlay Apps supports it.

When creating a WebStorage component, the following errors appear at startup:

qrc:///qml/VPlay/gamenetwork/WebStorage.qml:583:3: QML Connections: Cannot assign to non-existent property "onApplicationPaused"
qrc:///qml/VPlay/gamenetwork/WebStorage.qml:583:3: QML Connections: Cannot assign to non-existent property "onApplicationResumed"

 

qrc:///qml/VPlay/gamenetwork/WebStorage.qml:584: ReferenceError: gameWindow is not defined

Any clues on how to resolve compatibility here?

Many thanks!

[Kool]

Seems like WebStorage is not yet compatible with VPlay Apps. When trying to write a key:

qrc:///qml/VPlay/gamenetwork/WebStorageLogic.js:158: TypeError: Cannot read property 'api' of undefined

Is there an alternative to WebStorage?

My intention is to use Facebook log in and allow syncing across devices to store level results and perhaps compare scores with friends.

[GüntherFelgo Team]

Hi Kool,

Thanks for your post!

There is no alternate solution to WebStorage at the moment, but we’re working on better compatibility between App and Game Components, we’ll be sure to also have a look at the WebStorage then for one of the next updates.

 

Best,
Günther

[Alec]

I used web storage in a v-play app a little while ago. I did get it working in the end but I can’t remember the exact details I’m afraid.

 

Looking at the code, it seems I had to give the id: gameWindow to the app element. I’m not sure if anything has changed since then, but it might be worth a try.

 

App {  
   id: gameWindow
.
.
.
 VPlayGameNetwork {

        id: myGameNetworkItem

        gameId: 366

        secret: "mySecret"

    }

    WebStorage{

        id: storage

        databaseName: "myDataBaseName"

        gameNetworkItem: myGameNetworkItem

        perUserStore: false

        dataConflictStrategy: "serverDataOverwritesClientData"

        onInitiallyInServerSyncChanged: {console.log("SOMETHING HAS SYNCED")}

        onInitiallyInServerSyncOrErrorChanged: console.log("HMMMM, SYNC ERROR!!!")

        Component.onCompleted: getStoredData()

    }

.
.
.
//the rest of my code here
}

 

edit: not sure about these code blocks on safari

 

[Kool]

Hi Alec,

It works! Here’s some example code (press “Write” then “Read”):

import Felgo 3.0
import QtQuick 2.0

App {
    id: gameWindow

    NavigationStack {
        Page {
            title: qsTr("Main Page")

            Row {
                anchors.centerIn: parent

                AppButton {
                    text: "Write"
                    onClicked: storage.setValue("value", utils.generateRandomValueBetween(1, 100))
                }

                AppButton {
                    text: "Read"
                    onClicked: readValue.text = storage.getValue("value")
                }

                AppText {
                    id: readValue
                }
            }
        }

    }

    VPlayGameNetwork {
        id: myGameNetworkItem
        gameId: 366
        secret: "mySecret"
    }

    WebStorage {
        id: storage
        gameNetworkItem: myGameNetworkItem
    }
}

It could be the case that App defines the required functions and properties as in GameWindow.

[Kool]

GT said:

Hi Kool,

Thanks for your post!

There is no alternate solution to WebStorage at the moment, but we’re working on better compatibility between App and Game Components, we’ll be sure to also have a look at the WebStorage then for one of the next updates.

 

Best,
Günther

Hi Gunther,

Given the example Alec and I posted above, can you see any potential issues with this setup? It’d be really handy to start working with WebStorage now and when the official integration comes along in a later version, switch over to that.

Many thanks!

[GüntherFelgo Team]

Hi Kool!

Based on a quick first look the WebStorage is safe to use with the above changes.

Best,
Günther

[Kool]

Hi All,

Here’s some example code that gets compatibility in Apps for the VPlayGameNetwork and VPlayGameNetworkView:

import Felgo 3.0
import QtQuick 2.0

App {
    id: gameWindow

    NavigationStack {
        Page {
            title: qsTr("Main Page")

            Row {
                id: storageRow
                anchors {top: parent.top; horizontalCenter: parent.horizontalCenter}

                AppButton {
                    text: "Write Storage"
                    onClicked: storage.setValue("value", utils.generateRandomValueBetween(1, 100))
                }

                AppButton {
                    text: "Read Storage"
                    onClicked: readValue.text = storage.getValue("value")
                }

                AppText {
                    id: readValue
                }
            }

            Row {
                id: gameRow
                anchors {top: storageRow.bottom; topMargin: 10; horizontalCenter: parent.horizontalCenter}

                AppButton {
                    text: "Write Game Network"
                    onClicked: gameNetwork.reportScore(utils.generateRandomValueBetween(1, 100), "leaderboard")
                }

                AppButton {
                    text: "Read Game Network"
                    onClicked: readGameNetworkValue.text = gameNetwork.userHighscoreForLeaderboard("leaderboard")
                }

                AppText {
                    id: readGameNetworkValue
                }
            }

            Item {
                anchors {top: gameRow.bottom; left: parent.left; right: parent.right; bottom: parent.bottom}

                VPlayGameNetworkView {
                    id: gameView
                    anchors.fill: parent
                    gameNetworkItem: gameNetwork
                }
            }
        }

    }

    VPlayGameNetwork {
        id: gameNetwork
        gameNetworkView: gameView
        gameId: 372
        secret: "helloworld"
    }

    WebStorage {
        id: storage
        gameNetworkItem: gameNetwork
    }
}