模板:JSCardIcon：修订间差异

来自LoveLive Wiki
跳到导航 跳到搜索
（允许在JSCardIcon/Source中使用部分png以外格式的图片源（jpg jpeg gif），没有后缀的默认为png）
无编辑摘要
 
第76行： 第76行：
</nowiki></p><noinclude>
</nowiki></p><noinclude>
usage:
usage:
<div data-card-icon="40020009"></div><div data-card-icon="40020006"></div><div data-card-icon="40020002"></div>[[分类:SIF2]]
<div data-card-icon="40020009"></div><div data-card-icon="40020006"></div><div data-card-icon="40020002"></div>
 
如果[[Template:JSCardIcon/Source]]中指定的图片源文件名不包含后缀（如jpg png等），则默认添加后缀png；
 
enabled_not_raw_suffix Set中，指定了允许的图片后缀。
[[分类:SIF2]]
</noinclude>
</noinclude>

2023年12月16日 (六) 08:18的最新版本

var sktype;(function(sktype){sktype[sktype["score_bad"]=1]="score_bad";sktype[sktype["judge"]=2]="judge";sktype[sktype["heal"]=3]="heal";sktype[sktype["score_perfect"]=4]="score_perfect"})(sktype||(sktype={}));var trtype;(function(trtype){trtype[trtype["note"]=1]="note";trtype[trtype["combo"]=2]="combo";trtype[trtype["perfect"]=3]="perfect";trtype[trtype["time"]=4]="time"})(trtype||(trtype={}));var changemod;(function(changemod){changemod[changemod["constant"]=0]="constant";changemod[changemod["lvall"]=1]="lvall";changemod[changemod["lv2468"]=2]="lv2468";changemod[changemod["lv258"]=3]="lv258";changemod[changemod["lv47"]=4]="lv47";changemod[changemod["lv59"]=5]="lv59";changemod[changemod["lv5"]=6]="lv5"})(changemod||(changemod={}));var tgtype;(function(tgtype){tgtype[tgtype["none"]=-1]="none";tgtype[tgtype["all"]=0]="all";tgtype[tgtype["muse"]=100]="muse";tgtype[tgtype["aqours"]=200]="aqours";tgtype[tgtype["niji"]=300]="niji";tgtype[tgtype["liella"]=400]="liella";tgtype[tgtype["yohane"]=600]="yohane";tgtype[tgtype["pts"]=101]="pts";tgtype[tgtype["llw"]=102]="llw";tgtype[tgtype["bibi"]=103]="bibi";tgtype[tgtype["cyr"]=201]="cyr";tgtype[tgtype["aaa"]=202]="aaa";tgtype[tgtype["gk"]=203]="gk";tgtype[tgtype["dd"]=301]="dd";tgtype[tgtype["azn"]=302]="azn";tgtype[tgtype["q4"]=303]="q4";tgtype[tgtype["r3b"]=304]="r3b";tgtype[tgtype["5r5"]=401]="5r5";tgtype[tgtype["cc"]=402]="cc";tgtype[tgtype["kds"]=403]="kds"})(tgtype||(tgtype={}));const sif2_card_data=new Map();function sif2_skill_description(skill){let template=null;switch(skill.type){case sktype.score_bad:template="每{0}{10}有{1}%概率
在{2}秒内{11}点击分数增加{3}";break;case sktype.judge:template="每{0}{10}有{1}%概率
在{2}秒内{11}PERFECT判定范围扩大{3}阶";break;case sktype.heal:template="每{0}{10}有{1}%概率
回复{3}体力";break;case sktype.score_perfect:template="每{0}{10}有{1}%概率
在{2}秒内{11}PERFECT时点击分数增加{3}";break}template=template.replace("{0}",(skill.tr/(skill.trigger===trtype.time?1000:1)).toString());template=template.replace("{10}",{1:"个节奏图示",2:"COMBO",3:"次PERFECT",4:"秒"}[skill.trigger]);template=template.replace("{1}",(skill.pb/100).toString());template=template.replace("{2}",(skill.tm/1000).toString());template=template.replace("{3}",(skill.ev).toString());template=template.replace("{11}",skill.target!==0?`使${{100:"μ's",200:"Aqours",300:"虹咲",400:"Liella!",600:"幻日"}[skill.target]}成员的`:"");return template}const sif2_character_name=new Map([[1001,"穗乃果"],[1002,"绘里"],[1003,"小鸟"],[1004,"海未"],[1005,"凛"],[1006,"真姬"],[1007,"希"],[1008,"花阳"],[1009,"妮可"],[2001,"千歌"],[2002,"梨子"],[2003,"果南"],[2004,"黛雅"],[2005,"曜"],[2006,"善子"],[2007,"花丸"],[2008,"鞠莉"],[2009,"露比"],[3001,"步梦"],[3002,"霞"],[3003,"雫"],[3004,"果林"],[3005,"爱"],[3006,"彼方"],[3007,"雪菜"],[3008,"艾玛"],[3009,"璃奈"],[3010,"栞子"],[3011,"米娅"],[3012,"岚珠"],[4001,"香音"],[4002,"可可"],[4003,"千砂都"],[4004,"堇"],[4005,"恋"],[4006,"希奈子"],[4007,"芽衣"],[4008,"四季"],[4009,"夏美"],[4010,"薇恩"],[4011,"冬毬"],[6001,"Yohane"],[6002,"Hanamaru"],[6003,"Dia"],[6004,"Ruby"],[6005,"Chika"],[6006,"You"],[6007,"Kanan"],[6008,"Riko"],[6009,"Mari"]]);function gettext(){return $('#card-data').text()}function sif2_cardlist_init(){const text=gettext();text.split('\n').forEach((line)=>{const parts=line.split('|');const[,name]=parts[0].split(',');const[id,,type,rarity,hp1,smile,pure,cool]=parts[0].split(',').map(v=>parseInt(v));const{masterCharacterId}=parse_id(id);const skill_by_level=parse_skill(parts[2].split(',').map(v=>parseInt(v)));const[ce1,cetg1,cev1,ce2,cetg2,cev2]=parts[1].split(',').map(v=>parseInt(v));sif2_card_data.set(id,{id,masterCharacterId,name,type,rarity,hp:hp1-1,smile,pure,cool,skill_by_level,center_skill:{type_1:ce1,target_1:cetg1,value_1:cev1,type_2:ce2,target_2:cetg2,value_2:cev2,},})})}function parse_id(id){const masterCharacterId=Math.floor(id/10000);const illustId=[("00000"+masterCharacterId.toString()).slice(-5),("0000"+(id%10000).toString()).slice(-4),"00"].join('_');const evolveIllustId=[("00000"+masterCharacterId.toString()).slice(-5),("0000"+(id%10000).toString()).slice(-4),"01"].join('_');return{id,masterCharacterId,illustId,evolveIllustId}}function parse_skill([sktype,trtype,tgtype,tr_cm,tr_lv1,tr_up,pb_cm,pb_lv1,pb_up,tm_cm,tm_lv1,tm_up,ev_cm,ev_lv1,ev_up]){const skill_by_level=new Map();const trlist=parse_changemod(tr_cm,tr_lv1,tr_up);const pblist=parse_changemod(pb_cm,pb_lv1,pb_up);const tmlist=parse_changemod(tm_cm,tm_lv1,tm_up);const evlist=parse_changemod(ev_cm,ev_lv1,ev_up);for(let lv=1;lv<=9;lv+=1){skill_by_level.set(lv,{type:sktype,trigger:trtype,target:tgtype,tr:trlist[lv-1],pb:pblist[lv-1],tm:tmlist[lv-1],ev:evlist[lv-1],})}return skill_by_level}function parse_changemod(cm,lv1,up){const vlist=[1,2,3,4,5,6,7,8,9];switch(cm){case changemod.constant:return vlist.map((v)=>0*up+lv1);case changemod.lvall:return vlist.map((v)=>(v-1)*up+lv1);case changemod.lv2468:return vlist.map((v)=>Math.floor(v/2)*up+lv1);case changemod.lv258:return vlist.map((v)=>Math.floor((v+1)/3)*up+lv1);case changemod.lv47:return vlist.map((v)=>Math.floor((v-1)/3)*up+lv1);case changemod.lv59:return vlist.map((v)=>Math.floor((v-1)/4)*up+lv1);case changemod.lv5:return vlist.map((v)=>lv1+(v>=5&&up||0))}}sif2_cardlist_init();

const sif2_card_image = new Map(); function sif2_card_image_init() { $('#card-icon-data').html().split('\n').forEach((line)=>{ const [id_str, src1, src2] = line.split(','); sif2_card_image.set(parseInt(id_str), [src1, src2]); }) } const border_src_type_rarity = [,[,["f_1_1"],["f_1_2"],["f_1_3"]],[,["f_2_1"],["f_2_2"],["f_2_3"]],[,["f_3_1"],["f_3_2"],["f_3_3"]]]; const background_src_type_rarity = [,[,["b_1_1_1","b_1_1_2"],["b_0_0_0","b_0_0_0"],["b_0_0_0","b_0_0_0"]],[,["b_2_1_1","b_2_1_2"],["b_0_0_0","b_0_0_0"],["b_0_0_0","b_0_0_0"]],[,["b_3_1_1","b_3_1_2"],["b_0_0_0","b_0_0_0"],["b_0_0_0","b_0_0_0"]]]; /* 默认格式为png，允许的非png格式后缀 */ const enabled_not_raw_suffix = new Set(["jpg","jpeg","webp","png"]); function sif2_card_image_refresh() { $('[data-card-icon]').each(function(){ const $this = $(this); if ($('img', $this)[0]) return; const card_id = parseInt($this.attr('data-card-icon')); if (!sif2_card_data.has(card_id)) {console.warn('sif2_card_image_refresh: id ' + card_id + ' does not exist in sif2_card_data'); return;} let src1, src2; if(!sif2_card_image.has(card_id)){console.warn('sif2_card_image_refresh: card id',$this.attr('data-card-icon'),'icon not found');src1="d562l9";src2="d562l9"} else ([src1, src2] = sif2_card_image.get(card_id)); const {type,rarity,name,masterCharacterId} = sif2_card_data.get(card_id); const src_border = border_src_type_rarity[type][rarity]; const [bgsrc1, bgsrc2] = background_src_type_rarity[type][rarity]; /* 识别JSCardIcon/Source中的非png格式后缀 */ let src1_suf, src2_suf; { const src1_suffix = src1.split(".").pop(); const src2_suffix = src2.split(".").pop(); if (enabled_not_raw_suffix.has(src1_suffix)) src1_suf = src1; else src1_suf = src1 + ".png"; if (enabled_not_raw_suffix.has(src2_suffix)) src2_suf = src2; else src2_suf = src2 + ".png"; } $this.html(`<div style="background-image: url('https://s1.imagehub.cc/images/2023/04/29/${bgsrc1}.png')"><img src="https://s1.imagehub.cc/images/${src1_suf}"></div><div style="background-image: url('https://s1.imagehub.cc/images/2023/04/29/${bgsrc2}.png')"><img src="https://s1.imagehub.cc/images/${src2_suf}"></div><div><img src="https://s1.imagehub.cc/images/2023/04/29/${src_border}.png"></div>`); $this.attr("title",`${name} ${sif2_character_name.get(masterCharacterId)}`); }); } sif2_card_image_init(); sif2_card_image_refresh();

[data-card-icon] { display: inline-block; position: relative; width: calc(64px + 2vw); height: calc(64px + 2vw); } [data-card-icon] > div { background-size: 100% 100%; position: absolute; width: 100%; height: 100%; } /* hover切换图片 hove-swap-image */ [data-card-icon] > div:nth-child(2) { position: absolute; top: 0; left: 0; transition: mask-position, -webkit-mask-position 0.5s; mask-image: linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.33) 40%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 1)100%), linear-gradient(225deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 1)100%); -webkit-mask-image: linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.33) 40%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 1)100%), linear-gradient(225deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 1)100%); mask-composite: source-in; -webkit-mask-composite: source-in; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-size: 100% 320%; -webkit-mask-size: 100% 320%; mask-position: 0% 0%; -webkit-mask-position: 0% 0%; } [data-card-icon]:hover > div:nth-child(2), .hover-swap-image-trigger:hover [data-card-icon] > div:nth-child(2) { mask-position: 0% 100%; -webkit-mask-position: 0% 100%; } [data-card-icon] img { width: 100%; height: 100%; }

usage:

如果Template:JSCardIcon/Source中指定的图片源文件名不包含后缀（如jpg png等），则默认添加后缀png；

enabled_not_raw_suffix Set中，指定了允许的图片后缀。

取自“https://wiki-ll.loveliv.es/index.php?title=模板:JSCardIcon&oldid=19954”