フロントエンドプレイアブル

2026-02-15 14:57:17 +09:00
commit f25fd6f802
198 changed files with 10342 additions and 0 deletions
--- a/app/views/games/_form.html.erb
+++ b/app/views/games/_form.html.erb
@@ -0,0 +1,211 @@
+<%= form_with(model: game, class: "space-y-6") do |form| %>
+  <% if game.errors.any? %>
+    <div class="rounded-md bg-red-50 p-4 mb-6">
+      <div class="flex">
+        <div class="flex-shrink-0">
+          <svg class="h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
+          </svg>
+        </div>
+        <div class="ml-3">
+          <h3 class="text-sm font-medium text-red-800">
+            <%= pluralize(game.errors.count, "error") %> prohibited this game from being saved:
+          </h3>
+          <div class="mt-2 text-sm text-red-700">
+            <ul class="list-disc pl-5 space-y-1">
+              <% game.errors.each do |error| %>
+                <li><%= error.full_message %></li>
+              <% end %>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  <% end %>
+
+  <div>
+    <%= form.label :title, "ゲームタイトル", class: "block text-sm font-medium text-gray-700" %>
+    <div class="mt-1">
+      <%= form.text_field :title, class: "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md", placeholder: "例: 定例ディプロマシー会 #1" %>
+    </div>
+  </div>
+
+  <% unless game.persisted? %>
+    <% if current_user&.admin? %>
+      <div>
+        <%= form.label :game_mode, "ゲームモード", class: "block text-sm font-medium text-gray-700" %>
+        <div class="mt-1">
+          <%= form.select :game_mode, 
+              options_for_select([
+                ['ソロモード (単独プレイ)', 'admin_mode'],
+                ['マルチプレイヤーモード (複数プレイ)', 'player_mode']
+              ], game.is_solo_mode ? 'admin_mode' : 'player_mode'),
+              {}, 
+              { id: 'game-mode-select', class: 'shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md' } %>
+        </div>
+      </div>
+    <% end %>
+
+    <div id="participants-count-field" style="<%= game.solo_mode? ? 'display: none;' : '' %>">
+      <%= form.label :participants_count, "参加人数", class: "block text-sm font-medium text-gray-700" %>
+      <div class="mt-1">
+        <%= form.number_field :participants_count, min: 1, max: 7, step: 1, class: "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md" %>
+      </div>
+      <p class="mt-2 text-sm text-gray-500">1人から7人まで設定可能です。</p>
+    </div>
+
+    <div id="password-field" style="<%= game.solo_mode? ? 'display: none;' : '' %>">
+      <%= form.label :password, "パスワード (任意)", class: "block text-sm font-medium text-gray-700" %>
+      <div class="mt-1">
+        <%= form.password_field :password, class: "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md" %>
+      </div>
+      <p class="mt-2 text-sm text-gray-500">知人同士でプレイする場合など、アクセス制限をかけたい場合に設定してください。</p>
+    </div>
+  <% end %>
+
+  <div id="auto-fill-mode-field" style="<%= (game.solo_mode? && !game.persisted?) ? 'display: none;' : '' %>">
+    <%= form.label :auto_order_mode, "自動処理モード", class: "block text-sm font-medium text-gray-700" %>
+    <div class="mt-1">
+      <%= form.select :auto_order_mode,
+          options_for_select([
+            ['HOLD (待機)', 'hold'],
+            ['ランダム動作', 'random']
+          ], game.auto_order_mode || 'hold'),
+          {},
+          { class: 'shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md' } %>
+    </div>
+    <p class="mt-2 text-sm text-gray-500">注文未入力の国や、プレイヤー不在の国の動作を設定します。</p>
+  </div>
+
+  <div id="turn-schedule-field" style="<%= (game.solo_mode? && !game.persisted?) ? 'display: none;' : '' %>">
+    <%= form.label :turn_schedule, "ターン進行方式", class: "block text-sm font-medium text-gray-700" %>
+    <div class="mt-1">
+      <% current_schedule = game.turn_schedule.presence %>
+      <% preset_value = case current_schedule
+           when nil then "manual"
+           when "0" then "daily_0"
+           else "custom"
+         end %>
+      <select id="turn_schedule_preset"
+              class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md"
+              onchange="handleSchedulePresetChange(this)">
+        <option value="manual" <%= 'selected' if preset_value == 'manual' %>>手動（管理者が処理）</option>
+        <option value="daily_0" <%= 'selected' if preset_value == 'daily_0' %>>毎日1回（0時）</option>
+        <option value="custom" <%= 'selected' if preset_value == 'custom' %>>カスタム...</option>
+      </select>
+    </div>
+    <div id="custom-schedule-field" style="<%= preset_value == 'custom' ? '' : 'display: none;' %>" class="mt-2">
+      <input type="text" id="custom_schedule_input"
+             value="<%= current_schedule if preset_value == 'custom' %>"
+             class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md"
+             placeholder="例: 0,12,18（毎日0時・12時・18時）"
+             oninput="document.getElementById('turn_schedule_value').value = this.value">
+    </div>
+    <%= form.hidden_field :turn_schedule, id: "turn_schedule_value", value: current_schedule %>
+    <p class="mt-2 text-sm text-gray-500">
+      自動の場合、締切時刻を過ぎると未入力国はAutoOrderで処理され、ターンが自動進行します。
+    </p>
+  </div>
+
+  <script>
+    function handleSchedulePresetChange(select) {
+      const customField = document.getElementById('custom-schedule-field');
+      const hiddenField = document.getElementById('turn_schedule_value');
+      const customInput = document.getElementById('custom_schedule_input');
+
+      switch (select.value) {
+        case 'manual':
+          customField.style.display = 'none';
+          hiddenField.value = '';
+          break;
+        case 'daily_0':
+          customField.style.display = 'none';
+          hiddenField.value = '0';
+          break;
+        case 'custom':
+          customField.style.display = 'block';
+          hiddenField.value = customInput.value;
+          break;
+      }
+    }
+  </script>
+
+  <div>
+    <%= form.label :memo, "メモ", class: "block text-sm font-medium text-gray-700" %>
+    <div class="mt-1">
+      <%= form.textarea :memo, rows: 3, class: "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md" %>
+    </div>
+    <p class="mt-2 text-sm text-gray-500">ゲームに関するメモや注意事項があれば記載してください。</p>
+  </div>
+
+  <!-- ハウスルール設定 -->
+  <div class="border-t border-gray-200 pt-6 mt-6">
+    <h3 class="text-lg font-medium text-gray-900 mb-4">ハウスルール</h3>
+
+    <div class="space-y-4">
+      <div>
+        <%= form.label :year_limit, "年数制限", class: "block text-sm font-medium text-gray-700" %>
+        <div class="mt-1">
+          <%= form.number_field :year_limit, min: 1901, max: 1999, step: 1, class: "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md", placeholder: "空欄 = 無制限" %>
+        </div>
+        <p class="mt-2 text-sm text-gray-500">指定した年を超えるとゲームが自動終了します（例: 1910）。空欄で無制限。</p>
+      </div>
+
+      <div>
+        <%= form.label :victory_sc_count, "目標SC数", class: "block text-sm font-medium text-gray-700" %>
+        <div class="mt-1">
+          <%= form.number_field :victory_sc_count, min: 1, max: 34, step: 1, value: game.victory_sc_count || 18, class: "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md" %>
+        </div>
+        <p class="mt-2 text-sm text-gray-500">ソロ勝利に必要なSC数（デフォルト: 18）。</p>
+      </div>
+
+      <div>
+        <%= form.label :scoring_system, "スコアリング方式", class: "block text-sm font-medium text-gray-700" %>
+        <div class="mt-1">
+          <%= form.select :scoring_system,
+              options_for_select([
+                ['なし', 'none'],
+                ['SC数（獲得SC数がスコア）', 'sc_count'],
+                ['SC比率（全SC中の割合%）', 'sc_ratio'],
+                ['DSS（生存国で均等分割）', 'dss'],
+                ['SoS（二乗和比率）', 'sos']
+              ], game.scoring_system || 'none'),
+              {},
+              { class: 'shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md' } %>
+        </div>
+        <p class="mt-2 text-sm text-gray-500">ゲーム終了時のスコア計算方式を選択します。</p>
+      </div>
+    </div>
+  </div>
+
+  <div class="pt-5">
+    <div class="flex justify-end">
+      <%= form.submit "保存する", class: "ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
+    </div>
+  </div>
+
+  <script>
+    document.addEventListener('DOMContentLoaded', function() {
+      const gameModeSelect = document.getElementById('game-mode-select');
+      const participantsField = document.getElementById('participants-count-field');
+      const passwordField = document.getElementById('password-field');
+      const autoFillField = document.getElementById('auto-fill-mode-field');
+
+      if (gameModeSelect) {
+        gameModeSelect.addEventListener('change', function() {
+          const isAdminMode = this.value === 'admin_mode';
+          
+          if (isAdminMode) {
+            if(participantsField) participantsField.style.display = 'none';
+            if(passwordField) passwordField.style.display = 'none';
+            if(autoFillField) autoFillField.style.display = 'none';
+          } else {
+            if(participantsField) participantsField.style.display = 'block';
+            if(passwordField) passwordField.style.display = 'block';
+            if(autoFillField) autoFillField.style.display = 'block';
+          }
+        });
+      }
+    });
+  </script>
+<% end %>
--- a/app/views/games/_game.html.erb
+++ b/app/views/games/_game.html.erb
@@ -0,0 +1,18 @@
+<div id="<%= dom_id game %>" class="space-y-2">
+  <h3 class="text-lg font-semibold text-gray-900 truncate">
+    <%= game.title %>
+  </h3>
+
+  <div class="mt-2 flex items-center text-sm text-gray-500">
+    <svg class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+      <path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z" />
+    </svg>
+    <%= game.participants_count %> Players
+  </div>
+
+  <% if game.memo.present? %>
+    <p class="mt-2 text-sm text-gray-600 line-clamp-2">
+      <%= game.memo %>
+    </p>
+  <% end %>
+</div>
--- a/app/views/games/_game.json.jbuilder
+++ b/app/views/games/_game.json.jbuilder
@@ -0,0 +1,2 @@
+json.extract! game, :id, :title, :participants_count, :memo, :created_at, :updated_at
+json.url game_url(game, format: :json)
--- a/app/views/games/edit.html.erb
+++ b/app/views/games/edit.html.erb
@@ -0,0 +1,25 @@
+<% content_for :title, "ゲーム編集" %>
+
+<div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+  <div class="md:flex md:items-center md:justify-between mb-8">
+    <div class="flex-1 min-w-0">
+      <h2 class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">
+        ゲーム設定の編集
+      </h2>
+    </div>
+    <div class="mt-4 flex md:mt-0 md:ml-4">
+      <%= link_to @game, class: "inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" do %>
+        <svg class="-ml-1 mr-2 h-5 w-5 text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+          <path fill-rule="evenodd" d="M9.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L7.414 9H15a1 1 0 110 2H7.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd" />
+        </svg>
+        ゲームに戻る
+      <% end %>
+    </div>
+  </div>
+
+  <div class="bg-white shadow overflow-hidden sm:rounded-lg">
+    <div class="px-4 py-5 sm:p-6">
+      <%= render "form", game: @game %>
+    </div>
+  </div>
+</div>
--- a/app/views/games/index.html.erb
+++ b/app/views/games/index.html.erb
@@ -0,0 +1,117 @@
+<p style="color: green"><%= notice %></p>
+
+<% content_for :title, "Games" %>
+
+<% content_for :top_content do %>
+  <div class="flex justify-center mb-8">
+    <%= image_tag "header-logo.png", width: 768, alt: "DipFront Logo" %>
+  </div>
+<% end %>
+
+<div class="flex justify-between items-center mb-8">
+  <h1 class="text-3xl font-bold text-gray-900">Games</h1>
+  <%= link_to "New game", new_game_path, class: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
+</div>
+
+<% if current_user && @my_games.any? %>
+  <div class="mb-10">
+    <h2 class="text-2xl font-bold text-gray-900 mb-5 pl-2 border-l-4 border-[#c5a059] font-cinzel"><i class="fa-solid fa-flag mr-2 text-[#c5a059]"></i>参加中のゲーム</h2>
+    <div id="my_games" class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
+      <% @my_games.each do |game| %>
+        <div class="diplomacy-card overflow-hidden rounded-lg transition-transform hover:-translate-y-1 duration-300">
+          <div class="bg-green-900 px-4 py-3 border-b border-[#c5a059]">
+             <h3 class="text-lg font-bold text-[#c5a059] font-cinzel truncate"><%= game.title %></h3>
+          </div>
+          <div class="px-4 py-5 sm:p-6 bg-white/90">
+             <div class="text-sm text-gray-700 space-y-2">
+                <% if game.status == 'finished' %>
+                  <p><i class="fa-solid fa-hourglass-end w-5 text-center text-gray-400"></i> <span class="font-medium">状態:</span> <span class="bg-gray-100 text-gray-800 text-xs px-2 py-0.5 rounded-full font-bold">履歴モード</span></p>
+                <% else %>
+                  <p><i class="fa-solid fa-hourglass-half w-5 text-center text-gray-400"></i> <span class="font-medium">状態:</span> <%= game.status %></p>
+                <% end %>
+                <% if game.turns.present? %>
+                  <p><i class="fa-solid fa-calendar-days w-5 text-center text-gray-400"></i> <span class="font-medium">時期:</span> <%= parse_phase(game.turns.sort_by(&:number).last&.phase) %></p>
+                <% end %>
+               <% participant = game.participants.find_by(user: current_user) %>
+               <% if participant %>
+                 <p><i class="fa-solid fa-chess-king w-5 text-center text-gray-400"></i> <span class="font-medium">国:</span> <span class="font-bold text-green-800"><%= participant.power || '未選択' %></span></p>
+                 <p>
+                   <i class="fa-solid fa-pen-fancy w-5 text-center text-gray-400"></i> <span class="font-medium">命令:</span> 
+                   <span class="<%= participant.orders_submitted ? 'text-green-600 font-bold' : 'text-red-500 font-bold' %>">
+                     <%= participant.orders_submitted ? '完了' : '未完了' %>
+                   </span>
+                 </p>
+               <% end %>
+             </div>
+          </div>
+          <div class="bg-gray-50/90 px-4 py-3 sm:px-6 border-t border-gray-200 flex justify-end">
+            <%= link_to game, class: "inline-flex items-center text-sm font-bold text-green-900 hover:text-[#c5a059] transition-colors" do %>
+               プレイする <i class="fa-solid fa-arrow-right ml-2"></i>
+            <% end %>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  </div>
+<% end %>
+
+<% if @recruiting_games.any? %>
+  <div class="mb-10">
+    <h2 class="text-2xl font-bold text-gray-900 mb-5 pl-2 border-l-4 border-[#c5a059] font-cinzel"><i class="fa-solid fa-user-plus mr-2 text-[#c5a059]"></i>募集中のゲーム</h2>
+    <div id="recruiting_games" class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
+      <% @recruiting_games.each do |game| %>
+        <div class="diplomacy-card overflow-hidden rounded-lg transition-transform hover:-translate-y-1 duration-300">
+           <div class="bg-green-800 px-4 py-3 border-b border-[#c5a059]">
+             <h3 class="text-lg font-bold text-white font-cinzel truncate"><%= game.title %></h3>
+          </div>
+          <div class="px-4 py-5 sm:p-6 bg-white/90">
+             <div class="text-sm text-gray-700 space-y-2">
+               <p><i class="fa-solid fa-users w-5 text-center text-gray-400"></i> <span class="font-medium">参加者:</span> <%= game.participants.count %> / <%= game.participants_count %></p>
+               <% if game.password_protected? %>
+                 <p class="text-amber-600"><i class="fa-solid fa-lock w-5 text-center"></i> パスワード保護</p>
+               <% else %>
+                 <p class="text-green-600"><i class="fa-solid fa-lock-open w-5 text-center"></i> 公開ゲーム</p>
+               <% end %>
+             </div>
+          </div>
+          <div class="bg-gray-50/90 px-4 py-3 sm:px-6 border-t border-gray-200 flex justify-end">
+            <%= link_to game, class: "inline-flex items-center text-sm font-bold text-green-900 hover:text-[#c5a059] transition-colors" do %>
+               詳細を見る <i class="fa-solid fa-arrow-right ml-2"></i>
+            <% end %>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  </div>
+<% end %>
+
+<div class="mb-8">
+  <h2 class="text-2xl font-bold text-gray-900 mb-5 pl-2 border-l-4 border-gray-400 font-cinzel"><i class="fa-solid fa-list mr-2 text-gray-500"></i>すべてのゲーム</h2>
+  <div id="games" class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
+    <% @games.each do |game| %>
+      <div class="diplomacy-card overflow-hidden rounded-lg opacity-90 hover:opacity-100 transition-opacity">
+        <div class="bg-gray-800 px-4 py-3 border-b border-gray-600">
+             <h3 class="text-lg font-bold text-gray-300 font-cinzel truncate"><%= game.title %></h3>
+        </div>
+        <div class="px-4 py-5 sm:p-6 bg-white/90">
+              <div class="text-sm text-gray-700">
+                 <% if game.status == 'finished' %>
+                    <p><i class="fa-solid fa-info-circle w-5 text-center text-gray-400"></i> <span class="bg-gray-100 text-gray-800 text-xs px-2 py-0.5 rounded-full font-bold">履歴モード</span></p>
+                 <% else %>
+                    <p><i class="fa-solid fa-info-circle w-5 text-center text-gray-400"></i> <%= game.status %></p>
+                 <% end %>
+                 <% if game.turns.present? %>
+                    <p><i class="fa-solid fa-calendar-days w-5 text-center text-gray-400"></i> <span class="font-medium">時期:</span> <%= parse_phase(game.turns.sort_by(&:number).last&.phase) %></p>
+                 <% end %>
+                 <p><i class="fa-solid fa-users w-5 text-center text-gray-400"></i> <span class="font-medium">参加人数:</span> <%= game.participants.size %> / <%= game.participants_count %></p>
+              </div>
+        </div>
+        <div class="bg-gray-50/90 px-4 py-3 sm:px-6 border-t border-gray-200 flex justify-end">
+          <%= link_to game, class: "text-sm font-medium text-gray-600 hover:text-gray-900" do %>
+            Show <i class="fa-solid fa-eye ml-1"></i>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>
--- a/app/views/games/index.json.jbuilder
+++ b/app/views/games/index.json.jbuilder
@@ -0,0 +1 @@
+json.array! @games, partial: "games/game", as: :game
--- a/app/views/games/new.html.erb
+++ b/app/views/games/new.html.erb
@@ -0,0 +1,25 @@
+<% content_for :title, "ゲーム作成" %>
+
+<div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+  <div class="md:flex md:items-center md:justify-between mb-8">
+    <div class="flex-1 min-w-0">
+      <h2 class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">
+        新規ゲーム作成
+      </h2>
+    </div>
+    <div class="mt-4 flex md:mt-0 md:ml-4">
+      <%= link_to games_path, class: "inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" do %>
+        <svg class="-ml-1 mr-2 h-5 w-5 text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+          <path fill-rule="evenodd" d="M9.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L7.414 9H15a1 1 0 110 2H7.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd" />
+        </svg>
+        一覧に戻る
+      <% end %>
+    </div>
+  </div>
+
+  <div class="bg-white shadow overflow-hidden sm:rounded-lg">
+    <div class="px-4 py-5 sm:p-6">
+      <%= render "form", game: @game %>
+    </div>
+  </div>
+</div>
--- a/app/views/games/show.html.erb
+++ b/app/views/games/show.html.erb
--- a/app/views/games/show.json.jbuilder
+++ b/app/views/games/show.json.jbuilder
@@ -0,0 +1 @@
+json.partial! "games/game", game: @game
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title><%= content_for(:title) || "Dip Front" %></title>
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="application-name" content="Dip Front">
+    <meta name="mobile-web-app-capable" content="yes">
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+
+    <%= yield :head %>
+
+    <link rel="icon" href="/icon.png" type="image/png">
+    <link rel="icon" href="/icon.svg" type="image/svg+xml">
+    <link rel="apple-touch-icon" href="/icon.png">
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Lato:wght@400;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+
+    <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
+    <%= javascript_importmap_tags %>
+    <style>
+      body {
+        font-family: 'Lato', sans-serif;
+        background-image: url('<%= asset_path("background.png") %>');
+        background-repeat: repeat;
+        background-attachment: fixed;
+        background-size: 1920px; /* Adjust as needed */
+      }
+      h1, h2, h3, h4, h5, h6, .font-cinzel {
+        font-family: 'Cinzel', serif;
+      }
+      .diplomacy-card {
+        background-color: rgba(255, 255, 255, 0.9);
+        border: 1px solid #d4c5a9;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+      }
+      .diplomacy-text-gold {
+        color: #c5a059;
+      }
+    </style>
+  </head>
+
+  <body class="text-gray-900 leading-normal tracking-normal">
+    <nav class="bg-green-900/95 backdrop-blur-sm border-b border-[#c5a059] fixed w-full z-30 top-0 shadow-lg">
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="flex justify-between h-16">
+          <div class="flex">
+            <div class="flex-shrink-0 flex items-center">
+            </div>
+            <div class="hidden sm:-my-px sm:ml-6 sm:flex sm:space-x-8">
+              <%= link_to root_path, class: "border-transparent text-green-100 hover:text-[#c5a059] hover:border-[#c5a059] inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors duration-200" do %>
+                <i class="fa-solid fa-house mr-2"></i> トップ
+              <% end %>
+              <%= link_to new_game_path, class: "border-transparent text-green-100 hover:text-[#c5a059] hover:border-[#c5a059] inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors duration-200" do %>
+                <i class="fa-solid fa-plus-circle mr-2"></i> New Game
+              <% end %>
+              <% if logged_in? && current_user.admin? %>
+                <%= link_to users_path, class: "border-transparent text-green-100 hover:text-[#c5a059] hover:border-[#c5a059] inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors duration-200" do %>
+                  <i class="fa-solid fa-users-cog mr-2"></i> ユーザー管理
+                <% end %>
+              <% end %>
+            </div>
+          </div>
+          <div class="hidden sm:ml-6 sm:flex sm:items-center space-x-4">
+            <% if logged_in? %>
+              <%= link_to user_path(current_user), class: "text-sm text-green-100 hover:text-[#c5a059] transition-colors duration-200 flex items-center" do %>
+                <i class="fa-solid fa-user-shield mr-2"></i>
+                <%= current_user.username %>さん
+                <% if current_user.admin? %>
+                  <span class="ml-1 px-2 py-0.5 text-[10px] font-bold text-green-900 bg-[#c5a059] rounded border border-yellow-600">ADMIN</span>
+                <% end %>
+              <% end %>
+              <%= button_to logout_path, method: :delete, class: "inline-flex items-center px-3 py-1.5 border border-[#c5a059] shadow-sm text-sm font-medium rounded text-[#c5a059] bg-green-900 hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#c5a059] transition-colors duration-200" do %>
+                <i class="fa-solid fa-right-from-bracket mr-2"></i> ログアウト
+              <% end %>
+            <% else %>
+              <%= link_to "ログイン", login_path, class: "inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
+              <%= link_to "新規登録", signup_path, class: "inline-flex items-center px-3 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
+            <% end %>
+          </div>
+        </div>
+      </div>
+    </nav>
+
+    <div class="pt-24 pb-12 min-h-screen">
+      <%= yield :top_content %>
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 bg-white/85 backdrop-blur-sm rounded-xl shadow-xl border border-white/20 py-8">
+        <% if notice %>
+          <div class="bg-green-100/90 border border-green-400 text-green-800 px-4 py-3 rounded relative mb-6" role="alert">
+            <span class="block sm:inline"><%= notice %></span>
+          </div>
+        <% end %>
+
+        <% if alert %>
+          <div class="bg-red-100/90 border border-red-400 text-red-800 px-4 py-3 rounded relative mb-6" role="alert">
+            <span class="block sm:inline"><%= alert %></span>
+          </div>
+        <% end %>
+
+        <main>
+          <%= yield %>
+        </main>
+      </div>
+    </div>
+  </body>
+</html>
--- a/app/views/layouts/mailer.html.erb
+++ b/app/views/layouts/mailer.html.erb
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <style>
+      /* Email styles need to be inline */
+    </style>
+  </head>
+
+  <body>
+    <%= yield %>
+  </body>
+</html>
--- a/app/views/layouts/mailer.text.erb
+++ b/app/views/layouts/mailer.text.erb
@@ -0,0 +1 @@
+<%= yield %>
--- a/app/views/pwa/manifest.json.erb
+++ b/app/views/pwa/manifest.json.erb
@@ -0,0 +1,22 @@
+{
+  "name": "DipFront",
+  "icons": [
+    {
+      "src": "/icon.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    },
+    {
+      "src": "/icon.png",
+      "type": "image/png",
+      "sizes": "512x512",
+      "purpose": "maskable"
+    }
+  ],
+  "start_url": "/",
+  "display": "standalone",
+  "scope": "/",
+  "description": "DipFront.",
+  "theme_color": "red",
+  "background_color": "red"
+}
--- a/app/views/pwa/service-worker.js
+++ b/app/views/pwa/service-worker.js
@@ -0,0 +1,26 @@
+// Add a service worker for processing Web Push notifications:
+//
+// self.addEventListener("push", async (event) => {
+//   const { title, options } = await event.data.json()
+//   event.waitUntil(self.registration.showNotification(title, options))
+// })
+//
+// self.addEventListener("notificationclick", function(event) {
+//   event.notification.close()
+//   event.waitUntil(
+//     clients.matchAll({ type: "window" }).then((clientList) => {
+//       for (let i = 0; i < clientList.length; i++) {
+//         let client = clientList[i]
+//         let clientPath = (new URL(client.url)).pathname
+//
+//         if (clientPath == event.notification.data.path && "focus" in client) {
+//           return client.focus()
+//         }
+//       }
+//
+//       if (clients.openWindow) {
+//         return clients.openWindow(event.notification.data.path)
+//       }
+//     })
+//   )
+// })
--- a/app/views/sessions/new.html.erb
+++ b/app/views/sessions/new.html.erb
@@ -0,0 +1,28 @@
+<% content_for :title, "ログイン" %>
+
+<div class="max-w-md mx-auto">
+  <h1 class="text-3xl font-bold text-gray-900 mb-6">ログイン</h1>
+
+  <%= form_with url: login_path, class: "space-y-6" do |f| %>
+    <div>
+      <%= label_tag :email, "メールアドレス", class: "block text-sm font-medium text-gray-700" %>
+      <%= email_field_tag :email, params[:email], class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500", autofocus: true %>
+    </div>
+
+    <div>
+      <%= label_tag :password, "パスワード", class: "block text-sm font-medium text-gray-700" %>
+      <%= password_field_tag :password, nil, class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" %>
+    </div>
+
+    <div>
+      <%= submit_tag "ログイン", class: "w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
+    </div>
+  <% end %>
+
+  <div class="mt-6 text-center">
+    <p class="text-sm text-gray-600">
+      アカウントをお持ちでないですか？
+      <%= link_to "新規登録", signup_path, class: "font-medium text-indigo-600 hover:text-indigo-500" %>
+    </p>
+  </div>
+</div>
--- a/app/views/turns/_form.html.erb
+++ b/app/views/turns/_form.html.erb
@@ -0,0 +1,42 @@
+<%= form_with(model: turn) do |form| %>
+  <% if turn.errors.any? %>
+    <div style="color: red">
+      <h2><%= pluralize(turn.errors.count, "error") %> prohibited this turn from being saved:</h2>
+
+      <ul>
+        <% turn.errors.each do |error| %>
+          <li><%= error.full_message %></li>
+        <% end %>
+      </ul>
+    </div>
+  <% end %>
+
+  <div>
+    <%= form.label :number, style: "display: block" %>
+    <%= form.number_field :number %>
+  </div>
+
+  <div>
+    <%= form.label :phase, style: "display: block" %>
+    <%= form.text_field :phase %>
+  </div>
+
+  <div>
+    <%= form.label :game_state, style: "display: block" %>
+    <%= form.text_field :game_state %>
+  </div>
+
+  <div>
+    <%= form.label :svg_date, style: "display: block" %>
+    <%= form.textarea :svg_date %>
+  </div>
+
+  <div>
+    <%= form.label :game_id, style: "display: block" %>
+    <%= form.text_field :game_id %>
+  </div>
+
+  <div>
+    <%= form.submit %>
+  </div>
+<% end %>
--- a/app/views/turns/_turn.html.erb
+++ b/app/views/turns/_turn.html.erb
@@ -0,0 +1,39 @@
+<div id="<%= dom_id turn %>">
+  <div>
+    <strong>Number:</strong>
+    <%= turn.number %>
+  </div>
+
+  <div>
+    <strong>Phase:</strong>
+    <%= turn.phase %>
+  </div>
+
+  <div>
+    <strong>Game state:</strong>
+    <pre><%= JSON.pretty_generate(turn.game_state) if turn.game_state %></pre>
+  </div>
+
+  <div>
+    <strong>Possible orders:</strong>
+    <pre><%= JSON.pretty_generate(turn.possible_orders) if turn.possible_orders %></pre>
+  </div>
+
+  <div>
+    <strong>Orders:</strong>
+    <pre><%= JSON.pretty_generate(turn.orders) if turn.orders %></pre>
+  </div>
+
+  <div>
+    <strong>Map View:</strong>
+    <div class="game-map">
+      <%= turn.svg_date.html_safe if turn.svg_date %>
+    </div>
+  </div>
+
+  <div>
+    <strong>Game ID:</strong>
+    <%= turn.game_id %>
+  </div>
+
+</div>
--- a/app/views/turns/_turn.json.jbuilder
+++ b/app/views/turns/_turn.json.jbuilder
@@ -0,0 +1,2 @@
+json.extract! turn, :id, :number, :phase, :game_state, :possible_orders, :orders, :svg_date, :game_id, :created_at, :updated_at
+json.url turn_url(turn, format: :json)
--- a/app/views/turns/edit.html.erb
+++ b/app/views/turns/edit.html.erb
@@ -0,0 +1,12 @@
+<% content_for :title, "Editing turn" %>
+
+<h1>Editing turn</h1>
+
+<%= render "form", turn: @turn %>
+
+<br>
+
+<div>
+  <%= link_to "Show this turn", @turn %> |
+  <%= link_to "Back to turns", turns_path %>
+</div>
--- a/app/views/turns/index.html.erb
+++ b/app/views/turns/index.html.erb
@@ -0,0 +1,19 @@
+<p style="color: green"><%= notice %></p>
+
+<% content_for :title, "Turns" %>
+
+<h1>Turns</h1>
+
+<div id="turns">
+  <% @turns.each do |turn| %>
+    <%= turn.id %>
+    <%= turn.game_id %>
+    <%= turn.number %>
+    <%= turn.phase %>
+    <p>
+      <%= link_to "Show this turn", turn %>
+    </p>
+  <% end %>
+</div>
+
+<%= link_to "New turn", new_turn_path %>
--- a/app/views/turns/index.json.jbuilder
+++ b/app/views/turns/index.json.jbuilder
@@ -0,0 +1 @@
+json.array! @turns, partial: "turns/turn", as: :turn
--- a/app/views/turns/new.html.erb
+++ b/app/views/turns/new.html.erb
@@ -0,0 +1,11 @@
+<% content_for :title, "New turn" %>
+
+<h1>New turn</h1>
+
+<%= render "form", turn: @turn %>
+
+<br>
+
+<div>
+  <%= link_to "Back to turns", turns_path %>
+</div>
--- a/app/views/turns/show.html.erb
+++ b/app/views/turns/show.html.erb
@@ -0,0 +1,42 @@
+<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+  <div class="mb-6 flex justify-between items-start">
+    <div>
+      <h1 class="text-2xl font-bold text-gray-900">Turn <%= @turn.number %> Details</h1>
+      <%= link_to 'Back to Game', game_path(@turn.game), class: "mt-2 inline-block text-indigo-600 hover:text-indigo-900" %>
+    </div>
+    <div class="flex space-x-2">
+      <%= link_to 'Edit', edit_turn_path(@turn), class: "inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
+      <%= button_to "Destroy this turn", @turn, method: :delete, class: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500", data: { turbo_confirm: "Are you sure?" } %>
+    </div>
+  </div>
+
+  <div class="bg-white shadow overflow-hidden sm:rounded-lg mb-6">
+    <div class="px-4 py-5 sm:px-6">
+      <h3 class="text-lg leading-6 font-medium text-gray-900">SVG Orders Data</h3>
+      <p class="mt-1 max-w-2xl text-sm text-gray-500">Stored SVG images for each power.</p>
+    </div>
+    <div class="border-t border-gray-200 px-4 py-5 sm:p-0">
+      <dl class="sm:divide-y sm:divide-gray-200">
+        <% if @turn.svg_orders.present? %>
+          <% @turn.svg_orders.each do |key, svg| %>
+              <%= key %>
+              <%= svg.html_safe %>
+          <% end %>
+        <% else %>
+          <div class="py-4 sm:py-5 sm:px-6">
+            <p class="text-sm text-gray-500">No SVG orders data found.</p>
+          </div>
+        <% end %>
+      </dl>
+    </div>
+  </div>
+  
+  <div class="bg-white shadow overflow-hidden sm:rounded-lg">
+    <div class="px-4 py-5 sm:px-6">
+      <h3 class="text-lg leading-6 font-medium text-gray-900">Debug Info</h3>
+    </div>
+    <div class="border-t border-gray-200 px-4 py-5 sm:p-6">
+      <pre class="text-xs bg-gray-100 p-2 rounded overflow-auto"><%= JSON.pretty_generate(@turn.attributes.except("svg_orders", "svg_date")) %></pre>
+    </div>
+  </div>
+</div>
--- a/app/views/turns/show.json.jbuilder
+++ b/app/views/turns/show.json.jbuilder
@@ -0,0 +1 @@
+json.partial! "turns/turn", turn: @turn
--- a/app/views/users/edit.html.erb
+++ b/app/views/users/edit.html.erb
@@ -0,0 +1,55 @@
+<% content_for :title, "ユーザー編集" %>
+
+<div class="max-w-2xl mx-auto">
+  <div class="mb-6">
+    <h1 class="text-3xl font-bold text-gray-900">ユーザー編集</h1>
+    <p class="mt-2 text-sm text-gray-600"><%= @user.username %> の情報を編集</p>
+  </div>
+
+  <%= form_with model: @user, class: "space-y-6" do |f| %>
+    <% if @user.errors.any? %>
+      <div class="bg-red-100 border border-red-400 text-red-800 px-4 py-3 rounded relative" role="alert">
+        <strong class="font-bold">エラーがあります:</strong>
+        <ul class="mt-2 list-disc list-inside">
+          <% @user.errors.full_messages.each do |message| %>
+            <li><%= message %></li>
+          <% end %>
+        </ul>
+      </div>
+    <% end %>
+
+    <div>
+      <%= f.label :username, "ユーザー名", class: "block text-sm font-medium text-gray-700" %>
+      <%= f.text_field :username, class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" %>
+    </div>
+
+    <div>
+      <%= f.label :email, "メールアドレス", class: "block text-sm font-medium text-gray-700" %>
+      <%= f.email_field :email, class: "mt-1 block w-full rounded-md border-gray-300 bg-gray-100 shadow-sm", disabled: true %>
+      <p class="mt-1 text-sm text-gray-500">メールアドレスは変更できません</p>
+    </div>
+
+    <div class="border-t border-gray-200 pt-6">
+      <h3 class="text-lg font-medium text-gray-900 mb-4">パスワード変更</h3>
+      <p class="text-sm text-gray-600 mb-4">パスワードを変更する場合のみ入力してください。空欄の場合は変更されません。</p>
+
+      <div class="space-y-4">
+        <div>
+          <%= f.label :password, "新しいパスワード", class: "block text-sm font-medium text-gray-700" %>
+          <%= f.password_field :password, class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500", autocomplete: "new-password" %>
+          <p class="mt-1 text-sm text-gray-500">6文字以上</p>
+        </div>
+
+        <div>
+          <%= f.label :password_confirmation, "新しいパスワード(確認)", class: "block text-sm font-medium text-gray-700" %>
+          <%= f.password_field :password_confirmation, class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500", autocomplete: "new-password" %>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex items-center justify-between pt-6 border-t border-gray-200">
+      <%= link_to "キャンセル", user_path(@user), class: "inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50" %>
+      <%= f.submit "更新", class: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
+    </div>
+  <% end %>
+</div>
--- a/app/views/users/index.html.erb
+++ b/app/views/users/index.html.erb
@@ -0,0 +1,82 @@
+<% content_for :title, "ユーザー管理" %>
+
+<div class="mb-6">
+  <h1 class="text-3xl font-bold text-gray-900">ユーザー管理</h1>
+  <p class="mt-2 text-sm text-gray-600">登録されているユーザーの一覧と管理</p>
+</div>
+
+<div class="bg-white shadow overflow-hidden sm:rounded-lg">
+  <table class="min-w-full divide-y divide-gray-200">
+    <thead class="bg-gray-50">
+      <tr>
+        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+          ユーザー名
+        </th>
+        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+          メールアドレス
+        </th>
+        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+          権限
+        </th>
+        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+          登録日
+        </th>
+        <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
+          操作
+        </th>
+      </tr>
+    </thead>
+    <tbody class="bg-white divide-y divide-gray-200">
+      <% @users.each do |user| %>
+        <tr>
+          <td class="px-6 py-4 whitespace-nowrap">
+            <div class="flex items-center">
+              <div class="text-sm font-medium text-gray-900">
+                <%= user.username %>
+              </div>
+            </div>
+          </td>
+          <td class="px-6 py-4 whitespace-nowrap">
+            <div class="text-sm text-gray-900"><%= user.email %></div>
+          </td>
+          <td class="px-6 py-4 whitespace-nowrap">
+            <% if user.admin? %>
+              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
+                管理者
+              </span>
+            <% else %>
+              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
+                一般ユーザー
+              </span>
+            <% end %>
+          </td>
+          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+            <%= user.created_at.strftime("%Y年%m月%d日") %>
+          </td>
+          <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium space-x-2">
+            <%= link_to "詳細", user_path(user), class: "text-indigo-600 hover:text-indigo-900" %>
+            <%= link_to "編集", edit_user_path(user), class: "text-blue-600 hover:text-blue-900" %>
+            <% if user != current_user %>
+              <%= button_to "#{user.admin? ? '管理者解除' : '管理者に昇格'}", 
+                            toggle_admin_user_path(user), 
+                            method: :patch,
+                            class: "inline text-yellow-600 hover:text-yellow-900",
+                            data: { confirm: "#{user.admin? ? '管理者権限を削除' : '管理者権限を付与'}しますか?" } %>
+              <%= button_to "削除", 
+                            user_path(user), 
+                            method: :delete,
+                            class: "inline text-red-600 hover:text-red-900",
+                            data: { confirm: "#{user.username}を削除しますか?" } %>
+            <% end %>
+          </td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+</div>
+
+<div class="mt-6">
+  <p class="text-sm text-gray-600">
+    合計: <%= @users.count %>ユーザー
+  </p>
+</div>
--- a/app/views/users/new.html.erb
+++ b/app/views/users/new.html.erb
@@ -0,0 +1,50 @@
+<% content_for :title, "新規登録" %>
+
+<div class="max-w-md mx-auto">
+  <h1 class="text-3xl font-bold text-gray-900 mb-6">新規登録</h1>
+
+  <%= form_with model: @user, url: signup_path, class: "space-y-6" do |f| %>
+    <% if @user.errors.any? %>
+      <div class="bg-red-100 border border-red-400 text-red-800 px-4 py-3 rounded relative" role="alert">
+        <strong class="font-bold">エラーがあります:</strong>
+        <ul class="mt-2 list-disc list-inside">
+          <% @user.errors.full_messages.each do |message| %>
+            <li><%= message %></li>
+          <% end %>
+        </ul>
+      </div>
+    <% end %>
+
+    <div>
+      <%= f.label :username, "ユーザー名", class: "block text-sm font-medium text-gray-700" %>
+      <%= f.text_field :username, class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500", autofocus: true %>
+    </div>
+
+    <div>
+      <%= f.label :email, "メールアドレス", class: "block text-sm font-medium text-gray-700" %>
+      <%= f.email_field :email, class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" %>
+    </div>
+
+    <div>
+      <%= f.label :password, "パスワード", class: "block text-sm font-medium text-gray-700" %>
+      <%= f.password_field :password, class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" %>
+      <p class="mt-1 text-sm text-gray-500">6文字以上</p>
+    </div>
+
+    <div>
+      <%= f.label :password_confirmation, "パスワード(確認)", class: "block text-sm font-medium text-gray-700" %>
+      <%= f.password_field :password_confirmation, class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" %>
+    </div>
+
+    <div>
+      <%= f.submit "登録", class: "w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
+    </div>
+  <% end %>
+
+  <div class="mt-6 text-center">
+    <p class="text-sm text-gray-600">
+      既にアカウントをお持ちですか？
+      <%= link_to "ログイン", login_path, class: "font-medium text-indigo-600 hover:text-indigo-500" %>
+    </p>
+  </div>
+</div>
--- a/app/views/users/show.html.erb
+++ b/app/views/users/show.html.erb
@@ -0,0 +1,83 @@
+<% content_for :title, @user.username %>
+
+<div class="mb-6 flex items-center justify-between">
+  <div>
+    <h1 class="text-3xl font-bold text-gray-900"><%= @user.username %></h1>
+    <% if @user.admin? %>
+      <span class="mt-2 inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800">
+        管理者
+      </span>
+    <% end %>
+  </div>
+  <div class="flex space-x-3">
+    <%= link_to "編集", edit_user_path(@user), class: "inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50" %>
+    <%= link_to "一覧に戻る", users_path, class: "inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50" %>
+  </div>
+</div>
+
+<div class="bg-white shadow overflow-hidden sm:rounded-lg">
+  <div class="px-4 py-5 sm:px-6">
+    <h3 class="text-lg leading-6 font-medium text-gray-900">
+      ユーザー情報
+    </h3>
+  </div>
+  <div class="border-t border-gray-200">
+    <dl>
+      <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+        <dt class="text-sm font-medium text-gray-500">
+          ユーザー名
+        </dt>
+        <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+          <%= @user.username %>
+        </dd>
+      </div>
+      <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+        <dt class="text-sm font-medium text-gray-500">
+          メールアドレス
+        </dt>
+        <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+          <%= @user.email %>
+        </dd>
+      </div>
+      <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+        <dt class="text-sm font-medium text-gray-500">
+          権限
+        </dt>
+        <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+          <%= @user.admin? ? "管理者" : "一般ユーザー" %>
+        </dd>
+      </div>
+      <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+        <dt class="text-sm font-medium text-gray-500">
+          登録日
+        </dt>
+        <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+          <%= @user.created_at.strftime("%Y年%m月%d日 %H:%M") %>
+        </dd>
+      </div>
+      <div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+        <dt class="text-sm font-medium text-gray-500">
+          最終更新日
+        </dt>
+        <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+          <%= @user.updated_at.strftime("%Y年%m月%d日 %H:%M") %>
+        </dd>
+      </div>
+    </dl>
+  </div>
+</div>
+
+<% if @user != current_user %>
+  <div class="mt-6 flex space-x-3">
+    <%= button_to "#{@user.admin? ? '管理者権限を削除' : '管理者権限を付与'}", 
+                  toggle_admin_user_path(@user), 
+                  method: :patch,
+                  class: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-yellow-600 hover:bg-yellow-700",
+                  data: { confirm: "#{@user.admin? ? '管理者権限を削除' : '管理者権限を付与'}しますか?" } %>
+    <%= button_to "ユーザーを削除", 
+                  user_path(@user), 
+                  method: :delete,
+                  class: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700",
+                  data: { confirm: "#{@user.username}を削除しますか?" } %>
+  </div>
+<% end %>
				`@@ -0,0 +1 @@`
				`json.array! @games, partial: "games/game", as: :game`
				`@@ -0,0 +1 @@`
				`json.array! @turns, partial: "turns/turn", as: :turn`