移动布局

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

View File

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

BIN
game.zip Normal file

Binary file not shown.

View File

@ -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.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;

View File

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

View File

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

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

View File

@ -1139,7 +1139,15 @@ mode.chess={
delete window.characterRank;
ui.control.style.transition='all 0s';
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';
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;

View File

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