mirror of
https://github.com/smogon/pokemon-showdown-client.git
synced 2026-05-09 04:23:01 -05:00
Merge 964a24e54c into 10f8967023
This commit is contained in:
Ben Cruz
GitHub
commit
0b6d2d3ecf
|
|
@ -245,6 +245,8 @@ class BattlePanel extends PSRoomPanel<BattleRoom> {
|
|||
static readonly id = 'battle';
|
||||
static readonly routes = ['battle-*', 'game-*'];
|
||||
static readonly Model = BattleRoom;
|
||||
private controlsMode: 'move' | 'switch' | null = null;
|
||||
private overlayMode = false;
|
||||
static handleDrop(ev: DragEvent) {
|
||||
const file = ev.dataTransfer?.files?.[0];
|
||||
if (file?.type === 'text/html') {
|
||||
|
|
@ -367,17 +369,27 @@ class BattlePanel extends PSRoomPanel<BattleRoom> {
|
|||
battle.subscribe(() => this.forceUpdate());
|
||||
}
|
||||
battleHeight = 360;
|
||||
controlTop = 370;
|
||||
updateLayout() {
|
||||
if (!this.base) return;
|
||||
const room = this.props.room;
|
||||
this.overlayMode = (window.innerHeight <= 570 && window.innerWidth >= 440);
|
||||
if (!this.overlayMode) this.controlsMode = null;
|
||||
const width = this.base.offsetWidth;
|
||||
const classList = this.base.classList;
|
||||
if (classList) {
|
||||
classList.toggle('small-layout', !!width && width < 830);
|
||||
classList.toggle('tiny-layout', !!width && width < 640);
|
||||
}
|
||||
if (width && width < 640) {
|
||||
const scale = (width / 640);
|
||||
room.battle?.scene.$frame!.css('transform', `scale(${scale})`);
|
||||
this.battleHeight = Math.round(360 * scale);
|
||||
this.controlTop = Math.round(360 * scale) + 10;
|
||||
} else {
|
||||
room.battle?.scene.$frame!.css('transform', 'none');
|
||||
this.battleHeight = 360;
|
||||
this.controlTop = 370;
|
||||
}
|
||||
}
|
||||
override receiveLine(args: Args) {
|
||||
|
|
@ -918,6 +930,7 @@ class BattlePanel extends PSRoomPanel<BattleRoom> {
|
|||
case 'move': {
|
||||
const index = choices.index();
|
||||
const pokemon = request.side.pokemon[index];
|
||||
if (this.overlayMode && this.controlsMode === null) this.controlsMode = null;
|
||||
|
||||
if (choices.current.move) {
|
||||
const moveName = choices.currentMove()?.name;
|
||||
|
|
@ -935,23 +948,43 @@ class BattlePanel extends PSRoomPanel<BattleRoom> {
|
|||
}
|
||||
|
||||
const canShift = room.battle.gameType === 'triples' && index !== 1;
|
||||
const useOverlayToggles = this.overlayMode;
|
||||
const showMoves = !useOverlayToggles || this.controlsMode === 'move';
|
||||
const showSwitches = !useOverlayToggles || this.controlsMode === 'switch';
|
||||
const overlayClass = (this.overlayMode && this.controlsMode) ? ` ${this.controlsMode}-controls` : '';
|
||||
|
||||
return <div class="controls">
|
||||
return <div class={`controls${overlayClass}`}>
|
||||
<div class="whatdo">
|
||||
{this.renderOldChoices(request, choices)}
|
||||
What will <strong>{pokemon.name}</strong> do?
|
||||
</div>
|
||||
<div class="movecontrols">
|
||||
<h3 class="moveselect">Attack</h3>
|
||||
{this.renderMoveMenu(choices)}
|
||||
{useOverlayToggles ? (
|
||||
<button
|
||||
type="button"
|
||||
class="moveselect"
|
||||
onClick={() => { this.controlsMode = 'move'; this.forceUpdate(); }}
|
||||
>
|
||||
Attack
|
||||
</button>
|
||||
) : <h3 class="moveselect">Attack</h3>}
|
||||
{showMoves && this.renderMoveMenu(choices)}
|
||||
</div>
|
||||
<div class="switchcontrols">
|
||||
{canShift && [
|
||||
<h3 class="shiftselect">Shift</h3>,
|
||||
<button data-cmd="/shift">Move to center</button>,
|
||||
]}
|
||||
<h3 class="switchselect">Switch</h3>
|
||||
{this.renderSwitchMenu(request, choices)}
|
||||
{useOverlayToggles ? (
|
||||
<button
|
||||
type="button"
|
||||
class="switchselect"
|
||||
onClick={() => { this.controlsMode = 'switch'; this.forceUpdate(); }}
|
||||
>
|
||||
Switch
|
||||
</button>
|
||||
) : <h3 class="switchselect">Switch</h3>}
|
||||
{showSwitches && this.renderSwitchMenu(request, choices)}
|
||||
</div>
|
||||
</div>;
|
||||
} case 'switch': {
|
||||
|
|
@ -1076,12 +1109,18 @@ class BattlePanel extends PSRoomPanel<BattleRoom> {
|
|||
return <PSPanelWrapper room={room} focusClick noScroll="hidden">
|
||||
{hardcoreStyle}
|
||||
<BattleDiv room={room} />
|
||||
<ChatLog
|
||||
class="battle-log hasuserlist" room={room} top={this.battleHeight} noSubscription
|
||||
>
|
||||
<div class="battle-controls" role="complementary" aria-label="Battle Controls">
|
||||
<div class="battle-controls-container">
|
||||
<div
|
||||
class="battle-controls"
|
||||
role="complementary"
|
||||
aria-label="Battle Controls"
|
||||
style={`top: ${this.controlTop}px;`}
|
||||
>
|
||||
{this.renderControls()}
|
||||
</div>
|
||||
</div>
|
||||
<ChatLog class="battle-log hasuserlist" room={room} top={this.battleHeight} noSubscription>
|
||||
{}
|
||||
</ChatLog>
|
||||
<ChatTextEntry room={room} onMessage={this.send} onKey={this.onKey} left={0} />
|
||||
<ChatUserList room={room} top={this.battleHeight} minimized />
|
||||
|
|
@ -1114,7 +1153,7 @@ class BattlePanel extends PSRoomPanel<BattleRoom> {
|
|||
Battle options
|
||||
</button>
|
||||
<div class="battle-controls-container">
|
||||
<div class="battle-controls" role="complementary" aria-label="Battle Controls" style="top: 370px;">
|
||||
<div class="battle-controls" role="complementary" aria-label="Battle Controls" style={`top: ${this.controlTop}px;`}>
|
||||
{(room.battle && !room.battle.ended && room.request && room.battle.mySide.id === PS.user.userid) &&
|
||||
<TimerButton room={room} />}
|
||||
{this.renderControls()}
|
||||
|
|
|
|||
|
|
@ -1894,6 +1894,91 @@ pre.textbox.textbox-empty[placeholder]:before {
|
|||
background: #009AA4;
|
||||
}
|
||||
|
||||
@media (max-height:570px) and (min-width: 440px) {
|
||||
/*
|
||||
* Black move/switch menu for low-res screens (parity with client1)
|
||||
*/
|
||||
.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;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
.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 .shiftcontrols, .battle-controls .switchcontrols {
|
||||
max-width: 640px;
|
||||
}
|
||||
.movemenu {
|
||||
display: none;
|
||||
padding: 0 75px 0 85px;
|
||||
}
|
||||
.allyparty,
|
||||
.switchmenu {
|
||||
display: none;
|
||||
max-width: 325px;
|
||||
padding: 0 75px 0 85px;
|
||||
margin: 0 0 0 auto;
|
||||
}
|
||||
.moveselect {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
bottom: 20px;
|
||||
}
|
||||
.allyTeam,
|
||||
.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-box {
|
||||
text-align: left;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.movebutton {
|
||||
float: left;
|
||||
display: block;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user