- Changed main UI colors

- Added menu background animation
- Added media folder to put all UI related images.

gui/colors.py

@@ -1,15 +1,28 @@
 # colors.py
 # Contains color definitions in the form of tuples (length 3 -> RGB representation)
 
+# blue - 3b d6 ff
+# blue highlight - 31 b0 d1
+# red - ff 10 53
+# red highlight - d1 0E 44
+# grey - 7b 81 89
+
 BLACK = (0, 0, 0)
 WHITE = (255, 255, 255)
-RED = (255, 94, 88)
-RED_HIGHLIGHT = (255, 219, 212)
+# RED = (255, 94, 88)
+RED = (0xff, 0x10, 0x53)
+# RED_HIGHLIGHT = (255, 219, 212)
+RED_HIGHLIGHT = (0xd1, 0x0e, 0x44)
 GREEN = (0, 200, 0)
 GREEN_HIGHLIGHT = (0, 255, 0)
-BLUE = (59, 214, 255)
-BLUE_HIGHLIGHT = (164, 217, 221)
-GREY = (170, 191, 193)
+PURPLE = (0x6c, 0x6e, 0xA0)
+PURPLE_HIGHLIGHT = (0x59, 0x5b, 0x83)
+# BLUE = (59, 214, 255)
+BLUE = (0x3b, 0xd6, 0xff)
+# BLUE_HIGHLIGHT = (164, 217, 221)
+BLUE_HIGHLIGHT = (0x31, 0xb0, 0xd1)
+# GREY = (170, 191, 193)
+GREY = (0x7b, 0x81, 0x89)
 YELLOW = (0, 250, 250)
 HIGHLIGHT_LOW = 140
 HIGHLIGHT_HIGH = 200

gui/constants.py

@@ -50,13 +50,13 @@ class GameType(Enum):
 BUTTON_WIDTH, BUTTON_HEIGHT = 300, 50
 BUTTON_Y_SPACING = 1.5
 
-MENU_BUTTON_POSITIONS = {
+MENU_BUTTON_PROPERTIES = {
     0: {'x': (DISPLAY_WIDTH-BUTTON_WIDTH) / 2, 'y': (DISPLAY_HEIGHT / 3) + 1*BUTTON_HEIGHT*BUTTON_Y_SPACING,
-        'w': BUTTON_WIDTH, 'h': BUTTON_HEIGHT, 'ic': GREEN, 'ac': GREEN_HIGHLIGHT},
+        'w': BUTTON_WIDTH, 'h': BUTTON_HEIGHT, 'ic': PURPLE, 'ac': PURPLE_HIGHLIGHT},
     1: {'x': (DISPLAY_WIDTH-BUTTON_WIDTH) / 2, 'y': (DISPLAY_HEIGHT / 3) + 2*BUTTON_HEIGHT*BUTTON_Y_SPACING,
-        'w': BUTTON_WIDTH, 'h': BUTTON_HEIGHT, 'ic': GREEN, 'ac': GREEN_HIGHLIGHT},
+        'w': BUTTON_WIDTH, 'h': BUTTON_HEIGHT, 'ic': PURPLE, 'ac': PURPLE_HIGHLIGHT},
     2: {'x': (DISPLAY_WIDTH-BUTTON_WIDTH) / 2, 'y': (DISPLAY_HEIGHT / 3) + 3*BUTTON_HEIGHT*BUTTON_Y_SPACING,
-        'w': BUTTON_WIDTH, 'h': BUTTON_HEIGHT, 'ic': GREEN, 'ac': GREEN_HIGHLIGHT},
+        'w': BUTTON_WIDTH, 'h': BUTTON_HEIGHT, 'ic': PURPLE, 'ac': PURPLE_HIGHLIGHT},
     3: {'x': (DISPLAY_WIDTH-BUTTON_WIDTH) / 2, 'y': (DISPLAY_HEIGHT / 3) + 4*BUTTON_HEIGHT*BUTTON_Y_SPACING,
         'w': BUTTON_WIDTH, 'h': BUTTON_HEIGHT, 'ic': RED,   'ac': RED_HIGHLIGHT},
 }
@@ -103,7 +103,8 @@ class GameType(Enum):
      'w': MAIN_BOX_WIDTH, 'h': MAIN_BOX_HEIGHT},
 ]
 
-FRAMES_PER_SECOND = 60
+GAME_FRAMES_PER_SECOND = 60
+MENU_FRAMES_PER_SECOND = 30
 # after entering game loop pause for some time before allowing the user to click
 # fixes issues with accidental clicks
 PAUSE_BEFORE_USER_INPUT = 1

gui/gui_app.py

@@ -104,12 +104,11 @@ def do_nothing(self):
 
     def get_game_input(self, game_type, mouse_pos):
         if game_type == GameType.SINGLE_PLAYER:
+            # self.click_random_cell() used for debugginh
             if self.board.playerJustMoved == PLAYER_O:  # X's turn  todo allow user to select side to play
-                # self.click_random_cell()  todo used to testing
                 if mouse_pos is not None:
                     self.click_cell_under_mouse(mouse_pos)
             else:
-                # self.click_random_cell()  # todo replace with AI
                 board, move = self.get_best_engine_move()
                 for cell in self.allowed_cells:
                     if cell.board_idx == board and cell.cell_idx == move:
@@ -160,7 +159,7 @@ def game_loop(self, game_type):
             self.draw_side_to_move(-self.board.playerJustMoved)
 
             pygame.display.update()
-            self.clock.tick(FRAMES_PER_SECOND)
+            self.clock.tick(GAME_FRAMES_PER_SECOND)
 
     def menu_loop(self):
         while True:
@@ -169,18 +168,19 @@ def menu_loop(self):
                     self.quit_game()
 
             self.gameDisplay.fill(WHITE)
+            self.draw_menu_animation()
             self.message_display("Ultimate Tic Tac Toe", pos=(DISPLAY_WIDTH / 2, DISPLAY_HEIGHT / 3),
                                  font='comicsansms', size=40, update=False)
 
-            self.button("Single Player", **MENU_BUTTON_POSITIONS[0],
+            self.button("Single Player", **MENU_BUTTON_PROPERTIES[0],
                         action=partial(self.game_loop, GameType.SINGLE_PLAYER))
-            self.button("Two Player",    **MENU_BUTTON_POSITIONS[1],
+            self.button("Two Player", **MENU_BUTTON_PROPERTIES[1],
                         action=partial(self.game_loop, GameType.MULTI_PLAYER))
-            self.button("Settings",      **MENU_BUTTON_POSITIONS[2], action=self.do_nothing)
-            self.button("Quit",          **MENU_BUTTON_POSITIONS[3], action=self.quit_game)
+            self.button("Settings", **MENU_BUTTON_PROPERTIES[2], action=self.do_nothing)
+            self.button("Quit", **MENU_BUTTON_PROPERTIES[3], action=self.quit_game)
 
             pygame.display.update()
-            self.clock.tick(15)
+            self.clock.tick(MENU_FRAMES_PER_SECOND)
 
 
 if __name__ == '__main__':

gui/gui_board.py

@@ -3,6 +3,7 @@
 import pygame
 from gui.constants import *
 from board.ultimate_board import *
+from gui.menu_background import Background
 
 
 @total_ordering
@@ -48,6 +49,7 @@ def __init__(self):
         self.gameDisplay = pygame.display.set_mode((DISPLAY_WIDTH, DISPLAY_HEIGHT))
         pygame.display.set_caption('Ultimate Tic Tac Toe')
         self.clock = pygame.time.Clock()
+        self.background = Background(self.gameDisplay)
 
     @staticmethod
     def get_text_objects(text, font):
@@ -165,3 +167,7 @@ def draw_side_to_move(self, player_to_move):
         pygame.draw.rect(self.gameDisplay, BLACK, (OFFSET_X+8, OFFSET_Y-22, 24, 14))
         pygame.draw.rect(self.gameDisplay, self.colors[player_to_move], (OFFSET_X+10, OFFSET_Y-20, 20, 10))
         self.message_display(text=' to move', pos=(OFFSET_X+60, OFFSET_Y-15), font='comicsansms', size=14)
+
+    def draw_menu_animation(self):
+        self.background.update()
+

gui/menu_background.py

@@ -0,0 +1,46 @@
+import pygame
+import random
+from gui.constants import *
+
+
+class Animation:
+    __slots__ = ['img', 'x', 'y', 'x_increment', 'y_increment']
+
+    def __init__(self, img, x, y, x_increment, y_increment):
+        self.img = img
+        self.x = x
+        self.y = y
+        self.x_increment = x_increment
+        self.y_increment = y_increment
+
+
+class Background:
+    num_animations = 10
+
+    def __init__(self, game_display):
+        self.game_display = game_display
+        x_coords = (random.randrange(0, DISPLAY_WIDTH) for _ in range(self.num_animations))
+        y_coords = (random.randrange(0, DISPLAY_HEIGHT) for _ in range(self.num_animations))
+        increment_padding = [0] * (self.num_animations//2)
+        x_increment = [random.randrange(2, 5) for _ in range(self.num_animations // 2)]
+        x_increment.extend(increment_padding)
+        y_increment = increment_padding[:]
+        y_increment.extend([random.randrange(2, 5) for _ in range(self.num_animations // 2)])
+        self.animations = []
+        for x, y, increment_x, increment_y in zip(x_coords, y_coords, x_increment, y_increment):
+            hashtag_img = pygame.image.load('../media/hashtag_1.png')
+            self.animations.append(Animation(img=hashtag_img, x=x, y=y,
+                                             x_increment=increment_x, y_increment=increment_y))
+
+    def update(self):
+        for idx in range(len(self.animations)):
+            animation = self.animations[idx]
+            self.game_display.blit(animation.img, (animation.x, animation.y))
+
+            self.animations[idx].x += self.animations[idx].x_increment
+            if self.animations[idx].x > DISPLAY_WIDTH:
+                self.animations[idx].x = 0
+
+            self.animations[idx].y += self.animations[idx].y_increment
+            if self.animations[idx].y > DISPLAY_HEIGHT:
+                self.animations[idx].y = 0