IDSolutions/forge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge development into master: shared Web UI runtime, bridge-driven UIs, and server-authoritative store flow #1

Merged
J.Schmidt92 merged 37 commits from development into master 2026-03-14 20:12:08 -05:00
Conversation 0 Commits 37 Files Changed 373 +1543 -977
3 changed files with 1543 additions and 977 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 4ee6537fbc - Show all commits

174
arma/client/addons/store/ui/_site/index.html
View File

@ -1,149 +1,61 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Store</title>
<!-- <link rel="stylesheet" href="style.css" /> -->
<!--
Dynamic Resource Loading
The following script loads CSS and JavaScript files dynamically using the A3API
This approach is used instead of static HTML imports to work with Arma 3's file system
-->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>FORGE Supply Exchange</title>
<script>
Promise.all([
A3API.RequestFile(
"forge\\forge_client\\addons\\store\\ui\\_site\\style.css",
),
A3API.RequestFile(
"forge\\forge_client\\addons\\store\\ui\\_site\\script.js",
),
]).then(([css, js]) => {
const addonRoot = "forge\\forge_client\\addons\\store\\ui\\_site\\";
const styleFiles = ["style.css"];
const scriptFiles = ["script.js"];
function requestText(path) {
if (
typeof A3API !== "undefined" &&
typeof A3API.RequestFile === "function"
) {
return A3API.RequestFile(addonRoot + path);
}
return fetch(path).then((response) => {
if (!response.ok) {
throw new Error("Failed to load " + path);
}
return response.text();
});
}
function appendStyle(css) {
const style = document.createElement("style");
style.textContent = css;
document.head.appendChild(style);
}
function appendScript(js) {
const script = document.createElement("script");
script.text = js;
document.head.appendChild(script);
}
Promise.all(styleFiles.map(requestText))
.then((styles) => {
styles.forEach(appendStyle);
return Promise.all(scriptFiles.map(requestText));
})
.then((scripts) => {
scripts.forEach(appendScript);
})
.catch((error) => {
console.error(
"[Store UI] Failed to load site assets.",
error,
);
});
</script>
</head>
<body>
<div class="store-container">
<!-- Header Section -->
<div class="store-header">
<div class="store-logo">
<div class="logo-icon">🛒</div>
</div>
<div class="store-info">
<h1 class="store-title">Supply Store</h1>
<p class="store-subtitle">Equipment & Resources</p>
</div>
<div class="balance-display">
<span class="balance-label">Available Funds</span>
<span class="balance-amount">$45,750</span>
</div>
<div class="header-actions">
<button class="action-btn cart-btn" id="cartToggle">
<span class="cart-icon">Cart</span>
<span class="cart-count">0</span>
</button>
<button class="action-btn close-btn">Close</button>
</div>
</div>
<!-- Main Content -->
<div class="store-content">
<!-- Left Panel - Categories -->
<div class="store-panel categories-panel">
<div class="panel-header">
<h2 class="panel-title">Categories</h2>
</div>
<div class="panel-content">
<div class="category-list">
<button class="category-item active" data-category="all">
<span class="category-icon"></span>
<span class="category-name">All Items</span>
<span class="category-count">24</span>
</button>
<button class="category-item" data-category="weapons">
<span class="category-icon"></span>
<span class="category-name">Weapons</span>
<span class="category-count">8</span>
</button>
<button class="category-item" data-category="equipment">
<span class="category-icon"></span>
<span class="category-name">Equipment</span>
<span class="category-count">6</span>
</button>
<button class="category-item" data-category="medical">
<span class="category-icon"></span>
<span class="category-name">Medical</span>
<span class="category-count">5</span>
</button>
<button class="category-item" data-category="supplies">
<span class="category-icon"></span>
<span class="category-name">Supplies</span>
<span class="category-count">5</span>
</button>
</div>
</div>
</div>
<!-- Center Panel - Items Grid -->
<div class="store-panel items-panel">
<div class="panel-header">
<h2 class="panel-title">Available Items</h2>
<div class="search-box">
<input type="text" class="search-input" placeholder="Search items..." id="searchInput">
</div>
</div>
<div class="panel-content">
<div class="items-grid" id="itemsGrid">
<!-- Items will be dynamically generated -->
</div>
</div>
</div>
<!-- Right Panel - Cart (Initially Hidden) -->
<div class="store-panel cart-panel" id="cartPanel" style="display: none;">
<div class="panel-header">
<h2 class="panel-title">Shopping Cart</h2>
<button class="clear-cart-btn" id="clearCart">Clear</button>
</div>
<div class="panel-content">
<div class="cart-items" id="cartItems">
<div class="empty-cart">
<span class="empty-icon"></span>
<span class="empty-text">Your cart is empty</span>
</div>
</div>
<div class="cart-summary">
<div class="summary-row">
<span class="summary-label">Subtotal</span>
<span class="summary-value" id="cartSubtotal">$0</span>
</div>
<div class="summary-row">
<span class="summary-label">Tax (5%)</span>
<span class="summary-value" id="cartTax">$0</span>
</div>
<div class="summary-row summary-total">
<span class="summary-label">Total</span>
<span class="summary-value" id="cartTotal">$0</span>
</div>
<button class="action-btn action-btn-primary checkout-btn" id="checkoutBtn">
Complete Purchase
</button>
</div>
</div>
</div>
</div>
</div>
<!-- <script src="script.js"></script> -->
<div id="app"></div>
</body>
</html>

1047
arma/client/addons/store/ui/_site/script.js
View File

File diff suppressed because it is too large Load Diff

1259
arma/client/addons/store/ui/_site/style.css
View File

File diff suppressed because it is too large Load Diff