Added animations for spawning of a new tile

game.c

@@ -1,10 +1,12 @@
 #include "game.h"
+#include <raylib.h>
+#include <stdbool.h>
 #include <stdlib.h>
 #include <string.h>
 
 // Depending on the direction, move the tiles and check if we can merge with the
 // tiles in that direction. We merge the tiles only if they are of the same value
-void move(GameState_t *state, move_direction_t direction) {
+bool move(GameState_t *state, move_direction_t direction) {
   bool merged[BOARD_HEIGHT][BOARD_WIDTH] = {0};
   bool moved = false;
   switch (direction) {
@@ -158,6 +160,8 @@ void move(GameState_t *state, move_direction_t direction) {
   }
   if (moved)
     state->moves_made++;
+
+  return moved;
 }
 
 void reset_board(GameState_t *state) {
@@ -183,7 +187,7 @@ void reset_board(GameState_t *state) {
   }
 }
 
-bool spawn_tile(GameState_t *state) {
+void spawn_tile(GameState_t *state, Vector2 *spawned_tile_pos) {
   int empty_tiles[BOARD_WIDTH * BOARD_HEIGHT][2];
   int empty_count = 0;
 
@@ -198,13 +202,17 @@ bool spawn_tile(GameState_t *state) {
   }
 
   if (empty_count == 0)
-    return false;
+    return;
 
   int random_index = rand() % empty_count;
   int spawn_y = empty_tiles[random_index][0];
   int spawn_x = empty_tiles[random_index][1];
   state->board[spawn_y][spawn_x] = (rand() % 10 == 0) ? 4 : 2; // 10% chance to spawn a 4
-  return true;
+
+  spawned_tile_pos->x = spawn_x;
+  spawned_tile_pos->y = spawn_y;
+
+  return;
 }
 
 // This function will only run, if every tile is filled (checked by `spawn_tile`). We can take advantage of that and

game.h

@@ -16,7 +16,7 @@ typedef struct {
   unsigned int moves_made;
 } GameState_t;
 
-void move(GameState_t *state, move_direction_t direction);
+bool move(GameState_t *state, move_direction_t direction);
 void reset_board(GameState_t *state);
-bool spawn_tile(GameState_t *state);
+void spawn_tile(GameState_t *state, Vector2 *spawned_tile_pos);
 bool can_move(GameState_t *state);

main.c

@@ -8,23 +8,6 @@
 #include "game.h"
 #include "ui.h"
 
-const Color tile_colors[] = {
-    LIGHTGRAY, // 0 - Empty
-    BEIGE,     // 2
-    GOLD,      // 4
-    ORANGE,    // 8
-    ORANGE,    // 16
-    RED,       // 32
-    MAROON,    // 64
-    YELLOW,    // 128
-    GOLD,      // 256
-    ORANGE,    // 512
-    RED,       // 1024
-    MAROON,    // 2048
-    PINK,      // 4096
-    MAGENTA,   // 8192
-};
-
 static GameState_t game_state;
 
 int main() {
@@ -47,58 +30,10 @@ int main() {
   while (!WindowShouldClose()) {
     ClearBackground(RAYWHITE);
     BeginDrawing();
-
+    render(&game_state);
-    for (int y = 0; y < BOARD_HEIGHT; y++) {
-      for (int x = 0; x < BOARD_WIDTH; x++) {
-        int tile_value = game_state.board[y][x];
-        int pos_x = BOARD_MARGIN + x * (TILE_SIZE + TILE_SPACING);
-        int pos_y = BOARD_MARGIN + y * (TILE_SIZE + TILE_SPACING);
-        int color_index = (tile_value == 0) ? 0 : (int)log2(tile_value);
-
-        if ((size_t)color_index >= sizeof(tile_colors) / sizeof(tile_colors[0])) {
-          color_index = sizeof(tile_colors) / sizeof(tile_colors[0]) - 1; // Cap to the last color
-        }
-
-        DrawRectangle(pos_x, pos_y, TILE_SIZE, TILE_SIZE, tile_colors[color_index]);
-        if (tile_value != 0) {
-          const char *text = TextFormat("%d", tile_value);
-          DrawText(text, pos_x + TILE_SIZE / 2 - MeasureText(text, 20) / 2, pos_y + TILE_SIZE / 2 - 10, 20, BLACK);
-        }
-      }
-    }
-
-    DrawText(TextFormat("Score: %d", game_state.score), WINDOW_HEIGHT, BOARD_MARGIN, 20, BLACK);
-    DrawText(TextFormat("Moves used: %d", game_state.moves_made), WINDOW_HEIGHT, BOARD_MARGIN + 20, 20, BLACK);
-
-    if (game_state.status == PLAYING) {
-      DrawText("Drag with the mouse to move tiles", 400 - MeasureText("Drag with the mouse to move tiles", 20) / 2,
-               WINDOW_HEIGHT - 40, 20, GRAY);
-
-      // Reset button
-      DrawRectangle(500, 455, 275, 24, RED);
-      DrawText("Reset", 500 + 275 / 2 - MeasureText("Reset", 20) / 2, 455 + 4, 20, WHITE);
-    } else {
-      Color overlay = Fade(BLACK, 0.7f);
-      DrawRectangle(0, 0, WINDOW_WIDTH, 700, overlay);
-
-      if (game_state.status == WON) {
-        DrawText("You win!", 400 - MeasureText("You win!", 40) / 2, 250, 40, GREEN);
-      } else if (game_state.status == LOST) {
-        DrawText("Game over!", 400 - MeasureText("Game over!", 40) / 2, 250, 40, RED);
-      }
-
-      // Draw the scores under the win/loss message
-      DrawText(TextFormat("Score: %d", game_state.score),
-               400 - MeasureText(TextFormat("Score: %d", game_state.score), 20) / 2, 290, 20, WHITE);
-      DrawText(TextFormat("Moves used: %d", game_state.moves_made),
-               400 - MeasureText(TextFormat("Moves used: %d", game_state.moves_made), 20) / 2, 310, 20, WHITE);
-
-      DrawRectangle(400 - 100, 450, 200, 40, RED);
-      DrawText("Try again", 400 - MeasureText("Try again", 20) / 2, 455 + 4, 20, WHITE);
-    }
-
     EndDrawing();
     handle_mouse_input(&game_state);
+    handle_keyboard_input(&game_state);
   }
   CloseWindow();
   return 0;

ui.c

@@ -5,10 +5,64 @@
 #include <stdbool.h>
 #include <stdio.h>
 
+const Color tile_colors[] = {
+    LIGHTGRAY, // 0 - Empty
+    BEIGE,     // 2
+    GOLD,      // 4
+    ORANGE,    // 8
+    ORANGE,    // 16
+    RED,       // 32
+    MAROON,    // 64
+    YELLOW,    // 128
+    GOLD,      // 256
+    ORANGE,    // 512
+    RED,       // 1024
+    MAROON,    // 2048
+    PINK,      // 4096
+    MAGENTA,   // 8192
+};
+
 static bool is_dragging;
 static Vector2 drag_start_pos;
+static bool is_animating;
+
+// If there isn't a tile to animate then store it as {-1,-1}
+static Vector2 new_tile = {-1, 1};
+static float new_tile_animation_progress;
+
+// Common logic shared between both input handlers
+static void after_input(GameState_t *game_state) {
+  spawn_tile(game_state, &new_tile);
+  if (!can_move(game_state)) {
+    is_animating = false; // No more moves, so we won't be animating anymore
+    game_state->status = LOST;
+  } else {
+    // We moved, merged or spawned a tile, so we will be animating
+    is_animating = true;
+
+    // TODO: Allow for infinite play
+    for (int y = 0; y < BOARD_HEIGHT; y++) {
+      for (int x = 0; x < BOARD_WIDTH; x++) {
+        if (game_state->board[y][x] == 2048) {
+          game_state->status = WON;
+          return;
+        }
+      }
+    }
+  }
+
+  FILE *f = fopen("save.dat", "wb");
+  if (f) {
+    fwrite(game_state, sizeof(GameState_t), 1, f);
+    fclose(f);
+  }
+}
 
 void handle_mouse_input(GameState_t *game_state) {
+  // Don't allow any input while animating so we stay in sync
+  if (is_animating)
+    return;
+
   if (IsMouseButtonPressed(MOUSE_LEFT_BUTTON)) {
     drag_start_pos = GetMousePosition();
 
@@ -51,27 +105,106 @@ void handle_mouse_input(GameState_t *game_state) {
           move(game_state, UP);
         }
       }
-      if (!spawn_tile(game_state) && !can_move(game_state)) {
+      after_input(game_state);
-        game_state->status = LOST;
-        return;
-      }
-      // TODO: Allow for infinite play
-      for (int y = 0; y < BOARD_HEIGHT; y++) {
-        for (int x = 0; x < BOARD_WIDTH; x++) {
-          if (game_state->board[y][x] == 2048) {
-            game_state->status = WON;
-            return;
-          }
-        }
-      }
-
-      FILE *f = fopen("save.dat", "wb");
-      if (f) {
-        fwrite(game_state, sizeof(GameState_t), 1, f);
-        fclose(f);
-      }
     }
-
     is_dragging = false;
   }
 }
+
+void handle_keyboard_input(GameState_t *game_state) {
+  if (IsKeyReleased(KEY_R) || (game_state->status != PLAYING && IsKeyReleased(KEY_ENTER))) {
+    reset_board(game_state);
+  }
+
+  bool moved = false;
+  if (IsKeyReleased(KEY_UP)) {
+    moved = move(game_state, UP);
+  } else if (IsKeyReleased(KEY_DOWN)) {
+    moved = move(game_state, DOWN);
+  } else if (IsKeyReleased(KEY_LEFT)) {
+    moved = move(game_state, LEFT);
+  } else if (IsKeyReleased(KEY_RIGHT)) {
+    moved = move(game_state, RIGHT);
+  }
+
+  if (moved) {
+    after_input(game_state);
+  }
+}
+
+void animate_new_tile() {
+  if (new_tile.x == -1 && new_tile.y == -1)
+    return;
+
+  // Simple pop-in animation that scales the tile from 0 to full size
+  new_tile_animation_progress += GetFrameTime() * 5; // Adjust speed as needed
+  if (new_tile_animation_progress >= 1.0f) {
+    new_tile_animation_progress = 0.3f;
+    new_tile = (Vector2){-1, -1}; // Reset after animation completes
+    is_animating = false;
+  }
+}
+
+// Main render loop, responsible ONLY for redering
+void render(GameState_t *game_state) {
+  if (is_animating) {
+    animate_new_tile();
+  }
+
+  for (int y = 0; y < BOARD_HEIGHT; y++) {
+    for (int x = 0; x < BOARD_WIDTH; x++) {
+      int tile_value = game_state->board[y][x];
+      int pos_x = BOARD_MARGIN + x * (TILE_SIZE + TILE_SPACING);
+      int pos_y = BOARD_MARGIN + y * (TILE_SIZE + TILE_SPACING);
+      int color_index = (tile_value == 0) ? 0 : (int)log2(tile_value);
+
+      if ((size_t)color_index >= sizeof(tile_colors) / sizeof(tile_colors[0])) {
+        color_index = sizeof(tile_colors) / sizeof(tile_colors[0]) - 1; // Cap to the last color
+      }
+
+      if (is_animating && new_tile.x == x && new_tile.y == y) {
+        float scale = new_tile_animation_progress; // Scale from 0 to 1
+        int scaled_size = (int)(TILE_SIZE * scale);
+        int offset = (TILE_SIZE - scaled_size) / 2;
+        DrawRectangle(pos_x + offset, pos_y + offset, scaled_size, scaled_size, tile_colors[color_index]);
+      } else {
+        DrawRectangle(pos_x, pos_y, TILE_SIZE, TILE_SIZE, tile_colors[color_index]);
+      }
+      if (tile_value != 0) {
+        const char *text = TextFormat("%d", tile_value);
+        DrawText(text, pos_x + TILE_SIZE / 2 - MeasureText(text, 20) / 2, pos_y + TILE_SIZE / 2 - 10, 20, BLACK);
+      }
+    }
+  }
+
+  DrawText(TextFormat("Score: %d", game_state->score), WINDOW_HEIGHT, BOARD_MARGIN, 20, BLACK);
+  DrawText(TextFormat("Moves used: %d", game_state->moves_made), WINDOW_HEIGHT, BOARD_MARGIN + 20, 20, BLACK);
+
+  DrawText("By Piotr Kozak", WINDOW_WIDTH - MeasureText("By Piotr Kozak", 16) - 10, WINDOW_HEIGHT - 24, 16, GRAY);
+  if (game_state->status == PLAYING) {
+    DrawText("Drag with the mouse to move tiles", 400 - MeasureText("Drag with the mouse to move tiles", 20) / 2,
+             WINDOW_HEIGHT - 40, 20, GRAY);
+
+    // Reset button
+    DrawRectangle(500, 455, 275, 24, RED);
+    DrawText("Reset", 500 + 275 / 2 - MeasureText("Reset", 20) / 2, 455 + 4, 20, WHITE);
+  } else {
+    Color overlay = Fade(BLACK, 0.7f);
+    DrawRectangle(0, 0, WINDOW_WIDTH, 700, overlay);
+
+    if (game_state->status == WON) {
+      DrawText("You win!", 400 - MeasureText("You win!", 40) / 2, 250, 40, GREEN);
+    } else if (game_state->status == LOST) {
+      DrawText("Game over!", 400 - MeasureText("Game over!", 40) / 2, 250, 40, RED);
+    }
+
+    // Draw the scores under the win/loss message
+    DrawText(TextFormat("Score: %d", game_state->score),
+             400 - MeasureText(TextFormat("Score: %d", game_state->score), 20) / 2, 290, 20, WHITE);
+    DrawText(TextFormat("Moves used: %d", game_state->moves_made),
+             400 - MeasureText(TextFormat("Moves used: %d", game_state->moves_made), 20) / 2, 310, 20, WHITE);
+
+    DrawRectangle(400 - 100, 450, 200, 40, RED);
+    DrawText("Try again", 400 - MeasureText("Try again", 20) / 2, 455 + 4, 20, WHITE);
+  }
+}

ui.h

@@ -9,4 +9,6 @@
 #define WINDOW_WIDTH 800
 #define WINDOW_HEIGHT 600
 
+void render(GameState_t *game_state);
 void handle_mouse_input(GameState_t *game_state);
+void handle_keyboard_input(GameState_t *game_state);