New games page UI

tamu-edu-students · krishnacalindi · Nov 14, 2024 · Nov 1, 2024 · Nov 1, 2024 · Nov 2, 2024
commit 558e5e3c790c8bb1b5f0e6a6a3012f4f9b4a027e
diff --git a/app/assets/stylesheets/dashboard.css b/app/assets/stylesheets/dashboard.css
@@ -5,7 +5,7 @@
     padding: 20px;
     background-color: #e0e0e0;  /* Light gray background */
     border-radius: 10px;
-    margin-bottom: 20px;
+    margin: 20px 50px;
   }
 
   /* Each Stat Card */

diff --git a/app/assets/stylesheets/games.css b/app/assets/stylesheets/games.css
@@ -14,6 +14,8 @@
 .dropdown-content {
   display: none;
   position: absolute;
+  right: 0;
+  margin-right: 10px;
   background-color: #f9f9f9;
   border: 2px solid black;
   min-width: 160px;
@@ -37,6 +39,35 @@
   display: block;
 }
 
+
+.dropdown-content-account {
+  display: none;
+  position: absolute;
+  right: 0;
+  margin-right: 170px;
+  background-color: #f9f9f9;
+  border: 2px solid black;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  z-index: 1;
+  font-family: Verdana, Geneva, Tahoma, sans-serif;
+}
+
+.dropdown-content-account a {
+  color: black;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+}
+
+.dropdown-content-account a:hover {
+  background-color: #f1f1f1;
+}
+
+.dropdown:hover .dropdown-content-account {
+  display: block;
+}
+
 .dropdown:hover .dropbtn {
   background-color: white;
   color: black;
@@ -45,24 +76,33 @@
 
 .game-list {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(2, 1fr);
   gap: 20px;
   margin-top: 20px;
   width: 90%;
   margin: 0 auto;
 }
 
 .game-item {
-  padding: 15px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px 50px;
   border: 1px solid #000;
   text-align: center;
   border-radius: 20px;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
 }
 
+.game-image {
+  width: auto;
+  height: 100px;
+  margin-bottom: 10px;
+}
+
 .game-item:hover {
-  transform: scale(1.10);
+  transform: scale(1.04);
   box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.2);
   border: 40px;
 }
diff --git a/app/assets/stylesheets/spellingbee.css b/app/assets/stylesheets/spellingbee.css
@@ -167,34 +167,46 @@ td {
 
 .hex {
     width: 100px;
-    height: 100px; 
+    height: 100px;
     clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
-    background-color: var(--tertiary-clr);
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 1.5rem;
     color: var(--font-clr);
     position: relative;
-    transition: background-color 0.3s;
+    /* background-color: var(--primary-clr); */
+    z-index: 1;
 }
 
-.hex-center {
-    background-color: var(--primary-clr);
-}
+/* .hex::after {
+    content: "";
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    width: calc(100% + 4px);
+    height: calc(100% + 4px);
+    clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
+    background-color: black;
+    z-index: 0;
+} */
 
 .hex-content {
-    position: absolute;
-    width: 100%;
-    height: 100%;
+    position: relative;
+    z-index: 2; /* Ensure text is visible */
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 1.5rem;
     color: black;
 }
 
+
+.hex-center {
+    background-color: var(--primary-clr);
+}
+
 .hex:hover {
     cursor: pointer;
     background-color: var(--primary-clr);
-}
+}
diff --git a/app/assets/stylesheets/users.css b/app/assets/stylesheets/users.css
@@ -2,12 +2,10 @@ table {
   background-color: #7c818a;
   color: white;
   width: 90%;
-  margin: 0 auto;
+  margin: 10px auto;
   height: 50%;
   border-radius: 15px;
   text-align: center;
-  margin-left: 0px;
-  margin-right: auto;
   font-size: 20px;
   padding: 10px;
   border-collapse: collapse; 

diff --git a/app/views/games/_games.html.erb b/app/views/games/_games.html.erb
@@ -2,11 +2,14 @@
 
 <body>
 <h2 style="text-align:center;">Games</h2>
-    <div class="game-list">
+  <div class="game-list">
     <% @games.each do |game| %>
       <div class="game-item">
-        <h3><%= game.name %></h3>
-        <%= button_to 'Play', game_path(game), method: :get, title: "Play" ,class: 'btn btn-login' %>
+        <img src="<%= game.image_url %>" alt="<%= game.name %> image" class="game-image">
+        <div>
+          <h3><%= game.name %></h3>
+          <%= button_to 'Play', game_path(game), method: :get, title: "Play", class: 'btn btn-login' %>
+        </div>
       </div>
     <% end %>
   </div>

diff --git a/app/views/shared/_all_pages_nav.html.erb b/app/views/shared/_all_pages_nav.html.erb
@@ -32,7 +32,7 @@
         <% else %>
         <div class="dropdown">
             <button id="myacc" title="My Account", class="btn btn-login"><i class="fas fa-user"></i></button>
-            <div class="dropdown-content">
+            <div class="dropdown-content-account">
                 <%= link_to dashboard_path do %><i class="fas fa-chart-bar"></i> Statistics<% end %>
 
                 <%= link_to user_path(@current_user) do %><i class="fas fa-user-circle"></i> Profile<% end %>

diff --git a/db/migrate/20241112195746_add_image_url_to_games.rb b/db/migrate/20241112195746_add_image_url_to_games.rb
@@ -0,0 +1,5 @@
+class AddImageUrlToGames < ActiveRecord::Migration[7.2]
+  def change
+    add_column :games, :image_url, :string
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
diff --git a/db/seeds.rb b/db/seeds.rb
@@ -1,15 +1,15 @@
 ## add initial games to the database
 initial_games = [
-    { name: 'Spelling Bee', game_path: 'bees_play_path' },
-    { name: 'Wordle', game_path: 'wordles_play_path' },
-    { name: 'Letter Boxed', game_path: 'boxes_play_path' },
-    { name: '2048', game_path: 'game_2048_play_path' }
+    { name: 'Spelling Bee', game_path: 'bees_play_path', image_url: 'https://www.pngkey.com/png/full/431-4311161_spelling-bee-spelling-bee-logo.png' },
+    { name: 'Wordle', game_path: 'wordles_play_path', image_url: 'https://brandmentions.com/wiki/images/c/cd/Wordle_logo.png' },
+    { name: 'Letter Boxed', game_path: 'boxes_play_path', image_url: 'https://calebrob.com/assets/images/letter_boxed.png' },
+    { name: '2048', game_path: 'game_2048_play_path', image_url: 'https://is1-ssl.mzstatic.com/image/thumb/Purple221/v4/6a/d4/1c/6ad41c3a-eb36-329f-513e-08e3912681f8/AppIcon-0-0-1x_U007emarketing-0-4-85-220.png/512x512bb.jpg' }
 ]
 
 initial_games.each do |game|
   temp_game = Game.find_or_create_by(name: game[:name])
 
-  temp_game.update(game_path: game[:game_path])
+  temp_game.update(game_path: game[:game_path], image_url: game[:image_url])
 end
 
 Game.find_or_create_by(id: -1, name: 'Dummy Game', game_path: 'welcome')