[[iftags -组件]]
[[div class="sd-container newsd lang-{$lang} [[#ifexpr {$noname} == 1 | noname ]] class-[[#ifexpr ({$ent}+{$env}+{$ext})/3 < 0.5 | 0 ]][[#ifexpr ({$ent}+{$env}+{$ext})/3 >= 0.5 && !(({$ent}+{$env}+{$ext})/3 >= 1.5) | 1 ]][[#ifexpr ({$ent}+{$env}+{$ext})/3 >= 1.5 && !(({$ent}+{$env}+{$ext})/3 >= 2.5) | 2 ]][[#ifexpr ({$ent}+{$env}+{$ext})/3 >= 2.5 && !(({$ent}+{$env}+{$ext})/3 >= 3.5) | 3 ]][[#ifexpr ({$ent}+{$env}+{$ext})/3 >= 3.5 && !(({$ent}+{$env}+{$ext})/3 >= 4.5) | 4 ]][[#ifexpr ({$ent}+{$env}+{$ext})/3 >= 4.5 | 5 ]]" style="[[#ifexpr {$customline} == 1 | --sdgrad: {$linecolor} ]];" ]]
[[div class="number" [[#ifexpr {$noname} == 1 | style="display: none;" ]] ]]
LEVEL
**[[span class="no"]]{$no}[[/span]]**
[[div class="lines"]]
[[/div]]
[[/div]]
[[div class="border" [[#ifexpr {$noname} == 1 | style="display: none;" ]] ]]
[[/div]]
[[div class="class [[#ifexpr {$customclass} == 1 | customclass ]]"]]
[[span class="sd"]][[span class="lang-cn"]]生存等级[[/span]][[span class="lang-tr"]]生存等級[[/span]][[/span]]
**{{[[#ifexpr ({$ent}+{$env}+{$ext})/3 < 0.5 | 0 ]][[#ifexpr ({$ent}+{$env}+{$ext})/3 >= 0.5 && !(({$ent}+{$env}+{$ext})/3 >= 1.5) | 1 ]][[#ifexpr ({$ent}+{$env}+{$ext})/3 >= 1.5 && !(({$ent}+{$env}+{$ext})/3 >= 2.5) | 2 ]][[#ifexpr ({$ent}+{$env}+{$ext})/3 >= 2.5 && !(({$ent}+{$env}+{$ext})/3 >= 3.5) | 3 ]][[#ifexpr ({$ent}+{$env}+{$ext})/3 >= 3.5 && !(({$ent}+{$env}+{$ext})/3 >= 4.5) | 4 ]][[#ifexpr ({$ent}+{$env}+{$ext})/3 >= 4.5 | 5 ]]}} [[span class="lang-cn"]]级[[/span]][[span class="lang-tr"]]級[[/span]]**
[[/div]]
[[div class="exit indicator in-{$ext} [[#ifexpr {$customext} == 1 | custom ]]" style="background: rgba(var(--bg),0.3); background: rgba({$extcolor},0.3); border-left: solid 0.4rem rgb(var(--bg)); border-left: solid 0.4rem rgb({$extcolor}); background-image: url("http://scutoidbox.wikidot.com/local--files/level-classes/exit{$ext}.png"); background-image: {$extimg}; background-repeat: no-repeat; background-size: contain; background-position: right;" ]]
**[[span class="lang-cn"]]逃离[[/span]][[span class="lang-tr"]]逃離[[/span]]:{$ext}/5**
[[span]][[span class="lang-cn"]][[#ifexpr {$ext} == 0 | 确保逃离 ]][[#ifexpr {$ext} == 1 | 容易逃离 ]][[#ifexpr {$ext} == 2 | 略难逃离 ]][[#ifexpr {$ext} == 3 | 难以逃离]][[#ifexpr {$ext} == 4 | 极难逃离 ]][[#ifexpr {$ext} == 5 | 无路可逃 ]][[/span]][[span class="lang-tr"]][[#ifexpr {$ext} == 0 | 確保逃離 ]][[#ifexpr {$ext} == 1 | 容易逃離 ]][[#ifexpr {$ext} == 2 | 略難逃離 ]][[#ifexpr {$ext} == 3 | 難以逃離]][[#ifexpr {$ext} == 4 | 極難逃離 ]][[#ifexpr {$ext} == 5 | 無路可逃 ]][[/span]][[/span]]
[[/div]]
[[div class="environment indicator in-{$env} [[#ifexpr {$customenv} == 1 | custom ]]" style="background: rgba(var(--bg),0.3); background: rgba({$envcolor},0.3); border-left: solid 0.4rem rgb(var(--bg)); border-left: solid 0.4rem rgb({$envcolor}); background-image: url("http://scutoidbox.wikidot.com/local--files/level-classes/environmental{$env}.png"); background-image: {$envimg}; background-repeat: no-repeat; background-size: contain; background-position: right;"]]
**[[span class="lang-cn"]]环境[[/span]][[span class="lang-tr"]]環境[[/span]]:{$env}/5**
[[span]][[span class="lang-cn"]][[#ifexpr {$env} == 0 | 无环境风险 ]][[#ifexpr {$env} == 1 | 低环境风险 ]][[#ifexpr {$env} == 2 | 少量环境风险 ]][[#ifexpr {$env} == 3 | 高环境风险 ]][[#ifexpr {$env} == 4 | 极端环境风险 ]][[#ifexpr {$env} == 5 | 死区 ]][[/span]][[span class="lang-tr"]][[#ifexpr {$env} == 0 | 無環境風險 ]][[#ifexpr {$env} == 1 | 低環境風險 ]][[#ifexpr {$env} == 2 | 少量環境風險 ]][[#ifexpr {$env} == 3 | 高環境風險 ]][[#ifexpr {$env} == 4 | 極端環境風險 ]][[#ifexpr {$env} == 5 | 死區 ]][[/span]][[/span]]
[[/div]]
[[div class="entity indicator in-{$ent} [[#ifexpr {$customent} == 1 | custom ]]" style="background: rgba(var(--bg),0.3); background: rgba({$entcolor},0.3); border-left: solid 0.4rem rgb(var(--bg)); border-left: solid 0.4rem rgb({$entcolor}); background-image: url("http://scutoidbox.wikidot.com/local--files/level-classes/entity{$ent}.png"); background-image: {$entimg}; background-repeat: no-repeat; background-size: contain; background-position: right;" ]]
**[[span class="lang-cn"]]实体[[/span]][[span class="lang-tr"]]實體[[/span]]:{$ent}/5**
[[span]][[span class="lang-cn"]][[#ifexpr {$ent} == 0 | 无敌对实体 ]][[#ifexpr {$ent} == 1 | 极少敌意存在 ]][[#ifexpr {$ent} == 2 | 少量敌意存在 ]][[#ifexpr {$ent} == 3 | 大量敌意存在 ]][[#ifexpr {$ent} == 4 | 极多敌意存在 ]][[#ifexpr {$ent} == 5 | 敌意侵袭 ]][[/span]][[span class="lang-tr"]][[#ifexpr {$ent} == 0 | 無敵對實體 ]][[#ifexpr {$ent} == 1 | 極少敵意存在 ]][[#ifexpr {$ent} == 2 | 少量敵意存在 ]][[#ifexpr {$ent} == 3 | 大量敵意存在 ]][[#ifexpr {$ent} == 4 | 極多敵意存在 ]][[#ifexpr {$ent} == 5 | 敵意侵襲 ]][[/span]][[/span]]
[[/div]]
[[/div]]
[[/iftags]]
[[iftags +组件]]
[[div class="dark-styled-quote"]]
++ 新版层级等级组件
[[/div]]
[[div class="styled-quote"]]
这是一种给层级定义等级的新式替代系统!你可以在你的层级页面中把它当作横幅使用!
这是一个更为客观的系统,可以对层级的危险程度打分并客观地将其进行比对!
[[/div]]
[[div class="sd-container newsd class-5"]]
[[div class="number" ]]
LEVEL
**[[span class="no"]]184[[/span]]**
[[div class="lines" style=""]]
[[/div]]
[[/div]]
[[div class="border" ]]
[[/div]]
[[div class="class"]]
[[span class="sd"]]生存难度[[/span]]
**5 级**
[[/div]]
[[div class="exit indicator in-5" style="background: rgba(var(--bg),0.3); border-left: solid 0.4rem rgb(var(--bg)); background-image: url("http://scutoidbox.wikidot.com/local--files/level-classes/exit5.png"); background-repeat: no-repeat; background-size: contain; background-position: right;"]]
**逃离:5/5**
[[span]]无路可逃[[/span]]
[[/div]]
[[div class="environment indicator in-4" style="background: rgba(var(--bg),0.3); border-left: solid 0.4rem rgb(var(--bg)); background-image: url("http://scutoidbox.wikidot.com/local--files/level-classes/environmental4.png"); background-repeat: no-repeat; background-size: contain; background-position: right;"]]
**环境:4/5**
[[span]]极端环境风险[[/span]]
[[/div]]
[[div class="entity indicator in-5" style="background: rgba(var(--bg),0.3); border-left: solid 0.4rem rgb(var(--bg)); background-image: url("http://scutoidbox.wikidot.com/local--files/level-classes/entity5.png"); background-repeat: no-repeat; background-size: contain; background-position: right;"]]
**实体:5/5**
[[span]]敌意侵袭[[/span]]
[[/div]]
[[/div]]
[[div class="code"]]
@@[[include :backrooms-wiki-cn:component:nulevelclass@@
@@|lang=cn/tr@@
@@|ent=5@@
@@|env=4@@
@@|ext=5@@
@@|no=184@@
@@]]@@
[[/div]]
[[div class="styled-quote"]]
+++ 如何使用
{{{$lang}}} 决定了组件所使用的语言,cn 为简体中文,tr 为繁体中文,不填默认简体中文。
你可以通过层级的三个危险维度对其进行 0-5 的打分:
* 逃离难度 - {{{$ext}}}
* 0 - 确保逃离
* 1 - 容易逃离
* 2 - 略难逃离
* 3 - 难以逃离
* 4 - 极难逃离
* 5 - 无路可逃
* 环境危险 - {{{$env}}}
* 0 - 无环境风险
* 1 - 低环境风险
* 2 - 少量环境风险
* 3 - 高环境风险
* 4 - 极端环境风险
* 5 - 死区
* 敌对实体存在 - {{{$ent}}}
* 0 - 无敌对实体
* 1 - 极少敌意存在
* 2 - 少量敌意存在
* 3 - 大量敌意存在
* 4 - 极多敌意存在
* 5 - 敌意侵袭
且等级数字是通过取这三个数字的平均数并将其四舍五入至最接近的整数来**为你自动**计算出来的。
你可以通过 {{{$no}}} 来设定层级编号。这个编号可以随意填写,填汉字、英语单词或是负数都可以。
+++ 玄学
如果名字特别短的话,比如只有一个符号,那么你可以如常使用 {{{$no}}} 设置名字。
如果名字相对较短,且你又需要填写的话,那么你可以用 {{{$fntsz}}} 修改名字的字体大小。
如果名字过长的话,那么你可以使用 {{|{$noname}=1}} 来完全移除横幅中层级名字的部分。
+++ 完全自定义等级
下面是一个制作完全自定义等级的例子:
[[div class="code"]]
@@[[include :backrooms-wiki-cn:component:nulevelclass@@
|lang=cn
|no=???
|customline=1
|linecolor=var(--gray-monochrome)
|ent=5
|customent=1
|enttext=潜在敌意
@@|entcolor=var(--gray-monochrome)@@
|ext=5
|customext=1
|exttext=出口不明
@@|extcolor=var(--gray-monochrome)@@
|env=5
|customenv=1
|envtext=环境未探明
@@|envcolor=var(--gray-monochrome)@@
|customclass=1
|classtext=未确定
]]
[[/div]]
[[div class="sd-container newsd class-5" style="--sdgrad: var(--gray-monochrome);" ]]
[[div class="number"]]
LEVEL
**[[span class="no"]]???[[/span]]**
[[div class="lines"]]
[[/div]]
[[/div]]
[[div class="border"]]
[[/div]]
[[div class="class"]]
[[span class="sd"]]生存等级[[/span]]
**未确定**
[[/div]]
[[div class="exit indicator in-5" style="background: rgba(var(--bg),0.3); background: rgba(var(--gray-monochrome),0.3); border-left: solid 0.4rem rgb(var(--bg)); border-left: solid 0.4rem rgb(var(--gray-monochrome)); background-image: url("http://scutoidbox.wikidot.com/local--files/level-classes/exit5.png"); background-image: {$extimg}; background-repeat: no-repeat; background-size: contain; background-position: right;" ]]
**逃离:5/5**
[[span]]{{出口不明}}[[/span]]
[[/div]]
[[div class="environment indicator in-5" style="background: rgba(var(--bg),0.3); background: rgba(var(--gray-monochrome),0.3); border-left: solid 0.4rem rgb(var(--bg)); border-left: solid 0.4rem rgb(var(--gray-monochrome)); background-image: url("http://scutoidbox.wikidot.com/local--files/level-classes/environmental5.png"); background-image: {$envimg}; background-repeat: no-repeat; background-size: contain; background-position: right;"]]
**环境:5/5**
[[span]]{{环境未探明}}[[/span]]
[[/div]]
[[div class="entity indicator in-5" style="background: rgba(var(--bg),0.3); background: rgba(var(--gray-monochrome),0.3); border-left: solid 0.4rem rgb(var(--bg)); border-left: solid 0.4rem rgb(var(--gray-monochrome)); background-image: url("http://scutoidbox.wikidot.com/local--files/level-classes/entity5.png"); background-image: {$entimg}; background-repeat: no-repeat; background-size: contain; background-position: right;" ]]
**实体:5/5**
[[span]]{{潜在敌意}}[[/span]]
[[/div]]
[[/div]]
**请随意创建任何你喜欢的生存难度等级!**
[[/div]]
[[/iftags]]
[[module css]]
.sd-container.newsd {
display: grid;
grid-template-areas:
'number border class exit'
'number border environment entity';
grid-gap: 10px;
grid-template-columns: 8rem 6px 1fr 1fr;
font-family: Recursive, "Noto Sans SC", "Noto Sans TC", Verdana, "Microsoft YaHei", "微软雅黑", Geneva, sans-serif, STXihei, "华文细黑";;
grid-auto-rows: 1fr;
overflow: hidden;
border-radius: 0.5rem;
}
.newsd p { margin: 0; }
.number {
grid-area: number;
letter-spacing: 0.1rem;
text-align: center;
line-height: 2rem;
font-size: 1.5rem;
position: relative;
display: flex;
flex-direction: column;
}
.number .no {
font-size: 3rem;
font-size: {$fntsz};
letter-spacing: 0.1rem;
}
.number p {
display: flex;
flex-direction: column;
justify-content: center;
height: calc(100% - 47px);
flex-grow: 2;
}
.lines {
height: 47px;
background-image: linear-gradient(
rgb(var(--sdgrad)) 0,
rgb(var(--sdgrad)) 7px,
transparent 7px,
transparent 10px,
rgb(var(--sdgrad)) 10px,
rgb(var(--sdgrad)) 17px,
transparent 17px,
transparent 20px,
rgb(var(--sdgrad)) 20px,
rgb(var(--sdgrad)) 27px,
transparent 27px,
transparent 30px,
rgb(var(--sdgrad)) 30px,
rgb(var(--sdgrad)) 37px,
transparent 37px,
transparent 40px,
rgb(var(--sdgrad)) 40px,
rgb(var(--sdgrad)) 47px
);
}
.class {
grid-area: class;
padding: 0.4rem 0;
padding-left: 0.8rem;
}
span.sd {
font-size: 0.8rem;
letter-spacing: 0.1rem;
}
.exit {
grid-area: exit;
}
.environment {
grid-area: environment;
}
.entity {
grid-area: entity;
}
.border {
grid-area: border;
background: rgb(var(--gray-monochrome));
}
.indicator {
padding: 0.4rem 2rem 0.4rem 0.4rem;
}
.indicator p > span {
font-size: 0.8rem;
letter-spacing: 0.1rem;
}
:root {
--class-0:247,227,117;
--class-1:247,227,117;
--class-1:255,201,14;
--class-2:245,156,0;
--class-3:249,90,0;
--class-4:254,23,1;
--class-5:175,6,6;
}
.newsd.class-0 { --sdgrad: var(--class-0); }
.newsd.class-1 { --sdgrad: var(--class-1); }
.newsd.class-2 { --sdgrad: var(--class-2); }
.newsd.class-3 { --sdgrad: var(--class-3); }
.newsd.class-4 { --sdgrad: var(--class-4); }
.newsd.class-5 { --sdgrad: var(--class-5); }
.in-0 { --bg: var(--class-0); }
.in-1 { --bg: var(--class-1); }
.in-2 { --bg: var(--class-2); }
.in-3 { --bg: var(--class-3); }
.in-4 { --bg: var(--class-4); }
.in-5 { --bg: var(--class-5); }
.class, .indicator {
display: flex;
align-items: center;
font-size: 1.7rem;
line-height: 1.5rem;
}
.newsd.class-5 .lines { height: 47px; }
.newsd.class-4 .lines { height: 37px; }
.newsd.class-3 .lines { height: 27px; }
.newsd.class-2 .lines { height: 17px; }
.newsd.class-1 .lines { height: 7px; }
.newsd.class-0 .lines { height: 0; }
@media only screen and (max-width: 1070px) {
.sd-container.newsd {
grid-template-areas:
'number number'
'border border'
'class exit'
'environment entity';
grid-template-columns: 1fr 1fr;
grid-auto-rows: auto 5px 1fr 1fr;
}
.newsd .number p {
display: flex;
justify-content: center;
align-items: center;
gap: 0.7rem;
flex-direction: row;
height: 3rem;
background: none;
}
.number {
flex-direction: row;
align-items: center;
padding-top: 0.55rem;
}
.lines { flex-grow: 10; }
}
@media only screen and (max-width: 620px) {
.sd-container.newsd {
grid-template-areas: 'number class'
'border border'
'exit exit'
'environment environment'
'entity entity' !important;
grid-template-columns: auto max-content !important;
grid-auto-rows: auto auto 1fr 1fr 1fr 1fr;
column-gap: 0.85rem;
}
.border { height: 5px; }
.sd-container.noname {
display: flex;
flex-direction: column;
position: relative;
}
.noname .class { justify-content: center; }
.noname .class p {
display: flex;
align-items: flex-end;
column-gap: 0.5rem;
}
.noname .number { display: block; }
}
.custom span tt, .custom p > span span { display: none; }
.entity.custom p > span::after {
content: "{$enttext}";
}
.exit.custom p > span::after {
content: "{$exttext}";
}
.environment.custom p > span::after {
content: "{$envtext}";
}
.class.customclass strong tt,
.class.customclass strong span {
display: none;
}
.class.customclass strong::after {
content: "{$classtext}";
}
.noname {
grid-template-columns: 1fr 1fr !important;
grid-template-areas: 'class exit'
'environment entity' !important;
grid-template-rows: 1fr;
}
.lang-cn .lang-tr,
.lang-tr .lang-cn {
display: none;
}
[[/module]]