New colour settings, changeable flash colour #728

This commit is contained in:
Daniël van Noord
2021-03-28 10:55:10 +02:00
parent fe8749e7b2
commit 972d4723ed
21 changed files with 183 additions and 126 deletions

View File

@@ -7,7 +7,7 @@ import {
import { CMOptions } from '../../Config/VariablesAndData';
import BuildingSell from '../../Sim/SimulationEvents/SellBuilding';
import { Beautify } from '../BeautifyAndFormatting/BeautifyFormatting';
import { Colours, LastTargetBuildings } from '../VariablesAndData';
import { ColoursOrdering, LastTargetBuildings } from '../VariablesAndData';
/**
* Section: Functions related to right column of the screen (buildings/upgrades)
@@ -33,7 +33,7 @@ export default function UpdateBuildings() {
if (CMOptions.BuildColour === 1) {
Object.keys(target).forEach((i) => {
l(`productPrice${Game.Objects[i].id}`).style.color =
CMOptions.Colours[target[i].color];
CMOptions[`Colour${target[i].color}`];
});
} else {
Object.keys(Game.Objects).forEach((i) => {
@@ -72,9 +72,10 @@ export default function UpdateBuildings() {
});
arr.sort(function (a, b) {
return Colours.indexOf(a.color) > Colours.indexOf(b.color)
return ColoursOrdering.indexOf(a.color) >
ColoursOrdering.indexOf(b.color)
? 1
: Colours.indexOf(a.color) < Colours.indexOf(b.color)
: ColoursOrdering.indexOf(a.color) < ColoursOrdering.indexOf(b.color)
? -1
: a.pp < b.pp
? -1
@@ -89,9 +90,10 @@ export default function UpdateBuildings() {
});
arr.sort(function (a, b) {
return Colours.indexOf(a.color) > Colours.indexOf(b.color)
return ColoursOrdering.indexOf(a.color) >
ColoursOrdering.indexOf(b.color)
? 1
: Colours.indexOf(a.color) < Colours.indexOf(b.color)
: ColoursOrdering.indexOf(a.color) < ColoursOrdering.indexOf(b.color)
? -1
: a.pp < b.pp
? -1

View File

@@ -9,7 +9,7 @@ import {
ColourOrange,
ColourPurple,
ColourRed,
Colours,
ColoursOrdering,
ColourYellow,
} from '../VariablesAndData';
@@ -81,9 +81,9 @@ export default function UpdateUpgrades() {
if (CMOptions.SortUpgrades) {
arr.sort(function (a, b) {
return Colours.indexOf(a.color) > Colours.indexOf(b.color)
return ColoursOrdering.indexOf(a.color) > ColoursOrdering.indexOf(b.color)
? 1
: Colours.indexOf(a.color) < Colours.indexOf(b.color)
: ColoursOrdering.indexOf(a.color) < ColoursOrdering.indexOf(b.color)
? -1
: a.pp < b.pp
? -1

View File

@@ -3,7 +3,7 @@ import UpdateBuildings from '../BuildingsUpgrades/Buildings';
import {
ColourBackPre,
ColourBorderPre,
Colours,
ColoursOrdering,
ColourTextPre,
} from '../VariablesAndData';
@@ -13,19 +13,19 @@ import {
*/
export default function UpdateColours() {
let str = '';
for (let i = 0; i < Colours.length; i++) {
str += `.${ColourTextPre}${Colours[i]} { color: ${
CMOptions.Colours[Colours[i]]
for (let i = 0; i < ColoursOrdering.length; i++) {
str += `.${ColourTextPre}${ColoursOrdering[i]} { color: ${
CMOptions[`Colour${ColoursOrdering[i]}`]
}; }\n`;
}
for (let i = 0; i < Colours.length; i++) {
str += `.${ColourBackPre}${Colours[i]} { background-color: ${
CMOptions.Colours[Colours[i]]
for (let i = 0; i < ColoursOrdering.length; i++) {
str += `.${ColourBackPre}${ColoursOrdering[i]} { background-color: ${
CMOptions[`Colour${ColoursOrdering[i]}`]
}; }\n`;
}
for (let i = 0; i < Colours.length; i++) {
str += `.${ColourBorderPre}${Colours[i]} { border: 1px solid ${
CMOptions.Colours[Colours[i]]
for (let i = 0; i < ColoursOrdering.length; i++) {
str += `.${ColourBorderPre}${ColoursOrdering[i]} { border: 1px solid ${
CMOptions[`Colour${ColoursOrdering[i]}`]
}; }\n`;
}
l('CMCSS').textContent = str;

View File

@@ -1,9 +1,9 @@
/**
* This function creates a white square over the full screen and appends it to l('wrapper')
*/
export default function CreateWhiteScreen() {
export default function CreateFlashScreen() {
const WhiteScreen = document.createElement('div');
WhiteScreen.id = 'CMWhiteScreen';
WhiteScreen.id = 'CMFlashScreen';
WhiteScreen.style.width = '100%';
WhiteScreen.style.height = '100%';
WhiteScreen.style.backgroundColor = 'white';

View File

@@ -20,8 +20,8 @@ import Config from '../../Data/SettingsData';
import ConfigDefault from '../../Data/SettingsDefault';
import RefreshScale from '../HelperFunctions/RefreshScale';
import UpdateColours from '../HelperFunctions/UpdateColours';
import Flash from '../Notifications/Flash';
import PlaySound from '../Notifications/Sound';
import { Colours } from '../VariablesAndData';
/**
* This function creates a header-object for the options page
@@ -167,29 +167,36 @@ function CreatePrefOption(config) {
div.appendChild(label);
return div;
}
if (Config[config].type === 'color') {
if (Config[config].type === 'colour') {
div.className = '';
for (let i = 0; i < Colours.length; i++) {
const innerDiv = document.createElement('div');
innerDiv.className = 'listing';
const input = document.createElement('input');
input.id = Colours[i];
input.style.width = '65px';
input.setAttribute('value', CMOptions.Colours[Colours[i]]);
innerDiv.appendChild(input);
const change = function () {
CMOptions.Colours[this.targetElement.id] = this.toHEXString();
UpdateColours();
SaveConfig();
Game.UpdateMenu();
const innerDiv = document.createElement('div');
innerDiv.className = 'listing';
const input = document.createElement('input');
input.id = config;
input.style.width = '65px';
input.setAttribute('value', CMOptions[config]);
innerDiv.appendChild(input);
const change = function () {
CMOptions[this.targetElement.id] = this.toHEXString();
UpdateColours();
SaveConfig();
Game.UpdateMenu();
};
// eslint-disable-next-line no-new
new JsColor(input, { hash: true, position: 'right', onInput: change });
const label = document.createElement('label');
label.textContent = Config[config].desc;
innerDiv.appendChild(label);
if (config.includes('Flash')) {
const a = document.createElement('a');
a.className = 'option';
a.onclick = function () {
Flash(3, config.replace('Colour', ''), true);
};
// eslint-disable-next-line no-new
new JsColor(input, { hash: true, position: 'right', onInput: change });
const label = document.createElement('label');
label.textContent = Config.Colours.desc[Colours[i]];
innerDiv.appendChild(label);
div.appendChild(innerDiv);
a.textContent = 'Test flash';
innerDiv.appendChild(a);
}
div.appendChild(innerDiv);
jscolor.init();
return div;
}

View File

@@ -7,28 +7,32 @@ import { isInitializing } from '../../InitSaveLoad/Variables';
* @param {number} mode Sets the intensity of the flash, used to recursively dim flash
* All calls of function have use mode === 3
* @param {string} config The setting in CM.Options that is checked before creating the flash
* @param {bool} forced Whether the sound should play regardless of settings, used to test the sound
*/
export default function Flash(mode, config) {
export default function Flash(mode, config, forced) {
// The arguments check makes the sound not play upon initialization of the mod
if (
(CMOptions[config] === 1 && mode === 3 && isInitializing === false) ||
((CMOptions[config] === 1 || forced) &&
mode === 3 &&
isInitializing === false) ||
mode === 1
) {
l('CMWhiteScreen').style.opacity = '0.5';
l('CMFlashScreen').style.backgroundColor = CMOptions[`Colour${config}`];
l('CMFlashScreen').style.opacity = '0.5';
if (mode === 3) {
l('CMWhiteScreen').style.display = 'inline';
l('CMFlashScreen').style.display = 'inline';
setTimeout(function () {
Flash(2, config);
Flash(2, config, true);
}, 1000 / Game.fps);
} else {
setTimeout(function () {
Flash(0, config);
Flash(0, config, true);
}, 1000 / Game.fps);
}
} else if (mode === 2) {
l('CMWhiteScreen').style.opacity = '1';
l('CMFlashScreen').style.opacity = '1';
setTimeout(function () {
Flash(1, config);
Flash(1, config, true);
}, 1000 / Game.fps);
} else if (mode === 0) l('CMWhiteScreen').style.display = 'none';
} else if (mode === 0) l('CMFlashScreen').style.display = 'none';
}

View File

@@ -23,7 +23,7 @@ export const ColourPurple = 'Purple';
export const ColourGray = 'Gray';
export const ColourPink = 'Pink';
export const ColourBrown = 'Brown';
export const Colours = [
export const ColoursOrdering = [
ColourGray,
ColourBlue,
ColourGreen,