Skip to content

Commit 876238a

Browse files
ZarelZarel
committed
Improve design
1 parent d1d0a75 commit 876238a

File tree

4 files changed

+33
-26
lines changed

4 files changed

+33
-26
lines changed

‎play.pokemonshowdown.com/js/client-battle.js

+6-7
Original file line numberDiff line numberDiff line change
@@ -683,9 +683,9 @@
683683
var moveType = this.tooltips.getMoveType(move, typeValueTracker)[0];
684684
var tooltipArgs = 'move|' + moveData.move + '|' + pos;
685685
if (moveData.disabled) {
686-
movebuttons += '<button disabled class="has-tooltip" data-tooltip="' + BattleLog.escapeHTML(tooltipArgs) + '">';
686+
movebuttons += '<button disabled class="movebutton has-tooltip" data-tooltip="' + BattleLog.escapeHTML(tooltipArgs) + '">';
687687
} else {
688-
movebuttons += '<button class="type-' + moveType + ' has-tooltip" name="chooseMove" value="' + (i + 1) + '" data-move="' + BattleLog.escapeHTML(moveData.move) + '" data-target="' + BattleLog.escapeHTML(moveData.target) + '" data-tooltip="' + BattleLog.escapeHTML(tooltipArgs) + '">';
688+
movebuttons += '<button class="movebutton type-' + moveType + ' has-tooltip" name="chooseMove" value="' + (i + 1) + '" data-move="' + BattleLog.escapeHTML(moveData.move) + '" data-target="' + BattleLog.escapeHTML(moveData.target) + '" data-tooltip="' + BattleLog.escapeHTML(tooltipArgs) + '">';
689689
hasMoves = true;
690690
}
691691
movebuttons += name + '<br /><small class="type">' + (moveType ? Dex.types.get(moveType).name : "Unknown") + '</small> <small class="pp">' + pp + '</small>&nbsp;</button> ';
@@ -714,7 +714,7 @@
714714
var tooltipArgs = classType + 'move|' + baseMove.id + '|' + pos;
715715
if (specialMove.id.startsWith('gmax')) tooltipArgs += '|' + specialMove.id;
716716
var isDisabled = specialMoves[i].disabled ? 'disabled="disabled"' : '';
717-
movebuttons += '<button ' + isDisabled + ' class="type-' + moveType + ' has-tooltip" name="chooseMove" value="' + (i + 1) + '" data-move="' + BattleLog.escapeHTML(specialMoves[i].move) + '" data-target="' + BattleLog.escapeHTML(specialMoves[i].target) + '" data-tooltip="' + BattleLog.escapeHTML(tooltipArgs) + '">';
717+
movebuttons += '<button ' + isDisabled + ' class="movebutton type-' + moveType + ' has-tooltip" name="chooseMove" value="' + (i + 1) + '" data-move="' + BattleLog.escapeHTML(specialMoves[i].move) + '" data-target="' + BattleLog.escapeHTML(specialMoves[i].target) + '" data-tooltip="' + BattleLog.escapeHTML(tooltipArgs) + '">';
718718
var pp = curActive.moves[i].pp + '/' + curActive.moves[i].maxpp;
719719
if (canZMove) {
720720
pp = '1/1';
@@ -749,11 +749,10 @@
749749
moveMenu += '<br /><label class="megaevo"><input type="checkbox" name="terastallize" />&nbsp;Terastallize<br />' + Dex.getTypeIcon(canTerastallize) + '</label>';
750750
}
751751
if (this.finalDecisionMove) {
752-
moveMenu += '<em style="display:block;clear:both">You <strong>might</strong> have some moves disabled, so you won\'t be able to cancel an attack!</em><br/>';
752+
moveMenu += '<em class="movewarning">You <strong>might</strong> have some moves disabled, so you won\'t be able to cancel an attack!</em>';
753753
}
754754
if (curActive.maybeLocked) {
755-
moveMenu += '<em style="display:block;clear:both">You <strong>might</strong> be locked into a move.</em><br/>';
756-
moveMenu += '<button class="button" name="chooseFight">Check for Lock</button> (You won\'t be able to switch if locked.)<br/>';
755+
moveMenu += '<em class="movewarning">You <strong>might</strong> be locked into a move. <button class="button" name="chooseFight">Try Fight button</button> (prevents switching if you\'re locked)</em>';
757756
}
758757
moveMenu += '<div style="clear:left"></div>';
759758

@@ -781,7 +780,7 @@
781780
} else {
782781
switchMenu += this.displayParty(switchables, trapped);
783782
if (this.finalDecisionSwitch && this.battle.gen > 2) {
784-
switchMenu += '<em style="display:block;clear:both">You <strong>might</strong> be trapped, so you won\'t be able to cancel a switch!</em><br/>';
783+
switchMenu += '<em class="movewarning">You <strong>might</strong> be trapped, so you won\'t be able to cancel a switch!</em>';
785784
}
786785
}
787786
var switchControls = (

‎play.pokemonshowdown.com/src/panel-battle.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -199,7 +199,9 @@ class BattleDiv extends preact.Component {
199199
function MoveButton(props: {
200200
children: string, cmd: string, moveData: { pp: number, maxpp: number }, type: Dex.TypeName, tooltip: string,
201201
}) {
202-
return <button name="cmd" value={props.cmd} class={`type-${props.type} has-tooltip`} data-tooltip={props.tooltip}>
202+
return <button
203+
name="cmd" value={props.cmd} class={`movebutton type-${props.type} has-tooltip`} data-tooltip={props.tooltip}
204+
>
203205
{props.children}<br />
204206
<small class="type">{props.type}</small> <small class="pp">{props.moveData.pp}/{props.moveData.maxpp}</small>&nbsp;
205207
</button>;

‎play.pokemonshowdown.com/style/client.css

+15-9
Original file line numberDiff line numberDiff line change
@@ -1802,7 +1802,7 @@ a.ilink.yours {
18021802
background: #009AA4;
18031803
}
18041804

1805-
.movemenu button {
1805+
.movebutton {
18061806
float: left;
18071807
display: block;
18081808
width: 155px;
@@ -1812,15 +1812,15 @@ a.ilink.yours {
18121812
position: relative;
18131813
padding: 6px 4px 0 4px;
18141814
}
1815-
.movemenu button small {
1815+
.movebutton small {
18161816
color: #777777;
18171817
}
1818-
.movemenu button small.type {
1818+
.movebutton small.type {
18191819
padding-top: 3px;
18201820
float: left;
18211821
font-size: 8pt;
18221822
}
1823-
.movemenu button small.pp {
1823+
.movebutton small.pp {
18241824
padding-top: 2px;
18251825
float: right;
18261826
font-size: 8pt;
@@ -1849,6 +1849,12 @@ a.ilink.yours {
18491849
background: #E5E5E5;
18501850
color: black;
18511851
}
1852+
.movewarning {
1853+
clear: both;
1854+
display: block;
1855+
font-size: 10pt;
1856+
padding: 8px 0 5px;
1857+
}
18521858
.allyparty,
18531859
.switchmenu,
18541860
.movemenu {
@@ -1858,7 +1864,7 @@ a.ilink.yours {
18581864
}
18591865
.allyparty button,
18601866
.switchmenu button,
1861-
.movemenu button {
1867+
.movebutton {
18621868
position: relative;
18631869
outline: none;
18641870
text-align: center;
@@ -1876,24 +1882,24 @@ a.ilink.yours {
18761882
}
18771883
.allyparty button:hover,
18781884
.switchmenu button:hover,
1879-
.movemenu button:hover {
1885+
.movebutton:hover {
18801886
background: #cfcfcf;
18811887
background: linear-gradient(to bottom, #f2f2f2, #cfcfcf);
18821888
border-color: #606060;
18831889
}
18841890
.allyparty button:active,
18851891
.switchmenu button:active,
1886-
.movemenu button:active,
1892+
.movebutton:active,
18871893
.switchmenu button.pressed,
1888-
.movemenu button.pressed {
1894+
.movebutton.pressed {
18891895
background: linear-gradient(to bottom, #cfcfcf, #f2f2f2);
18901896
}
18911897

18921898
.allyparty button.disabled,
18931899
.allyparty button:disabled,
18941900
.switchmenu button.disabled,
18951901
.switchmenu button:disabled,
1896-
.movemenu button:disabled {
1902+
.movebutton:disabled {
18971903
cursor: default;
18981904
background: #F3F3F3 !important;
18991905
border-color: #CCCCCC !important;

‎play.pokemonshowdown.com/style/client2.css

+9-9
Original file line numberDiff line numberDiff line change
@@ -1696,7 +1696,7 @@ a.ilink.yours {
16961696
background: #009AA4;
16971697
}
16981698

1699-
.movemenu button {
1699+
.movebutton {
17001700
float: left;
17011701
display: block;
17021702
width: 155px;
@@ -1706,15 +1706,15 @@ a.ilink.yours {
17061706
position: relative;
17071707
padding: 6px 4px 0 4px;
17081708
}
1709-
.movemenu button small {
1709+
.movebutton small {
17101710
color: #777777;
17111711
}
1712-
.movemenu button small.type {
1712+
.movebutton small.type {
17131713
padding-top: 3px;
17141714
float: left;
17151715
font-size: 8pt;
17161716
}
1717-
.movemenu button small.pp {
1717+
.movebutton small.pp {
17181718
padding-top: 2px;
17191719
float: right;
17201720
font-size: 8pt;
@@ -1757,7 +1757,7 @@ a.ilink.yours {
17571757
padding-left: 4px;
17581758
}
17591759
.switchmenu button,
1760-
.movemenu button {
1760+
.movebutton {
17611761
position: relative;
17621762
outline: none;
17631763
text-align: center;
@@ -1774,21 +1774,21 @@ a.ilink.yours {
17741774
background: linear-gradient(to bottom, #f6f6f6, #e3e3e3);
17751775
}
17761776
.switchmenu button:hover,
1777-
.movemenu button:hover {
1777+
.movebutton:hover {
17781778
background: #cfcfcf;
17791779
background: linear-gradient(to bottom, #f2f2f2, #cfcfcf);
17801780
border-color: #606060;
17811781
}
17821782
.switchmenu button:active,
1783-
.movemenu button:active,
1783+
.movebutton:active,
17841784
.switchmenu button.pressed,
1785-
.movemenu button.pressed {
1785+
.movebutton.pressed {
17861786
background: linear-gradient(to bottom, #cfcfcf, #f2f2f2);
17871787
}
17881788

17891789
.switchmenu button.disabled,
17901790
.switchmenu button:disabled,
1791-
.movemenu button:disabled {
1791+
.movebutton:disabled {
17921792
cursor: default;
17931793
background: #F3F3F3 !important;
17941794
border-color: #CCCCCC !important;

0 commit comments

Comments
 (0)