This repository has been archived on 2022-01-16. You can view files and clone it, but cannot push or open issues or pull requests.
irreligious/src/render/DebugRenderer.ts

170 lines
6.2 KiB
TypeScript
Raw Normal View History

2021-08-21 21:06:29 -05:00
/// <reference path="../model/logging/DebugLogger.ts" />
2021-09-05 14:45:37 -05:00
class DebugRenderer implements IRenderer {
2021-09-04 22:21:14 -05:00
private _initialized = false;
private _handleClick = true;
public render (state: GameState): void {
2021-08-22 13:08:41 -05:00
const rkeys: string[] = state.getResources();
2021-09-05 14:45:37 -05:00
const container = document.getElementById('irreligious-game');
2021-08-21 09:22:11 -05:00
if (!this._initialized) {
2021-09-05 14:45:37 -05:00
if (container === null) {
console.error('could not find game container');
return;
}
2021-08-21 09:22:11 -05:00
this._initialized = true;
state.onResourceClick.push((): void => {
this._handleClick = true;
});
2021-09-05 14:45:37 -05:00
const style = document.createElement('link');
2021-08-21 09:22:11 -05:00
style.setAttribute('rel', 'stylesheet');
style.setAttribute('href', 'css/debugger.css');
2021-09-05 14:45:37 -05:00
const head = document.getElementsByTagName('head')[0];
2021-08-21 09:22:11 -05:00
head.appendChild(style);
2021-08-21 21:06:29 -05:00
// create resource area and logging area
2021-09-05 14:45:37 -05:00
const resDiv = document.createElement('div');
2021-08-21 21:06:29 -05:00
resDiv.id = 'resource-section';
container.appendChild(resDiv);
2021-09-05 14:45:37 -05:00
const logDiv = document.createElement('div');
2021-08-21 21:06:29 -05:00
logDiv.id = 'logging-section';
container.appendChild(logDiv);
2021-09-05 14:45:37 -05:00
const logContent = document.createElement('div');
2021-08-21 21:06:29 -05:00
logDiv.appendChild(logContent);
state.logger = new DebugLogger(logContent);
2021-08-21 09:22:11 -05:00
// create containers for each resource type
for (const item in ResourceType) {
2021-08-21 19:02:57 -05:00
if (isNaN(Number(item))) {
2021-09-05 14:45:37 -05:00
const el = document.createElement('div');
el.id = `resource-container-${item.toString()}`;
2021-08-21 09:22:11 -05:00
el.className = 'resource-type-container';
2021-08-21 21:06:29 -05:00
resDiv.appendChild(el);
2021-08-21 09:22:11 -05:00
}
}
2021-08-22 13:08:41 -05:00
// create containers for each resource
for (const rkey of rkeys) {
const resource: IResource = state.getResource(rkey);
2021-09-05 14:45:37 -05:00
const resContainer = document.getElementById(
`resource-container-${resource.resourceType}`);
if (resContainer === null) continue;
const el = document.createElement('div');
2021-08-22 13:08:41 -05:00
el.className = 'resource locked';
el.id = `resource-details-${rkey}`;
2021-09-04 22:21:14 -05:00
let content = `
2021-08-22 13:08:41 -05:00
<span class='resource-title'
title='${this._escape(resource.description)}'>
2021-09-05 14:45:37 -05:00
${this._escape(resource.name)}</span><br>
2021-08-22 13:08:41 -05:00
<span class='resource-value'></span>
<span class='resource-max'></span>
<span class='resource-inc'></span>
`;
2021-09-05 14:45:37 -05:00
if (resource.clickText !== null && resource.clickDescription !== null) {
2021-08-22 13:08:41 -05:00
content += `<br>
<button class='resource-btn'
title='${this._escape(resource.clickDescription)}'>
${this._escape(resource.clickText)}</button>`;
}
if (resource.cost !== null
&& Object.keys(resource.cost).length !== 0) {
content += "<br>Cost: <span class='resource-cost'></span>";
}
el.innerHTML = content;
resContainer.appendChild(el);
if (resource.clickAction !== null) {
const btn: Element =
el.getElementsByClassName('resource-btn')[0];
2021-09-05 14:45:37 -05:00
btn.addEventListener('click', (): void => {
state.performClick(rkey);
});
2021-08-22 13:08:41 -05:00
}
}
2021-08-22 13:48:48 -05:00
// create tools footer
2021-09-05 14:45:37 -05:00
const footer = document.createElement('div');
2021-08-22 13:48:48 -05:00
footer.className = 'footer';
footer.innerHTML = `
<button id='dbg-btn-reset'>Reset Game</button>
`;
resDiv.appendChild(footer);
2021-09-05 14:45:37 -05:00
document.getElementById('dbg-btn-reset')?.addEventListener('click',
(): void => {
2021-08-22 13:48:48 -05:00
state.reset();
2021-09-05 14:45:37 -05:00
container.innerHTML = '';
2021-08-22 14:29:49 -05:00
this._initialized = false;
2021-08-22 13:48:48 -05:00
});
2021-08-21 09:22:11 -05:00
}
for (const rkey of rkeys) {
const resource: IResource = state.getResource(rkey);
2021-09-05 14:45:37 -05:00
const el = document.getElementById(`resource-details-${rkey}`);
if (el !== null && resource.isUnlocked(state)) {
2021-08-22 13:08:41 -05:00
if (el.className !== 'resource') el.className = 'resource';
const elV: Element =
el.getElementsByClassName('resource-value')[0];
const elT: Element =
el.getElementsByClassName('resource-max')[0];
2021-08-22 11:07:49 -05:00
const value: number = resource.valueInWholeNumbers
? Math.floor(resource.value)
: resource.value;
elV.innerHTML = state.formatNumber(value);
2021-08-21 12:45:58 -05:00
elT.innerHTML = resource.max !== null
? ` / ${state.formatNumber(resource.max(state))}`
: '';
2021-08-21 21:06:29 -05:00
const elB: HTMLCollectionOf<Element> =
el.getElementsByClassName('resource-btn');
if (elB.length > 0) {
const enabled: boolean = state.isPurchasable(resource.cost)
2021-09-05 14:45:37 -05:00
&& (resource.max === null || resource.value < resource.max(state));
2021-08-21 21:06:29 -05:00
if (enabled) elB[0].removeAttribute('disabled');
else elB[0].setAttribute('disabled', 'disabled');
}
2021-08-22 13:48:48 -05:00
if (resource.inc !== null && resource.inc(state) > 0) {
const elI: Element =
el.getElementsByClassName('resource-inc')[0];
elI.innerHTML =
` +${state.formatNumber(resource.inc(state))}/s`;
}
2021-08-21 09:22:11 -05:00
if (this._handleClick) {
const elC: HTMLCollectionOf<Element> =
el.getElementsByClassName('resource-cost');
2021-08-21 09:22:11 -05:00
if (elC.length > 0) {
2021-08-21 19:02:57 -05:00
elC[0].innerHTML = this._getCostStr(resource, state);
}
}
2021-08-22 13:48:48 -05:00
} else {
2021-09-05 14:45:37 -05:00
if (el !== null && el.className !== 'resource locked')
2021-08-22 13:48:48 -05:00
el.className = 'resource locked';
}
}
2021-08-21 09:22:11 -05:00
this._handleClick = false;
}
2021-08-21 19:02:57 -05:00
private _escape (text: string): string {
const escapes: { [key: string]: string } = {
'&': '&amp;',
'<': '&lt;',
'>': '&gt;',
'"': '&quot;',
"'": '&#x27;',
2021-09-05 14:45:37 -05:00
'/': '&#x2F;',
};
2021-09-04 22:21:14 -05:00
const escaper = /[&<>"'/]/g;
2021-08-21 19:02:57 -05:00
return text.replace(escaper, (match: string): string =>
escapes[match]);
}
private _getCostStr (resource: IResource, state: GameState): string {
2021-09-04 22:21:14 -05:00
let cost = '';
2021-09-05 14:45:37 -05:00
if (resource.cost !== null) {
for (const rkey of state.getResources()) {
if (isNaN(resource.cost[rkey])) continue;
if (cost !== '') cost += ', ';
if (rkey === 'money') {
2021-08-21 12:45:58 -05:00
cost += `$${state.formatNumber(resource.cost[rkey])}`;
} else {
2021-08-21 12:45:58 -05:00
cost += `${state.formatNumber(resource.cost[rkey])}
${state.getResource(rkey).name}`;
}
}
}
return cost;
}
}