cybersecurity/BreakEscape
1
0
Fork 0
mirror of https://github.com/cliffe/BreakEscape.git synced 2026-02-21 11:18:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add views for missions and game

Browse Source 
- Add missions index view with grid layout
- Add game show view with Phaser container
- Include CSP nonces for inline scripts
- Bootstrap game configuration in window object
- Load game CSS and JavaScript
This commit is contained in:
Z. Cliffe Schreuders
2025-11-21 15:27:54 +00:00
parent c127ba6f03
commit 4140a23ab4
2 changed files with 111 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
app/views/break_escape/games/show.html.erb Normal file
View File

@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<title><%= @mission.display_name %> - BreakEscape</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%# Load game CSS %>
<%= stylesheet_link_tag '/break_escape/css/styles.css' %>
</head>
<body>
<%# Game container - Phaser will render here %>
<div id="break-escape-game"></div>
<%# Loading indicator %>
<div id="loading" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #00ff00; font-size: 24px; display: block;">
Loading game...
</div>
<%# Bootstrap configuration for client %>
<script nonce="<%= content_security_policy_nonce %>">
window.breakEscapeConfig = {
gameId: <%= @game.id %>,
apiBasePath: '<%= game_path(@game) %>',
assetsPath: '/break_escape/assets',
csrfToken: '<%= form_authenticity_token %>'
};
</script>
<%# Load game JavaScript (ES6 module) %>
<%= javascript_include_tag '/break_escape/js/main.js', type: 'module', nonce: content_security_policy_nonce %>
</body>
</html>

78
app/views/break_escape/missions/index.html.erb Normal file
View File

@@ -0,0 +1,78 @@
<!DOCTYPE html>
<html>
<head>
<title>BreakEscape - Select Mission</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<style>
body {
font-family: Arial, sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background: #1a1a1a;
color: #fff;
}
h1 {
text-align: center;
color: #00ff00;
}
.missions {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
margin-top: 40px;
}
.mission-card {
background: #2a2a2a;
border: 2px solid #00ff00;
border-radius: 8px;
padding: 20px;
text-decoration: none;
color: #fff;
transition: transform 0.2s, box-shadow 0.2s;
}
.mission-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 20px rgba(0, 255, 0, 0.3);
}
.mission-title {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
color: #00ff00;
}
.mission-description {
font-size: 14px;
line-height: 1.6;
margin-bottom: 15px;
}
.mission-difficulty {
display: inline-block;
background: #00ff00;
color: #000;
padding: 5px 10px;
border-radius: 4px;
font-size: 12px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>🔓 BreakEscape - Select Your Mission</h1>
<div class="missions">
<% @missions.each do |mission| %>
<%= link_to mission_path(mission), class: 'mission-card' do %>
<div class="mission-title"><%= mission.display_name %></div>
<div class="mission-description">
<%= mission.description || "An exciting escape room challenge awaits..." %>
</div>
<div class="mission-difficulty">
Difficulty: <%= "⭐" * mission.difficulty_level %>
</div>
<% end %>
<% end %>
</div>
</body>
</html>