Skip to content

Commit 7713f3b

Browse files
mattlinkmattlink
committed
set up inventory system and corresponding menu elements
1 parent fd572b7 commit 7713f3b

File tree

8 files changed

+160
-36
lines changed

8 files changed

+160
-36
lines changed

‎src/Actions/PickupItemAction.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,10 @@ export class PickupItemAction extends Action {
1515

1616
let item = (<Item>world.getActiveRoom().getObject(this.actor.x, this.actor.y));
1717

18-
// TODO: add this item to player inventory
19-
this.actor.equipt = item;
18+
this.actor.inventory.push(item);
19+
20+
// If the actor had nothing else in their inventory, equip this item
21+
if (this.actor.inventory.length == 1) this.actor.equipt = item;
2022

2123
// replace the tile with floor (since the item is no longer on floor, but in player's inventory)
2224
world.getActiveRoom().objects[this.actor.x][this.actor.y] = new GameObject(this.actor.x, this.actor.y, world.getActiveRoom().floorTile);

‎src/Actors/Actor.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,14 @@ export abstract class Actor extends GameObject {
1313

1414
public equipt: Item;
1515

16+
public inventory: Item[];
17+
1618
public debug: boolean = false;
1719

1820
constructor(name: string, x: number, y: number, tile: Tile){
1921
super(x, y, tile);
2022
this.name = name;
23+
this.inventory = [];
2124
}
2225

2326
abstract takeTurn(world: World): void;

‎src/Systems/Menu/Menu.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,13 @@ export class MenuOption extends MenuElement {
2727
}
2828
}
2929

30+
export class MenuTable extends MenuElement {
31+
elements: any[];
32+
constructor() {
33+
super();
34+
}
35+
}
36+
3037
export class Menu {
3138
private width;
3239
private height;

‎src/Systems/Menu/MenuWindow.ts

Lines changed: 39 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Renderer } from '../renderer';
22
import { Window } from '../window';
3-
import { Menu, MenuTitle, MenuOption } from './Menu';
3+
import { Menu, MenuTitle, MenuOption, MenuTable } from './Menu';
44

55
// Think of Windows as rendering contexts
66

@@ -16,32 +16,32 @@ export class MenuWindow {
1616

1717
public bordered: boolean = false;
1818

19-
2019
private context: HTMLElement;
2120

22-
private rowCount: number;
2321
private menu: Menu;
2422

2523

26-
constructor(menu: Menu, rowCount: number, startX: number, startY: number, localWidth: number, localHeight: number) {
24+
constructor(menu: Menu, startX: number, startY: number, localWidth: number, localHeight: number) {
2725
this.startX = startX || -1;
2826
this.startY = startY || -1;
2927

3028
this.localWidth = localWidth;
3129
this.localHeight = localHeight;
3230

33-
this.rowCount = rowCount;
34-
35-
// if (startOptions) this.initContextStartMenu(startOptions);
36-
// else this.initContext();
3731
this.menu = menu;
3832
this.initMenuContext(this.menu);
39-
console.log('menu context init-ed', this.context.children);
4033
}
4134

4235
public getContext() {
4336
return this.context;
4437
}
38+
show() {
39+
this.context.style.display = 'block';
40+
}
41+
42+
hide() {
43+
this.context.style.display = 'none';
44+
}
4545

4646
private initMenuContext(menu: Menu) {
4747
this.context = document.createElement('div');
@@ -102,6 +102,36 @@ export class MenuWindow {
102102
child.id = 'menu-option';
103103
}
104104

105+
if (elem instanceof MenuTable) {
106+
child = document.createElement('table');
107+
child.style.margin = 'auto';
108+
child.style.border = '1px solid black';
109+
child.style.height = null;
110+
111+
let invLimit = 15;
112+
let row = document.createElement('tr');
113+
row.style.height = Renderer.pxs(Renderer.elementSize);
114+
row.style.width = Renderer.pxs(invLimit * Renderer.elementSize);
115+
116+
for (let i = 0; i < invLimit; i++) {
117+
let col = document.createElement('td');
118+
// col.style.border = '1px solid black';
119+
120+
let innerDiv = document.createElement('div');
121+
innerDiv.style.height = Renderer.pxs(Renderer.elementSize);
122+
innerDiv.style.width = Renderer.pxs(Renderer.elementSize);
123+
innerDiv.style.textAlign = 'center';
124+
innerDiv.innerHTML = '';
125+
126+
col.appendChild(innerDiv);
127+
row.appendChild(col);
128+
}
129+
130+
child.appendChild(row);
131+
132+
child.id = 'menu-table';
133+
}
134+
105135
console.log('trying to append child');
106136
this.context.appendChild(child);
107137

‎src/Systems/renderer.ts

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { Room } from "../Rooms/room";
66
import { Camera } from "./camera";
77
import { Menu } from "./Menu/Menu";
88
import { MenuWindow } from "./Menu/MenuWindow";
9-
import { MenuTitle, MenuOption } from "./Menu/Menu";
9+
import { MenuTitle, MenuOption, MenuTable } from "./Menu/Menu";
1010

1111
export class Renderer {
1212

@@ -30,13 +30,11 @@ export class Renderer {
3030
for (let i = 0; i < menu.elements.length; i++) {
3131
// MenuTitle
3232
if (menu.elements[i] instanceof MenuTitle) {
33-
// if((<HTMLElement>context.children[i]).id == 'menu-title') {
3433
(<HTMLElement>context.children[i]).innerHTML = (<MenuTitle>menu.elements[i]).title;
3534
}
3635

3736
// MenuOption
3837
if(menu.elements[i] instanceof MenuOption) {
39-
// if ((<HTMLElement>context.children[i]).id == 'menu-option') {
4038
if (i == menu.selectedElement) {
4139
(<HTMLElement>context.children[i]).innerHTML = (<MenuOption>menu.elements[i]).name;
4240
(<HTMLElement>context.children[i]).style.backgroundColor = menu.defaultSelectedBg;
@@ -50,6 +48,16 @@ export class Renderer {
5048
(<HTMLElement>context.children[i]).style.border = 'none';
5149
}
5250
}
51+
52+
// MenuTable
53+
if (menu.elements[i] instanceof MenuTable) {
54+
for (let j = 0; j < (<MenuTable>menu.elements[i]).elements.length; j++) {
55+
// context.children[i] -> MenuTable, .children[0] -> tr, .children[j] -> td, .children[0] -> inner Div
56+
(<HTMLElement>context.children[i].children[0].children[j].children[0]).innerHTML = (<MenuTable>menu.elements[i]).elements[j].tile.ascii;
57+
(<HTMLElement>context.children[i].children[0].children[j].children[0]).style.color = (<MenuTable>menu.elements[i]).elements[j].tile.fg;
58+
(<HTMLElement>context.children[i].children[0].children[j].children[0]).style.backgroundColor = (<MenuTable>menu.elements[i]).elements[j].tile.bg;
59+
}
60+
}
5361
}
5462
}
5563

‎src/Systems/window.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,11 +43,11 @@ export class Window {
4343
}
4444

4545
show() {
46-
46+
this.context.style.display = 'flex';
4747
}
4848

4949
hide() {
50-
50+
this.context.style.display = 'none';
5151
}
5252

5353
private initContext(tiles: Tile[][]) {

‎src/main.ts

Lines changed: 89 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,26 +4,47 @@ import { World } from "./world";
44
import { Window } from './Systems/window';
55
import { Renderer } from "./Systems/renderer";
66
import { Player } from "./Actors/Player";
7+
import { IO } from "./Systems/io";
8+
import { Menu, MenuTitle, MenuTable } from './Systems/Menu/Menu';
79

8-
import * as jsonConfig from "./room.json";
910
import * as worldConfig from "./world.json";
10-
import { IO } from "./Systems/io";
11-
console.log(jsonConfig);
11+
import { MenuWindow } from "./Systems/Menu/MenuWindow";
12+
13+
enum GameState {
14+
Play,
15+
Menu
16+
}
1217

1318
class ga extends Game {
1419

15-
1620
window: Window;
21+
22+
menuWindows: Record<string, MenuWindow> = {};
23+
menus: Record<string, Menu> = {};
24+
1725
renderer: Renderer;
1826

1927
world: World;
2028

29+
state: GameState;
30+
2131
load() {
32+
this.state = GameState.Play;
2233
this.world = Importer.importWorld(worldConfig);
2334

2435
this.window = new Window(-1, -1, this.world.getActiveRoom().getWidth(), this.world.getActiveRoom().getHeight(), this.world.getActiveRoom().getTiles());
36+
37+
// Create an inventory menu
38+
this.menus['inventory'] = new Menu(this.world.getActiveRoom().getWidth(), this.world.getActiveRoom().getHeight());
39+
this.menus['inventory'].addElement(new MenuTitle('Inventory'))
40+
this.menus['inventory'].addElement(new MenuTable());
41+
this.menuWindows['inventory'] = new MenuWindow(this.menus['inventory'], -1, -1, this.world.getActiveRoom().getWidth(), this.world.getActiveRoom().getHeight());
42+
this.menuWindows['inventory'].hide();
43+
2544
this.renderer = new Renderer();
2645
this.renderer.addWindow(this.window);
46+
this.renderer.addMenuWindow(this.menuWindows['inventory']);
47+
2748
this.renderer.renderRoom(this.world.getActiveRoom(), this.window.getContext());
2849

2950
this.world.getActiveRoom().getActors().forEach(actor => {
@@ -36,23 +57,76 @@ class ga extends Game {
3657
}
3758

3859
update(key: string) {
39-
this.world.getPlayer().receiveKeyInput(key);
40-
this.world.takeTurn();
60+
61+
if (this.state == GameState.Menu) {
62+
if (!(IO.validMenuControls.indexOf(key) > -1)) return;
63+
64+
// switch state back to playing
65+
if (key == 'Escape') {
66+
67+
// hide the menu window
68+
this.menuWindows['inventory'].hide();
69+
70+
// show the game window
71+
this.window.show();
72+
73+
this.state = GameState.Play;
74+
console.log('state changing to play');
75+
return;
76+
}
77+
78+
79+
}
80+
81+
82+
if (this.state == GameState.Play) {
83+
84+
if (!(IO.validGameControls.indexOf(key) > -1)) return;
85+
86+
// switch state to "viewing inventory"
87+
if (key == 'i') {
88+
// hide the game window
89+
this.window.hide();
90+
91+
// show the inventory menu
92+
this.menuWindows['inventory'].show();
93+
94+
this.state = GameState.Menu;
95+
96+
console.log('state changing to menu');
97+
return;
98+
}
99+
100+
this.world.getPlayer().receiveKeyInput(key);
101+
this.world.takeTurn();
102+
}
41103
}
42104

43105
draw() {
44106

45-
this.renderer.renderRoom(this.world.getActiveRoom(), this.window.getContext());
107+
if (this.state == GameState.Menu) {
108+
// locate the menu that we should be viewing (inventory, pause, etc)
109+
console.log("DRAWING MENU STATE");
110+
(<MenuTable>this.menus['inventory'].elements[1]).elements = this.world.getPlayer().inventory;
111+
this.renderer.renderMenu(this.menus['inventory'], this.menuWindows['inventory'].getContext());
112+
}
46113

47-
// Draw everything /around/ each actor
48-
this.world.getActiveRoom().getActors().forEach(actor => {
49-
this.renderer.renderObjectContext(actor, this.world.getActiveRoom(), this.window.getContext());
50-
});
51114

52-
// Draw every actor (this drawing order makes sure actors contexts don't render over eachother)
53-
this.world.getActiveRoom().getActors().forEach(actor => {
54-
this.renderer.updateGameObject(actor, this.window.getContext());
55-
});
115+
if (this.state == GameState.Play) {
116+
console.log('DRAWING GAME STATE');
117+
this.renderer.renderRoom(this.world.getActiveRoom(), this.window.getContext());
118+
119+
// Draw everything /around/ each actor
120+
this.world.getActiveRoom().getActors().forEach(actor => {
121+
this.renderer.renderObjectContext(actor, this.world.getActiveRoom(), this.window.getContext());
122+
});
123+
124+
// Draw every actor (this drawing order makes sure actors contexts don't render over eachother)
125+
this.world.getActiveRoom().getActors().forEach(actor => {
126+
this.renderer.updateGameObject(actor, this.window.getContext());
127+
});
128+
}
129+
56130
}
57131
}
58132

‎src/world.json

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,18 @@
55
"name": "Cave",
66

77
"BSPIterations": 0,
8-
"CAIterations": 5,
8+
"CAIterations": 10,
99

10-
"width": 40,
10+
"width": 60,
1111
"height": 25,
1212
"floorTile": {
1313
"ascii": ".",
14-
"fg": "brown",
14+
"fg": "white",
1515
"bg": "black"
1616
},
1717
"wallTile": {
18-
"ascii": "C",
19-
"fg": "red",
18+
"ascii": "#",
19+
"fg": "green",
2020
"bg": "black"
2121
},
2222

0 commit comments

Comments
 (0)