Update connect_four_game.py

connect_four_game.py

@@ -111,27 +111,27 @@ class ConnectFour:
         return score
     
     def board_to_string(self) -> str:
-        '''Aligned board display with column numbers centered above each column'''
+        '''HTML-rendered board with perfectly aligned columns'''
         mapping = {0: '⚪', 1: '🔴', 2: '🟡'}
 
-        # Choose a cell width (characters). Larger width helps compensate for emoji display width.
-        cell_w = 4
+        # Start HTML table
+        html = "<table style='border-collapse: collapse; margin: auto; text-align: center;'>"
 
-        # Column header: center each column number inside the cell width
-        header = " " * 5  # left padding for row labels
-        header += "".join(f"{str(i):^{cell_w}}" for i in range(self.cols)) + "\n\n"
+        # Column headers
+        html += "<tr><td></td>"  # Empty corner cell for row labels
+        for i in range(self.cols):
+            html += f"<th style='padding:6px; color:#FFD700; font-weight:bold;'>{i}</th>"
+        html += "</tr>"
 
-        # Rows: prepend a row label (0..rows-1) then each cell centered inside cell_w
-        rows_str = ""
+        # Rows
         for row in range(self.rows):
-            rows_str += f" {row:<2} "  # row label with a little padding
+            html += f"<tr><th style='padding:6px; color:#FFD700; font-weight:bold;'>{row}</th>"
             for col in range(self.cols):
-                # center the token in the cell width; emojis are treated as single chars,
-                # but extra space in cell_w helps visual alignment.
-                rows_str += f"{mapping[self.board[row][col]]:^{cell_w}}"
-            rows_str += "\n"
+                html += f"<td style='padding:6px; font-size:26px;'>{mapping[self.board[row][col]]}</td>"
+            html += "</tr>"
 
-        return header + rows_str
+        html += "</table>"
+        return html
         
     
     def reset(self):