improve formatting of game views using bootstrap and layout file

saasbook · Sep 6, 2023 · b6c4f31 · b6c4f31
1 parent 5bf8bf0
commit b6c4f31
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 64 deletions.
diff --git a/flipped-demos/ch03-saas/sinatra-sessions/#app.rb# b/flipped-demos/ch03-saas/sinatra-sessions/#app.rb#
diff --git a/flipped-demos/ch03-saas/ttt/tic_tac_toe.rb b/flipped-demos/ch03-saas/ttt/tic_tac_toe.rb
@@ -25,8 +25,9 @@ def move(player,square)
   end
 
   def board_full
-    # ! @board.any?(&:empty?)
     ! @board.any? { |square| square.empty? }
+    # or more concise:
+    #  ! @board.any?(&:empty?)
   end
 
   def over?

diff --git a/flipped-demos/ch03-saas/ttt/views/game.erb b/flipped-demos/ch03-saas/ttt/views/game.erb
@@ -1,54 +1,28 @@
-<!DOCTYPE html>
-<html>
-  <!-- fun exercise: make it so that the individual numbers in the squares are
-       clickable, and each player moves by clicking the number instead of typing
-       in a form field.  
-    -->
-  <head>
-    <style type="text/css">
-      * { font-family: sans-serif; font-size: 28pt; }
-      body { padding: 1em; }
-      table,td { border: 2px solid red; border-collapse: collapse;  padding: 1em; }
-      .emptySquare { color: grey; }
-      .x { color: green; font-weight: bold; font-size: 110%; }
-      .o { color: blue; font-weight: bold; font-size: 110%; }
-    </style>
-  </head>
-  <body>
-    <% if session[:message] %>
-    <div class="alert alert-danger">
-      <%= session[:message] %>
+<% if session[:message] %>
+  <div class="alert alert-danger">
+    <%= session[:message] %>
+  </div>
+<% end %>
+<div id="board">
+
+  <% row = col = 0 %>
+  <% 0.upto(2) do |row| %>
+  <div class="row ">
+    <% 0.upto(2) do |col| %>
+    <div class="col-3 text-center h1 border-primary
+                <%= 'border-bottom' if row != 2 %>
+                <%= 'border-right' if col != 2 %>">
+      <% square_num = row * 3 + col %>
+      <%= if (val = @game.board[square_num]).empty? then square_num else val end %>
     </div>
     <% end %>
-    <div id="board">
-      <table>
-        <thead></thead>
-        <tbody>
-          <% i = 0 %>
-          <% 3.times do %>
-          <tr>
-            <% 3.times do %>
-            <td>
-              <% val = @game.board[i] %>
-              <% if val.empty? %>
-                <span class="emptySquare"> <%= i %> </span>
-              <% else %>
-                <span class="<%= val %>"> <%= val %> </span>
-              <% end %>
-              <% i += 1 %>
-            </td>
-            <% end %>
-          </tr>
-          <% end %>
-        </tbody>
-      </table>
-    </div>
+  </div>
+  <% end %>
+</div>
 
-    <form method="post" action="/move">
-      <p><%= @game.turn %>'s move</p>
-      <p>Enter square 0-8</p>
-      <input type="text" name="square">
-      <input type="submit" value="Make Move">
-    </form>
-  </body>
-</html>
+<form method="post" action="/move">
+  <p><%= @game.turn %>'s move</p>
+  <p>Enter square 0-8</p>
+  <input type="text" name="square">
+  <input type="submit" value="Make Move">
+</form>
diff --git a/flipped-demos/ch03-saas/ttt/views/layout.erb b/flipped-demos/ch03-saas/ttt/views/layout.erb
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
+    <title>Tic Tac Toe</title>
+  </head>
+  <body>
+    <div class="container">
+      <%= yield %>
+    </div>
+  </body>
+</html>