Leahnaya/pokemon-showdown-client
1
0
Fork 0
mirror of https://github.com/smogon/pokemon-showdown-client.git synced 2026-03-21 17:50:29 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Preact: Add roomlist overflow popup (#2374)

Browse Source
This commit is contained in:
HoeenHero 2025-04-18 00:19:07 -04:00 committed by GitHub
parent b0d565a30b
commit 7ee7c6604a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 60 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
play.pokemonshowdown.com/src/panel-popups.tsx
View File

@ -7,6 +7,7 @@ import { PSRoom, type RoomOptions, PS, type PSLoginState, type RoomID, type Time
import { type BattleRoom } from "./panel-battle";
import type { ChatRoom } from "./panel-chat";
import { PSRoomPanel, PSPanelWrapper } from "./panels";
import { PSHeader } from "./panel-topbar";
/**
* User popup
@ -1207,6 +1208,25 @@ class PopupPanel extends PSRoomPanel {
</div></PSPanelWrapper>;
}
}
class RoomTabListPanel extends PSRoomPanel {
static readonly id = 'roomtablist';
static readonly routes = ['roomtablist'];
static readonly location = 'semimodal-popup';
static readonly noURL = true;
override render() {
return <PSPanelWrapper room={this.props.room}><div class="tablist">
<ul>
{PS.leftRoomList.map(roomid => PSHeader.renderRoomTab(roomid))}
</ul>
<ul>
{PS.rightRoomList.map(roomid => PSHeader.renderRoomTab(roomid))}
</ul>
</div></PSPanelWrapper>;
}
}
PS.addRoomType(
UserPanel,
UserOptionsPanel,
@ -1218,5 +1238,6 @@ PS.addRoomType(
RegisterPanel,
BattleForfeitPanel,
ReplacePlayerPanel,
PopupPanel
PopupPanel,
RoomTabListPanel
);

48
play.pokemonshowdown.com/src/panel-topbar.tsx
View File

@ -41,7 +41,7 @@ window.addEventListener('dragover', e => {
});
export class PSHeader extends preact.Component<{ style: object }> {
handleDragEnter = (e: DragEvent) => {
static handleDragEnter = (e: DragEvent) => {
console.log('dragenter ' + e.dataTransfer!.dropEffect);
e.preventDefault();
if (!PS.dragging) return; // TODO: handle dragging other things onto roomtabs
@ -72,7 +72,7 @@ export class PSHeader extends preact.Component<{ style: object }> {
// Chrome/Safari/Opera
// if (e.dataTransfer) e.dataTransfer.dropEffect = 'move';
};
handleDragStart = (e: DragEvent) => {
static handleDragStart = (e: DragEvent) => {
const roomid = PS.router.extractRoomID((e.currentTarget as HTMLAnchorElement).href);
if (!roomid) return; // should never happen
@ -120,7 +120,7 @@ export class PSHeader extends preact.Component<{ style: object }> {
}
return { icon, title };
}
renderRoomTab(id: RoomID) {
static renderRoomTab(id: RoomID) {
const room = PS.rooms[id];
if (!room) return null;
const closable = (id === '' || id === 'rooms' ? '' : ' closable');
@ -150,10 +150,33 @@ export class PSHeader extends preact.Component<{ style: object }> {
{closeButton}
</li>;
}
handleRoomTabOverflow() {
if (!PS.rightPanel) return; // TODO handle vertical overflow
const avaliableSpace = PS.rightPanel.width - 165; // 165 is the width of the userbar
let usedSpace = 0;
const roomTabs = this.base?.querySelectorAll('ul.siderooms > li');
if (!roomTabs) return; // No rooms
for (const tab of Array.from(roomTabs)) {
usedSpace += tab.clientWidth;
}
const overflow = this.base?.querySelector('.overflow');
if (usedSpace > avaliableSpace) {
overflow?.classList.remove('hidden');
} else {
overflow?.classList.add('hidden');
}
}
override componentDidMount() {
PS.user.subscribe(() => {
this.forceUpdate();
});
this.handleRoomTabOverflow();
}
override componentDidUpdate() {
this.handleRoomTabOverflow();
}
renderUser() {
if (!PS.connected) {
@ -182,16 +205,16 @@ export class PSHeader extends preact.Component<{ style: object }> {
/>
<div class="tablist">
<ul>
{this.renderRoomTab(PS.leftRoomList[0])}
{PSHeader.renderRoomTab(PS.leftRoomList[0])}
</ul>
<ul>
{PS.miniRoomList.map(roomid => this.renderRoomTab(roomid))}
{PS.miniRoomList.map(roomid => PSHeader.renderRoomTab(roomid))}
</ul>
<ul>
{PS.leftRoomList.slice(1).map(roomid => this.renderRoomTab(roomid))}
{PS.leftRoomList.slice(1).map(roomid => PSHeader.renderRoomTab(roomid))}
</ul>
<ul class="siderooms">
{PS.rightRoomList.map(roomid => this.renderRoomTab(roomid))}
{PS.rightRoomList.map(roomid => PSHeader.renderRoomTab(roomid))}
</ul>
</div>
</div>
@ -228,14 +251,19 @@ export class PSHeader extends preact.Component<{ style: object }> {
/>
<div class="tabbar maintabbar"><div class="inner">
<ul>
{this.renderRoomTab(PS.leftRoomList[0])}
{PSHeader.renderRoomTab(PS.leftRoomList[0])}
</ul>
<ul>
{PS.leftRoomList.slice(1).map(roomid => this.renderRoomTab(roomid))}
{PS.leftRoomList.slice(1).map(roomid => PSHeader.renderRoomTab(roomid))}
</ul>
<ul class="siderooms" style={{ float: 'none', marginLeft: Math.max(PS.leftPanelWidth - 52, 0) }}>
{PS.rightRoomList.map(roomid => this.renderRoomTab(roomid))}
{PS.rightRoomList.map(roomid => PSHeader.renderRoomTab(roomid))}
</ul>
<div class="overflow hidden" aria-hidden="true">
<button name="tablist" class="button" data-href="roomtablist" aria-label="More" type="button">
<i class="fa fa-caret-down"></i>
</button>
</div>
</div></div>
<div class="userbar">
{this.renderUser()} {}