feat: implement crafting table
This commit is contained in:
FlipWind
@@ -0,0 +1,29 @@
|
||||
{{- $val := trim (.ctx.Get .key) " " -}}
|
||||
{{- $item := "" -}}
|
||||
{{- $count := 0 -}}
|
||||
{{- if $val -}}
|
||||
{{- $parts := split $val ":" -}}
|
||||
{{- $item = index $parts 0 -}}
|
||||
{{- if gt (len $parts) 1 -}}
|
||||
{{- $count = int (index $parts 1) -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
|
||||
{{- $img := "" -}}
|
||||
{{- if $item -}}
|
||||
{{- $img = resources.Get (printf "items/%s.png" $item) -}}
|
||||
{{- end -}}
|
||||
|
||||
<div class="sfc-slot sfc-{{ .cls }}"
|
||||
style="left: {{ .x }}; top: {{ .y }};"
|
||||
{{ with $item }}data-name="{{ . }}"{{ end }}>
|
||||
{{- if $img -}}
|
||||
<img class="sfc-item" src="{{ $img.RelPermalink }}"
|
||||
alt="{{ $item }}" loading="lazy">
|
||||
{{- if gt $count 1 -}}
|
||||
<span class="sfc-count">{{ $count }}</span>
|
||||
{{- end -}}
|
||||
{{- else if $item -}}
|
||||
<span class="sfc-missing" title="未找到 assets/items/{{ $item }}.png">?</span>
|
||||
{{- end -}}
|
||||
</div>
|
||||
@@ -0,0 +1,124 @@
|
||||
{{- /* 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>
|
||||
Reference in New Issue
Block a user