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,57 +18,34 @@ Item {
         property int talkIndex: 0
         property int soundIndex: 0
         property bool isIdle: true
+        property string sharkleColor: Plasmoid.configuration.sharkleColor.toLowerCase()
 
-        Item {
-            width: Math.min(parent.width, parent.height)
-            height: Math.min(parent.width, parent.height)
-            Image {
-                id: idle
-                anchors.fill: parent
-                source: "../images/idle/" + imageIndex + ".png"
-                visible: isIdle
-            }
-            Image {
-                id: hello
-                anchors.fill: parent
-                source: "../images/hello/" + (imageIndex%4) + ".png"
-                visible: !isIdle
-            }
-            Image {
-                id: talk
-                width: parent.width
-                height: parent.height
-                anchors.right: idle.left
-                anchors.rightMargin: -60
-                anchors.bottom: idle.top
-                anchors.bottomMargin: -60
-
-                source: "../images/talk/" + (talkIndex) + ".png"
-                visible: !isIdle
-            }
         Timer {
+            id: animationTimer
             interval: 100
             running: true
             repeat: true
             onTriggered: {
-                    // Loop 0 to 7
+                // Loop frame 0 to 7
                 imageIndex = (imageIndex + 1) % 8
 
-                    // Loop 0 to 1, change every 8 frames
+                // Loop frame 0 to 1, every 8 iterations
                 talkIndex = imageIndex == 0 ? !talkIndex : talkIndex
             }
         }
+
         Timer {
             id: idleTimer
             interval: 1600
             running: false
             repeat: false
             onTriggered: {
-                    // Set to idle
+                // Set animation to idle
                 imageIndex = 0
                 isIdle = true
             }
         }
+
         MediaPlayer {
             id: mediaplayer
             source: "../sounds/" + soundIndex + ".wav"
@@ -77,7 +53,7 @@ Item {
         MouseArea {
             anchors.fill: parent
             onClicked: {
-                    // Set to hello
+                // Set animation to hello
                 isIdle = false
                 idleTimer.restart()
 
@@ -86,7 +62,35 @@ Item {
                 mediaplayer.play()
             }
         }
-        }
-    }
-}
 
+        Item {
+            id: imageContainer
+            width: Math.min(parent.width, parent.height)
+            height: Math.min(parent.width, parent.height)
+            Image {
+                id: idleImage
+                anchors.fill: parent
+                source: "../images/" + sharkleColor + "/idle/" + imageIndex + ".png"
+                visible: isIdle
+            }
+            Image {
+                id: helloImage
+                anchors.fill: parent
+                source: "../images/" + sharkleColor + "/hello/" + (imageIndex%4) + ".png"
+                visible: !isIdle
+            }
+            Image {
+                id: talkImage
+                width: parent.width
+                height: parent.height
+                anchors.right: idleImage.left
+                anchors.rightMargin: -60
+                anchors.bottom: idleImage.top
+                anchors.bottomMargin: -60
+
+                source: "../images/" + sharkleColor + "/talk/" + (talkIndex) + ".png"
+                visible: !isIdle
+            }
+        }
+    }
+}