Update app.R

app.R

@@ -1,656 +1,495 @@
 library(shiny)
-# library(shinyjs)
-# library(shinydashboard)
-# library(future)
-# library(promises)
+library(shinyjs)
 
-# Enable future support
-# plan(multisession)
-
-max_hint <- 300
-size <- 100
-
-# Fungsi untuk membuat puzzle awal yang dapat diselesaikan
-create_solvable_puzzle <- function() {
-  # Puzzle solved
-  solved <- c(1, 2, 3, 4, 5, 6, 7, 8, 0)
-  
-  # Acak puzzle dengan langkah-langkah valid
-  puzzle <- solved
-  moves <- 0
-  blank_pos <- 9
-  
-  while(moves < 100) {
-    # Tentukan kemungkinan gerakan
-    possible_moves <- c()
-    if(blank_pos %% 3 != 1) possible_moves <- c(possible_moves, blank_pos - 1)  # Kiri
-    if(blank_pos %% 3 != 0) possible_moves <- c(possible_moves, blank_pos + 1)  # Kanan
-    if(blank_pos > 3) possible_moves <- c(possible_moves, blank_pos - 3)        # Atas
-    if(blank_pos < 7) possible_moves <- c(possible_moves, blank_pos + 3)        # Bawah
-    
-    # Pilih gerakan acak
-    move <- sample(possible_moves, 1)
-    
-    # Tukar posisi
-    temp <- puzzle[blank_pos]
-    puzzle[blank_pos] <- puzzle[move]
-    puzzle[move] <- temp
-    
-    blank_pos <- move
-    moves <- moves + 1
-  }
-  
-  return(puzzle)
-}
-
-# Fungsi untuk mengecek apakah puzzle sudah selesai
-is_solved <- function(puzzle) {
-  target <- c(1, 2, 3, 4, 5, 6, 7, 8, 0)
-  return(identical(puzzle, target))
-}
-
-# Fungsi untuk mendapatkan posisi kotak kosong
-get_blank_position <- function(puzzle) {
-  return(which(puzzle == 0))
-}
-
-# Fungsi untuk memindahkan kotak - dimodifikasi untuk return status pergerakan
-move_tile <- function(puzzle, tile_position) {
-  blank_pos <- get_blank_position(puzzle)
-  
-  # Cek apakah gerakan valid
-  valid_moves <- c()
-  if(blank_pos %% 3 != 1) valid_moves <- c(valid_moves, blank_pos - 1)  # Kiri
-  if(blank_pos %% 3 != 0) valid_moves <- c(valid_moves, blank_pos + 1)  # Kanan
-  if(blank_pos > 3) valid_moves <- c(valid_moves, blank_pos - 3)        # Atas
-  if(blank_pos < 7) valid_moves <- c(valid_moves, blank_pos + 3)        # Bawah
-  
-  # Jika gerakan valid, lakukan pertukaran
-  if(tile_position %in% valid_moves) {
-    # Lakukan pertukaran
-    temp <- puzzle[blank_pos]
-    puzzle[blank_pos] <- puzzle[tile_position]
-    puzzle[tile_position] <- temp
-    return(list(puzzle = puzzle, moved = TRUE))  # Return dengan status moved TRUE
-  }
-  
-  # Jika tidak valid, return puzzle tanpa perubahan dan status moved FALSE
-  return(list(puzzle = puzzle, moved = FALSE))
-}
-
-# Fungsi untuk menghitung jarak Manhattan antara dua posisi
-manhattan_distance <- function(pos1, pos2) {
-  row1 <- (pos1 - 1) %/% 3 + 1
-  col1 <- (pos1 - 1) %% 3 + 1
-  row2 <- (pos2 - 1) %/% 3 + 1
-  col2 <- (pos2 - 1) %% 3 + 1
-  return(abs(row1 - row2) + abs(col1 - col2))
-}
-
-# Fungsi untuk menghitung heuristik (jumlah jarak Manhattan semua kotak ke posisi target)
-calculate_heuristic <- function(puzzle) {
-  target_positions <- c(1, 2, 3, 4, 5, 6, 7, 8, 9)  # posisi target untuk angka 1-8, 0 di posisi 9
-  heuristic <- 0
-  
-  for(i in 1:8) {
-    current_pos <- which(puzzle == i)
-    target_pos <- i
-    heuristic <- heuristic + manhattan_distance(current_pos, target_pos)
-  }
-  
-  return(heuristic)
-}
-
-# Fungsi A* untuk mencari solusi optimal
-solve_puzzle <- function(initial_puzzle) {
-  # Queue untuk menyimpan state yang akan dieksplorasi
-  # Setiap elemen: list(puzzle = ..., cost = ..., path = ...)
-  queue <- list(list(puzzle = initial_puzzle, cost = 0, path = c()))
-  
-  # Set untuk menyimpan state yang sudah dikunjungi
-  visited <- list()
-  
-  # Target state
-  target <- c(1, 2, 3, 4, 5, 6, 7, 8, 0)
-  
-  while(length(queue) > 0) {
-    # Temukan state dengan cost terkecil
-    costs <- sapply(queue, function(x) x$cost)
-    min_index <- which.min(costs)[1]
-    current <- queue[[min_index]]
-    
-    # Hapus dari queue
-    queue <- queue[-min_index]
-    
-    # Cek apakah sudah mencapai target
-    if(identical(current$puzzle, target)) {
-      return(current$path)
-    }
-    
-    # Buat key untuk state ini
-    state_key <- paste(current$puzzle, collapse = ",")
-    
-    # Jika sudah dikunjungi, lewati
-    if(state_key %in% visited) {
-      next
-    }
-    
-    # Tandai sebagai sudah dikunjungi
-    visited <- c(visited, state_key)
-    
-    # Dapatkan posisi blank
-    blank_pos <- get_blank_position(current$puzzle)
-    
-    # Dapatkan semua gerakan valid
-    valid_moves <- c()
-    if(blank_pos %% 3 != 1) valid_moves <- c(valid_moves, blank_pos - 1)  # Kiri
-    if(blank_pos %% 3 != 0) valid_moves <- c(valid_moves, blank_pos + 1)  # Kanan
-    if(blank_pos > 3) valid_moves <- c(valid_moves, blank_pos - 3)        # Atas
-    if(blank_pos < 7) valid_moves <- c(valid_moves, blank_pos + 3)        # Bawah
-    
-    # Untuk setiap gerakan valid
-    for(move in valid_moves) {
-      # Buat salinan puzzle dan coba gerakan
-      new_puzzle <- current$puzzle
-      temp <- new_puzzle[blank_pos]
-      new_puzzle[blank_pos] <- new_puzzle[move]
-      new_puzzle[move] <- temp
-      
-      # Buat key untuk state baru
-      new_state_key <- paste(new_puzzle, collapse = ",")
-      
-      # Jika belum dikunjungi
-      if(!(new_state_key %in% visited)) {
-        # Hitung heuristik
-        heuristic <- calculate_heuristic(new_puzzle)
-        # Hitung cost (langkah + heuristik)
-        new_cost <- length(current$path) + 1 + heuristic
-        
-        # Tambahkan ke queue
-        new_path <- c(current$path, move)
-        queue <- c(queue, list(list(puzzle = new_puzzle, cost = new_cost, path = new_path)))
-      }
-    }
-  }
-  
-  # Jika tidak ditemukan solusi
-  return(NULL)
-}
-
-# Fungsi untuk mendapatkan hint berdasarkan solusi yang disimpan
-get_hint_from_solution <- function(puzzle, solution, current_step) {
-  # Jika solusi tidak tersedia atau sudah selesai
-  if(is.null(solution) || current_step >= length(solution)) {
-    return(NULL)
-  }
-  
-  # Kembalikan langkah berikutnya dalam solusi
-  return(solution[current_step + 1])
-}
-
-
-# Fungsi BFS untuk mencari solusi optimal
-solve_puzzle_bfs <- function(initial_puzzle) {
-  # Jika sudah solved, return 0
-  if(is_solved(initial_puzzle)) {
-    return(0)
-  }
-  
-  # Queue untuk menyimpan state yang akan dieksplorasi
-  # Setiap elemen: list(puzzle = ..., depth = ...)
-  queue <- list(list(puzzle = initial_puzzle, depth = 0))
-  
-  # Set untuk menyimpan state yang sudah dikunjungi
-  visited <- c()
-  visited[[paste(initial_puzzle, collapse = ",")]] <- TRUE
-  
-  while(length(queue) > 0) {
-    # Ambil elemen pertama dari queue
-    current <- queue[[1]]
-    queue <- queue[-1]
-    
-    # Dapatkan posisi blank
-    blank_pos <- get_blank_position(current$puzzle)
-    
-    # Dapatkan semua gerakan valid
-    valid_moves <- c()
-    if(blank_pos %% 3 != 1) valid_moves <- c(valid_moves, blank_pos - 1)  # Kiri
-    if(blank_pos %% 3 != 0) valid_moves <- c(valid_moves, blank_pos + 1)  # Kanan
-    if(blank_pos > 3) valid_moves <- c(valid_moves, blank_pos - 3)        # Atas
-    if(blank_pos < 7) valid_moves <- c(valid_moves, blank_pos + 3)        # Bawah
-    
-    # Untuk setiap gerakan valid
-    for(move in valid_moves) {
-      # Buat salinan puzzle dan coba gerakan
-      new_puzzle <- current$puzzle
-      temp <- new_puzzle[blank_pos]
-      new_puzzle[blank_pos] <- new_puzzle[move]
-      new_puzzle[move] <- temp
-      
-      # Cek apakah sudah mencapai target
-      if(is_solved(new_puzzle)) {
-        return(current$depth + 1)
-      }
-      
-      # Buat key untuk state baru
-      state_key <- paste(new_puzzle, collapse = ",")
-      
-      # Jika belum dikunjungi
-      if(is.null(visited[[state_key]])) {
-        # Tandai sebagai sudah dikunjungi
-        visited[[state_key]] <- TRUE
-        
-        # Tambahkan ke queue
-        queue <- c(queue, list(list(puzzle = new_puzzle, depth = current$depth + 1)))
-      }
-    }
-  }
-  
-  # Jika tidak ditemukan solusi (seharusnya tidak terjadi untuk puzzle yang solvable)
-  return(-1)
-}
+# Simple configuration
+CONFIG <- list(
+  tile_size = 150,
+  shuffle_moves = 100
+)
 
+source("minimal_global.R")
 
 # UI
 ui <- fluidPage(
-  # CSS untuk desain responsif
+  useShinyjs(),
+  
   tags$head(
+    tags$meta(name = "viewport", content = "width=device-width, initial-scale=1"),
     tags$style(HTML("
-      /* Base styles */
+      :root {
+        --tile-size: 150px;
+        --primary-color: #2196F3;
+        --success-color: #4CAF50;
+        --warning-color: #FF9800;
+        --border-radius: 8px;
+        --shadow-light: 0 2px 4px rgba(0,0,0,0.1);
+        --shadow-medium: 0 4px 8px rgba(0,0,0,0.15);
+        --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+      
+      body {
+        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        min-height: 100vh;
+        margin: 0;
+        padding: 20px 0;
+      }
+      
+      .container-fluid {
+        max-width: 800px;
+        margin: 0 auto;
+      }
+      
+      .game-container {
+        background: rgba(255, 255, 255, 0.95);
+        border-radius: 16px;
+        box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+        backdrop-filter: blur(10px);
+        padding: 30px;
+        margin: 20px;
+        text-align: center;
+      }
+      
+      .puzzle-grid {
+        display: grid;
+        grid-template-columns: repeat(3, var(--tile-size));
+        grid-template-rows: repeat(3, var(--tile-size));
+        gap: 8px;
+        justify-content: center;
+        margin: 30px auto;
+        padding: 20px;
+        background: rgba(0,0,0,0.05);
+        border-radius: var(--border-radius);
+      }
+      
       .puzzle-tile {
-        border: 2px solid #333;
-        background-color: #4CAF50;
+        width: var(--tile-size);
+        height: var(--tile-size);
+        border: none;
+        border-radius: var(--border-radius);
+        background: linear-gradient(145deg, var(--primary-color), #1976D2);
         color: white;
-        font-weight: bold;
+        font-size: 32px;
+        font-weight: 700;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
-        transition: all 0.2s ease;
+        transition: var(--transition);
+        box-shadow: var(--shadow-light);
+        position: relative;
+        overflow: hidden;
+      }
+      
+      .puzzle-tile::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: -100%;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+        transition: left 0.5s;
+      }
+      
+      .puzzle-tile:hover::before {
+        left: 100%;
       }
       
       .puzzle-tile:hover {
-        opacity: 0.9;
-        transform: scale(0.95);
+        transform: translateY(-2px) scale(1.02);
+        box-shadow: var(--shadow-medium);
       }
       
-      .puzzle-tile:disabled {
-        cursor: not-allowed;
+      .puzzle-tile:active {
+        transform: translateY(0) scale(0.98);
       }
       
       .empty-tile {
-        background-color: #f0f0f0;
-        border: 2px solid #333;
+        background: rgba(255,255,255,0.8);
+        border: 2px dashed #ccc;
+        box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
       }
       
-      .hint-highlight {
-        box-shadow: 0 0 15px 5px orange;
-        border: 3px solid orange !important;
-        z-index: 10;
+      .moves-counter {
+        background: white;
+        padding: 20px;
+        border-radius: var(--border-radius);
+        margin: 20px 0;
+        box-shadow: var(--shadow-light);
+        border-left: 4px solid var(--primary-color);
       }
       
-      /* Responsive grid */
-      .puzzle-grid {
-        display: grid;
-        grid-template-columns: repeat(3, 1fr);
-        grid-gap: 8px;
-        max-width: 500px;
-        margin: 0 auto;
-        padding: 10px;
+      .congratulations-card {
+        background: linear-gradient(145deg, #4CAF50, #388E3C);
+        color: white;
+        padding: 25px;
+        border-radius: var(--border-radius);
+        margin: 20px 0;
+        box-shadow: var(--shadow-medium);
+        animation: celebration 0.6s ease;
+        border: none;
       }
       
-      .puzzle-cell {
-        aspect-ratio: 1;
-        width: 100%;
+      @keyframes celebration {
+        0% {
+          opacity: 0;
+          transform: translateY(-20px) scale(0.9);
+        }
+        50% {
+          transform: translateY(-5px) scale(1.05);
+        }
+        100% {
+          opacity: 1;
+          transform: translateY(0) scale(1);
+        }
       }
       
-      /* Responsive button sizes */
-      .action-button {
-        width: 100%;
-        padding: 8px 12px;
-        font-size: clamp(12px, 2vw, 16px);
+      .moves-value {
+        font-size: 36px;
+        font-weight: bold;
+        color: var(--primary-color);
         margin-bottom: 5px;
       }
       
-      /* Stats table */
-      .stats-table {
-        width: 100%;
-        margin: 15px auto;
-        text-align: center;
-        font-size: clamp(14px, 2vw, 18px);
+      .moves-label {
+        font-size: 14px;
+        color: #666;
+        text-transform: uppercase;
+        letter-spacing: 1px;
       }
       
-      .stats-table td {
-        padding: 5px;
+      .congratulations-title {
+        font-size: 28px;
+        font-weight: bold;
+        margin-bottom: 10px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 10px;
       }
       
-      /* Large screens */
-      @media (min-width: 992px) {
-        .puzzle-grid {
-          max-width: 400px;
-        }
+      .congratulations-subtitle {
+        font-size: 18px;
+        font-weight: 600;
+        opacity: 0.9;
+      }
+      
+      .btn-game {
+        padding: 15px 30px;
+        border: none;
+        border-radius: var(--border-radius);
+        font-weight: 600;
+        font-size: 16px;
+        cursor: pointer;
+        transition: var(--transition);
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        margin: 10px;
+        min-width: 140px;
       }
       
-      /* Medium screens */
-      @media (min-width: 768px) and (max-width: 991px) {
-        .puzzle-grid {
-          max-width: 350px;
+      .btn-success {
+        background: linear-gradient(145deg, var(--success-color), #388E3C);
+        color: white;
+      }
+      
+      .btn-warning {
+        background: linear-gradient(145deg, var(--warning-color), #F57C00);
+        color: white;
+      }
+      
+      .btn-game:hover {
+        transform: translateY(-2px);
+        box-shadow: var(--shadow-medium);
+      }
+      
+      .victory-message {
+        background: linear-gradient(145deg, #4CAF50, #388E3C);
+        color: white;
+        padding: 25px;
+        border-radius: var(--border-radius);
+        margin: 20px 0;
+        font-size: 18px;
+        font-weight: 600;
+        box-shadow: var(--shadow-medium);
+        animation: slideIn 0.5s ease;
+      }
+      
+      @keyframes slideIn {
+        from {
+          opacity: 0;
+          transform: translateY(-20px);
         }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+      
+      .instructions {
+        background: white;
+        border-radius: var(--border-radius);
+        padding: 25px;
+        box-shadow: var(--shadow-light);
+        text-align: left;
+        margin: 20px 0;
+      }
+      
+      .instructions h3 {
+        color: var(--primary-color);
+        margin-bottom: 15px;
+        font-weight: 600;
+        text-align: center;
+      }
+      
+      .instructions ul {
+        padding-left: 20px;
+      }
+      
+      .instructions li {
+        margin-bottom: 8px;
+        line-height: 1.5;
+      }
+      
+      .goal-grid {
+        display: grid;
+        grid-template-columns: repeat(3, 50px);
+        gap: 5px;
+        justify-content: center;
+        margin: 15px 0;
+      }
+      
+      .goal-tile {
+        width: 50px;
+        height: 50px;
+        background: var(--primary-color);
+        color: white;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 4px;
+        font-weight: bold;
+        font-size: 16px;
+      }
+      
+      .goal-empty {
+        background: #f0f0f0;
+        border: 2px dashed #ccc;
       }
       
-      /* Small screens */
-      @media (max-width: 767px) {
-        .puzzle-grid {
-          max-width: 90vw;
-          grid-gap: 5px;
+      /* Responsive Design */
+      @media (max-width: 768px) {
+        :root {
+          --tile-size: 100px;
+        }
+        
+        .game-container {
+          margin: 10px;
+          padding: 20px;
+        }
+        
+        .puzzle-tile {
+          font-size: 24px;
+        }
+        
+        .moves-value {
+          font-size: 28px;
         }
         
-        .stats-table {
-          font-size: clamp(12px, 3vw, 16px);
+        .congratulations-title {
+          font-size: 24px;
+        }
+        
+        .congratulations-subtitle {
+          font-size: 16px;
+        }
+        
+        .btn-game {
+          min-width: auto;
+          padding: 12px 20px;
+          font-size: 14px;
         }
       }
       
-      /* Very small screens */
       @media (max-width: 480px) {
-        .puzzle-grid {
-          max-width: 95vw;
-          grid-gap: 3px;
+        :root {
+          --tile-size: 80px;
         }
         
-        .action-button {
-          padding: 6px 8px;
-          font-size: clamp(10px, 2.5vw, 14px);
+        .puzzle-tile {
+          font-size: 20px;
+        }
+        
+        .moves-value {
+          font-size: 24px;
+        }
+        
+        .congratulations-title {
+          font-size: 20px;
+        }
+        
+        .congratulations-subtitle {
+          font-size: 14px;
         }
       }
     "))
   ),
-  titlePanel(h1("Puzzle8", style='font-weight: bold;'), windowTitle = "Puzzle8"),
   
-  fluidRow(
-    column(5,
-      wellPanel(
-        tags$table(
-          style = "margin: 0 auto; border-collapse: separate; border-spacing: 25px 0; text-align: center;",
-          tags$tr(
-            tags$td("Langkah"),
-            tags$td(""),
-            tags$td("Hint Digunakan"),
-          ),
-          tags$tr(
-            tags$td(textOutput("move_count")), 
-            tags$td(""), 
-            tags$td(textOutput("hint_count"))
-          )
-        ), 
-        # Grid 3x3 menggunakan table untuk memastikan layout yang benar
-        tags$table(
-          style = "margin: 0 auto; border-collapse: separate; border-spacing: 5px;",
-          tags$tr(
-            tags$td(uiOutput("tile_1")),
-            tags$td(uiOutput("tile_2")),
-            tags$td(uiOutput("tile_3"))
-          ),
-          tags$tr(
-            tags$td(uiOutput("tile_4")),
-            tags$td(uiOutput("tile_5")),
-            tags$td(uiOutput("tile_6"))
-          ),
-          tags$tr(
-            tags$td(uiOutput("tile_7")),
-            tags$td(uiOutput("tile_8")),
-            tags$td(uiOutput("tile_9"))
-          ),
-          tags$tr(
-            tags$td(""),
-            tags$td(""),
-            tags$td(""),
-          ), 
-          tags$tr(
-            tags$td(actionButton("new_game", "New Game", class = "btn-success btn-block")),
-            tags$td(actionButton("reset_game", "Reset", class = "btn-warning btn-block")),
-            tags$td(actionButton("hint_button", "Hint", class = "btn-info btn-block"))
-          )
-        ),
-        br(),
-        uiOutput('game_state'),
-        uiOutput("final_moves_count"),
-        br(),
-        uiOutput('hint_message')
-      )
-    ),
-    column(7,
-      wellPanel(
-        h3("Cara Bermain"),
-        p("Tujuan: Susun angka 1-8 secara berurutan dengan kotak kosong di pojok kanan bawah."),
+  div(class = "container-fluid",
+    div(class = "game-container",
+      # Title
+      h1("🧩 Puzzle8", 
+         style = "background: linear-gradient(145deg, #2196F3, #1976D2); 
+                  -webkit-background-clip: text; -webkit-text-fill-color: transparent; 
+                  font-weight: 800; font-size: 3rem; margin-bottom: 30px;"),
+      
+      # Dynamic Counter/Congratulations Card
+      uiOutput("status_card"),
+      
+      # Puzzle Grid
+      div(class = "puzzle-grid",
+        lapply(1:9, function(i) {
+          div(id = paste0("tile_container_", i), uiOutput(paste0("tile_", i)))
+        })
+      ),
+      
+      # Control Buttons
+      div(class = "text-center",
+        actionButton("new_game", "New Game", class = "btn-game btn-success"),
+        actionButton("reset_game", "Reset", class = "btn-game btn-warning")
+      ),
+      
+      # Instructions
+      div(class = "instructions",
+        h3("🎯 How to Play"),
+        p("Arrange numbers 1-8 in order with the empty space in the bottom-right corner."),
         tags$ul(
-          tags$li("Hanya angka yang bersebelahan langsung dengan kotak kosong yang dapat dipindahkan"),
-          tags$li("Anda bisa memindahkan angka ke atas, bawah, kiri, atau kanan ke kotak kosong"),
-          tags$li("Klik pada angka yang ingin Anda pindahkan (harus bersebelahan dengan kotak kosong)")
+          tags$li("Click on tiles adjacent to the empty space to move them"),
+          tags$li("Only tiles next to the empty space can be moved"),
+          tags$li("Try to solve the puzzle in as few moves as possible!")
         ),
-        br(),
-        h4("Petunjuk:"),
-        p("Klik kotak angka yang bersebelahan dengan kotak kosong untuk memindahkannya."),
-        p("Susun angka 1-8 secara berurutan dengan kotak kosong di pojok kanan bawah.")
+        
+        div(style = "text-align: center; margin-top: 20px;",
+          h4("🏆 Goal:"),
+          div(class = "goal-grid",
+            lapply(1:8, function(i) {
+              div(class = "goal-tile", i)
+            }),
+            div(class = "goal-tile goal-empty")
+          )
+        )
       )
     )
-  ),
-  br()
+  )
 )
 
 # Server
 server <- function(input, output, session) {
-  # Inisialisasi state permainan
+  # Simple game state
   game_state <- reactiveValues(
-    puzzle = create_solvable_puzzle(),
+    puzzle = NULL,
     initial_puzzle = NULL,
     moves = 0,
-    game_won = FALSE,
-    hints_used = 0,
-    hint_position = NULL,
-    solution = NULL,
-    solution_step = 0
+    game_won = FALSE
   )
   
-  # Simpan puzzle awal saat aplikasi dimulai
-  observe({
-    if(is.null(game_state$initial_puzzle)) {
-      game_state$initial_puzzle <- game_state$puzzle
-      # Hitung ulang langkah optimal (seharusnya sama dengan yang disimpan)
-      game_state$optimal_steps <- solve_puzzle_bfs(game_state$initial_puzzle)
-    }
-  })
-  
-  # Observer untuk menghitung solusi setiap kali puzzle berubah
+  # Initialize game
   observe({
-    # Hanya hitung solusi jika game belum selesai
-    if(!game_state$game_won) {
-      # Hitung solusi menggunakan A* algorithm
-      solution <- solve_puzzle(game_state$puzzle)
-      game_state$solution <- solution
-      game_state$solution_step <- 0  # Reset langkah solusi
+    if(is.null(game_state$puzzle)) {
+      new_puzzle <- create_solvable_puzzle()
+      game_state$puzzle <- new_puzzle
+      game_state$initial_puzzle <- new_puzzle
     }
   })
   
-  # Tangani klik pada kotak puzzle (melalui observer global)
+  # Tile click handlers
   observe({
-    # Cek semua kemungkinan input tile
-    for(i in 1:9) {
-      local({
-        tile_id <- i
-        input_name <- paste0("tile_", tile_id)
-        
-        observeEvent(input[[input_name]], {
-          if(!game_state$game_won) {
-            # Panggil move_tile dan dapatkan hasil dengan status pergerakan
-            result <- move_tile(game_state$puzzle, tile_id)
+    lapply(1:9, function(i) {
+      observeEvent(input[[paste0("tile_", i)]], {
+        if(!game_state$game_won && !is.null(game_state$puzzle)) {
+          result <- move_tile(game_state$puzzle, i)
+          
+          if(result$moved) {
+            game_state$puzzle <- result$puzzle
+            game_state$moves <- game_state$moves + 1
             
-            # Hanya update puzzle dan increment moves jika pergerakan valid
-            if(result$moved) {
-              game_state$puzzle <- result$puzzle
-              game_state$moves <- game_state$moves + 1
-              game_state$hint_position <- NULL  # Reset hint saat pemain bergerak
-              game_state$solution_step <- game_state$solution_step + 1  # Increment langkah solusi
-              
-              # Cek apakah puzzle sudah selesai
-              if(is_solved(game_state$puzzle)) {
-                game_state$game_won <- TRUE
-              }
+            # Check win condition
+            if(is_solved(game_state$puzzle)) {
+              game_state$game_won <- TRUE
+              showNotification(
+                paste("🎉 Congratulations! Solved in", game_state$moves, "moves!"), 
+                type = "message", duration = 5
+              )
             }
           }
-        })
+        }
       })
-    }
+    })
   })
   
-  # Tombol permainan baru
+  # New Game button
   observeEvent(input$new_game, {
-    message("New Game created")
     new_puzzle <- create_solvable_puzzle()
     game_state$puzzle <- new_puzzle
-    game_state$initial_puzzle <- new_puzzle  # Update initial puzzle
+    game_state$initial_puzzle <- new_puzzle
     game_state$moves <- 0
     game_state$game_won <- FALSE
-    game_state$hints_used <- 0
-    game_state$hint_position <- NULL
-    game_state$solution <- NULL
-    game_state$solution_step <- 0
-    # Hitung ulang langkah optimal (seharusnya sama dengan yang disimpan)
-    game_state$optimal_steps <- solve_puzzle_bfs(game_state$initial_puzzle)
+    
+    showNotification("New game started!", type = "message")
   })
   
-  # Tombol reset
+  # Reset button
   observeEvent(input$reset_game, {
-    message("Game reset")
     if(!is.null(game_state$initial_puzzle)) {
       game_state$puzzle <- game_state$initial_puzzle
       game_state$moves <- 0
       game_state$game_won <- FALSE
-      game_state$hints_used <- 0
-      game_state$hint_position <- NULL
-      game_state$solution_step <- 0
-      # Hitung ulang langkah optimal (seharusnya sama dengan yang disimpan)
-      game_state$optimal_steps <- solve_puzzle_bfs(game_state$initial_puzzle)
-    }
-  })
-  
-  # Tombol hint
-  observeEvent(input$hint_button, {
-    if(!game_state$game_won & game_state$hints_used <= max_hint) {
-      # Dapatkan hint dari solusi yang disimpan
-      hint_pos <- get_hint_from_solution(game_state$puzzle, game_state$solution, game_state$solution_step)
       
-      if(!is.null(hint_pos)) {
-        game_state$hint_position <- hint_pos
-        game_state$hints_used <- game_state$hints_used + 1
-      }
+      showNotification("Game reset!", type = "message")
     }
   })
   
-  # Render setiap tile secara individual
-  for(i in 1:9) {
-    local({
-      tile_index <- i
+  # Render tiles
+  lapply(1:9, function(i) {
+    output[[paste0("tile_", i)]] <- renderUI({
+      req(game_state$puzzle)
       
-      output[[paste0("tile_", tile_index)]] <- renderUI({
-        value <- game_state$puzzle[tile_index]
-        
-        # Tentukan style berdasarkan apakah ini adalah hint
-        is_hint <- !is.null(game_state$hint_position) && game_state$hint_position == tile_index
-        hint_style <- if(is_hint) "box-shadow: 0 0 10px 3px orange; border: 3px solid orange;" else ""
-        
-        if(value == 0) {
-          # Kotak kosong
-          div(
-            style = paste0("width: ", size, "px; height: ", size, "px; border: 2px solid #333; 
-                     background-color: #f0f0f0; display: flex; align-items: center; 
-                     justify-content: center; font-size: 24px; font-weight: bold;", hint_style),
-            ""
-          )
-        } else {
-          # Kotak dengan angka
-          actionButton(
-            paste0("tile_", tile_index),
-            label = as.character(value),
-            style = paste0("width: ", size, "px; height: ", size, "px; border: 2px solid #333; 
-                     background-color: #4CAF50; color: white; font-size: 24px; 
-                     font-weight: bold;", hint_style)
-          )
-        }
-      })
+      value <- game_state$puzzle[i]
+      
+      if(value == 0) {
+        div(class = "empty-tile")
+      } else {
+        actionButton(
+          paste0("tile_", i),
+          label = as.character(value),
+          class = "puzzle-tile"
+        )
+      }
     })
-  }
-  
-  # Status permainan
-  output$game_status <- renderText({
-    blank_pos <- get_blank_position(game_state$puzzle)
-    return(blank_pos)
-  })
-  # Jumlah langkah
-  output$move_count <- renderText({
-    if(!is.null(game_state$optimal_steps) && game_state$optimal_steps >= 0) {
-      optimal <- game_state$optimal_steps
-    } else {
-      optimal <- "Menghitung..."
-    }
-    paste0(game_state$moves, " / ", optimal)
   })
   
-  output$final_moves_count <- renderUI({
+  # Dynamic Status Card (Moves Counter or Congratulations)
+  output$status_card <- renderUI({
     if(game_state$game_won) {
-      div(
-        style = "text-align: center; font-size: 16px;",
-        paste("Selesai dalam", game_state$moves, "langkah!")
+      # Congratulations Card
+      div(class = "congratulations-card",
+        div(class = "congratulations-title",
+          "🏆 Congratulations!"
+        ),
+        div(class = "congratulations-subtitle",
+          paste("Puzzle solved in", game_state$moves, "moves!")
+        )
       )
-    }
-  })
-
-  # Jumlah hint yang digunakan
-  output$hint_count <- renderText({
-    paste(game_state$hints_used, "/ ", max_hint)
-  })
-  
-  # Langkah optimal
-  output$optimal_steps <- renderText({
-    if(!is.null(game_state$optimal_steps) && game_state$optimal_steps >= 0) {
-      game_state$optimal_steps
     } else {
-      "Menghitung..."
-    }
-  })
-
-  # Pesan hint
-  output$hint_message <- renderUI({
-    if(!is.null(game_state$hint_position) & game_state$hints_used < max_hint & !game_state$game_won) {
-      div(
-        style = "text-align: center; color: orange; font-size: 16px; font-weight: bold;",
-        icon("lightbulb"),
-        paste("Hint: Klik angka", game_state$puzzle[game_state$hint_position])
-      )
-    } else if(game_state$hints_used >= max_hint & !game_state$game_won) {
-      div(
-        style = "text-align: center; color: red; font-size: 16px; font-weight: bold;",
-        paste0("Anda telah menggunakan semua hint (", game_state$hints_used, " / ", max_hint, ")")
-      )
-    }
-  })
-  
-  # Status kemenangan
-  output$game_won <- reactive({
-    return(game_state$game_won)
-  })
-  
-  # Untuk conditionalPanel
-  output$game_state <- renderUI({
-    req(game_state$game_won)
-    if(game_state$game_won){
-      div(
-        style = "text-align: center; color: green; font-size: 20px; font-weight: bold;",
-        icon("trophy"),
-        "Selamat! Anda Menyelesaikan Puzzle!"
+      # Moves Counter Card
+      div(class = "moves-counter",
+        div(class = "moves-value", game_state$moves),
+        div(class = "moves-label", "Moves")
       )
     }
   })
 }
 
-# Jalankan aplikasi
+# Run the application
 shinyApp(ui = ui, server = server)