Skip to content

Asset cache busting via import map and ASSETS_VERSION #92

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cliffe merged 4 commits into from
Jun 11, 2026
Merged

Asset cache busting via import map and ASSETS_VERSION #92

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3a33964
Add asset cache busting via ASSETS_VERSION and import map
cliffe Jun 11, 2026
b06aa3b
Strip hardcoded ?v=X from all JS module import paths
cliffe Jun 11, 2026
3bd067a
Add cache busting documentation
cliffe Jun 11, 2026
b9f92e3
docs: add development mode testing section to CACHE_BUSTING.md
cliffe Jun 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 18 additions & 1 deletion app/helpers/break_escape/application_helper.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,25 @@
require 'json'

module BreakEscape
module ApplicationHelper
# Generate a random ID for DOM elements
def generate_random_id
SecureRandom.hex(8)
end

def be_asset_path(path)
"#{path}?v=#{BreakEscape::ASSETS_VERSION}"
end

def break_escape_import_map
version = BreakEscape::ASSETS_VERSION
js_root = BreakEscape::Engine.root.join('public')
js_dir = js_root.join('break_escape', 'js')
imports = Dir.glob("#{js_dir}/**/*.js").sort.each_with_object({}) do |file, h|
path = "/#{Pathname.new(file).relative_path_from(js_root)}"
h[path] = "#{path}?v=#{version}"
end
content_tag(:script, JSON.generate({ imports: imports }).html_safe,
type: 'importmap', nonce: content_security_policy_nonce)
end
end
end
5 changes: 1 addition & 4 deletions app/helpers/break_escape/player_preferences_helper.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,8 @@ def sprite_valid_for_scenario?(sprite, scenario_data)
end
end

# Headshot filename for sprite (prefer _down_headshot for hacker_hood, else _headshot)
HEADSHOT_VERSION = 2

def sprite_headshot_path(sprite)
"/break_escape/assets/characters/#{sprite}_headshot.png?v=#{HEADSHOT_VERSION}"
"/break_escape/assets/characters/#{sprite}_headshot.png?v=#{BreakEscape::ASSETS_VERSION}"
end

private
Expand Down
2 changes: 1 addition & 1 deletion app/views/break_escape/games/new.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<% content_for :head do %>
<link rel="stylesheet" href="/break_escape/css/fonts.css?v=2">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/fonts.css') %>">
<% end %>
<%# Game Setup / VM Set Selection or Standalone Flags Page %>
<div class="game-setup container">
Expand Down
117 changes: 59 additions & 58 deletions app/views/break_escape/games/show.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,61 +11,62 @@
<%# All fonts are self-hosted in /break_escape/assets/fonts/ via fonts.css %>

<%# Load game CSS files %>
<link rel="stylesheet" href="/break_escape/css/fonts.css?v=2">
<link rel="stylesheet" href="/break_escape/css/main.css">
<link rel="stylesheet" href="/break_escape/css/utilities.css">
<link rel="stylesheet" href="/break_escape/css/notifications.css">
<link rel="stylesheet" href="/break_escape/css/panels.css">
<link rel="stylesheet" href="/break_escape/css/hud.css">
<link rel="stylesheet" href="/break_escape/css/player_preferences.css">
<link rel="stylesheet" href="/break_escape/css/minigames-framework.css">
<link rel="stylesheet" href="/break_escape/css/dusting.css">
<link rel="stylesheet" href="/break_escape/css/lockpicking.css">
<link rel="stylesheet" href="/break_escape/css/modals.css">
<link rel="stylesheet" href="/break_escape/css/notes.css">
<link rel="stylesheet" href="/break_escape/css/bluetooth-scanner.css">
<link rel="stylesheet" href="/break_escape/css/ble-scanner.css">
<link rel="stylesheet" href="/break_escape/css/biometrics-minigame.css">
<link rel="stylesheet" href="/break_escape/css/container-minigame.css">
<link rel="stylesheet" href="/break_escape/css/phone-chat-minigame.css">
<link rel="stylesheet" href="/break_escape/css/person-chat-minigame.css">
<link rel="stylesheet" href="/break_escape/css/rfid-minigame.css">
<link rel="stylesheet" href="/break_escape/css/npc-interactions.css">
<link rel="stylesheet" href="/break_escape/css/pin.css">
<link rel="stylesheet" href="/break_escape/css/minigames-framework.css">
<link rel="stylesheet" href="/break_escape/css/password-minigame.css">
<link rel="stylesheet" href="/break_escape/css/ransomware-display-minigame.css">
<link rel="stylesheet" href="/break_escape/css/siem-dashboard-minigame.css">
<link rel="stylesheet" href="/break_escape/css/ehr-terminal-minigame.css">
<link rel="stylesheet" href="/break_escape/css/backup-recovery-minigame.css">
<link rel="stylesheet" href="/break_escape/css/esd-pushbutton-minigame.css">
<link rel="stylesheet" href="/break_escape/css/command-board-minigame.css">
<link rel="stylesheet" href="/break_escape/css/sis-config-threshold-minigame.css">
<link rel="stylesheet" href="/break_escape/css/infusion-pump-minigame.css">
<link rel="stylesheet" href="/break_escape/css/network-architecture-minigame.css">
<link rel="stylesheet" href="/break_escape/css/alarm-panel-minigame.css">
<link rel="stylesheet" href="/break_escape/css/claims-management-system-minigame.css">
<link rel="stylesheet" href="/break_escape/css/forensic-data-platform-minigame.css">
<link rel="stylesheet" href="/break_escape/css/ncsc-brief-minigame.css">
<link rel="stylesheet" href="/break_escape/css/scada-historian-minigame.css">
<link rel="stylesheet" href="/break_escape/css/coverage-decision-form-minigame.css">
<link rel="stylesheet" href="/break_escape/css/cryptex-minigame.css">
<link rel="stylesheet" href="/break_escape/css/combination-minigame.css">
<link rel="stylesheet" href="/break_escape/css/log-filter-minigame.css">
<link rel="stylesheet" href="/break_escape/css/drug-library-integrity-minigame.css">
<link rel="stylesheet" href="/break_escape/css/warranty-checklist-minigame.css">
<link rel="stylesheet" href="/break_escape/css/blockchain-explorer-minigame.css">
<link rel="stylesheet" href="/break_escape/css/shredded-document-minigame.css">
<link rel="stylesheet" href="/break_escape/css/text-file-minigame.css">
<link rel="stylesheet" href="/break_escape/css/vpn-log-viewer-minigame.css">
<link rel="stylesheet" href="/break_escape/css/npc-barks.css">
<link rel="stylesheet" href="/break_escape/css/objectives.css">
<link rel="stylesheet" href="/break_escape/css/tutorial.css">
<link rel="stylesheet" href="/break_escape/css/vm-launcher-minigame.css">
<link rel="stylesheet" href="/break_escape/css/flag-station-minigame.css">
<link rel="stylesheet" href="/break_escape/css/network-segmentation-map-minigame.css">
<link rel="stylesheet" href="/break_escape/css/music-widget.css">
<link rel="stylesheet" href="/break_escape/css/bond-visualiser.css">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/fonts.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/main.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/utilities.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/notifications.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/panels.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/hud.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/player_preferences.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/minigames-framework.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/dusting.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/lockpicking.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/modals.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/notes.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/bluetooth-scanner.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/ble-scanner.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/biometrics-minigame.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/container-minigame.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/phone-chat-minigame.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/person-chat-minigame.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/rfid-minigame.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/npc-interactions.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/pin.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/minigames-framework.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/password-minigame.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/ransomware-display-minigame.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/siem-dashboard-minigame.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/ehr-terminal-minigame.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/backup-recovery-minigame.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/esd-pushbutton-minigame.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/command-board-minigame.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/sis-config-threshold-minigame.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/infusion-pump-minigame.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/network-architecture-minigame.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/alarm-panel-minigame.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/claims-management-system-minigame.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/forensic-data-platform-minigame.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/ncsc-brief-minigame.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/scada-historian-minigame.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/coverage-decision-form-minigame.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/cryptex-minigame.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/combination-minigame.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/log-filter-minigame.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/drug-library-integrity-minigame.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/warranty-checklist-minigame.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/blockchain-explorer-minigame.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/shredded-document-minigame.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/text-file-minigame.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/vpn-log-viewer-minigame.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/npc-barks.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/objectives.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/tutorial.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/vm-launcher-minigame.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/flag-station-minigame.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/network-segmentation-map-minigame.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/music-widget.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/bond-visualiser.css') %>">
<%= break_escape_import_map %>
</head>
<body>
<div id="game-container">
Expand Down Expand Up @@ -249,14 +250,14 @@
<%# Load required libraries before the game module %>
<script src="https://cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.min.js" nonce="<%= content_security_policy_nonce %>"></script>
<script src="https://cdn.jsdelivr.net/npm/easystarjs@0.4.4/bin/easystar-0.4.4.js" nonce="<%= content_security_policy_nonce %>"></script>
<script src="/break_escape/assets/vendor/ink.js" nonce="<%= content_security_policy_nonce %>"></script>
<script src="<%= be_asset_path('/break_escape/assets/vendor/ink.js') %>" nonce="<%= content_security_policy_nonce %>"></script>

<%# Load game JavaScript (ES6 module) %>
<script type="module" src="/break_escape/js/main.js?v=2" nonce="<%= content_security_policy_nonce %>"></script>
<script type="module" src="<%= be_asset_path('/break_escape/js/main.js') %>" nonce="<%= content_security_policy_nonce %>"></script>

<%# Load Hacktivity ActionCable integration for VM console support %>
<% if BreakEscape::Mission.hacktivity_mode? %>
<script type="module" src="/break_escape/js/systems/hacktivity-cable.js" nonce="<%= content_security_policy_nonce %>"></script>
<script type="module" src="<%= be_asset_path('/break_escape/js/systems/hacktivity-cable.js') %>" nonce="<%= content_security_policy_nonce %>"></script>
<% end %>

<%# Session resume/restart dialog — not shown in hacktivity mode %>
Expand Down
2 changes: 1 addition & 1 deletion app/views/break_escape/missions/index.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<title>BreakEscape - Select Mission</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<link rel="stylesheet" href="/break_escape/css/mission_index/application.css">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/mission_index/application.css') %>">
<!-- Tippy.js for tooltips -->
<script src="https://unpkg.com/@popperjs/core@2" nonce="<%= content_security_policy_nonce %>"></script>
<script src="https://unpkg.com/tippy.js@6" nonce="<%= content_security_policy_nonce %>"></script>
Expand Down
4 changes: 2 additions & 2 deletions app/views/break_escape/player_preferences/_modal.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,8 +93,8 @@
</div>

<script type="module" nonce="<%= content_security_policy_nonce %>">
import { initializeSpritePreview } from '/break_escape/js/ui/sprite-grid.js?v=2';
import { getTutorialManager } from '/break_escape/js/systems/tutorial-manager.js';
import { initializeSpritePreview } from '<%= be_asset_path('/break_escape/js/ui/sprite-grid.js') %>';
import { getTutorialManager } from '<%= be_asset_path('/break_escape/js/systems/tutorial-manager.js') %>';

// Initialize sprite preview when modal is shown
window.initPlayerPreferencesModal = function() {
Expand Down
7 changes: 4 additions & 3 deletions app/views/break_escape/player_preferences/show.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,9 @@
<%# All fonts are self-hosted in /break_escape/assets/fonts/ via fonts.css %>

<%# Load configuration CSS %>
<link rel="stylesheet" href="/break_escape/css/fonts.css?v=2">
<link rel="stylesheet" href="/break_escape/css/player_preferences.css">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/fonts.css') %>">
<link rel="stylesheet" href="<%= be_asset_path('/break_escape/css/player_preferences.css') %>">
<%= break_escape_import_map %>
</head>
<body>
<div class="configuration-container">
Expand Down Expand Up @@ -113,7 +114,7 @@
<!-- Load Phaser for 160x160 animated preview only -->
<script src="https://cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.min.js" nonce="<%= content_security_policy_nonce %>"></script>
<script type="module" nonce="<%= content_security_policy_nonce %>">
import { initializeSpritePreview } from '/break_escape/js/ui/sprite-grid.js?v=2';
import { initializeSpritePreview } from '<%= be_asset_path('/break_escape/js/ui/sprite-grid.js') %>';

document.addEventListener('DOMContentLoaded', () => {
const sprites = <%= raw @available_sprites.to_json %>;
Expand Down
2 changes: 1 addition & 1 deletion app/views/break_escape/shared/_cybok_label.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<% grouped_cyboks = cyboks.group_by(&:ka).sort.to_h %>

<% all_ka_values = [] %>
<% all_tippy_content = "<img src='/break_escape/assets/logos/cybok_logo_white.svg' style='max-height: 20px'> " %>
<% all_tippy_content = "<img src='#{be_asset_path('/break_escape/assets/logos/cybok_logo_white.svg')}' style='max-height: 20px'> " %>

<% grouped_cyboks.each do |ka, ka_cyboks| %>
<% all_ka_values << ka %>
Expand Down
Loading
Loading