valerie
/
hadean-old
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

split up qt widgets!

stable
Valerie 2021-07-29 15:32:30 -04:00
parent cbc45c1aef
commit 2dc1c6b8d8
9 changed files with 342 additions and 305 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
src/qt/CustomWidgets.ts 100644
View File

@ -0,0 +1,78 @@
import { Direction, FocusPolicy, QBoxLayout, QFrame, QGridLayout, QScrollArea, QWidget } from "@nodegui/nodegui";
export abstract class ScrollPanel extends QScrollArea {
centralWidget: QWidget;
vLayout: QBoxLayout;
widgets: QWidget[] = [];
constructor() {
super();
this.setInlineStyle(`
background: rgba(0, 0, 0, 0);
border: none;
`)
this.centralWidget = new QFrame();
this.centralWidget.setInlineStyle(`
background: rgba(0, 0, 0, 0);
`);
// this.setVerticalScrollBarPolicy(ScrollBarPolicy.ScrollBarAlwaysOn);
this.setWidgetResizable(true);
this.setWidget(this.centralWidget);
this.vLayout = new QBoxLayout(Direction.TopToBottom);
const a = 12;
this.vLayout.setContentsMargins(a, a, a, a);
this.vLayout.setSpacing(0);
this.centralWidget.setLayout(this.vLayout);
this.fill();
this.vLayout.addStretch(1);
}
refill() {
for(const component of this.widgets) {
// component.hide();
component.close();
// component.nodeParent = null;
// this.vLayout.removeWidget(component);
}
this.widgets = [];
this.fill();
}
addWidget(widget: QWidget) {
this.widgets.push(widget);
this.vLayout.insertWidget(0, widget);
}
abstract fill(): void;
}
export abstract class GridItem extends QFrame {
rootLayout: QGridLayout;
get layout(): QGridLayout {
return this.rootLayout;
}
constructor() {
super();
this.rootLayout = new QGridLayout()
this.setLayout(this.rootLayout);
this.setInlineStyle(`
width: '100%';
margin: 0px;
padding: 0px;
`);
this.rootLayout.setContentsMargins(0, 0, 0, 0);
this.rootLayout.setSpacing(0);
this.rootLayout.setVerticalSpacing(0);
this.rootLayout.setHorizontalSpacing(0);
// this.rootLayout.
this.setFocusPolicy(FocusPolicy.ClickFocus);
}
}

314
src/qt/GameView.ts
View File

@ -21,6 +21,9 @@ import network from '../multiplayer/mDNS.js';
import { Player } from '../multiplayer/Player.js';
import { Pawn } from '../Pawn.js';
import { ProcessManager } from '../ProcessManager.js';
import { GridItem, ScrollPanel } from './CustomWidgets.js';
import { DebugPage, PawnsPage, InventoryPage, MultiplayerPage } from './pages/Pages.js';
import { TimeControl, TimeLabel } from './TimeControl.js';
import { View } from './View.js';
export class GameView extends View {
@ -30,7 +33,7 @@ export class GameView extends View {
left: QWidget;
right: QTabWidget;
timeControl: TimeControl;
debugPage: DebugPageWidget;
debugPage: DebugPage;
addComponents(): void {
this.addLayout();
@ -38,7 +41,7 @@ export class GameView extends View {
this.title = new QLabel();
this.left = new QWidget();
this.right = new QTabWidget();
this.timeLabel = new TimeWidget();
this.timeLabel = new TimeLabel();
this.timeControl = new TimeControl();
this.title.setText(this.game.name);
@ -54,11 +57,11 @@ export class GameView extends View {
this.layout.setColumnStretch(i, 1);
}
this.debugPage = new DebugPageWidget();
this.debugPage = new DebugPage();
this.right.addTab(new PawnPageWidget(), new QIcon(), 'Pawns');
this.right.addTab(new InventoryPageWidget(), new QIcon(), 'Inventory');
this.right.addTab(new MultiplayerPageWidget(), new QIcon(), 'Multiplayer');
this.right.addTab(new PawnsPage(), new QIcon(), 'Pawns');
this.right.addTab(new InventoryPage(), new QIcon(), 'Inventory');
this.right.addTab(new MultiplayerPage(), new QIcon(), 'Multiplayer');
ProcessManager.on('change', this.onProcessManagerChange.bind(this));
}
@ -77,302 +80,3 @@ export class GameView extends View {
}
}
class GridItem extends QFrame {
rootLayout: QGridLayout;
get layout(): QGridLayout {
return this.rootLayout;
}
constructor() {
super();
this.rootLayout = new QGridLayout()
this.setLayout(this.rootLayout);
this.setInlineStyle(`
width: '100%';
margin: 0px;
padding: 0px;
`);
this.rootLayout.setContentsMargins(0, 0, 0, 0);
this.rootLayout.setSpacing(0);
this.rootLayout.setVerticalSpacing(0);
this.rootLayout.setHorizontalSpacing(0);
// this.rootLayout.
this.setFocusPolicy(FocusPolicy.ClickFocus);
}
}
function addSplitText(layout: QGridLayout, left: string, right: string, row: number) {
layout.setSpacing(0);
const nameLabel = new QLabel();
nameLabel.setText(left);
nameLabel.setAlignment(AlignmentFlag.AlignLeft | AlignmentFlag.AlignTop);
// nameLabel.setInlineStyle('padding: 0px; margin: 0px;');
const activityLabel = new QLabel();
activityLabel.setText(right);
activityLabel.setAlignment(AlignmentFlag.AlignRight | AlignmentFlag.AlignTop);
// activityLabel.setInlineStyle('padding: 0px; margin: 0px;');
layout.addWidget(nameLabel, row, 0, 1, 1);
layout.addWidget(activityLabel, row, 1, 1, 1);
layout.setRowStretch(row, 1);
// in theory this is redundant, calling this
// function on the same layout multiple times...
layout.setColumnStretch(0, 1);
layout.setColumnStretch(1, 1);
}
class PawnWidget extends GridItem {
constructor(pawn: Pawn) {
super();
addSplitText(
this.layout,
pawn.name.first + ' ' + pawn.name.last,
pawn.status,
0
);
}
}
class ItemWidget extends GridItem {
constructor(itemState: ItemState<unknown>) {
super();
addSplitText(
this.layout,
itemState.name,
'' + (itemState.qty),
0
);
}
}
abstract class ScrollPanel extends QScrollArea {
centralWidget: QWidget;
vLayout: QBoxLayout;
widgets: QWidget[] = [];
constructor() {
super();
this.setInlineStyle(`
background: rgba(0, 0, 0, 0);
border: none;
`)
this.centralWidget = new QFrame();
this.centralWidget.setInlineStyle(`
background: rgba(0, 0, 0, 0);
`);
// this.setVerticalScrollBarPolicy(ScrollBarPolicy.ScrollBarAlwaysOn);
this.setWidgetResizable(true);
this.setWidget(this.centralWidget);
this.vLayout = new QBoxLayout(Direction.TopToBottom);
const a = 12;
this.vLayout.setContentsMargins(a, a, a, a);
this.vLayout.setSpacing(0);
this.centralWidget.setLayout(this.vLayout);
this.fill();
this.vLayout.addStretch(1);
}
refill() {
for(const component of this.widgets) {
// component.hide();
component.close();
// component.nodeParent = null;
// this.vLayout.removeWidget(component);
}
this.widgets = [];
this.fill();
}
addWidget(widget: QWidget) {
this.widgets.push(widget);
this.vLayout.insertWidget(0, widget);
}
abstract fill(): void;
}
class PawnPageWidget extends ScrollPanel {
fill() {
for(const pawn of Game.current.pawns) {
this.addWidget(new PawnWidget(pawn));
}
}
}
// TODO remove later, when i know i dont need it
// class PawnPageWidget extends QListWidget {
// constructor() {
// super();
// for (const pawn of Game.current.pawns) {
// const pawnWidget = new PawnWidget(pawn);
// const item = new QListWidgetItem();
// this.addItem(item);
// this.setItemWidget(item, pawnWidget);
// }
// }
// }
// class PawnPageWidget extends QWidget {
// constructor() {
// super();
// this.setLayout(new QBoxLayout(Direction.TopToBottom));
// // this.setLayout(new FlexLayout());
// for(const pawn of Game.current.pawns) {
// this.layout.addWidget(new PawnWidget(pawn));
// }
// }
// }
class TimeWidget extends QLabel {
constructor() {
super();
this.setAlignment(AlignmentFlag.AlignRight | AlignmentFlag.AlignVCenter);
setInterval(() => {
this.setText(Game.current.clock.toString());
}, 100)
}
}
class InventoryPageWidget extends ScrollPanel {
fill() {
for(const itemState of Game.current.inv.items) {
this.addWidget(new ItemWidget(itemState))
}
}
}
class MultiplayerPlayerWidget extends GridItem {
constructor(player: Player) {
super();
addSplitText(
this.layout,
player.name,
player.host + ':' + player.port,
0
)
}
}
class MultiplayerPageWidget extends ScrollPanel {
constructor() {
super();
network.on('change', () => {
this.refill();
})
}
fill(): void {
for(const player of network.players) {
this.addWidget(new MultiplayerPlayerWidget(player))
}
}
}
class DebugPageWidget extends ScrollPanel {
constructor() {
super();
}
fill(): void {
const reload = new QPushButton();
reload.setText('Reload');
reload.addEventListener('clicked', this.reload.bind(this))
this.addWidget(reload);
}
private reload() {
ProcessManager.restart();
}
}
class TimeControl extends GridItem {
pauseButton: QPushButton;
normalSpeedButton: QPushButton;
turboSpeedButton: QPushButton;
extremeSpeedButton: QPushButton;
NORMAL = 60;
TURBO = 180;
EXTREME = 360;
constructor() {
super();
this.pauseButton = new QPushButton();
this.pauseButton.setText('❚❚');
this.normalSpeedButton = new QPushButton();
this.normalSpeedButton.setText('❯');
this.turboSpeedButton = new QPushButton();
this.turboSpeedButton.setText('❯'.repeat(2));
this.extremeSpeedButton = new QPushButton();
this.extremeSpeedButton.setText('❯'.repeat(3));
this.layout.addWidget(this.pauseButton, 0, 0);
this.layout.addWidget(this.normalSpeedButton, 0, 1);
this.layout.addWidget(this.turboSpeedButton, 0, 2);
this.layout.addWidget(this.extremeSpeedButton, 0, 3);
this.updateButtons();
this.pauseButton.addEventListener('clicked', () => {
Game.current.clock.pause();
this.updateButtons();
});
this.normalSpeedButton.addEventListener('clicked', () => {
if(Game.current.clock.paused) Game.current.clock.resume();
Game.current.clock.targetTPS = this.NORMAL;
this.updateButtons();
});
this.turboSpeedButton.addEventListener('clicked', () => {
if(Game.current.clock.paused) Game.current.clock.resume();
Game.current.clock.targetTPS = this.TURBO;
this.updateButtons();
});
this.extremeSpeedButton.addEventListener('clicked', () => {
if(Game.current.clock.paused) Game.current.clock.resume();
Game.current.clock.targetTPS = this.EXTREME;
this.updateButtons();
});
}
updateButtons() {
const update = (a: boolean, b: boolean, c: boolean, d: boolean) => {
this.pauseButton.setEnabled(a);
this.normalSpeedButton.setEnabled(b);
this.turboSpeedButton.setEnabled(c);
this.extremeSpeedButton.setEnabled(d);
}
if(Game.current) {
if(Game.current.clock.paused) return update(false, true, true, true);
if(Game.current.clock.targetTPS === this.NORMAL) return update(true, false, true, true);
if(Game.current.clock.targetTPS === this.TURBO) return update(true, true, false, true);
if(Game.current.clock.targetTPS === this.EXTREME) return update(true, true, true, false);
} else {
update(false, false, false, false);
}
}
}

97
src/qt/TimeControl.ts 100644
View File

@ -0,0 +1,97 @@
import { Game } from '@game';
import { QLabel, AlignmentFlag, QPushButton } from '@nodegui/nodegui';
import { GridItem } from './CustomWidgets.js';
export class TimeControl extends GridItem {
pauseButton: QPushButton;
normalSpeedButton: QPushButton;
turboSpeedButton: QPushButton;
extremeSpeedButton: QPushButton;
NORMAL = 60;
TURBO = 180;
EXTREME = 360;
constructor() {
super();
this.pauseButton = new QPushButton();
this.pauseButton.setText('❚❚');
this.normalSpeedButton = new QPushButton();
this.normalSpeedButton.setText('❯');
this.turboSpeedButton = new QPushButton();
this.turboSpeedButton.setText('❯'.repeat(2));
this.extremeSpeedButton = new QPushButton();
this.extremeSpeedButton.setText('❯'.repeat(3));
this.layout.addWidget(this.pauseButton, 0, 0);
this.layout.addWidget(this.normalSpeedButton, 0, 1);
this.layout.addWidget(this.turboSpeedButton, 0, 2);
this.layout.addWidget(this.extremeSpeedButton, 0, 3);
this.updateButtons();
this.pauseButton.addEventListener('clicked', () => {
Game.current.clock.pause();
this.updateButtons();
});
this.normalSpeedButton.addEventListener('clicked', () => {
if (Game.current.clock.paused)
Game.current.clock.resume();
Game.current.clock.targetTPS = this.NORMAL;
this.updateButtons();
});
this.turboSpeedButton.addEventListener('clicked', () => {
if (Game.current.clock.paused)
Game.current.clock.resume();
Game.current.clock.targetTPS = this.TURBO;
this.updateButtons();
});
this.extremeSpeedButton.addEventListener('clicked', () => {
if (Game.current.clock.paused)
Game.current.clock.resume();
Game.current.clock.targetTPS = this.EXTREME;
this.updateButtons();
});
}
updateButtons() {
const update = (a: boolean, b: boolean, c: boolean, d: boolean) => {
this.pauseButton.setEnabled(a);
this.normalSpeedButton.setEnabled(b);
this.turboSpeedButton.setEnabled(c);
this.extremeSpeedButton.setEnabled(d);
};
if (Game.current) {
if (Game.current.clock.paused)
return update(false, true, true, true);
if (Game.current.clock.targetTPS === this.NORMAL)
return update(true, false, true, true);
if (Game.current.clock.targetTPS === this.TURBO)
return update(true, true, false, true);
if (Game.current.clock.targetTPS === this.EXTREME)
return update(true, true, true, false);
} else {
update(false, false, false, false);
}
}
}
export class TimeLabel extends QLabel {
constructor() {
super();
this.setAlignment(AlignmentFlag.AlignRight | AlignmentFlag.AlignVCenter);
setInterval(() => {
this.setText(Game.current.clock.toString());
}, 100);
}
}

24
src/qt/Util.ts 100644
View File

@ -0,0 +1,24 @@
import { AlignmentFlag, QGridLayout, QLabel } from "@nodegui/nodegui";
export function addSplitText(layout: QGridLayout, left: string, right: string, row: number) {
layout.setSpacing(0);
const nameLabel = new QLabel();
nameLabel.setText(left);
nameLabel.setAlignment(AlignmentFlag.AlignLeft | AlignmentFlag.AlignTop);
// nameLabel.setInlineStyle('padding: 0px; margin: 0px;');
const activityLabel = new QLabel();
activityLabel.setText(right);
activityLabel.setAlignment(AlignmentFlag.AlignRight | AlignmentFlag.AlignTop);
// activityLabel.setInlineStyle('padding: 0px; margin: 0px;');
layout.addWidget(nameLabel, row, 0, 1, 1);
layout.addWidget(activityLabel, row, 1, 1, 1);
layout.setRowStretch(row, 1);
// in theory this is redundant, calling this
// function on the same layout multiple times...
layout.setColumnStretch(0, 1);
layout.setColumnStretch(1, 1);
}

21
src/qt/pages/DebugPage.ts 100644
View File

@ -0,0 +1,21 @@
import { QPushButton } from "@nodegui/nodegui";
import { ProcessManager } from "../../ProcessManager.js";
import { ScrollPanel } from "../CustomWidgets.js";
export class DebugPage extends ScrollPanel {
constructor() {
super();
}
fill(): void {
const reload = new QPushButton();
reload.setText('Reload');
reload.addEventListener('clicked', this.reload.bind(this))
this.addWidget(reload);
}
private reload() {
ProcessManager.restart();
}
}

26
src/qt/pages/InventoryPage.ts 100644
View File

@ -0,0 +1,26 @@
import { Game } from "@game";
import { ItemState } from "@items";
import { GridItem, ScrollPanel } from "../CustomWidgets";
import { addSplitText } from "../Util";
export class InventoryPage extends ScrollPanel {
fill() {
for(const itemState of Game.current.inv.items) {
this.addWidget(new ItemWidget(itemState))
}
}
}
class ItemWidget extends GridItem {
constructor(itemState: ItemState<unknown>) {
super();
addSplitText(
this.layout,
itemState.name,
'' + (itemState.qty),
0
);
}
}

31
src/qt/pages/MultipayerPage.ts 100644
View File

@ -0,0 +1,31 @@
import network from "../../multiplayer/mDNS";
import { Player } from "../../multiplayer/Player";
import { GridItem, ScrollPanel } from "../CustomWidgets";
import { addSplitText } from "../Util";
class MultiplayerPlayerWidget extends GridItem {
constructor(player: Player) {
super();
addSplitText(
this.layout,
player.name,
player.host + ':' + player.port,
0
)
}
}
export class MultiplayerPage extends ScrollPanel {
constructor() {
super();
network.on('change', () => {
this.refill();
})
}
fill(): void {
for(const player of network.players) {
this.addWidget(new MultiplayerPlayerWidget(player))
}
}
}

4
src/qt/pages/Pages.ts 100644
View File

@ -0,0 +1,4 @@
export { PawnsPage } from './PawnsPage.js';
export { InventoryPage } from './InventoryPage.js';
export { MultiplayerPage } from './MultipayerPage.js';
export { DebugPage } from './DebugPage.js'

52
src/qt/pages/PawnsPage.ts 100644
View File

@ -0,0 +1,52 @@
import { Game } from "@game";
import { Pawn } from "../../Pawn";
import { GridItem, ScrollPanel } from "../CustomWidgets";
import { addSplitText } from "../Util";
export class PawnsPage extends ScrollPanel {
fill() {
for(const pawn of Game.current.pawns) {
this.addWidget(new PawnWidget(pawn));
}
}
}
class PawnWidget extends GridItem {
constructor(pawn: Pawn) {
super();
addSplitText(
this.layout,
pawn.name.first + ' ' + pawn.name.last,
pawn.status,
0
);
}
}
// TODO remove later, when i know i dont need it
// class PawnPageWidget extends QListWidget {
// constructor() {
// super();
// for (const pawn of Game.current.pawns) {
// const pawnWidget = new PawnWidget(pawn);
// const item = new QListWidgetItem();
// this.addItem(item);
// this.setItemWidget(item, pawnWidget);
// }
// }
// }
// class PawnPageWidget extends QWidget {
// constructor() {
// super();
// this.setLayout(new QBoxLayout(Direction.TopToBottom));
// // this.setLayout(new FlexLayout());
// for(const pawn of Game.current.pawns) {
// this.layout.addWidget(new PawnWidget(pawn));
// }
// }
// }