Skip to content

Commit c8c0a49

Browse files
KierPalinKierPalin
committed
guiComponent.ts: documentation
1 parent 7eb0a43 commit c8c0a49

1 file changed

Lines changed: 99 additions & 62 deletions

File tree

‎guiComponents.ts‎

Lines changed: 99 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
namespace microcode {
2+
3+
/**
4+
* Util function used within this file, useful for ensuring that prior bindings are not kept when using a new component.
5+
*/
26
function unbindShieldButtons() {
37
control.onEvent(ControllerButtonEvent.Pressed, controller.A.id, () => { })
48
control.onEvent(ControllerButtonEvent.Pressed, controller.A.id + keymap.PLAYER_OFFSET, () => { })
@@ -33,31 +37,48 @@ namespace microcode {
3337
* A GUI Component has a .context for storage of hidden component state.
3438
*/
3539
abstract class GUIComponentAbstract extends Scene {
36-
public static DEFAULT_WIDTH: number = screen().width >> 1;
37-
public static DEFAULT_HEIGHT: number = screen().height >> 1;
38-
40+
/** Which of the 9 options should this component snap to? */
41+
private alignment: GUIComponentAlignment
42+
43+
/** What is the width of this component, without any xScaling? */
44+
private unscaledWidth: number;
45+
46+
/** What is the height of this component, without any yScaling? */
47+
private unscaledHeight: number;
48+
49+
/**
50+
* Can the user interact with this component? Will the Window ignore its A, B, etc presses?
51+
* Modified by Window.makeComponentActive()
52+
*/
3953
protected isActive: boolean;
54+
55+
/** Should this component be drawn on the screen? Modified by optional arg of Window.makeComponentActive() */
4056
protected isHidden: boolean;
4157

58+
/** A component can store arbitrary information, this information may be passed to it via Window.updateComponentsContext() */
4259
protected context: any[];
4360

61+
/** The rectangle that this component embodies. The width & height are equal to DEFAULT_WIDTH * this.xScaling. */
4462
protected bounds: Bounds;
4563
protected backgroundColour: number = 3;
4664

47-
private alignment: GUIComponentAlignment
65+
/** Modifies the DEFAULT_WIDTH of this screen to change its size. */
4866
private xScaling: number = 1.0;
67+
68+
/** Modifies the DEFAULT_HEIGHT of this screen to change its size. */
4969
private yScaling: number = 1.0;
5070

71+
/** For minor tweaks to positioning of this.alignment. Modifies this.bounds.left */
5172
private xOffset: number;
73+
74+
/** For minor tweaks to positioning of this.alignment. Modifies this.bounds.top */
5275
private yOffset: number;
53-
private unscaledComponentWidth: number;
54-
private unscaledComponentHeight: number;
76+
77+
/** Does this component have coloured (shadowed) borders? */
5578
private hasBorder: boolean
5679

5780
constructor(opts: {
5881
alignment: GUIComponentAlignment,
59-
width: number,
60-
height: number,
6182
isActive: boolean,
6283
isHidden?: boolean,
6384
xOffset?: number,
@@ -84,79 +105,58 @@ namespace microcode {
84105
this.xOffset = (opts.xOffset != null) ? opts.xOffset : 0
85106
this.yOffset = (opts.yOffset != null) ? opts.yOffset : 0
86107

87-
this.unscaledComponentWidth = opts.width
88-
this.unscaledComponentHeight = opts.height
108+
this.unscaledWidth = screen().width >> 1
109+
this.unscaledHeight = screen().height >> 1
89110
this.hasBorder = (opts.border != null) ? opts.border : false
90111

91112
const pos = this.getLeftAndTop()
92113
const left = pos[0];
93114
const top = pos[1];
94115

95116
this.bounds = new microcode.Bounds({
96-
width: this.unscaledComponentWidth * this.xScaling,
97-
height: this.unscaledComponentHeight * this.yScaling,
117+
width: this.unscaledWidth * this.xScaling,
118+
height: this.unscaledHeight * this.yScaling,
98119
left,
99120
top
100121
})
101122
}
102123

103-
public get width() { return this.unscaledComponentWidth * this.xScaling }
104-
public get height() { return this.unscaledComponentHeight * this.yScaling }
105-
public get active() { return this.isActive }
106-
public get hidden() { return this.isHidden }
107-
108-
makeActive(): void { this.isActive = true }
109-
unmakeActive(): void { this.isActive = false }
110-
111-
hide(): void { this.isHidden = true }
112-
unHide(): void { this.isHidden = false }
113-
114-
getAlignment(): number { return this.alignment }
115-
116-
/**
117-
* This should be overriden.
118-
* Other components should use this to get this components state.
119-
* @returns pertinent component state information, in appropriate format; at child components discretion.
120-
*/
121-
getContext(): any[] {return this.context}
122-
123-
addContext(newContext: any[]) {this.context.push(newContext)}
124-
125-
clearContext(): void { this.context = [] }
126-
setBounds(bounds: Bounds): void { this.bounds = bounds }
127-
128-
getLeftAndTop(): number[] {
124+
//------------------
125+
// Helper functions:
126+
//------------------
127+
128+
private getLeftAndTop(): number[] {
129129
let left = 0
130130
let top = 0
131131

132132
switch (this.alignment) {
133133
case (GUIComponentAlignment.TOP): {
134-
left = -((this.unscaledComponentWidth * this.xScaling) >> 1) + this.xOffset;
134+
left = -((this.unscaledWidth * this.xScaling) >> 1) + this.xOffset;
135135
top = -(screen().height >> 1) + this.yOffset;
136136
break;
137137
}
138138
case (GUIComponentAlignment.LEFT): {
139139
left = -(screen().width >> 1) + this.xOffset;
140-
top = -((this.unscaledComponentHeight * this.yScaling) >> 1) + this.yOffset
140+
top = -((this.unscaledHeight * this.yScaling) >> 1) + this.yOffset
141141
break;
142142
}
143143
case (GUIComponentAlignment.RIGHT): {
144-
left = (screen().width >> 1) - (this.unscaledComponentWidth * this.xScaling) + this.xOffset;
145-
top = -((this.unscaledComponentHeight * this.yScaling) >> 1) + this.yOffset
144+
left = (screen().width >> 1) - (this.unscaledWidth * this.xScaling) + this.xOffset;
145+
top = -((this.unscaledHeight * this.yScaling) >> 1) + this.yOffset
146146
break;
147147
}
148148
case (GUIComponentAlignment.BOT): {
149-
left = -((this.unscaledComponentWidth * this.xScaling) >> 1) + this.xOffset;
150-
top = (screen().height >> 1) - (this.unscaledComponentHeight * this.yScaling) - this.yOffset;
149+
left = -((this.unscaledWidth * this.xScaling) >> 1) + this.xOffset;
150+
top = (screen().height >> 1) - (this.unscaledHeight * this.yScaling) - this.yOffset;
151151
break;
152152
}
153153
case (GUIComponentAlignment.CENTRE): {
154-
left = -((this.unscaledComponentWidth * this.xScaling) >> 1) + this.xOffset
155-
top = -((this.unscaledComponentHeight * this.yScaling) >> 1) + this.yOffset
154+
left = -((this.unscaledWidth * this.xScaling) >> 1) + this.xOffset
155+
top = -((this.unscaledHeight * this.yScaling) >> 1) + this.yOffset
156156
break;
157157
}
158158
case (GUIComponentAlignment.TOP_RIGHT): {
159-
left = ((screen().width >> 1) - (this.unscaledComponentWidth * this.xScaling)) + this.xOffset;
159+
left = ((screen().width >> 1) - (this.unscaledWidth * this.xScaling)) + this.xOffset;
160160
top = -(screen().height >> 1) + this.yOffset;
161161
break;
162162
}
@@ -166,34 +166,49 @@ namespace microcode {
166166
break;
167167
}
168168
case (GUIComponentAlignment.BOT_RIGHT): {
169-
left = ((screen().width >> 1) - (this.unscaledComponentWidth * this.xScaling)) + this.xOffset;
170-
top = (screen().height >> 1) - (this.unscaledComponentHeight * this.yScaling) - this.yOffset;
169+
left = ((screen().width >> 1) - (this.unscaledWidth * this.xScaling)) + this.xOffset;
170+
top = (screen().height >> 1) - (this.unscaledHeight * this.yScaling) - this.yOffset;
171171
break;
172172
}
173173
case (GUIComponentAlignment.BOT_LEFT): {
174174
left = (-(screen().width >> 1)) + this.xOffset;
175-
top = (screen().height >> 1) - (this.unscaledComponentHeight * this.yScaling) - this.yOffset;
175+
top = (screen().height >> 1) - (this.unscaledHeight * this.yScaling) - this.yOffset;
176176
break;
177177
}
178178
}
179179

180180
return [left, top]
181181
}
182182

183-
rescale(xScaling: number, yScaling: number): void {
183+
184+
//-------------------------
185+
// Public facing functions:
186+
//-------------------------
187+
188+
189+
/**
190+
* Adjusts .xScaling & .yScaling, then this.bounds() as appropriate.
191+
* @param xScaling 1.0 is default; affects this.bounds.width: width = (this.xScaling * this.unscaledWidth)
192+
* @param yScaling 1.0 is default; affects this.bounds.height: height = (this.yScaling * this.unscaledHeight)
193+
*/
194+
public rescale(xScaling: number, yScaling: number): void {
184195
if (this.bounds != null) {
185196
this.xScaling = xScaling
186197
this.yScaling = yScaling
187198
this.bounds = new microcode.Bounds({
188-
width: this.unscaledComponentWidth * this.xScaling,
189-
height: this.unscaledComponentHeight * this.yScaling,
199+
width: this.unscaledWidth * this.xScaling,
200+
height: this.unscaledHeight * this.yScaling,
190201
left: this.bounds.left,
191202
top: this.bounds.top
192203
})
193204
}
194205
}
206+
195207

196-
draw(): void {
208+
/**
209+
* Invoked by parent, see Window.
210+
*/
211+
public draw(): void {
197212
screen().fillRect(
198213
this.bounds.left + (screen().width >> 1) + 2,
199214
this.bounds.top + (screen().height >> 1) + 2,
@@ -204,8 +219,38 @@ namespace microcode {
204219

205220
this.bounds.fillRect(this.backgroundColour)
206221
}
222+
223+
224+
public get width() { return this.unscaledWidth * this.xScaling }
225+
public get height() { return this.unscaledHeight * this.yScaling }
226+
public get active() { return this.isActive }
227+
public get hidden() { return this.isHidden }
228+
229+
public getAlignment(): number { return this.alignment }
230+
public makeActive(): void { this.isActive = true }
231+
public unmakeActive(): void { this.isActive = false }
232+
233+
public hide(): void { this.isHidden = true }
234+
public unHide(): void { this.isHidden = false }
235+
236+
/**
237+
* This should be overriden.
238+
* Other components should use this to get this components state.
239+
* @returns pertinent component state information, in appropriate format; at child components discretion.
240+
*/
241+
public getContext(): any[] {return this.context}
242+
243+
public addContext(newContext: any[]) {this.context.push(newContext)}
244+
245+
public clearContext(): void { this.context = [] }
246+
247+
public setBounds(bounds: Bounds): void { this.bounds = bounds }
207248
}
208249

250+
251+
/**
252+
* Component that contains a Title + a chunk of text.
253+
*/
209254
export class TextBox extends GUIComponentAbstract {
210255
private title: string;
211256
private maxCharactersPerLine: number;
@@ -230,8 +275,6 @@ namespace microcode {
230275
yOffset: (opts.yOffset != null) ? opts.yOffset : 0,
231276
isActive: opts.isActive,
232277
isHidden: opts.isHidden,
233-
width: TextBox.DEFAULT_WIDTH,
234-
height: TextBox.DEFAULT_HEIGHT,
235278
xScaling: opts.xScaling,
236279
yScaling: opts.yScaling,
237280
colour: opts.colour,
@@ -546,8 +589,6 @@ namespace microcode {
546589
isHidden: opts.isHidden,
547590
xOffset: (opts.xOffset != null) ? opts.xOffset : 0,
548591
yOffset: (opts.yOffset != null) ? opts.yOffset : 0,
549-
width: TextBox.DEFAULT_WIDTH,
550-
height: TextBox.DEFAULT_HEIGHT,
551592
xScaling: opts.xScaling,
552593
yScaling: opts.yScaling,
553594
colour: opts.colour
@@ -965,8 +1006,6 @@ namespace microcode {
9651006
alignment: opts.alignment,
9661007
xOffset: (opts.xOffset != null) ? opts.xOffset : 0,
9671008
yOffset: (opts.yOffset != null) ? opts.yOffset : 0,
968-
width: GUIComponentAbstract.DEFAULT_WIDTH,
969-
height: GUIComponentAbstract.DEFAULT_HEIGHT,
9701009
isActive: opts.isActive,
9711010
isHidden: opts.isHidden,
9721011
xScaling: opts.xScaling,
@@ -1175,8 +1214,6 @@ namespace microcode {
11751214
alignment: opts.alignment,
11761215
xOffset: (opts.xOffset != null) ? opts.xOffset : 0,
11771216
yOffset: (opts.yOffset != null) ? opts.yOffset : 0,
1178-
width: TextBox.DEFAULT_WIDTH,
1179-
height: TextBox.DEFAULT_HEIGHT,
11801217
isActive: opts.isActive,
11811218
isHidden: opts.isHidden,
11821219
xScaling: opts.xScaling,

0 commit comments

Comments
 (0)