start to create the tree widget

Todo.md

@@ -8,6 +8,8 @@
 
 ## Front
 
+- [ ] Create the tree display layout
+
 ## Ideas
 
 - [ ] add a hint system to indicate the number of words used by the best solution

data.json

@@ -20,7 +20,7 @@
         "sound_volume": 0.46621621621621623,
         "current_theme_image": "japanese_1",
         "current_music": "kids_party",
-        "current_theme_colors": "japanese_1"
+        "current_theme_colors": "japanese_2"
     },
     "unlocked_themes": {
         "japanese_1": {

screens/custom_widgets/__init__.py

@@ -23,4 +23,5 @@
 from screens.custom_widgets.colored_rounded_button import ColoredRoundedButton
 from screens.custom_widgets.colored_rounded_button_image import ColoredRoundedButtonImage
 from screens.custom_widgets.keyboard_layout import KeyboardLayout
-from screens.custom_widgets.levels_branchs import (LevelButton)
+from screens.custom_widgets.levels_branchs import LevelBranch
+from screens.custom_widgets.tree import TreeLayout, TreeScrollview

screens/custom_widgets/tree.kv

@@ -0,0 +1,26 @@
+#:kivy 2.2.1
+
+<TreeScrollview>:
+    bar_margin: 0
+    bar_width: 6
+    scroll_type:['bars', 'content']
+    do_scroll_x: True
+    do_scroll_y: True
+
+    canvas.before:
+        Color:
+            rgba: (0,0,0,0.5)
+        Rectangle:
+            pos: (0,0)
+            size: self.size
+        Color:
+            rgba: (1,1,1,1)
+        Line:
+            points: [0,0,self.width,0]
+            width: 2
+        Line:
+            points: [0,self.height,self.width,self.height]
+            width: 2
+
+<TreeLayout>:
+

screens/custom_widgets/tree.py

@@ -0,0 +1,39 @@
+"""
+Module to create the tree to display the user progress on a level.
+"""
+
+###############
+### Imports ###
+###############
+
+### Kivy imports ###
+from kivy.uix.scrollview import ScrollView
+from kivy.uix.relativelayout import RelativeLayout
+from kivy.properties import (
+    NumericProperty,
+    ListProperty
+)
+
+#############
+### Class ###
+#############
+
+
+class TreeScrollview(ScrollView):
+    """
+    Class containing the scrollview to scroll over the tree.
+    """
+
+
+class TreeLayout(RelativeLayout):
+    """
+    Class to create a tree layout to contain the user progress.
+    """
+
+    primary_color = ListProperty([0.5, 0.5, 0.5, 1.])
+    secondary_color = ListProperty([1., 1., 1., 1.])
+
+    def __init__(
+            self,
+            **kwargs):
+        super().__init__(**kwargs)

screens/game.kv

@@ -40,7 +40,7 @@
     ColoredRoundedButton:
         text: root.current_word
         background_color: (1,1,1,1)
-        pos_hint: {"center_x": 0.5,"y": 0.425}
+        pos_hint: {"center_x": 0.5,"y": 0.335}
         font_ratio: root.font_ratio
         font_size: LETTER_FONT_SIZE
         size_hint: (len(root.current_word)*0.05, 0.05)
@@ -52,7 +52,7 @@
     KeyboardLayout:
         id: keyboard_layout
         pos_hint: {"x": 0.05, "y": 0.1}
-        size_hint: (0.9, 0.2)
+        size_hint: (0.9, 0.17)
         touch_function: root.touch_letter
         touch_color: root.primary_color
         background_color: root.secondary_color
@@ -92,3 +92,10 @@
         release_function: root.go_to_next_level
         opacity: 0
         disable_button: True
+
+    TreeScrollview:
+        id: tree_scrollview
+        pos_hint: {"center_x":0.5, "center_y":0.585}
+        size_hint: (1,0.365)
+        bar_color: root.primary_color
+        bar_inactive_color: root.secondary_color

screens/game.py

@@ -78,6 +78,8 @@ def on_pre_enter(self, *args):
         current_theme_colors = USER_DATA.settings["current_theme_colors"]
         self.primary_color = THEMES_DICT[current_theme_colors]["primary"]
         self.secondary_color = THEMES_DICT[current_theme_colors]["secondary"]
+        self.transparent_secondary_color = [
+            self.secondary_color[0], self.secondary_color[1], self.secondary_color[2], 0.3]
         self.ids.keyboard_layout.build_keyboard()
 
         self.nb_stars = USER_DATA.classic_mode[self.current_act_id][self.current_level_id]["nb_stars"]
@@ -186,7 +188,10 @@ def build_word(self):
             if counter_letter == next_letter_counter:
                 outline_color = self.primary_color
             else:
-                outline_color = self.secondary_color
+                if counter_letter >= number_mandatory_letters:
+                    outline_color = self.transparent_secondary_color
+                else:
+                    outline_color = self.secondary_color
 
             # Determine the content of the letter
             try:
@@ -207,7 +212,7 @@ def build_word(self):
             letter_widget = ColoredRoundedButton(
                 text=letter,
                 background_color=(1, 1, 1, 1),
-                pos_hint={"x": x_position, "y": 0.35},
+                pos_hint={"x": x_position, "y": 0.275},
                 font_size=LETTER_FONT_SIZE,
                 font_ratio=self.font_ratio,
                 size_hint=(size_letter, height_letter),