pref(ui): trans sheet to `game.dynamicStyle`.

This commit is contained in:
Rintim 2023-11-18 01:51:18 +08:00
parent f56a1c2b78
commit 01ca1438ae
No known key found for this signature in database
GPG Key ID: BE9E1EA615BACFCF
1 changed files with 35 additions and 27 deletions

View File

@ -58520,9 +58520,10 @@
if(typeof numberOfPlayers!='number') numberOfPlayers=lib.configOL.number; if(typeof numberOfPlayers!='number') numberOfPlayers=lib.configOL.number;
if(!numberOfPlayers) return; if(!numberOfPlayers) return;
const playerPositions=ui.playerPositions; const playerPositions=ui.playerPositions;
while(playerPositions.length){ playerPositions.forEach((position) => {
playerPositions.pop().remove(); game.dynamicStyle.remove(position);
} });
playerPositions.length = 0;
const temporaryPlayer=ui.create.div('.player.connect',ui.window).hide(); const temporaryPlayer=ui.create.div('.player.connect',ui.window).hide();
const computedStyle=getComputedStyle(temporaryPlayer); const computedStyle=getComputedStyle(temporaryPlayer);
const halfWidth=parseFloat(computedStyle.width)/2; const halfWidth=parseFloat(computedStyle.width)/2;
@ -58532,23 +58533,29 @@
const upperPercentage=100/(halfNumberOfPlayers+1); const upperPercentage=100/(halfNumberOfPlayers+1);
const scale=10/numberOfPlayers; const scale=10/numberOfPlayers;
for(let ordinal=0;ordinal<halfNumberOfPlayers;ordinal++){ for(let ordinal=0;ordinal<halfNumberOfPlayers;ordinal++){
playerPositions.push(lib.init.sheet([ const selector = `#window>.player.connect[data-position='${ordinal}']`;
`#window>.player.connect[data-position='${ordinal}']{`, const css = {
`left:calc(${upperPercentage*(ordinal+1)}% - ${halfWidth}px);`, left: `calc(${upperPercentage*(ordinal+1)}% - ${halfWidth}px)`,
`top:calc(${100/3}% - ${halfHeight}px);`, top: `calc(${100/3}% - ${halfHeight}px)`
scale<1?`transform:scale(${scale});`:'', };
'}' if (scale<1)
].join(''))); css["transform"] = `scale(${scale})`;
game.dynamicStyle.add(selector, css);
playerPositions.push(selector);
} }
const lowerPercentage=100/(numberOfPlayers-halfNumberOfPlayers+1); const lowerPercentage=100/(numberOfPlayers-halfNumberOfPlayers+1);
for(let ordinal=halfNumberOfPlayers;ordinal<numberOfPlayers;ordinal++){ for(let ordinal=halfNumberOfPlayers;ordinal<numberOfPlayers;ordinal++){
playerPositions.push(lib.init.sheet([ const selector = `#window>.player.connect[data-position='${ordinal}']`;
`#window>.player.connect[data-position='${ordinal}']{`, const css = {
`left:calc(${lowerPercentage*(ordinal-halfNumberOfPlayers+1)}% - ${halfWidth}px);`, left: `calc(${lowerPercentage*(ordinal-halfNumberOfPlayers+1)}% - ${halfWidth}px)`,
`top:calc(${100*2/3}% - ${halfHeight}px);`, top: `calc(${100*2/3}% - ${halfHeight}px)`
scale<1?`transform:scale(${scale});`:'', };
'}' if (scale < 1)
].join(''))); css["transform"] = `scale(${scale})`;
game.dynamicStyle.add(selector, css);
playerPositions.push(selector);
} }
}, },
/** /**
@ -58561,9 +58568,10 @@
//当人数不超过8人时还是用以前的布局 //当人数不超过8人时还是用以前的布局
if(!numberOfPlayers||numberOfPlayers<=8) return; if(!numberOfPlayers||numberOfPlayers<=8) return;
const playerPositions=ui.playerPositions; const playerPositions=ui.playerPositions;
while(playerPositions.length){ playerPositions.forEach((position) => {
playerPositions.pop().remove(); game.dynamicStyle.remove(position);
} });
playerPositions.length = 0;
//单个人物的宽度,这里要设置玩家的实际的宽度 //单个人物的宽度,这里要设置玩家的实际的宽度
const temporaryPlayer=ui.create.div('.player',ui.arena).hide(); const temporaryPlayer=ui.create.div('.player',ui.arena).hide();
const computedStyle=getComputedStyle(temporaryPlayer); const computedStyle=getComputedStyle(temporaryPlayer);
@ -58580,13 +58588,13 @@
const reversedOrdinal=columnCount-ordinal; const reversedOrdinal=columnCount-ordinal;
//动态计算玩家的top属性实现拱桥的效果只让两边的各两个人向下偏移一些 //动态计算玩家的top属性实现拱桥的效果只让两边的各两个人向下偏移一些
const top=Math.max(0,Math.round(numberOfPlayers/5)-Math.min(Math.abs(ordinal-1),Math.abs(reversedOrdinal)))*quarterHeight; const top=Math.max(0,Math.round(numberOfPlayers/5)-Math.min(Math.abs(ordinal-1),Math.abs(reversedOrdinal)))*quarterHeight;
playerPositions.push(lib.init.sheet([ const selector = `#arena[data-number='${numberOfPlayers}']>.player[data-position='${ordinal}']`;
`#arena[data-number='${numberOfPlayers}']>.player[data-position='${ordinal}']{`, game.dynamicStyle.add(selector, {
`left:calc(${percentage*reversedOrdinal+5}% - ${halfWidth}px);`, left: `calc(${percentage*reversedOrdinal+5}% - ${halfWidth}px)`,
`top:${top}px;`, top: `${top}px`,
`transform:scale(${scale});`, transform: `scale(${scale})`
'}' });
].join(''))); playerPositions.push(selector);
} }
}, },
updateRoundNumber:(roundNumber,cardPileNumber)=>{ updateRoundNumber:(roundNumber,cardPileNumber)=>{