Support playing battles

This should be a much nicer architecture than the old
`client-battle.js`.

In particular, much of the logic of choosing moves/switches has been
moved into a new `battle-choices.ts`, with `panel-battle.tsx` only
covering the UI.
This commit is contained in:
Guangcong Luo
2020-03-23 01:53:38 -07:00
parent 523d63ab01
commit 40d077903f
15 changed files with 1009 additions and 160 deletions

View File

@@ -1497,6 +1497,7 @@ a.ilink.yours {
margin-top: -2px;
padding: 0 8px;
font-size: 9pt;
line-height: 2;
color: #555555;
}
.battle-controls .whatdo small {
@@ -1539,29 +1540,24 @@ a.ilink.yours {
left: 0;
display: block;
}
.shiftselect button,
.moveselect button,
.switchselect button {
background: transparent;
border: 0;
.shiftselect,
.moveselect,
.switchselect {
font-weight: bold;
font-style: italic;
color: #555555;
font-size: 12pt;
display: block;
margin: 0;
padding: 9px 7px 0 7px;
}
.shiftselect button {
.shiftselect {
color: #445588;
}
.moveselect button {
.moveselect {
color: #884422;
cursor: default;
}
.switchselect button {
.switchselect {
color: #445588;
cursor: default;
}
.switchmenu button {
position: relative;
@@ -1668,28 +1664,34 @@ a.ilink.yours {
font-size: 8pt;
}
.megaevo {
clear: both;
display: block;
width: 180px;
margin: 0 auto 0;
position: relative;
top: 6px;
left: -7px;
padding: 2px;
text-align: center;
clear: both;
display: block;
width: 180px;
margin: 0 auto 0;
position: relative;
top: 6px;
left: -7px;
padding: 2px;
text-align: center;
cursor: pointer;
border: 1px solid #BBB;
border-radius: 3px;
color: #333;
background: #EEF2F5;
font-size: 10pt;
font-weight: bold;
cursor: pointer;
border: 1px solid #BBB;
border-radius: 3px;
color: #333;
background: #EEF2F5;
font-size: 10pt;
font-weight: bold;
}
.megaevo:hover {
border-color: #888;
background: #E5E5E5;
color: black;
border-color: #888;
background: #E5E5E5;
color: black;
}
.megaevo input {
width: 16px;
height: 16px;
vertical-align: -1px;
cursor: pointer;
}
.switchmenu,
@@ -1740,93 +1742,6 @@ a.ilink.yours {
color: #777777 !important;
}
@media (max-height:570px) and (min-width: 440px) {
/*
* This is the black move/switch menu for low-res screens
*/
.controls {
position: absolute;
bottom: 10px;
left: 0;
right: 0;
width: auto;
background: #444444;
background: rgba(40,40,40,.85);
color: #FFFFFF;
padding: 4px 8px;
}
.battle-controls .whatdo {
color: #FFFFFF;
}
.battle-controls .whatdo small.weak {
color: #DDDD55;
border-color: #DDDD55;
}
.battle-controls .whatdo small.critical {
color: #FF7766;
border-color: #FF7766;
}
.battle-controls .movecontrols, .battle-controls .switchcontrols {
max-width: 640px;
}
.movemenu {
display: none;
padding: 0 75px 0 85px;
}
.switchmenu {
display: none;
max-width: 325px;
padding: 0 75px 0 85px;
margin: 0 0 0 auto;
}
.moveselect {
position: absolute;
left: 20px;
bottom: 20px;
}
.switchselect {
position: absolute;
right: 20px;
bottom: 20px;
}
.shiftselect {
position: absolute;
right: 150px;
bottom: 20px;
}
.moveselect button, .switchselect button, .shiftselect button {
padding: 4px 8px;
border-radius: 6px;
background: #E5E5E5;
}
.megaevo {
margin: 0 auto 8px 50px;
}
.battle-controls .whatdo {
padding-bottom: 50px;
}
.battle-controls .move-controls .whatdo,
.battle-controls .switch-controls .whatdo {
padding-bottom: 5px;
}
.move-controls .movemenu,
.switch-controls .switchmenu {
display: block;
margin-right: 0;
}
.move-controls .moveselect button,
.switch-controls .switchselect button,
.shiftselect button {
background: #BBBBBB;
}
.controls .timer {
float: right;
margin-top: -25px;
}
}
/*********************************************************
* Team Selector
*********************************************************/