移动布局
This commit is contained in:
parent
deac39e4b4
commit
ec3be5f0ee
|
@ -3,3 +3,4 @@ game.print命令(在命令输入框中输出结果)
|
|||
修正触屏问题
|
||||
修正技能bug
|
||||
新布局
|
||||
素材(by @tanyuanjkl)
|
||||
|
|
43
game/game.js
43
game/game.js
|
@ -173,7 +173,8 @@
|
|||
item:{
|
||||
default:'旧版',
|
||||
newlayout:'默认',
|
||||
mobile:'紧凑'
|
||||
mobile:'紧凑',
|
||||
phone:'移动'
|
||||
},
|
||||
onclick:function(layout){
|
||||
game.saveConfig('layout',layout);
|
||||
|
@ -183,7 +184,7 @@
|
|||
setTimeout(function(){
|
||||
var layout=ui.css.layout;
|
||||
ui.css.layout=lib.init.css('layout/'+lib.config.layout,'layout',layout);
|
||||
if(lib.config.layout=='mobile'){
|
||||
if(lib.config.layout=='mobile'||lib.config.layout=='phone'){
|
||||
ui.arena.classList.add('mobile');
|
||||
if(game.me&&game.me.node.handcards2.childNodes.length){
|
||||
while(game.me.node.handcards2.childNodes.length){
|
||||
|
@ -1357,7 +1358,7 @@
|
|||
dialog.style.top=idealtop+'px';
|
||||
},
|
||||
isMobileMe:function(player){
|
||||
return lib.config.layout=='mobile'&&lib.config.mode!='chess'&&player.dataset.position==0;
|
||||
return (lib.config.layout=='mobile'||lib.config.layout=='phone')&&lib.config.mode!='chess'&&player.dataset.position==0;
|
||||
},
|
||||
isNewLayout:function(){
|
||||
if(lib.config.layout!='default') return true;
|
||||
|
@ -1365,7 +1366,7 @@
|
|||
return false;
|
||||
},
|
||||
isSingleHandcard:function(){
|
||||
if(game.singleHandcard||lib.config.layout=='mobile'){
|
||||
if(game.singleHandcard||lib.config.layout=='mobile'||lib.config.layout=='phone'){
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
|
@ -3565,7 +3566,7 @@
|
|||
(
|
||||
this.maxHp>9||
|
||||
(this.maxHp>5&&this.classList.contains('minskin'))||
|
||||
(lib.config.layout=='mobile'&&this.dataset.position==0&&this.maxHp>7)
|
||||
((lib.config.layout=='mobile'||lib.config.layout=='phone')&&this.dataset.position==0&&this.maxHp>7)
|
||||
)){
|
||||
hp.innerHTML=this.hp+'<br>/<br>'+this.maxHp;
|
||||
hp.classList.add('text');
|
||||
|
@ -8890,12 +8891,9 @@
|
|||
ui.window.addEventListener(lib.config.touchscreen?'touchend':'click',ui.click.window);
|
||||
ui.system=ui.create.div("#system.",ui.window);
|
||||
ui.arena=ui.create.div('#arena',ui.window);
|
||||
if(lib.config.layout=='mobile'){
|
||||
if(lib.config.layout=='mobile'||lib.config.layout=='phone'){
|
||||
ui.arena.classList.add('mobile');
|
||||
}
|
||||
else{
|
||||
ui.arena.classList.remove('mobile');
|
||||
}
|
||||
ui.backgroundMusic=document.createElement('audio');
|
||||
ui.backgroundMusic.volume=lib.config.volumn_background/8;
|
||||
game.playBackgroundMusic();
|
||||
|
@ -9712,14 +9710,18 @@
|
|||
// setTimeout(game.reload,500);
|
||||
// });
|
||||
|
||||
if(false&&lib.config.right_sidebar){
|
||||
ui.system2=ui.create.div('#system2',ui.system);
|
||||
ui.system1=ui.create.div('#system1',ui.system);
|
||||
|
||||
ui.system1=ui.create.div('#system1',ui.system);
|
||||
ui.system2=ui.create.div('#system2',ui.system);
|
||||
if(lib.config.touchscreen){
|
||||
ui.system1.addEventListener('touchstart',ui.click.system);
|
||||
ui.system2.addEventListener('touchstart',ui.click.system);
|
||||
}
|
||||
else{
|
||||
ui.system1=ui.create.div('#system1',ui.system);
|
||||
ui.system2=ui.create.div('#system2',ui.system);
|
||||
ui.system1.listen(ui.click.system);
|
||||
ui.system2.listen(ui.click.system);
|
||||
}
|
||||
|
||||
ui.replay=ui.create.system('重来',game.reload,true);
|
||||
ui.config2=ui.create.system('选项',ui.click.config);
|
||||
ui.pause=ui.create.system('历史',ui.click.pause);
|
||||
|
@ -11118,6 +11120,15 @@
|
|||
},
|
||||
},
|
||||
click:{
|
||||
system:function(){
|
||||
if(lib.config.layout!='phone') return;
|
||||
_status.clicked=true;
|
||||
this.classList.toggle('shown');
|
||||
if(this.classList.contains('shown')){
|
||||
if(this.nextSibling) this.nextSibling.classList.remove('shown');
|
||||
if(this.previousSibling) this.previousSibling.classList.remove('shown');
|
||||
}
|
||||
},
|
||||
pausehistory:function(){
|
||||
if(!lib.config.auto_popped) return;
|
||||
if(!ui.sidebar.childNodes.length) return;
|
||||
|
@ -11734,6 +11745,10 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
if(lib.config.layout=='phone'){
|
||||
ui.system1.classList.remove('shown');
|
||||
ui.system2.classList.remove('shown');
|
||||
}
|
||||
}
|
||||
if(_status.tempunpop){
|
||||
_status.tempunpop=false;
|
||||
|
|
|
@ -861,7 +861,7 @@ div[data-color="unknownm"]{
|
|||
@font-face {font-family: 'xinwei';src: url('../../font/xinwei.ttf');}
|
||||
::-webkit-scrollbar{display: none;}
|
||||
|
||||
@media screen and (min-height: 800px) {
|
||||
@media screen and (min-height: 800px) and (orientation:landscape) {
|
||||
#arena{height: 720px;top: calc(50% - 350px);}
|
||||
}
|
||||
@media screen and (min-width: 1280px) {
|
||||
|
|
|
@ -4,12 +4,12 @@
|
|||
|
||||
#arena{
|
||||
width: 94%;
|
||||
height: 95%;
|
||||
height: calc(95% + 20px);
|
||||
left: 3%;
|
||||
}
|
||||
#control{
|
||||
width: 100%;
|
||||
bottom:130px;
|
||||
bottom:150px;
|
||||
height: 40px;
|
||||
left:0;
|
||||
}
|
||||
|
@ -21,7 +21,7 @@
|
|||
}*/
|
||||
#arena:not(.chess)>#me,
|
||||
#arena:not(.chess)>#mebg{
|
||||
bottom:10px;
|
||||
bottom:30px;
|
||||
width: calc(5000% / 47);
|
||||
left:calc(-150% / 47);
|
||||
top:auto;
|
||||
|
@ -49,7 +49,7 @@
|
|||
width: calc(5000% / 47);
|
||||
left:calc(-150% / 47);
|
||||
height: 120px;
|
||||
top: calc(100% - 130px);
|
||||
top: calc(100% - 150px);
|
||||
background: none !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
@ -107,24 +107,21 @@
|
|||
}
|
||||
|
||||
.dialog{
|
||||
height:calc(100% - 350px);
|
||||
bottom:150px;
|
||||
height:calc(100% - 370px);
|
||||
bottom:170px;
|
||||
}
|
||||
.dialog.fullheight {
|
||||
height: calc(100% - 123px) !important;
|
||||
top: 40px !important;
|
||||
}
|
||||
|
||||
@media screen and (min-height: 800px) {
|
||||
#arena{height: 760px;top: calc(50% - 350px);}
|
||||
@media screen and (min-height: 800px) and (orientation:landscape) {
|
||||
#arena{height: 780px;top: calc(50% - 350px);}
|
||||
#arena:not(.chess)>#me,
|
||||
#arena:not(.chess)>#mebg{
|
||||
bottom:10px;
|
||||
bottom:30px;
|
||||
}
|
||||
#arena:not(.chess) .player[data-position='0']{
|
||||
top: calc(100% - 130px);
|
||||
top: calc(100% - 150px);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (orientation:portrait) {
|
||||
|
||||
}
|
||||
@media screen and (orientation:landscape) {
|
||||
|
||||
}
|
||||
|
|
|
@ -0,0 +1,48 @@
|
|||
@import "../mobile/layout.css";
|
||||
#arena{
|
||||
width: 94%;
|
||||
height: calc(97% + 30px);
|
||||
left: 3%;
|
||||
top:3%
|
||||
}
|
||||
#control{
|
||||
bottom:160px;
|
||||
}
|
||||
#control>div,#system>div>div{
|
||||
height: 40px;
|
||||
font-family: 'xinwei';
|
||||
font-size: 30px;
|
||||
line-height: 34px;
|
||||
}
|
||||
#system>div{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
#system>div:first-child{
|
||||
left:5px;
|
||||
}
|
||||
#system>div:last-child{
|
||||
right:5px;
|
||||
}
|
||||
#system>div>div{
|
||||
line-height: 40px;
|
||||
}
|
||||
#system{
|
||||
z-index: 5;
|
||||
}
|
||||
#system>div:not(.shown){
|
||||
opacity: 0;
|
||||
width: 50%;
|
||||
}
|
||||
#system>div:not(.shown)>div{
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (orientation:portrait) {
|
||||
|
||||
}
|
||||
@media screen and (orientation:landscape) {
|
||||
|
||||
}
|
|
@ -1139,7 +1139,15 @@ mode.chess={
|
|||
delete window.characterRank;
|
||||
|
||||
ui.control.style.transition='all 0s';
|
||||
ui.control.style.top='calc(100% - 30px)';
|
||||
if(lib.config.layout=='mobile'){
|
||||
ui.control.style.top='calc(100% - 70px)';
|
||||
}
|
||||
else if(lib.config.layout=='phone'){
|
||||
ui.control.style.top='calc(100% - 80px)';
|
||||
}
|
||||
else{
|
||||
ui.control.style.top='calc(100% - 30px)';
|
||||
}
|
||||
var cardNode=function(i,name,load){
|
||||
var node=ui.create.player(ui.window);
|
||||
node.style.transition='all 0.7s';
|
||||
|
@ -2592,7 +2600,15 @@ mode.chess={
|
|||
dialog.add(bosses);
|
||||
}
|
||||
ui.control.style.transition='all 0s';
|
||||
ui.control.style.top='calc(100% - 30px)';
|
||||
if(lib.config.layout=='mobile'){
|
||||
ui.control.style.top='calc(100% - 70px)';
|
||||
}
|
||||
else if(lib.config.layout=='phone'){
|
||||
ui.control.style.top='calc(100% - 80px)';
|
||||
}
|
||||
else{
|
||||
ui.control.style.top='calc(100% - 30px)';
|
||||
}
|
||||
|
||||
var next=game.me.chooseButton(dialog,true);
|
||||
next._triggered=null;
|
||||
|
|
|
@ -97,7 +97,15 @@ mode.versus={
|
|||
game.resume();
|
||||
};
|
||||
ui.control.style.transition='all 0s';
|
||||
ui.control.style.top='calc(100% - 30px)';
|
||||
if(lib.config.layout=='mobile'){
|
||||
ui.control.style.top='calc(100% - 70px)';
|
||||
}
|
||||
else if(lib.config.layout=='phone'){
|
||||
ui.control.style.top='calc(100% - 80px)';
|
||||
}
|
||||
else{
|
||||
ui.control.style.top='calc(100% - 30px)';
|
||||
}
|
||||
_status.friend=[];
|
||||
_status.enemy=[];
|
||||
game.additionaldead=[];
|
||||
|
|
Loading…
Reference in New Issue