From f05a9c12f357dd87188b0c25e02be162cfbf218c Mon Sep 17 00:00:00 2001 From: libccy Date: Sun, 22 Jan 2017 17:06:24 +0800 Subject: [PATCH] m --- game/game.js | 31 +++-- game/update.js | 3 + layout/long/layout.css | 15 ++- layout/long2/layout.css | 239 ++++++++++++++++++++++++++++++++++++ layout/newlayout/global.css | 4 + theme/music/style.css | 12 +- theme/simple/style.css | 28 ++--- theme/woodden/style.css | 12 +- 8 files changed, 306 insertions(+), 38 deletions(-) create mode 100644 layout/long2/layout.css diff --git a/game/game.js b/game/game.js index d8327be61..6dabd20e3 100644 --- a/game/game.js +++ b/game/game.js @@ -495,7 +495,8 @@ default:'旧版', newlayout:'对称', mobile:'默认', - long:'手杀' + long:'手杀', + // long2:'新版', }, onclick:function(layout){ if(lib.config.layoutfixed.contains(lib.config.mode)&&layout=='default'){ @@ -821,7 +822,7 @@ }, onclick:function(item){ game.saveConfig('player_border',item); - if(item!='wide'||lib.config.layout=='long'){ + if(item!='wide'||lib.config.layout=='long'||lib.config.layout=='long2'){ ui.arena.classList.add('slim_player'); } else{ @@ -1401,7 +1402,12 @@ else{ map.textequip.hide(); map.cardshape.hide(); - map.phonelayout.hide(); + if(lib.config.layout=='long2'){ + map.phonelayout.show(); + } + else{ + map.phonelayout.hide(); + } } if(config.show_log!='off'){ map.clear_log.show(); @@ -3609,10 +3615,10 @@ }, isPhoneLayout:function(){ if(!lib.config.phonelayout) return false; - return (lib.config.layout=='mobile'||lib.config.layout=='long'); + return (lib.config.layout=='mobile'||lib.config.layout=='long'||lib.config.layout=='long2'); }, isSingleHandcard:function(){ - if(game.singleHandcard||lib.config.layout=='mobile'||lib.config.layout=='long'){ + if(game.singleHandcard||lib.config.layout=='mobile'||lib.config.layout=='long'||lib.config.layout=='long2'){ return true; } if(lib.config.layout=='default'&&lib.config.layoutfixed.contains(lib.config.mode)){ @@ -4910,7 +4916,13 @@ } } } - if(lib.config.player_border!='wide'||lib.config.layout=='long'){ + if(lib.config.layout=='long'||lib.config.layout=='long2'){ + ui.arena.classList.add('long'); + } + else{ + ui.arena.classList.remove('long'); + } + if(lib.config.player_border!='wide'||lib.config.layout=='long'||lib.config.layout=='long2'){ ui.arena.classList.add('slim_player'); } else{ @@ -28064,13 +28076,16 @@ if(lib.config.layout=='mobile'||lib.config.layout=='long'){ ui.arena.classList.add('mobile'); } + if(lib.config.layout=='long'||lib.config.layout=='long2'){ + ui.arena.classList.add('long'); + } if(lib.config.layout=='default'){ ui.arena.classList.add('oldlayout'); } if(lib.config.low_performance){ ui.arena.classList.add('low_performance'); } - if(lib.config.player_border!='wide'||lib.config.layout=='long'){ + if(lib.config.player_border!='wide'||lib.config.layout=='long'||lib.config.layout=='long2'){ ui.arena.classList.add('slim_player'); } if(lib.config.player_border=='slim'){ @@ -31577,7 +31592,7 @@ return ui.arena.classList.contains('oblongcard'); } else{ - return lib.config.layout=='long'; + return lib.config.layout=='long'||lib.config.layout=='long2'; } }, empty:function(obj){ diff --git a/game/update.js b/game/update.js index d289974b2..7064d1716 100644 --- a/game/update.js +++ b/game/update.js @@ -12,5 +12,8 @@ window.noname_update={ 'card/swd.js', 'mode/tafang.js', 'layout/newlayout/global.css', + 'theme/woodden/style.css', + 'theme/music/style.css', + 'theme/simple/style.css', ] } diff --git a/layout/long/layout.css b/layout/long/layout.css index a1d2e24b3..f784d7c25 100644 --- a/layout/long/layout.css +++ b/layout/long/layout.css @@ -21,7 +21,7 @@ } #arena:not(.fewplayer)>.player.fullskin2:not(.minskin):not(*[data-position='0'])>.avatar, #arena:not(.fewplayer)>.player.fullskin2:not(.minskin):not(*[data-position='0'])>.avatar2{ - height: 103px !important; + height: 110px !important; background-position: 0 0 !important; border-radius: 8px !important; } @@ -81,7 +81,7 @@ border-radius: 0 0 16px 16px !important; } #arena:not(.fewplayer)>.player.fullskin2:not(.minskin):not(*[data-position='0'])>.avatar2{ - top: 110px !important; + top: 103px !important; } #arena:not(.fewplayer)>.player:not(.minskin):not(*[data-position='0'])>.identity{ left: 102px; @@ -92,6 +92,17 @@ #arena:not(.fewplayer)>.player:not(.minskin):not(*[data-position='0'])>.hp:not(.actcount).text{ left: 89px; } +.player.fullskin2 .avatar2{ + z-index: 2; +} +.player.unseen:not(.unseen2) .count{ + text-align: left; + border-radius:3px 0 0 3px; +} +.player.unseen2 .count{ + border-radius: 3px; + text-align: center; +} .timerbar>div{ top: 205px; diff --git a/layout/long2/layout.css b/layout/long2/layout.css new file mode 100644 index 000000000..ef760639d --- /dev/null +++ b/layout/long2/layout.css @@ -0,0 +1,239 @@ +@import "../newlayout/layout.css"; +#arena{ + height: calc(95% + 20px); +} +#arena.oblongcard:not(.chess):not(.nome){ + height: 95%; +} +#arena.oblongcard:not(.chess):not(.nome) #me, +#arena.oblongcard:not(.chess):not(.nome) #mebg{ + height: 140px; + bottom: 10px; +} +#historybar{ + height: calc(95% - 160px); +} +#control{ + width: calc(5000% / 47 - 240px); + left:calc(-150% / 47 + 120px); + bottom:150px; + height: 40px; +} +#arena:not(.chess)>#me, +#arena:not(.chess)>#mebg, +#arena:not(.chess)>#autonode{ + bottom: 50px; + width: calc(100% - 20px); + left: 20px; + top: auto; + height: 120px; +} +#arena:not(.chess)>#autonode{ + width: calc(5000% / 47 - 240px); + left:calc(-150% / 47 + 120px); +} +#window.leftbar #arena:not(.chess)>#me, +#window.leftbar #arena:not(.chess)>#mebg, +#window.leftbar #arena:not(.chess)>#autonode, +#window.leftbar #arena:not(.chess) .player[data-position='0']{ + width: calc(5000% / 47 + 2500px / 47); + left:calc(-150% / 47 - 50px - 75px / 47); +} +#window.leftbar #arena:not(.chess)>#autonode{ + width: calc(5000% / 47 + 2500px / 47 - 240px); + left:calc(-150% / 47 - 50px - 75px / 47 + 120px); +} +#window.rightbar #arena:not(.chess)>#me, +#window.rightbar #arena:not(.chess)>#mebg, +#window.rightbar #arena:not(.chess)>#autonode, +#window.rightbar #arena:not(.chess) .player[data-position='0']{ + width: calc(5000% / 47 + 2500px / 47); + left:calc(-150% / 47 - 75px / 47); +} +#window.rightbar #arena:not(.chess)>#autonode{ + width: calc(5000% / 47 + 2500px / 47 - 240px); + left:calc(-150% / 47 - 75px / 47 + 120px); +} +#arena:not(.chess) #handcards1{ + height:120px; + padding:0; + top:calc(100% - 120px); +} +#arena:not(.chess):not(.single-handcard) #handcards1{ + width: calc(100% - 100px); + left: 100px; +} +#handcards2{ + display:none; +} +.dialog{ + height:calc(100% - 370px); + bottom:170px; +} +.dialog.fullheight { + height: calc(100% - 123px) !important; + top: 40px !important; +} + +#me>.fakeme.avatar{ + width:120px; + height:100%; + border-radius:0px; + top:0; + left:0; + background-size:cover; +} +#window[data-radius_size='increase'] #me>.fakeme.avatar, +#window[data-radius_size='reduce'] #me>.fakeme.avatar{ + border-radius:0px; +} +#arena>.player[data-position='0']{ + left: 0; + top: calc(100% - 220px); +} +#arena:not(.mobile):not(.single-handcard) #handcards1>div{ + left: 0; +} + + +#arena>.player:not(.minskin){ + width: 120px !important; + height: 180px !important; +} +#arena>.player:not(.minskin)>.equips{ + transform: scale(0.8); + transform-origin: bottom left; +} +#arena>.player:not(.minskin)>.avatar, +#arena>.player:not(.minskin)>.avatar2{ + width: 106px !important; + height: 166px !important; + background-position: 50% !important; +} +#arena.uslim_player>.player:not(.minskin)>.avatar, +#arena.uslim_player>.player:not(.minskin)>.avatar2{ + width: 114px !important; + height: 194px !important; + background-position: 50% !important; +} +#arena>.player.fullskin2:not(.minskin)>.avatar, +#arena>.player.fullskin2:not(.minskin)>.avatar2{ + height: 93px !important; + background-position: 0 0 !important; + border-radius: 8px !important; +} +#arena.uslim_player>.player.fullskin2:not(.minskin)>.avatar, +#arena.uslim_player>.player.fullskin2:not(.minskin)>.avatar2{ + height: 97px !important; +} +#window[data-radius_size='reduce'] #arena>.player.fullskin2:not(.minskin)>.avatar, +#window[data-radius_size='reduce'] #arena>.player.fullskin2:not(.minskin)>.avatar2{ + border-radius: 4px !important; +} +#window[data-radius_size='off'] #arena>.player.fullskin2:not(.minskin)>.avatar, +#window[data-radius_size='off'] #arena>.player.fullskin2:not(.minskin)>.avatar2{ + border-radius: 0px !important; +} +#window[data-radius_size='increase'] #arena>.player.fullskin2:not(.minskin)>.avatar, +#window[data-radius_size='increase'] #arena>.player.fullskin2:not(.minskin)>.avatar2{ + border-radius: 16px !important; +} +#arena>.player.fullskin2:not(.minskin)>.avatar{ + border-radius: 8px 8px 0 0 !important; + height: 114px !important; + -webkit-clip-path: polygon(-10px -10px, 116px -10px, 116px 82px, 106px 82px, 0px 104px, -10px 104px); +} +#arena.uslim_player>.player.fullskin2:not(.minskin)>.avatar{ + height: 118px !important; + -webkit-clip-path: polygon(-10px -10px, 124px -10px, 124px 86px, 114px 86px, 0px 108px, -10px 108px); +} +#window[data-radius_size='reduce'] #arena>.player.fullskin2:not(.minskin)>.avatar{ + border-radius: 4px 4px 0 0 !important; +} +#window[data-radius_size='off'] #arena>.player.fullskin2:not(.minskin)>.avatar{ + border-radius: 0 0 0 0 !important; +} +#window[data-radius_size='increase'] #arena>.player.fullskin2:not(.minskin)>.avatar{ + border-radius: 16px 16px 0 0 !important; +} +#arena>.player.fullskin2:not(.minskin)>.avatar2{ + border-radius: 0 0 8px 8px !important; + top: 79px !important; + height: 114px !important; + background-position: 0 10px !important; + -webkit-clip-path: polygon(-10px 32px, 0 32px, 106px 10px, 116px 10px, 116px 134px, -10px 134px); +} +#arena.uslim_player>.player.fullskin2:not(.minskin)>.avatar2{ + top: 79px !important; + height: 118px !important; + -webkit-clip-path: polygon(-10px 32px, 0 32px, 114px 10px, 124px 10px, 124px 138px, -10px 138px); +} +#window[data-radius_size='reduce'] #arena>.player.fullskin2:not(.minskin)>.avatar2{ + border-radius: 0 0 4px 4px !important; +} +#window[data-radius_size='off'] #arena>.player.fullskin2:not(.minskin)>.avatar2{ + border-radius: 0 0 0 0 !important; +} +#window[data-radius_size='increase'] #arena>.player.fullskin2:not(.minskin)>.avatar2{ + border-radius: 0 0 16px 16px !important; +} +#arena>.player:not(.minskin)>.identity{ + left: 102px; +} +#arena>.player:not(.minskin)>.hp:not(.actcount){ + left: 93px; +} +#arena>.player:not(.minskin)>.hp:not(.actcount).text{ + left: 89px; +} + +.timerbar>div{ + top: 205px; + width: 96px; + left: 12px; +} + +/*--------位置(8人)------*/ +#arena[data-number='8']>.player[data-position='1']{top:calc(30% - 120px);left:calc(-300% / 94 + 4375% / 47 - 735px + 720px);} +#arena[data-number='8']>.player[data-position='2']{top:calc(8% - 32px);left:calc(-300% / 94 + 3750% / 47 - 630px + 600px);} +#arena[data-number='8']>.player[data-position='3']{top:0;left:calc(-300% / 94 + 3125% / 47 - 525px + 480px);} +#arena[data-number='8']>.player[data-position='4']{top:0;left:calc(-300% / 94 + 2500% / 47 - 420px + 360px);} +#arena[data-number='8']>.player[data-position='5']{top:0;left:calc(-300% / 94 + 1875% / 47 - 315px + 240px);} +#arena[data-number='8']>.player[data-position='6']{top:calc(8% - 32px);left:calc(-300% / 94 + 1250% / 47 - 210px + 120px);} +#arena[data-number='8']>.player[data-position='7']{top:calc(30% - 120px);left:calc(-300% / 94 + 625% / 47 - 105px);} +@media screen and (min-width: 1105px){ + #arena[data-number='8']>.player[data-position='1']{left:calc(100% - 120px);} + #arena[data-number='8']>.player[data-position='2']{left:calc(500% / 6 - 100px);} + #arena[data-number='8']>.player[data-position='3']{left:calc(400% / 6 - 80px);} + #arena[data-number='8']>.player[data-position='4']{left:calc(300% / 6 - 60px);} + #arena[data-number='8']>.player[data-position='5']{left:calc(200% / 6 - 40px);} + #arena[data-number='8']>.player[data-position='6']{left:calc(100% / 6 - 20px);} + #arena[data-number='8']>.player[data-position='7']{left:0;} +} +/*--------位置(7人)------*/ +#arena[data-number='7']>.player[data-position='1']{top:calc(30% - 120px);left:calc(100% - 120px);} +#arena[data-number='7']>.player[data-position='2']{top:calc(8% - 32px);left:calc(80% - 96px);} +#arena[data-number='7']>.player[data-position='3']{top:0;left:calc(60% - 72px);} +#arena[data-number='7']>.player[data-position='4']{top:0;left:calc(40% - 48px);} +#arena[data-number='7']>.player[data-position='5']{top:calc(8% - 32px);left:calc(20% - 24px);} +#arena[data-number='7']>.player[data-position='6']{top:calc(30% - 120px);left:0;} +/*--------位置(6人)------*/ +#arena[data-number='6']>.player[data-position='1']{top:calc(30% - 120px);left:calc(100% - 120px);} +#arena[data-number='6']>.player[data-position='2']{top:0px;left:calc(75% - 90px);} +#arena[data-number='6']>.player[data-position='3']{top:0;left:calc(50% - 60px);} +#arena[data-number='6']>.player[data-position='4']{top:0px;left:calc(25% - 30px);} +#arena[data-number='6']>.player[data-position='5']{top:calc(30% - 120px);left:0;} +/*--------位置(5人)------*/ +#arena[data-number='5']>.player[data-position='1']{top:calc(30% - 120px);left:calc(100% - 120px);} +#arena[data-number='5']>.player[data-position='2']{top:0;left:calc(200% / 3 - 80px);} +#arena[data-number='5']>.player[data-position='3']{top:0;left:calc(100% / 3 - 40px);} +#arena[data-number='5']>.player[data-position='4']{top:calc(30% - 120px);left:0;} +/*--------位置(4人)------*/ +#arena[data-number='4']>.player[data-position='1']{top:calc(30% - 120px);left:calc(100% - 120px);} +#arena[data-number='4']>.player[data-position='2']{top:0;left:calc(50% - 60px);} +#arena[data-number='4']>.player[data-position='3']{top:calc(30% - 120px);left:0;} +/*--------位置(3人)------*/ +#arena[data-number='3']>.player[data-position='1']{top:calc(60% / 3 - 88px);left:calc(75% + 80px);} +#arena[data-number='3']>.player[data-position='2']{top:calc(60% / 3 - 88px);left:calc(25% - 200px);} +/*--------位置(2人)------*/ +#arena[data-number='2']>.player[data-position='1']{top:0;left:calc(50% - 60px);} diff --git a/layout/newlayout/global.css b/layout/newlayout/global.css index 1c676f305..bec2f88b6 100644 --- a/layout/newlayout/global.css +++ b/layout/newlayout/global.css @@ -254,6 +254,10 @@ border-radius:3px 0 0 3px; box-shadow: rgba(0,0,0,0.2) 1px -1px 2px inset,rgba(255,255,255,0.15) -1px 1px 5px inset; } +.player.unseen .count{ + border-radius: 3px; + text-align: center; +} #arena.slim_player .player .count{ left: -6px; } diff --git a/theme/music/style.css b/theme/music/style.css index 56c7fab63..d3c46c7c3 100644 --- a/theme/music/style.css +++ b/theme/music/style.css @@ -4,7 +4,8 @@ html{ background: url('grid.png'),linear-gradient(#333333, #222222) fixed; } #system>div>div,#mebg,.control,.player,.card,.avatar,.avatar2,.button,#window>.dialog.popped, -.player.unseen .equips:not(*:empty),.menu,#splash>div, +#arena:not(.long) .player.unseen .equips:not(*:empty), +#arena.long .player.unseen2 .equips:not(*:empty),.menu,#splash>div, #arena.mobile:not(.chess) .player[data-position='0'] .equips,.playerbg,.menubg,.mebg{ box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.2) 0 3px 10px; background-image: linear-gradient(#4b4b4b, #464646); @@ -40,12 +41,15 @@ body[data-background_color_music='blue'] #arena.mobile:not(.chess) .player[data- border-radius: 6px; } .control,#system>div>div,.judges>div,.marks>div, -.player.unseen .equips:not(*:empty){ +#arena:not(.long) .player.unseen .equips:not(*:empty), +#arena.long .player.unseen2 .equips:not(*:empty){ border-radius:4px; } -#arena.mobile:not(.oldlayout) .player.unseen:not([data-position="0"]) .equips:not(*:empty)>.card, -#arena:not(.mobile):not(.oldlayout) .player.unseen .equips:not(*:empty)>.card{ +#arena:not(.long).mobile:not(.oldlayout) .player.unseen:not([data-position="0"]) .equips:not(*:empty)>.card, +#arena:not(.long):not(.mobile):not(.oldlayout) .player.unseen .equips:not(*:empty)>.card, +#arena.long.mobile:not(.oldlayout) .player.unseen2:not([data-position="0"]) .equips:not(*:empty)>.card, +#arena.long:not(.mobile):not(.oldlayout) .player.unseen2 .equips:not(*:empty)>.card{ background: none !important; } diff --git a/theme/simple/style.css b/theme/simple/style.css index aa7c62911..1055162ea 100644 --- a/theme/simple/style.css +++ b/theme/simple/style.css @@ -15,7 +15,8 @@ body{ display: block; } #system>div>div,#mebg,.control,.player,.card,.avatar,.avatar2,.button,#window>.dialog.popped, -.player.unseen .equips:not(*:empty),.menu,.menubutton,#splash>div, +#arena:not(.long) .player.unseen .equips:not(*:empty), +#arena.long .player.unseen2 .equips:not(*:empty),.menu,.menubutton,#splash>div, #arena.mobile:not(.chess) .player[data-position='0'] .equips,.playerbg,.menubg,.mebg{ box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 1px, rgba(0, 0, 0, 0.2) 0 3px 10px; background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)); @@ -32,22 +33,6 @@ body{ background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)) !important; } -#window.reduce_radius #system>div>div, -#window.reduce_radius #mebg, -#window.reduce_radius .control, -#window.reduce_radius .player, -#window.reduce_radius .card, -#window.reduce_radius .avatar, -#window.reduce_radius .avatar2, -#window.reduce_radius .button, -#window.reduce_radius #window>.dialog.popped, -#window.reduce_radius .player.unseen .equips:not(*:empty), -#window.reduce_radius .menu,.menubutton, -#window.reduce_radius #splash>div, -#window.reduce_radius.mobile:not(.chess) .player[data-position='0'] .equips{ - border-radius: 4px; -} - /*.player.current_action{ background-image: linear-gradient(rgba(47,101,150,1), rgba(43, 90, 132,1)); }*/ @@ -62,11 +47,14 @@ body{ border-radius: 6px; } .control,#system>div>div,.judges>div,.marks>div, -.player.unseen .equips:not(*:empty){ +#arena:not(.long) .player.unseen .equips:not(*:empty), +#arena.long .player.unseen2 .equips:not(*:empty){ border-radius:4px; } -#arena.mobile:not(.oldlayout) .player.unseen:not([data-position="0"]) .equips:not(*:empty)>.card, -#arena:not(.mobile):not(.oldlayout) .player.unseen .equips:not(*:empty)>.card{ +#arena:not(.long_.mobile:not(.oldlayout) .player.unseen:not([data-position="0"]) .equips:not(*:empty)>.card, +#arena:not(.long_:not(.mobile):not(.oldlayout) .player.unseen .equips:not(*:empty)>.card, +#arena.long.mobile:not(.oldlayout) .player.unseen2:not([data-position="0"]) .equips:not(*:empty)>.card, +#arena.long:not(.mobile):not(.oldlayout) .player.unseen2 .equips:not(*:empty)>.card{ background: none !important; } #arena.mobile:not(.chess) .player[data-position='0']>.equips>.equip5 { diff --git a/theme/woodden/style.css b/theme/woodden/style.css index f96326dbd..5ccd1fe7f 100644 --- a/theme/woodden/style.css +++ b/theme/woodden/style.css @@ -29,14 +29,18 @@ html{ background:url('wood2.png'); } -#arena.mobile:not(.oldlayout) .player.unseen:not([data-position="0"]) .equips:not(*:empty), -#arena:not(.mobile):not(.oldlayout) .player.unseen .equips:not(*:empty){ +#arena:not(.long).mobile:not(.oldlayout) .player.unseen:not([data-position="0"]) .equips:not(*:empty), +#arena:not(.long):not(.mobile):not(.oldlayout) .player.unseen .equips:not(*:empty), +#arena.long.mobile:not(.oldlayout) .player.unseen2:not([data-position="0"]) .equips:not(*:empty), +#arena.long:not(.mobile):not(.oldlayout) .player.unseen2 .equips:not(*:empty){ background: url('wood.png'); border-radius:4px; box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 1px, rgba(0, 0, 0, 0.2) 0 2px 10px; } -#arena.mobile:not(.oldlayout) .player.unseen:not([data-position="0"]) .equips:not(*:empty)>.card, -#arena:not(.mobile):not(.oldlayout) .player.unseen .equips:not(*:empty)>.card{ +#arena:not(.long).mobile:not(.oldlayout) .player.unseen:not([data-position="0"]) .equips:not(*:empty)>.card, +#arena:not(.long):not(.mobile):not(.oldlayout) .player.unseen .equips:not(*:empty)>.card, +#arena.long.mobile:not(.oldlayout) .player.unseen2:not([data-position="0"]) .equips:not(*:empty)>.card, +#arena.long:not(.mobile):not(.oldlayout) .player.unseen2 .equips:not(*:empty)>.card{ background: none !important; }