125 lines
3.9 KiB
HTML
125 lines
3.9 KiB
HTML
{{- /* SFCraft 合成配方组件
|
|
- 调用: 页面内写 shortcode, 名为 crafting
|
|
- a1..c3 为 3x3 合成格, out 为输出格
|
|
- 值为 assets/items/ 下贴图的文件名(不含 .png), 留空表示空格子
|
|
- 名称后可加 ":数量" 显示堆叠数, 例如 a1="stick:2"
|
|
- 引用的贴图不存在时, 格子内显示 ? 占位提示
|
|
- caption 参数可选, 显示在组件下方
|
|
*/ -}}
|
|
|
|
{{- $table := resources.Get "table.png" -}}
|
|
{{- $slots := slice
|
|
(dict "key" "a1" "cls" "grid" "x" "13.75%" "y" "20%")
|
|
(dict "key" "a2" "cls" "grid" "x" "25%" "y" "20%")
|
|
(dict "key" "a3" "cls" "grid" "x" "36.25%" "y" "20%")
|
|
(dict "key" "b1" "cls" "grid" "x" "13.75%" "y" "42.5%")
|
|
(dict "key" "b2" "cls" "grid" "x" "25%" "y" "42.5%")
|
|
(dict "key" "b3" "cls" "grid" "x" "36.25%" "y" "42.5%")
|
|
(dict "key" "c1" "cls" "grid" "x" "13.75%" "y" "65%")
|
|
(dict "key" "c2" "cls" "grid" "x" "25%" "y" "65%")
|
|
(dict "key" "c3" "cls" "grid" "x" "36.25%" "y" "65%")
|
|
(dict "key" "out" "cls" "out" "x" "70%" "y" "37.5%")
|
|
-}}
|
|
|
|
{{- $cssOnce := .Page.Store.Get "sfc_crafting_css" -}}
|
|
{{- if not $cssOnce -}}
|
|
{{- .Page.Store.Set "sfc_crafting_css" true -}}
|
|
<style>
|
|
.sfc-crafting {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 540px;
|
|
aspect-ratio: 320 / 160;
|
|
margin: 1rem 0 1.25rem;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
container-type: inline-size;
|
|
}
|
|
.sfc-slot {
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.sfc-grid { width: 10.625%; height: 21.25%; }
|
|
.sfc-out { width: 15.625%; height: 31.25%; }
|
|
.sfc-item {
|
|
width: 88%;
|
|
height: 88%;
|
|
object-fit: contain;
|
|
image-rendering: pixelated;
|
|
filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
|
|
}
|
|
.sfc-count {
|
|
position: absolute;
|
|
right: 5%;
|
|
bottom: 3%;
|
|
font-family: "Minecraft", ui-monospace, Consolas, monospace;
|
|
font-size: 12px;
|
|
font-size: 2.8cqw;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
color: #fff;
|
|
text-shadow: 0 1px 0 #3f3f3f, 1px 0 0 #3f3f3f,
|
|
0 -1px 0 #3f3f3f, -1px 0 0 #3f3f3f,
|
|
0 2px 3px rgba(0, 0, 0, 0.55);
|
|
}
|
|
.sfc-missing {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 86%;
|
|
height: 86%;
|
|
font-size: 4cqw;
|
|
font-weight: 700;
|
|
color: rgba(0, 0, 0, 0.28);
|
|
border: 2px dashed rgba(0, 0, 0, 0.18);
|
|
border-radius: 4px;
|
|
background:
|
|
repeating-linear-gradient(45deg, rgba(255,255,255,0.22), rgba(255,255,255,0.22) 4px, rgba(0,0,0,0.04) 4px, rgba(0,0,0,0.04) 8px);
|
|
}
|
|
.sfc-slot[data-name]::after {
|
|
content: attr(data-name);
|
|
position: absolute;
|
|
bottom: calc(100% + 6px);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
padding: 3px 9px;
|
|
border: 1px solid rgba(255, 255, 255, 0.16);
|
|
border-radius: 5px;
|
|
background: rgba(18, 18, 18, 0.92);
|
|
color: #fff;
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.12s ease;
|
|
z-index: 30;
|
|
}
|
|
.sfc-slot[data-name]:hover::after { opacity: 1; }
|
|
.sfc-caption {
|
|
margin: 0.35rem 0 0;
|
|
text-align: center;
|
|
font-size: 0.85rem;
|
|
color: var(--gray-600, #6c757d);
|
|
}
|
|
</style>
|
|
{{- end -}}
|
|
|
|
<figure class="sfc-crafting" style="background-image: url('{{ $table.RelPermalink }}');">
|
|
{{- range $slots -}}
|
|
{{- partial "crafting-slot.html"
|
|
(dict
|
|
"ctx" $
|
|
"key" .key
|
|
"cls" .cls
|
|
"x" .x
|
|
"y" .y
|
|
) -}}
|
|
{{- end -}}
|
|
{{- with .Get "caption" -}}
|
|
<figcaption class="sfc-caption">{{ . }}</figcaption>
|
|
{{- end -}}
|
|
</figure>
|