init
This commit is contained in:
@@ -0,0 +1,39 @@
|
||||
(() => {
|
||||
const references = [...document.querySelectorAll('[data-component-src]')];
|
||||
const componentPaths = [...new Set(references.map((reference) => reference.dataset.componentSrc.split('#')[0]))];
|
||||
const registriesReady = Promise.all(componentPaths.map((path) => new Promise((resolve) => {
|
||||
const script = document.createElement('script');
|
||||
script.src = path.replace(/index\.html$/, 'component.js');
|
||||
script.onload = resolve;
|
||||
script.onerror = resolve;
|
||||
document.head.append(script);
|
||||
})));
|
||||
|
||||
window.componentsReady = registriesReady.then(() => Promise.all(references.map(async (reference) => {
|
||||
const specifier = reference.dataset.componentSrc;
|
||||
const [path, fragmentId] = specifier.split('#');
|
||||
const registered = window.componentRegistry?.[path]?.[fragmentId];
|
||||
if (registered !== undefined) {
|
||||
const template = document.createElement('template');
|
||||
template.innerHTML = registered;
|
||||
reference.replaceWith(template.content.cloneNode(true));
|
||||
return;
|
||||
}
|
||||
const response = await fetch(path);
|
||||
if (!response.ok) throw new Error(`Component load failed: ${specifier} (${response.status})`);
|
||||
const source = await response.text();
|
||||
const documentFragment = new DOMParser().parseFromString(source, 'text/html');
|
||||
const template = fragmentId ? documentFragment.getElementById(fragmentId) : null;
|
||||
if (!(template instanceof HTMLTemplateElement)) throw new Error(`Component fragment missing: ${specifier}`);
|
||||
reference.replaceWith(template.content.cloneNode(true));
|
||||
}))).then(() => {
|
||||
document.documentElement.dataset.componentsReady = 'true';
|
||||
}).catch((error) => {
|
||||
document.documentElement.dataset.componentsReady = 'error';
|
||||
const overlay = document.createElement('pre');
|
||||
overlay.className = 'component-load-error';
|
||||
overlay.textContent = error.stack || error.message;
|
||||
document.body.prepend(overlay);
|
||||
throw error;
|
||||
});
|
||||
})();
|
||||
@@ -0,0 +1,4 @@
|
||||
(() => {
|
||||
window.componentRegistry ||= {};
|
||||
window.componentRegistry["src-web/shared/index.html"] = {"glyphs":"<div class=\"panel\">\n <div class=\"panel-heading\"><div class=\"panel-title\">Native glyph assets</div><div class=\"spec-chip asset\">1× / 2× RASTER</div></div>\n <div class=\"panel-body\">\n <div class=\"sample-grid cols-3\">\n <div class=\"sample-cell\" style=\"text-align:center\"><img class=\"pixel asset-2x glyph-select-2x\" src=\"src-web/shared/img/sprite_interface.NPK/windowcommon_2x.img/0.PNG\"><div class=\"sample-label\" style=\"margin:7px 0 0\">Select arrow · 2x</div></div>\n <div class=\"sample-cell\" style=\"text-align:center\"><img class=\"pixel asset-2x glyph-check-2x\" src=\"src-web/shared/img/sprite_interface.NPK/windowcommon_2x.img/4.PNG\" alt=\"Check\"><div class=\"sample-label\" style=\"margin:7px 0 0\">Check</div></div>\n <div class=\"sample-cell\" style=\"text-align:center\"><img class=\"pixel asset-2x glyph-close-2x\" src=\"src-web/shared/img/sprite_interface.NPK/windowcommon_2x.img/6.PNG\"><div class=\"sample-label\" style=\"margin:7px 0 0\">Close · 2x</div></div>\n <div class=\"sample-cell\" style=\"text-align:center\"><img class=\"pixel\" src=\"src-web/shared/img/sprite_interface.NPK/windowcommon.chn.img/561.PNG\"><div class=\"sample-label\" style=\"margin:7px 0 0\">Expand</div></div>\n <div class=\"sample-cell\" style=\"text-align:center\"><img class=\"pixel\" src=\"src-web/shared/img/sprite_interface.NPK/windowcommon.chn.img/301.PNG\"><div class=\"sample-label\" style=\"margin:7px 0 0\">Notice</div></div>\n <div class=\"sample-cell\" style=\"text-align:center\"><img class=\"pixel\" src=\"src-web/shared/img/sprite_interface2_option.NPK/option.img/88.PNG\"><div class=\"sample-label\" style=\"margin:7px 0 0\">Settings</div></div>\n </div>\n <div class=\"divider\"></div>\n <ul class=\"callout-list\">\n <li>图标保持像素网格和原生比例</li>\n <li>颜色状态不通过 CSS 滤镜伪造</li>\n <li>对应状态素材缺失时才使用 Derived 规则</li>\n </ul>\n </div>\n </div>"};
|
||||
})();
|
||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 339 B |
Binary file not shown.
|
After Width: | Height: | Size: 690 B |
Binary file not shown.
|
After Width: | Height: | Size: 344 B |
Binary file not shown.
|
After Width: | Height: | Size: 988 B |
Binary file not shown.
|
After Width: | Height: | Size: 975 B |
Binary file not shown.
|
After Width: | Height: | Size: 992 B |
@@ -0,0 +1,37 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=1920, initial-scale=1">
|
||||
<base href="../../">
|
||||
<title>shared component catalog</title>
|
||||
<link rel="stylesheet" href="src-web/index.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Root pages load individual templates through index.html#fragment references. -->
|
||||
<template id="glyphs">
|
||||
<div class="panel">
|
||||
<div class="panel-heading"><div class="panel-title">Native glyph assets</div><div class="spec-chip asset">1× / 2× RASTER</div></div>
|
||||
<div class="panel-body">
|
||||
<div class="sample-grid cols-3">
|
||||
<div class="sample-cell" style="text-align:center"><img class="pixel asset-2x glyph-select-2x" src="src-web/shared/img/sprite_interface.NPK/windowcommon_2x.img/0.PNG"><div class="sample-label" style="margin:7px 0 0">Select arrow · 2x</div></div>
|
||||
<div class="sample-cell" style="text-align:center"><img class="pixel asset-2x glyph-check-2x" src="src-web/shared/img/sprite_interface.NPK/windowcommon_2x.img/4.PNG" alt="Check"><div class="sample-label" style="margin:7px 0 0">Check</div></div>
|
||||
<div class="sample-cell" style="text-align:center"><img class="pixel asset-2x glyph-close-2x" src="src-web/shared/img/sprite_interface.NPK/windowcommon_2x.img/6.PNG"><div class="sample-label" style="margin:7px 0 0">Close · 2x</div></div>
|
||||
<div class="sample-cell" style="text-align:center"><img class="pixel" src="src-web/shared/img/sprite_interface.NPK/windowcommon.chn.img/561.PNG"><div class="sample-label" style="margin:7px 0 0">Expand</div></div>
|
||||
<div class="sample-cell" style="text-align:center"><img class="pixel" src="src-web/shared/img/sprite_interface.NPK/windowcommon.chn.img/301.PNG"><div class="sample-label" style="margin:7px 0 0">Notice</div></div>
|
||||
<div class="sample-cell" style="text-align:center"><img class="pixel" src="src-web/shared/img/sprite_interface2_option.NPK/option.img/88.PNG"><div class="sample-label" style="margin:7px 0 0">Settings</div></div>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<ul class="callout-list">
|
||||
<li>图标保持像素网格和原生比例</li>
|
||||
<li>颜色状态不通过 CSS 滤镜伪造</li>
|
||||
<li>对应状态素材缺失时才使用 Derived 规则</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
document.querySelectorAll('template').forEach((template) => document.body.append(template.content.cloneNode(true)));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,233 @@
|
||||
/* Source module: tokens.css */
|
||||
@font-face {
|
||||
font-family: "DCalc";
|
||||
src: url("../img/fonts/dcalc.ttf") format("truetype");
|
||||
font-display: block;
|
||||
}
|
||||
|
||||
:root {
|
||||
--black-950: #050505;
|
||||
--black-900: #090808;
|
||||
--panel: #131515;
|
||||
--row: #1f1f1e;
|
||||
--row-2: #2e2e2c;
|
||||
--title-top: #5a7099;
|
||||
--title-mid: #415272;
|
||||
--title-bottom: #313e58;
|
||||
--primary: #1a2b4e;
|
||||
--primary-hover: #203259;
|
||||
--primary-active: #16264c;
|
||||
--brass-dark: #504029;
|
||||
--brass: #907746;
|
||||
--gold: #d6c487;
|
||||
--selected: #daa41d;
|
||||
--focus: #4ba7d3;
|
||||
--text: #f6f8f4;
|
||||
--text-2: #d6d3c6;
|
||||
--text-3: #a7a396;
|
||||
--disabled: #4d4b4d;
|
||||
--info: #54c1db;
|
||||
--success: #49a355;
|
||||
--warning: #c28954;
|
||||
--danger: #bb3331;
|
||||
/* Captured control palette. These fill gaps in the semantic palette without changing it. */
|
||||
--control-blue: var(--primary);
|
||||
--control-blue-top: #1f355e;
|
||||
--control-blue-bottom: #1a2849;
|
||||
--control-green-top: #014f22;
|
||||
--control-green-bottom: #013f1b;
|
||||
--control-orange-top: #522d01;
|
||||
--control-orange-bottom: #412401;
|
||||
--control-edge-top: #684f2d;
|
||||
--control-edge-bottom: #483423;
|
||||
--control-disabled-top: #2c2c2c;
|
||||
--control-disabled-bottom: #222222;
|
||||
--control-disabled-edge-top: #343434;
|
||||
--control-disabled-edge-bottom: #262626;
|
||||
--control-glyph: #b69260;
|
||||
--control-highlight: var(--gold);
|
||||
--attribute-label: #9a7d49;
|
||||
--attribute-value: #469b51;
|
||||
--skill-evolution: #bb56f1;
|
||||
--skill-passive: #00ce08;
|
||||
--skill-active: #b69b33;
|
||||
--skill-awakening: #f27300;
|
||||
--skill-buff: #63c8e1;
|
||||
--quality-normal: #ffffff;
|
||||
--quality-advanced: #68d5ed;
|
||||
--quality-rare: #9879da;
|
||||
--quality-artifact: #ef28c1;
|
||||
--quality-legend: #ff7700;
|
||||
--quality-epic: #fcb600;
|
||||
--quality-chronicle: #ff6666;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
html,
|
||||
|
||||
/* Source module: base.css */
|
||||
body {
|
||||
margin: 0;
|
||||
background: #242524;
|
||||
color: var(--text-2);
|
||||
font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 1920px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 48px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.board {
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1200px;
|
||||
padding: 38px 46px 42px;
|
||||
overflow: hidden;
|
||||
background:
|
||||
radial-gradient(circle at 84% 7%, rgba(65, 82, 114, 0.12), transparent 22%),
|
||||
linear-gradient(180deg, #090b0b 0, #050505 150px, #070707 100%);
|
||||
border: 1px solid #161817;
|
||||
}
|
||||
|
||||
.board::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background-image: linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px);
|
||||
background-size: 100% 4px;
|
||||
opacity: .45;
|
||||
}
|
||||
|
||||
.board-header {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 88px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid var(--brass-dark);
|
||||
}
|
||||
|
||||
.board-kicker {
|
||||
color: var(--selected);
|
||||
font-size: 12px;
|
||||
letter-spacing: 2.6px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.board-title {
|
||||
margin: 0;
|
||||
color: #e5d69a;
|
||||
font-size: 30px;
|
||||
line-height: 1.1;
|
||||
font-weight: 650;
|
||||
letter-spacing: .7px;
|
||||
}
|
||||
|
||||
.board-subtitle {
|
||||
margin-top: 8px;
|
||||
color: var(--text-3);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.board-index {
|
||||
padding-top: 9px;
|
||||
text-align: right;
|
||||
color: var(--text-3);
|
||||
font-size: 12px;
|
||||
letter-spacing: .8px;
|
||||
}
|
||||
|
||||
.board-index strong {
|
||||
display: block;
|
||||
color: var(--gold);
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 1010px;
|
||||
padding-top: 22px;
|
||||
}
|
||||
|
||||
.grid { display: grid; gap: 18px; }
|
||||
.grid.cols-2 { grid-template-columns: 1fr 1fr; }
|
||||
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
|
||||
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
|
||||
|
||||
.panel {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
background: linear-gradient(180deg, rgba(20,22,22,.98), rgba(7,8,8,.98));
|
||||
border: 1px solid #403421;
|
||||
box-shadow: inset 0 1px 0 rgba(214,196,135,.06), 0 12px 28px rgba(0,0,0,.32);
|
||||
}
|
||||
|
||||
.panel-heading {
|
||||
height: 46px;
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #242725;
|
||||
background: #111313;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
color: var(--gold);
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.panel-note { color: var(--text-3); font-size: 11px; }
|
||||
.panel-body { padding: 18px; }
|
||||
|
||||
.rule-label {
|
||||
color: var(--text-3);
|
||||
font-size: 10px;
|
||||
letter-spacing: 1.2px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
|
||||
.sample-label {
|
||||
color: var(--text-3);
|
||||
font-size: 11px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.spec-row { display: flex; gap: 7px; flex-wrap: wrap; }
|
||||
.spec-chip {
|
||||
height: 20px;
|
||||
padding: 0 7px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border: 1px solid #3c3e3c;
|
||||
background: #101111;
|
||||
color: var(--text-3);
|
||||
font-size: 10px;
|
||||
letter-spacing: .4px;
|
||||
}
|
||||
|
||||
.spec-chip.captured { border-color: #6f5a32; color: var(--gold); }
|
||||
.spec-chip.derived { border-color: #24566d; color: var(--focus); }
|
||||
.spec-chip.asset { border-color: #34533e; color: var(--success); }
|
||||
|
||||
.divider { height: 1px; background: #292b29; margin: 14px 0; }
|
||||
|
||||
.dnf-ui {
|
||||
font-family: "DCalc", SimSun, "Microsoft YaHei", sans-serif;
|
||||
text-shadow: 1px 1px 0 #000, 0 0 2px #000;
|
||||
}
|
||||
|
||||
.asset-2x { image-rendering:auto !important; }
|
||||
Reference in New Issue
Block a user