Refactor and add white version

contents/config/config.qml

@@ -0,0 +1,10 @@
+import QtQuick 2.0
+import org.kde.plasma.configuration 2.0
+
+ConfigModel {
+    ConfigCategory {
+        name: i18n("General")
+        icon: "configure"
+        source: "configGeneral.qml"
+    }
+}

contents/config/main.xml

@@ -1 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<kcfg xmlns="http://www.kde.org/standards/kcfg/1.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.kde.org/standards/kcfg/1.0 http://www.kde.org/standards/kcfg/1.0/kcfg.xsd">
+    <kcfgfile name=""/>
 
+    <group name="General">
+        <entry name="sharkleColor" type="String">
+            <default>black</default>
+        </entry>
+    </group>
+</kcfg>

contents/ui/configGeneral.qml

@@ -0,0 +1,22 @@
+// configGeneral.qml
+import QtQuick 2.0
+import QtQuick.Controls 2.5
+import QtQuick.Layouts 1.12
+import org.kde.kirigami 2.4 as Kirigami
+
+Item {
+    id: page
+    property alias cfg_sharkleColor: sharkleColor.currentText
+
+
+    Kirigami.FormLayout {
+        anchors.left: parent.left
+        anchors.right: parent.right
+
+        ComboBox {
+            id: sharkleColor
+            Kirigami.FormData.label: "Sharkle Color:"
+            model: ["Black", "White"]
+        }
+    }
+}

contents/ui/main.qml

@@ -5,10 +5,9 @@ import QtMultimedia 5.15
 
 import org.kde.plasma.plasmoid 2.0
 import org.kde.plasma.core 2.0 as PlasmaCore
-import org.kde.plasma.components 3.0 as PlasmaComponents3
 
 Item {
-    Plasmoid.backgroundHints: "NoBackground"
+    Plasmoid.backgroundHints: PlasmaCore.Types.NoBackground
     Plasmoid.fullRepresentation: Item {
         Layout.minimumWidth: 100
         Layout.minimumHeight: 100
@@ -19,74 +18,79 @@ Item {
         property int talkIndex: 0
         property int soundIndex: 0
         property bool isIdle: true
+        property string sharkleColor: Plasmoid.configuration.sharkleColor.toLowerCase()
+
+        Timer {
+            id: animationTimer
+            interval: 100
+            running: true
+            repeat: true
+            onTriggered: {
+                // Loop frame 0 to 7
+                imageIndex = (imageIndex + 1) % 8
+
+                // Loop frame 0 to 1, every 8 iterations
+                talkIndex = imageIndex == 0 ? !talkIndex : talkIndex
+            }
+        }
+
+        Timer {
+            id: idleTimer
+            interval: 1600
+            running: false
+            repeat: false
+            onTriggered: {
+                // Set animation to idle
+                imageIndex = 0
+                isIdle = true
+            }
+        }
+
+        MediaPlayer {
+            id: mediaplayer
+            source: "../sounds/" + soundIndex + ".wav"
+        }
+        MouseArea {
+            anchors.fill: parent
+            onClicked: {
+                // Set animation to hello
+                isIdle = false
+                idleTimer.restart()
+
+                // Play sound
+                soundIndex = (soundIndex + 1) % 8
+                mediaplayer.play()
+            }
+        }
 
         Item {
+            id: imageContainer
             width: Math.min(parent.width, parent.height)
             height: Math.min(parent.width, parent.height)
             Image {
-                id: idle
+                id: idleImage
                 anchors.fill: parent
-                source: "../images/idle/" + imageIndex + ".png"
+                source: "../images/" + sharkleColor + "/idle/" + imageIndex + ".png"
                 visible: isIdle
             }
             Image {
-                id: hello
+                id: helloImage
                 anchors.fill: parent
-                source: "../images/hello/" + (imageIndex%4) + ".png"
+                source: "../images/" + sharkleColor + "/hello/" + (imageIndex%4) + ".png"
                 visible: !isIdle
             }
             Image {
-                id: talk
+                id: talkImage
                 width: parent.width
                 height: parent.height
-                anchors.right: idle.left
+                anchors.right: idleImage.left
                 anchors.rightMargin: -60
-                anchors.bottom: idle.top
+                anchors.bottom: idleImage.top
                 anchors.bottomMargin: -60
 
-                source: "../images/talk/" + (talkIndex) + ".png"
+                source: "../images/" + sharkleColor + "/talk/" + (talkIndex) + ".png"
                 visible: !isIdle
             }
-            Timer {
-                interval: 100
-                running: true
-                repeat: true
-                onTriggered: {
-                    // Loop 0 to 7
-                    imageIndex = (imageIndex + 1) % 8
-
-                    // Loop 0 to 1, change every 8 frames
-                    talkIndex = imageIndex == 0 ? !talkIndex : talkIndex
-                }
-            }
-            Timer {
-                id: idleTimer
-                interval: 1600
-                running: false
-                repeat: false
-                onTriggered: {
-                    // Set to idle
-                    imageIndex = 0
-                    isIdle = true
-                }
-            }
-            MediaPlayer {
-                id: mediaplayer
-                source: "../sounds/" + soundIndex + ".wav"
-            }
-            MouseArea {
-                anchors.fill: parent
-                onClicked: {
-                    // Set to hello
-                    isIdle = false
-                    idleTimer.restart()
-
-                    // Play sound
-                    soundIndex = (soundIndex + 1) % 8
-                    mediaplayer.play()
-                }
-            }
         }
     }
 }
-