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

Implement stub Main Menu and Rooms panels

Browse Source
This commit is contained in:
Guangcong Luo 2018-10-17 21:47:54 -05:00
parent 5def884999
commit 008e3de862
6 changed files with 28 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -27,5 +27,6 @@ package-lock.json
/js/client-frame.js
/js/client-main.js
/js/panel-mainmenu.js
/js/panel-rooms.js
.vscode

4
src/client-frame.tsx
View File

@ -102,6 +102,7 @@ class PSRoomPanel extends preact.Component<{style: {}, room: PSRoom}> {
class PSMain extends preact.Component {
constructor() {
super();
PS.subscribe(() => this.forceUpdate());
}
posStyle(pos: PanelPosition) {
if (!pos) return {display: 'none'};
@ -150,6 +151,9 @@ class PSMain extends preact.Component {
if (room.type === 'mainmenu') {
return <MainMenuPanel style={this.posStyle(pos)} room={room} />;
}
if (room.type === 'rooms') {
return <RoomsPanel style={this.posStyle(pos)} room={room} />;
}
return <PSRoomPanel style={this.posStyle(pos)} room={room} />;
}
render() {

7
src/client-main.ts
View File

@ -184,7 +184,7 @@ const PS = new class extends PSModel {
this.rightRoomList.push('rooms' as RoomID);
this.updateLayout();
window.addEventListener('resize', () => this.updateLayout);
window.addEventListener('resize', () => this.updateLayout());
}
// Panel layout
@ -216,9 +216,10 @@ const PS = new class extends PSModel {
};
case 'chat':
case 'rooms':
case 'battles':
return {
minWidth: 320,
width: 640,
width: 570,
maxWidth: 640,
};
case 'battle':
@ -259,7 +260,7 @@ const PS = new class extends PSModel {
const right = this.getWidthFor(this.rightRoom);
const available = document.body.offsetWidth;
let excess = available - left.width + right.width;
let excess = available - (left.width + right.width);
if (excess >= 0) {
// both fit in full size
const leftStretch = left.maxWidth - left.width;

4
src/panel-mainmenu.tsx
View File

@ -9,7 +9,7 @@
class MainMenuPanel extends preact.Component<{style: {}, room: PSRoom}> {
render() {
return <div class="ps-room" id={`room-${this.props.room.id}`} style={this.props.style}>
return <div class="ps-room scrollable" id={`room-${this.props.room.id}`} style={this.props.style}>
<div class="mainmenuwrapper">
<div class="leftmenu">
<div class="activitymenu">
@ -23,7 +23,7 @@ class MainMenuPanel extends preact.Component<{style: {}, room: PSRoom}> {
</div>
</div>
<div class="mainmenu">
<div id="loading-message" class="mainmessage">Initializing... <noscript>FAILED<br /><br />Pok&eacute;mon Showdown requires JavaScript.</noscript></div>
<div id="loading-message" class="mainmessage">[insert main menu here]</div>
</div>
</div>
<div class="rightmenu">

16
src/panel-rooms.tsx Normal file
View File

@ -0,0 +1,16 @@
/**
* Room-list panel (default right-panel)
*
* @author Guangcong Luo <guangcongluo@gmail.com>
* @license AGPLv3
*/
// The main menu doesn't really have state, right? We'll just use no model for now
class RoomsPanel extends preact.Component<{style: {}, room: PSRoom}> {
render() {
return <div class="ps-room ps-room-light scrollabel" id={`room-${this.props.room.id}`} style={this.props.style}>
<div class="mainmessage"><p>[insert room list here]</p></div>
</div>;
}
}

1
testclient-beta.html
View File

@ -54,6 +54,7 @@
<script src="js/client-main.js"></script>
<script src="js/lib/preact.min.js"></script>
<script src="js/panel-mainmenu.js"></script>
<script src="js/panel-rooms.js"></script>
<script src="js/client-frame.js"></script>
</body></html>