ChoiceScript_Modifier/opener.js at master · JohnTheRedeemer/ChoiceScript_Modifier · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
// open a new pop up window to put all the stats and give it a title
childWindow = window.open('','47288','width=1280,height=720,toolbar=0,menubar=0,location=0,status=0,scrollbars=0,resizeable=0,left=0,top=0');
childWindow.document.title = 'ChoiceScript Editor';

modifiableStats = [];
statModifiers = [];

// show the stats available (including non-numeric ones)
console.log('stats', stats);

// compile all the numeric stats
for(const [key, value] of Object.entries(stats)){
	try {
		let val = parseInt(value);
		if(Number.isNaN(val) == false){
			console.log(`${key}: ${val}`);
			modifiableStats.push({ key: key, value: val});
			statModifiers[key] = {value: { min: 0, max: 100}};
		}
	} catch (err){
		console.log(`Error! ${key}: ${value}`);
	}
}

console.log('Number stats processed');

// this will create the javscript that is used for updating values with stats in-game, passing values back and forth, and adding limits
console.log('Creating script tag to hold dynamic javascript');
let scriptHtml = "function changeValue(key){ let newVal = document.getElementById(key).value;/*console.log('val', newVal); console.log('Changing ', key, ' in parent'); console.log('stat', window.opener.stats[key], newVal);*/ window.opener.stats[key] = newVal; } ";

// todo, update existing values to selected range
scriptHtml += "function modifyStatMin(key){ /*console.log('key', key, window.opener.statModifiers[key]);*/ let newVal = parseInt(document.getElementById(key+'Min').value); document.getElementById(key).min = newVal; window.opener.statModifiers[key]['value']['min'] = newVal; }";
scriptHtml += "function modifyStatMax(key){ /*console.log('key', key, window.openr.statModifiers[key]);*/ let newVal = parseInt(document.getElementById(key+'Max').value); document.getElementById(key).max = newVal; window.opener.statModifiers[key]['value']['max'] = newVal; }";

// attach script to windows
let scriptTag = childWindow.document.createElement('script');
let inlineScript = childWindow.document.createTextNode(scriptHtml);
scriptTag.appendChild(inlineScript);
childWindow.document.body.appendChild(scriptTag);

// create a simple table to display the names, values, and inputs
console.log('Creating ui');
let wrapperDiv = childWindow.document.createElement('div');
wrapperDiv.innerHTML = '<p>This is a <b>test</b></p>'
childWindow.document.body.appendChild(wrapperDiv);

let html = '<p>This is a <b>test</b></p>';

html = '<style>';
html += 'body { background-color: #222; color: rgba(255,255,255,.85); }';
html += 'table { font-family: Arial, Helvetica, sans-serif; border-collapse: collapse; width: 100%; }';
//html += 'tr:hover { background-color: #555; }';
html += 'th { padding-top: 12px; padding-bottom: 12px; text-align: left; background-color: #1E0022; color: #ddd; }';
html += 'td { border: 1px solid #ddd; padding: 8px; }';
html += 'input[type=range] {height: 4px;-webkit-appearance: none;margin: 10px 0;width: 75%; background-color:#222;padding-right: 4px; vertical-align: middle;}';
html += 'input[type=range]:focus {outline: none;}';
html += 'input[type=range]::-webkit-slider-runnable-track {width: 100%;height: 13px;cursor: pointer;animate: 0.2s;box-shadow: 0px 0px 0px #000000;background: #AC51B5;border-radius: 25px;border: 0px solid #000101;}';
html += 'input[type=range]::-webkit-slider-thumb {box-shadow: 0px 0px 0px #000000;border: 0px solid #000000;height: 20px;width: 39px;border-radius: 7px;background: #65001C;cursor: pointer;-webkit-appearance: none;margin-top: -3.5px;}';
html += 'input[type=range]:focus::-webkit-slider-runnable-track {background: #AC51B5;}';
html += 'input[type=range]::-moz-range-track {width: 100%;height: 13px;cursor: pointer;animate: 0.2s;box-shadow: 0px 0px 0px #000000;background: #AC51B5;border-radius: 25px;border: 0px solid #000101;}';
html += 'input[type=range]::-moz-range-thumb {box-shadow: 0px 0px 0px #000000;border: 0px solid #000000;height: 20px;width: 39px;border-radius: 7px;background: #65001C;cursor: pointer;}';
html += 'input[type=range]::-ms-track {width: 100%;height: 13px;cursor: pointer;animate: 0.2s;background: transparent;border-color: transparent;color: transparent;}';
html += 'input[type=range]::-ms-fill-lower {background: #AC51B5;border: 0px solid #000101;border-radius: 50px;box-shadow: 0px 0px 0px #000000;}';
html += 'input[type=range]::-ms-fill-upper {background: #AC51B5;border: 0px solid #000101;border-radius: 50px;box-shadow: 0px 0px 0px #000000;}';
html += 'input[type=range]::-ms-thumb {margin-top: 1px;box-shadow: 0px 0px 0px #000000;border: 0px solid #000000;height: 20px;width: 39px;border-radius: 7px;background: #65001C;cursor: pointer;}';
html += 'input[type=range]:focus::-ms-fill-lower {background: #AC51B5;}';
html += 'input[type=range]:focus::-ms-fill-upper {background: #AC51B5;}';

html += '</style>';

html += '<table>';
html += '<tr><th>Skill</th>';
html += '<th>Limits</th>';
//html += '<th>Linked</th>';
html += '<th>Value</th>';
html += '</tr>';

for(let index = 0; index < modifiableStats.length; index++){

	let key = modifiableStats[index].key;
	let value = modifiableStats[index].value

	html += '<tr>';

	html += '<td>' + key + '</td>';
	html += '<td><span>Min: </span> <input id="'+key+'Min" type="number" value="'+statModifiers[key]['value']['min']+'" style="width:25%" onchange="modifyStatMin(\''+key+'\');" /> <span>Max: </span> <input id="'+key+'Max" type="number" value="'+statModifiers[key]['value']['max']+'" style="width:25%" onchange="modifyStatMax(\''+key+'\');" /></td>';
	//TODO: Add matching pairs to update in sync
	// html += '<td>Select a value that this will effect (like an opposed pair [good/evil, feared/loved])</td>';
	html += '<td><input type="range" id="'+ key + '" name="' + key + '" min="'+statModifiers[key]['value']['min']+'" max="'+statModifiers[key]['value']['max']+'" value="' + value + '" onchange="changeValue(\'' + key + '\')"/><span id="text-'+key+'">' + value + '</span></td>';
	html += '</tr>';
}

html += '</table>';

wrapperDiv.innerHTML = html;

// every 2.5 seconds, update the existing table with the values found in the game stats.
// Sometimes the game will reset the stats, so this ensures the player always sees the latest values
setInterval(function(){
	for(const [key, value] of Object.entries(stats)){
		try {
			let val = parseInt(value);
			if(Number.isNaN(val) == false){
				//console.log(`${key}: ${val}`);
				modifiableStats.push({ key: key, value: val});
			}
		} catch (err){
			console.log(`Error! ${key}: ${value}`);
		}
	}

	for(let index = 0; index < modifiableStats.length; index++){

		let key = modifiableStats[index].key;
		let value = modifiableStats[index].value

		try {
			childWindow.document.getElementById(key).value = value;
			childWindow.document.getElementById('text-'+key).innerText = value;
		}
		catch(err){
			console.log(err, key, value);
		}
	}
}, 2500);