diff --git a/CHANGELOG.MD b/CHANGELOG.MD
index 8341c71fc..3db280475 100644
--- a/CHANGELOG.MD
+++ b/CHANGELOG.MD
@@ -3,3 +3,4 @@ game.print命令（在命令输入框中输出结果）
修正触屏问题
修正技能bug
新布局
+素材（by @tanyuanjkl）
diff --git a/game.zip b/game.zip
new file mode 100644
index 000000000..6d085654f
Binary files /dev/null and b/game.zip differ
diff --git a/game/game.js b/game/game.js
index 3efbee177..3bb1e5b0b 100755
--- a/game/game.js
+++ b/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+'
/
'+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;
diff --git a/layout/default/layout.css b/layout/default/layout.css
index 5ec2d1b8b..dcdfb0ec0 100755
--- a/layout/default/layout.css
+++ b/layout/default/layout.css
@@ -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) {
diff --git a/layout/mobile/layout.css b/layout/mobile/layout.css
index 0fc7fe750..79fc43486 100644
--- a/layout/mobile/layout.css
+++ b/layout/mobile/layout.css
@@ -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) {
-
-}
diff --git a/layout/phone/layout.css b/layout/phone/layout.css
new file mode 100644
index 000000000..d62e2e6fe
--- /dev/null
+++ b/layout/phone/layout.css
@@ -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) {
+
+}
diff --git a/mode/chess.js b/mode/chess.js
index 1c9187cb2..a401b7263 100755
--- a/mode/chess.js
+++ b/mode/chess.js
@@ -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;
diff --git a/mode/versus.js b/mode/versus.js
index 339536c51..6e9ac3f27 100755
--- a/mode/versus.js
+++ b/mode/versus.js
@@ -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=[];