mirror of
https://github.com/ryankazokas/turbovault-app.git
synced 2026-04-17 02:52:55 +00:00
Moving to github
This commit is contained in:
169
app/views/games/show.html.erb
Normal file
169
app/views/games/show.html.erb
Normal file
@@ -0,0 +1,169 @@
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="bg-white p-6 rounded-lg shadow">
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<div class="flex gap-6">
|
||||
<!-- IGDB Cover Image -->
|
||||
<% if @game.igdb_game&.cover_url.present? %>
|
||||
<div class="flex-shrink-0">
|
||||
<%= image_tag @game.igdb_game.cover_image_url("cover_big"),
|
||||
alt: @game.title,
|
||||
class: "w-32 h-44 object-cover rounded-lg shadow-lg" %>
|
||||
<div class="mt-2 text-center">
|
||||
<span class="text-xs text-gray-500 flex items-center justify-center gap-1">
|
||||
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z"/>
|
||||
</svg>
|
||||
IGDB
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<!-- Title and Platform -->
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold mb-2"><%= @game.title %></h1>
|
||||
<p class="text-gray-600 mb-2"><%= @game.platform.name %></p>
|
||||
|
||||
<!-- IGDB Match Status -->
|
||||
<% if @game.igdb_id.present? %>
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="px-2 py-1 bg-green-100 text-green-800 text-xs font-semibold rounded">
|
||||
✓ IGDB Matched
|
||||
</span>
|
||||
<% if @game.igdb_match_confidence %>
|
||||
<span class="text-xs text-gray-500">
|
||||
<%= @game.igdb_match_confidence.to_i %>% confidence
|
||||
</span>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<!-- IGDB Release Date -->
|
||||
<% if @game.igdb_game&.first_release_date %>
|
||||
<p class="text-sm text-gray-600">
|
||||
<strong>Released:</strong> <%= @game.igdb_game.first_release_date.strftime("%B %Y") %>
|
||||
</p>
|
||||
<% end %>
|
||||
<% elsif current_user.igdb_sync_enabled? %>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded">
|
||||
No IGDB Match
|
||||
</span>
|
||||
<%= link_to "Find Match", igdb_matches_path, class: "text-xs text-indigo-600 hover:text-indigo-800" %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex space-x-2">
|
||||
<%= link_to "Edit", edit_game_path(@game), class: "px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700" %>
|
||||
<%= button_to "Delete", @game, method: :delete, data: { turbo_confirm: "Are you sure you want to delete '#{@game.title}'? This will permanently remove it from your collection." }, class: "px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700" %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- IGDB Summary -->
|
||||
<% if @game.igdb_game&.summary.present? %>
|
||||
<div class="mb-6 p-4 bg-gray-50 rounded-lg border-l-4 border-indigo-500">
|
||||
<h3 class="text-sm font-semibold text-gray-700 mb-2">About this game (from IGDB)</h3>
|
||||
<p class="text-gray-700 text-sm leading-relaxed"><%= @game.igdb_game.summary %></p>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Format</label>
|
||||
<span class="px-3 py-1 inline-flex text-sm font-semibold rounded-full <%= @game.physical? ? 'bg-blue-100 text-blue-800' : 'bg-green-100 text-green-800' %>">
|
||||
<%= @game.format.titleize %>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Date Added</label>
|
||||
<p class="text-gray-900"><%= @game.date_added.strftime("%B %d, %Y") %></p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Completion Status</label>
|
||||
<p class="text-gray-900"><%= @game.completion_status&.titleize || "Not set" %></p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Rating</label>
|
||||
<p class="text-gray-900"><%= @game.user_rating ? "⭐ #{@game.user_rating}/5" : "Not rated" %></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<% if @game.genres.any? %>
|
||||
<div class="mb-6">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Genres</label>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<% @game.genres.each do |genre| %>
|
||||
<span class="px-3 py-1 bg-gray-200 text-gray-700 rounded-full text-sm"><%= genre.name %></span>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<% if @game.physical? %>
|
||||
<div class="mb-6">
|
||||
<h2 class="text-xl font-bold mb-3">Physical Details</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Condition</label>
|
||||
<p class="text-gray-900"><%= @game.condition&.titleize || "Not specified" %></p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Price Paid</label>
|
||||
<p class="text-gray-900"><%= @game.price_paid ? "$#{sprintf("%.2f", @game.price_paid)}" : "Not specified" %></p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Location</label>
|
||||
<p class="text-gray-900"><%= @game.location || "Not specified" %></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<% if @game.digital? %>
|
||||
<div class="mb-6">
|
||||
<h2 class="text-xl font-bold mb-3">Digital Details</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Digital Store</label>
|
||||
<p class="text-gray-900"><%= @game.digital_store || "Not specified" %></p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Price Paid</label>
|
||||
<p class="text-gray-900"><%= @game.price_paid ? "$#{sprintf("%.2f", @game.price_paid)}" : "Not specified" %></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<% if @game.notes.present? %>
|
||||
<div class="mb-6">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Notes</label>
|
||||
<p class="text-gray-900 whitespace-pre-wrap"><%= @game.notes %></p>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div class="mb-6">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">Collections</label>
|
||||
<% if @game.collections.any? %>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<% @game.collections.each do |collection| %>
|
||||
<%= link_to collection.name, collection, class: "px-3 py-1 bg-indigo-100 text-indigo-700 rounded-full text-sm hover:bg-indigo-200" %>
|
||||
<% end %>
|
||||
</div>
|
||||
<% else %>
|
||||
<p class="text-gray-500 text-sm">Not in any collections. <%= link_to "Edit game", edit_game_path(@game), class: "text-indigo-600 hover:text-indigo-800" %> to add to collections.</p>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 pt-6 border-t">
|
||||
<%= link_to "← Back to Games", games_path, class: "text-indigo-600 hover:text-indigo-800" %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user