YunFeiyang
/
noname
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

移动布局

This commit is contained in:
libccy 2015-11-01 00:18:20 +08:00
parent deac39e4b4
commit ec3be5f0ee
8 changed files with 120 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.MD
View File

@ -3,3 +3,4 @@ game.print命令（在命令输入框中输出结果）
修正触屏问题 修正触屏问题
修正技能bug 修正技能bug
新布局 新布局
素材（by @tanyuanjkl）

BIN
game.zip Normal file
View File

Binary file not shown.

43
game/game.js
View File

@ -173,7 +173,8 @@
item:{ item:{
default:'旧版', default:'旧版',
newlayout:'默认', newlayout:'默认',
mobile:'紧凑' mobile:'紧凑',
phone:'移动'
}, },
onclick:function(layout){ onclick:function(layout){
game.saveConfig('layout',layout); game.saveConfig('layout',layout);
@ -183,7 +184,7 @@
setTimeout(function(){ setTimeout(function(){
var layout=ui.css.layout; var layout=ui.css.layout;
ui.css.layout=lib.init.css('layout/'+lib.config.layout,'layout',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'); ui.arena.classList.add('mobile');
if(game.me&&game.me.node.handcards2.childNodes.length){ if(game.me&&game.me.node.handcards2.childNodes.length){
while(game.me.node.handcards2.childNodes.length){ while(game.me.node.handcards2.childNodes.length){
@ -1357,7 +1358,7 @@
dialog.style.top=idealtop+'px'; dialog.style.top=idealtop+'px';
}, },
isMobileMe:function(player){ 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(){ isNewLayout:function(){
if(lib.config.layout!='default') return true; if(lib.config.layout!='default') return true;
@ -1365,7 +1366,7 @@
return false; return false;
}, },
isSingleHandcard:function(){ isSingleHandcard:function(){
if(game.singleHandcard||lib.config.layout=='mobile'){ if(game.singleHandcard||lib.config.layout=='mobile'||lib.config.layout=='phone'){
return true; return true;
} }
return false; return false;
@ -3565,7 +3566,7 @@
( (
this.maxHp>9|| this.maxHp>9||
(this.maxHp>5&&this.classList.contains('minskin'))|| (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.innerHTML=this.hp+'<br>/<br>'+this.maxHp;
hp.classList.add('text'); hp.classList.add('text');
@ -8890,12 +8891,9 @@
ui.window.addEventListener(lib.config.touchscreen?'touchend':'click',ui.click.window); ui.window.addEventListener(lib.config.touchscreen?'touchend':'click',ui.click.window);
ui.system=ui.create.div("#system.",ui.window); ui.system=ui.create.div("#system.",ui.window);
ui.arena=ui.create.div('#arena',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'); ui.arena.classList.add('mobile');
} }
else{
ui.arena.classList.remove('mobile');
}
ui.backgroundMusic=document.createElement('audio'); ui.backgroundMusic=document.createElement('audio');
ui.backgroundMusic.volume=lib.config.volumn_background/8; ui.backgroundMusic.volume=lib.config.volumn_background/8;
game.playBackgroundMusic(); game.playBackgroundMusic();
@ -9712,14 +9710,18 @@
// setTimeout(game.reload,500); // 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{ else{
ui.system1=ui.create.div('#system1',ui.system); ui.system1.listen(ui.click.system);
ui.system2=ui.create.div('#system2',ui.system); ui.system2.listen(ui.click.system);
} }
ui.replay=ui.create.system('重来',game.reload,true); ui.replay=ui.create.system('重来',game.reload,true);
ui.config2=ui.create.system('选项',ui.click.config); ui.config2=ui.create.system('选项',ui.click.config);
ui.pause=ui.create.system('历史',ui.click.pause); ui.pause=ui.create.system('历史',ui.click.pause);
@ -11118,6 +11120,15 @@
}, },
}, },
click:{ 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(){ pausehistory:function(){
if(!lib.config.auto_popped) return; if(!lib.config.auto_popped) return;
if(!ui.sidebar.childNodes.length) 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){ if(_status.tempunpop){
_status.tempunpop=false; _status.tempunpop=false;

2
layout/default/layout.css
View File

@ -861,7 +861,7 @@ div[data-color="unknownm"]{
@font-face {font-family: 'xinwei';src: url('../../font/xinwei.ttf');} @font-face {font-family: 'xinwei';src: url('../../font/xinwei.ttf');}
::-webkit-scrollbar{display: none;} ::-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);} #arena{height: 720px;top: calc(50% - 350px);}
} }
@media screen and (min-width: 1280px) { @media screen and (min-width: 1280px) {

31
layout/mobile/layout.css
View File

@ -4,12 +4,12 @@
#arena{ #arena{
width: 94%; width: 94%;
height: 95%; height: calc(95% + 20px);
left: 3%; left: 3%;
} }
#control{ #control{
width: 100%; width: 100%;
bottom:130px; bottom:150px;
height: 40px; height: 40px;
left:0; left:0;
} }
@ -21,7 +21,7 @@
}*/ }*/
#arena:not(.chess)>#me, #arena:not(.chess)>#me,
#arena:not(.chess)>#mebg{ #arena:not(.chess)>#mebg{
bottom:10px; bottom:30px;
width: calc(5000% / 47); width: calc(5000% / 47);
left:calc(-150% / 47); left:calc(-150% / 47);
top:auto; top:auto;
@ -49,7 +49,7 @@
width: calc(5000% / 47); width: calc(5000% / 47);
left:calc(-150% / 47); left:calc(-150% / 47);
height: 120px; height: 120px;
top: calc(100% - 130px); top: calc(100% - 150px);
background: none !important; background: none !important;
pointer-events: none; pointer-events: none;
} }
@ -107,24 +107,21 @@
} }
.dialog{ .dialog{
height:calc(100% - 350px); height:calc(100% - 370px);
bottom:150px; bottom:170px;
}
.dialog.fullheight {
height: calc(100% - 123px) !important;
top: 40px !important;
} }
@media screen and (min-height: 800px) { @media screen and (min-height: 800px) and (orientation:landscape) {
#arena{height: 760px;top: calc(50% - 350px);} #arena{height: 780px;top: calc(50% - 350px);}
#arena:not(.chess)>#me, #arena:not(.chess)>#me,
#arena:not(.chess)>#mebg{ #arena:not(.chess)>#mebg{
bottom:10px; bottom:30px;
} }
#arena:not(.chess) .player[data-position='0']{ #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) {
}

48
layout/phone/layout.css Normal file
View File

@ -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) {
}

20
mode/chess.js
View File

@ -1139,7 +1139,15 @@ mode.chess={
delete window.characterRank; delete window.characterRank;
ui.control.style.transition='all 0s'; 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 cardNode=function(i,name,load){
var node=ui.create.player(ui.window); var node=ui.create.player(ui.window);
node.style.transition='all 0.7s'; node.style.transition='all 0.7s';
@ -2592,7 +2600,15 @@ mode.chess={
dialog.add(bosses); dialog.add(bosses);
} }
ui.control.style.transition='all 0s'; 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); var next=game.me.chooseButton(dialog,true);
next._triggered=null; next._triggered=null;

10
mode/versus.js
View File

@ -97,7 +97,15 @@ mode.versus={
game.resume(); game.resume();
}; };
ui.control.style.transition='all 0s'; 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.friend=[];
_status.enemy=[]; _status.enemy=[];
game.additionaldead=[]; game.additionaldead=[];