Refactor store UI into dynamic multi-view shell
- Replace static HTML markup with app root and runtime asset loading - Rebuild `script.js` as state-driven category/weapon/catalog views - Add cart overlay scaffold, breadcrumbs, and window-style navigation UI
This commit is contained in:
Jacob Schmidt
parent
9cd7278746
commit
4ee6537fbc
@ -1,149 +1,61 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Store</title>
|
<title>FORGE Supply Exchange</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
|
|
||||||
-->
|
|
||||||
<script>
|
<script>
|
||||||
Promise.all([
|
const addonRoot = "forge\\forge_client\\addons\\store\\ui\\_site\\";
|
||||||
A3API.RequestFile(
|
const styleFiles = ["style.css"];
|
||||||
"forge\\forge_client\\addons\\store\\ui\\_site\\style.css",
|
const scriptFiles = ["script.js"];
|
||||||
),
|
|
||||||
A3API.RequestFile(
|
function requestText(path) {
|
||||||
"forge\\forge_client\\addons\\store\\ui\\_site\\script.js",
|
if (
|
||||||
),
|
typeof A3API !== "undefined" &&
|
||||||
]).then(([css, js]) => {
|
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");
|
const style = document.createElement("style");
|
||||||
style.textContent = css;
|
style.textContent = css;
|
||||||
document.head.appendChild(style);
|
document.head.appendChild(style);
|
||||||
|
}
|
||||||
|
|
||||||
|
function appendScript(js) {
|
||||||
const script = document.createElement("script");
|
const script = document.createElement("script");
|
||||||
script.text = js;
|
script.text = js;
|
||||||
document.head.appendChild(script);
|
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>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="store-container">
|
<div id="app"></div>
|
||||||
<!-- 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> -->
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user