Tinting graffities

[antal-k]

Hey,

I fixed it on my repo. Probably, it can help you too.

// tints.js
import * as fs from "fs";
import sharp from "sharp";
 
const cwd = "./";
const graffiti = JSON.parse(
	fs.readFileSync(`${cwd}resource/en/graffiti.json`)
); // en is the default language

(async () => {
	for (const key in graffiti) {
		const item = graffiti[key];

		if (item.tint && item.tint !== "") {
			const r = parseInt(item.tint.replace("#", "").substring(0, 2), 16);
			const g = parseInt(item.tint.replace("#", "").substring(2, 4), 16);
			const b = parseInt(item.tint.replace("#", "").substring(4, 6), 16);

			//
			const img = sharp(
				// remove the last 7 (_NN_png.png)
				`${cwd}${item.image.substring(0, item.image.length - 11)}_png.png`
			);
			img.tint({ r, g, b });
			await img.toFile(`${cwd}${item.image}`);
			console.log(`Tinted ${item.name} to ${item.tint} at ${cwd}${item.image}`);
		}
	}
})();

call it from the workflow, also add sharp as dep

[antal-k]

// graffiti.js
import { saveDataJson } from "../utils/saveDataJson.js";
import { $t, languageData } from "./translations.js";
import { state } from "./main.js";
import specialNotes from "../utils/specialNotes.json" assert { type: "json" };
import { getRarityColor } from "../utils/index.js";
import { getImageUrl } from "../constants.js";

const isGraffiti = (item) => {
	if (item.item_name.startsWith("#SprayKit_")) {
		return true;
	}

	if (item.name.includes("spray_")) {
		return true;
	}

	if (item.sticker_material?.includes("_graffiti")) {
		return true;
	}

	return false;
};

const getDescription = (item) => {
	let msg = $t("csgo_tool_spray_desc");
	let desc = $t(item.description_string);
	if (desc && desc.length > 0) {
		msg = `${msg}<br><br>${desc}`;
	}
	return msg;
};

const parseItemSealedGraffiti = (item) => {
	const { cratesBySkins, graffitiTints } = state;
	const image = getImageUrl(`econ/stickers/${item.sticker_material}`);

	const crates =
		cratesBySkins?.[`graffiti-${item.object_id}`]?.map((i) => ({
			...i,
			name: $t(i.name),
		})) ?? [];
	const description = getDescription(item);

	const base = {
		id: `graffiti-${item.object_id}`,
		name: `${$t("csgo_tool_spray")} | ${$t(item.item_name)}`,
		description,
		rarity: {
			id: `rarity_${item.item_rarity}`,
			name: $t(`rarity_${item.item_rarity}`),
			color: getRarityColor(`rarity_${item.item_rarity}`),
		},
		special_notes: specialNotes?.[`graffiti-${item.object_id}`],
		crates,
		image,
		tint: "",
	};

	const ret = [];

	if (crates.length === 0 && item.item_rarity === "common") {
		ret.push(
			...graffitiTints.map((tint) => ({
				...base, // add base
				name: `${base.name} (${$t(tint.key)})`,
				image: getImageUrl(
					`econ/stickers/${item.sticker_material}_${tint.id < 10 ? "0" : ""}${
						tint.id
					}`
				),
				tint: tint.hex_color,
			}))
		);
	} else {
		ret.push(base);
	}
	return ret;
};

export const getGraffiti = () => {
	const { stickerKits } = state;
	const { folder } = languageData;

	const graffiti = stickerKits
		.filter(isGraffiti)
		.map(parseItemSealedGraffiti)
		.flat();

	saveDataJson(`./resource/${folder}/graffiti.json`, graffiti);
};

load tints in main.js

[ByMykel]

I will try it now. What I was doing this last days is to scrap some site and upload the images here ByMykel/counter-strike-image-tracker@f7eb2c0.

And then adding every graffiti and their variations:

CSGO-API/utils/index.js

Lines 468 to 473 in 0f03127

	export const getGraffitiVariations = (material) => {
	return {
	"spray_std2_1g": ["attrib_spraytintvalue_0"],
	"spray_std2_200iq": ["attrib_spraytintvalue_0"],
	}[material] ?? [];
	};

[ByMykel]

@piyanggoon do we really need to use that API to check every graffiti? They are not that much, I can check one by one how many variations they have and try this code to generate all the variations/tints.

What do you think?

[piyanggoon]

I think generating all tints is not a bad idea. Some items might not be listed on SCM like cs.money scrape data from SCM and missing some tints.

[ByMykel]

Hmm did i do something wrong? they kind of not the same.

Scraped	Generated

[antal-k]

I don't think, I'll check if we can modify the opacity while applying the tint.

[ByMykel]

I have added all sealed graffiti variations taking csmoney wiki as reference.

Feel free to share another way to loading all the images.