Add the experience progress bar widget in the profile screen

data.json

@@ -6,8 +6,8 @@
     },
     "history": {},
     "settings": {
-        "music_volume": 0.0,
-        "sound_volume": 0.3,
+        "music_volume": 0.4577702702702703,
+        "sound_volume": 0.7554835493519442,
         "current_theme_image": "lake",
         "current_music": "kids_party",
         "current_theme_colors": "japanese_1"

screens/__init__.py

@@ -12,7 +12,8 @@
     CustomButton,
     ThreeStars,
     SideImageButton,
-    RoundedButtonImage
+    RoundedButtonImage,
+    ExperienceCounter
 )
 
 # Import the screens

screens/custom_widgets/__init__.py

@@ -13,6 +13,7 @@
 from screens.custom_widgets.act_button import ActButton
 from screens.custom_widgets.buy_button import BuyButton
 from screens.custom_widgets.coins_count import CoinsCounter
+from screens.custom_widgets.experience_count import ExperienceCounter
 from screens.custom_widgets.theme_layout import ThemeLayout
 from screens.custom_widgets.rounded_button_image import RoundedButtonImage
 

screens/custom_widgets/custom_progress_bar.kv

@@ -5,7 +5,7 @@
     # Background
     canvas.before:
         Color:
-            rgba: self.background_color
+            rgba: self.secondary_color
         Rectangle:
             pos:self.pos
             size:self.size

screens/custom_widgets/custom_progress_bar.py

@@ -12,14 +12,7 @@
     Widget
 )
 from kivy.properties import (
-    ObjectProperty
-)
-
-### Local imports ###
-
-from tools.constants import (
-    MAIN_COLOR,
-    SECOND_COLOR
+    ColorProperty
 )
 
 #############
@@ -32,17 +25,18 @@ class CustomProgressBar(Widget):
     A custom button with a white round rectangle background.
     """
 
-    primary_color = ObjectProperty()
-    background_color = ObjectProperty()
+    primary_color = ColorProperty()
+    secondary_color = ColorProperty()
 
     def __init__(
             self,
             value=0.5,
-            primary_color=MAIN_COLOR,
-            background_color=SECOND_COLOR,
             **kwargs):
         super().__init__(**kwargs)
 
-        self.primary_color = primary_color
-        self.background_color = background_color
+        self.bind(primary_color = self.my_function)
+        self.bind(secondary_color = self.my_function)
         self.value = value
+
+    def my_function(self, base_widget, value):
+        pass

screens/custom_widgets/experience_count.kv

@@ -0,0 +1,49 @@
+#:kivy 2.2.1
+#:import PATH_IMAGES tools.path.PATH_IMAGES
+
+<ExperienceCounter>:
+
+    # Background
+    canvas.before:
+        Color:
+            rgba: self.background_color
+        RoundedRectangle:
+            pos:(0,0)
+            size:self.size
+            radius:[30,]
+
+    # Name
+    Label:
+        text: "Exp"
+        font_size: root.font_ratio * root.font_size
+        pos_hint: {"x":0.1, "center_y":0.7}
+        size_hint: (1, None)
+        font_name: root.text_font_name
+        line_height: 1
+        text_size: self.size
+        color: (0,0,0,1)
+        halign: "left"
+        valign: "middle"
+
+    # Experience left
+    Label:
+        text: root.label_experience_left
+        font_size: root.font_ratio * root.font_size
+        pos_hint: {"right":0.9, "center_y":0.7}
+        size_hint: (1, None)
+        font_name: root.text_font_name
+        line_height: 1
+        text_size: self.size
+        color: (0,0,0,1)
+        halign: "right"
+        valign: "middle"
+
+    # Experience progress bar
+    CustomProgressBar:
+        primary_color: (1, 1, 0, 1)
+        background_color: (0, 0, 0, 1)
+        value: root.percentage_experience
+        size_hint: (0.8, 0.3)
+        pos_hint: {"center_x": 0.5, "center_y":0.3}
+        primary_color: root.primary_color
+        secondary_color: root.secondary_color

screens/custom_widgets/experience_count.py

@@ -0,0 +1,77 @@
+"""
+Module to create coins counter.
+"""
+
+###############
+### Imports ###
+###############
+
+### Kivy imports ###
+from kivy.uix.relativelayout import RelativeLayout
+from kivy.properties import (
+    StringProperty,
+    NumericProperty,
+    ColorProperty
+)
+
+### Local imports ###
+from tools.path import (
+    PATH_TEXT_FONT
+)
+from tools.constants import (
+    CUSTOM_BUTTON_BACKGROUND_COLOR,
+    OPACITY_ON_BUTTON_PRESS,
+    EXPERIENCE_FONT_SIZE,
+    THEMES_DICT
+)
+
+#############
+### Class ###
+#############
+
+
+class ExperienceCounter(RelativeLayout):
+    """
+    A custom layout for the experience counter.
+    """
+
+    background_color = CUSTOM_BUTTON_BACKGROUND_COLOR
+    label_experience_left = StringProperty()
+    percentage_experience = NumericProperty()
+    experience_left = NumericProperty()
+    font_size = NumericProperty()
+    font_ratio = NumericProperty(1)
+    theme_colors = StringProperty()
+    primary_color = ColorProperty()
+    secondary_color = ColorProperty()
+
+    def __init__(
+            self,
+            text_font_name=PATH_TEXT_FONT,
+            font_size=EXPERIENCE_FONT_SIZE,
+            font_ratio=None,
+            **kwargs):
+        if font_ratio is not None:
+            self.font_ratio = font_ratio
+        super().__init__(**kwargs)
+        self.bind(percentage_experience=self.update_experience)
+        self.bind(experience_left=self.update_experience)
+        self.bind(theme_colors=self.update_colors)
+        self.text_font_name = text_font_name
+        self.font_size = font_size
+
+    def update_colors(self, base_widget, value):
+        self.primary_color = THEMES_DICT[self.theme_colors]["primary"]
+        self.secondary_color = THEMES_DICT[self.theme_colors]["secondary"]
+
+    def update_experience(self, base_widget, value):
+        self.label_experience_left = "+ " + str(self.experience_left) + " XP"
+
+    def on_press(self):
+        if self.button_mode:
+            self.opacity = OPACITY_ON_BUTTON_PRESS
+
+    def on_release(self):
+        if self.button_mode:
+            self.release_function()
+            self.opacity = 1

screens/custom_widgets/theme_layout.py

@@ -23,8 +23,6 @@
     PATH_TEXT_FONT
 )
 from tools.constants import (
-    MAIN_COLOR,
-    SECOND_COLOR,
     CUSTOMIZATION_LAYOUT_FONT_SIZE,
     USER_DATA,
     THEMES_DICT

screens/profile.kv

@@ -48,9 +48,18 @@
         color: TEXT_FONT_COLOR
         halign: "left"
 
-    CustomProgressBar:
-        primary_color: (1, 1, 0, 1)
-        background_color: (0, 0, 0, 1)
-        value: 0.7
-        size_hint: (0.3, 0.025)
-        pos_hint: {"center_x": 0.25, "center_y":0.6}
+    # Experience counter
+    ExperienceCounter:
+        size_hint: (0.4, 0.07)
+        pos_hint: {"center_x":0.25, "center_y":0.6}
+        font_ratio: root.font_ratio
+        experience_left: 10
+        percentage_experience: 0.7
+        theme_colors: root.theme_colors
+
+    # Coins counter
+    CoinsCounter:
+        size_hint: (0.45, 0.07)
+        pos_hint: {"center_x":0.725, "center_y":0.6}
+        font_ratio: root.font_ratio
+        coins_count: root.coins_count

screens/profile.py

@@ -8,7 +8,10 @@
 
 ### Kivy imports ###
 
-from kivy.properties import StringProperty
+from kivy.properties import (
+    StringProperty,
+    NumericProperty
+)
 
 ### Local imports ###
 
@@ -36,6 +39,8 @@ class ProfileScreen(ImprovedScreen):
 
     user_status = StringProperty()
     user_level = StringProperty()
+    coins_count = NumericProperty()
+    theme_colors = StringProperty()
 
     def __init__(self, **kwargs) -> None:
         current_theme_image = USER_DATA.settings["current_theme_image"]
@@ -46,9 +51,15 @@ def __init__(self, **kwargs) -> None:
 
         self.user_status = USER_DATA.user_profile["status"]
         self.user_level = "Level " + str(USER_DATA.user_profile["level"])
+        self.theme_colors = USER_DATA.settings["current_theme_colors"]
+
+    def on_pre_enter(self, *args):
+        self.coins_count = USER_DATA.user_profile["coins"]
+        return super().on_pre_enter(*args)
 
     def on_enter(self, *args):
         current_theme_image = USER_DATA.settings["current_theme_image"]
+        self.theme_colors = USER_DATA.settings["current_theme_colors"]
         self.set_back_image_path(
             PATH_BACKGROUNDS + THEMES_DICT[current_theme_image]["image"])
         return super().on_enter(*args)

tools/constants.py

@@ -184,11 +184,10 @@ def __init__(self) -> None:
 ACT_BUTTON_FONT_SIZE = 25
 BOTTOM_BAR_HEIGHT = 0.12
 CUSTOM_BUTTON_BACKGROUND_COLOR = (1, 1, 1, 0.7)
-MAIN_COLOR = (1, 0, 0, 1)
-SECOND_COLOR = (0, 0, 0, 1)
 OPACITY_ON_BUTTON_PRESS = 0.8
 CUSTOMIZATION_LAYOUT_FONT_SIZE = 20
 COINS_COUNT_FONT_SIZE = 22
+EXPERIENCE_FONT_SIZE = 15
 POS_HINT_BACK_ARROW = {"x":0.02, "top":0.99}
 RATE_CHANGE_OPACITY = 0.05