Learn what Felgo offers to help your business succeed. Start your free evaluation today! Felgo for Your Business

MultiplayerDemo

 import QtQuick 2.0
 import Felgo 3.0

 Rectangle {
   id: playerTag

   // this will be the default size, it is same size as the contained text + some padding
   width: text.width + paddingHorizontal * 2
   height: text.height + paddingVertical * 2

   // round edges
   radius: 4
   color:  player.activeTurn ? "#fff" : "#ccc"

   border.width: player.leader? 2 : 1
   border.color:player.leader? "#80000000" : "#0b000000"

   // the horizontal margin from the Text element to the Rectangle at both the left and the right side.
   property int paddingHorizontal: 12
   // the vertical margin from the Text element to the Rectangle at both the top and the bottom side.
   property int paddingVertical: 7

   property MultiplayerUser player: modelData

   // the name of the player
   Text {
     id: text
     text: player.enabled ? player.name + " (" + player.userId + ")" : "Disabled"
     anchors.centerIn: parent
     anchors.verticalCenterOffset: 1
     font.pixelSize: 16
     color: "black"
   }

   // text showing whether the player was invited or not
   Text {
     id: invitedText
     text: player.invited ? "Invited" : ""
     anchors.horizontalCenter: parent.horizontalCenter
     anchors.bottom: parent.bottom
     font.pixelSize: 7
     color: "gray"
   }

   // rectangle marks connected players
   Rectangle {
     id: connectedText
     width: 5
     height: parent.height - 2
     anchors.verticalCenter: parent.verticalCenter
     x: parent.border.width
     color:  player.connected?"#7f97FF2E":"#8fFF2E2E"
     radius: 7
Qt_Technology_Partner_RGB_475 Qt_Service_Partner_RGB_475_padded