Skip to content

Commit 542842f

Browse files
JujuDelJujuDel
committed
Fix color, personality, traits raw data extraction
The banner were different for the personality and the traits, so the extraction was not working properly. Not sure about the color extraction, but added fallback colors for each types.
1 parent 366f8b9 commit 542842f

File tree

2 files changed

+127
-34
lines changed

2 files changed

+127
-34
lines changed

‎source/plugins/community/16personalities/index.mjs‎

Lines changed: 102 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,134 @@
1-
//Setup
1+
// Setup
22
export default async function({login, q, imports, data, account}, {enabled = false, extras = false} = {}) {
3-
//Plugin execution
43
try {
5-
//Check if plugin is enabled and requirements are met
4+
// Check if the plugin is enabled and requirements are met
65
if ((!q["16personalities"]) || (!imports.metadata.plugins["16personalities"].enabled(enabled, {extras})))
76
return null
87

9-
//Load inputs
8+
// Load inputs
109
let {url, sections, scores} = imports.metadata.plugins["16personalities"].inputs({data, account, q})
1110
if (!url)
1211
throw {error: {message: "URL is not set"}}
1312

14-
//Start puppeteer and navigate to page
13+
// Start puppeteer and navigate to page
1514
console.debug(`metrics/compute/${login}/plugins > 16personalities > starting browser`)
1615
const browser = await imports.puppeteer.launch()
1716
console.debug(`metrics/compute/${login}/plugins > 16personalities > started ${await browser.version()}`)
1817
const page = await browser.newPage()
1918
console.debug(`metrics/compute/${login}/plugins > 16personalities > loading ${url}`)
20-
await page.goto(url, {waitUntil: imports.puppeteer.events})
21-
22-
//Fetch raw data
23-
const raw = await page.evaluate(() => ({
24-
color: getComputedStyle(document.querySelector(".card__bg")).backgroundColor, //eslint-disable-line no-undef
25-
type: document.querySelector(".type__code").innerText,
26-
personality: [...document.querySelectorAll(".personality-cards .sp-personality-card")].map(card => ({
27-
category: card.querySelector(".card__title").innerText,
28-
value: card.querySelector(".card__subtitle").innerText,
29-
image: card.querySelector(".card__image").src,
30-
text: card.querySelector(".card__text").innerText,
31-
})),
32-
traits: [...document.querySelectorAll("#traits .card__body")].map(card => ({
33-
category: card.querySelector(".card__title").innerText,
34-
value: card.querySelector(".card__subtitle").innerText,
35-
score: card.querySelector(".center__num").innerText,
36-
text: card.querySelector("p").innerText,
37-
})),
38-
}))
3919

40-
//Format data
20+
// Capture console messages from the browser context
21+
page.on('console', msg => {
22+
if (msg.type() === 'debug') {
23+
console.debug(`BROWSER: ${msg.text()}`);
24+
}
25+
})
26+
27+
await page.goto(url, {waitUntil: 'networkidle2'})
28+
29+
// Fetch raw data
30+
const raw = await page.evaluate(() => {
31+
const getInnerText = (selector) => document.querySelector(selector)?.innerText || ""
32+
33+
// Default map personality category to RGB colors
34+
const defaultPersonalityColors = {
35+
explorers: 'rgb(228, 174, 58)', // Virtuoso, Adventurer, Entrepreneur, Entertainer
36+
sentinels: 'rgb(66, 152, 180)', // Logistician, Defender, Executive, Consul
37+
diplomats: 'rgb(51, 164, 116)', // Advocate, Mediator, Protagonist, Campaigner
38+
analysts: 'rgb(136, 97, 154)', // Architect, Logician, Commander, Debater
39+
default: 'rgb(0, 0, 0)'
40+
}
41+
let defaultColor = defaultPersonalityColors.default
42+
43+
// Choose the default color based on the personality type
44+
const personalityType = getInnerText(".link--inline");
45+
if (personalityType.includes("Virtuoso") || personalityType.includes("Adventurer") || personalityType.includes("Entrepreneur") || personalityType.includes("Entertainer"))
46+
defaultColor = defaultPersonalityColors.explorers
47+
else if (personalityType.includes("Logistician") || personalityType.includes("Defender") || personalityType.includes("Executive") || personalityType.includes("Consul"))
48+
defaultColor = defaultPersonalityColors.sentinels
49+
else if (personalityType.includes("Advocate") || personalityType.includes("Mediator") || personalityType.includes("Protagonist") || personalityType.includes("Campaigner"))
50+
defaultColor = defaultPersonalityColors.diplomats
51+
else if (personalityType.includes("Architect") || personalityType.includes("Logician") || personalityType.includes("Commander") || personalityType.includes("Debater"))
52+
defaultColor = defaultPersonalityColors.analysts;
53+
54+
console.debug(`Personality Type: ${personalityType}`)
55+
56+
return {
57+
// Type extraction
58+
type: getInnerText(".type__code"),
59+
60+
// Personality details extraction
61+
personality: [...document.querySelectorAll(".slider__slides > div")].map(card => {
62+
// Extract image data
63+
let image = ""
64+
const cardElement = card.querySelector(".card__image")
65+
// Check if the card has an image as an url, e.g., the "His Role" image or the "His Strategy" image
66+
if (cardElement.querySelector("img")) {
67+
image = cardElement.querySelector("img").src
68+
console.debug(`Image for ${card.querySelector(".card__title")?.innerText}: ${image}`)
69+
}
70+
// Check if the card has a image as a svg, e.g., the "His personality" image
71+
else if (cardElement.querySelector("svg")) {
72+
image = new XMLSerializer().serializeToString(cardElement.querySelector("svg"))
73+
image = `data:image/svg+xml,${encodeURIComponent(image)}`
74+
console.debug(`Image for ${card.querySelector(".card__title")?.innerText} is a svg`)
75+
}
76+
77+
return {
78+
category: card.querySelector(".card__title")?.innerText || "", // Category, e.g., "His role"
79+
value: card.querySelector(".card__subtitle")?.innerText || "", // Value of the category, e.g., "Sentinel"
80+
image, // Image of the category
81+
text: card.querySelector(".prevent--drag.card__p")?.innerText || "" // Description of the category
82+
}
83+
}),
84+
85+
// Traits details extraction
86+
traits: [...document.querySelectorAll(".traits__boxes > div")].map(card => {
87+
const categoryText = card.querySelector(".traitbox__label")?.innerText
88+
const scoreText = card.querySelector(".traitbox__value")?.innerText.trim() // Get the text like "75% Extraverted"
89+
90+
console.debug(`Parsing Trait category ${categoryText} ${scoreText}`);
91+
92+
// Split the score text into percentage and trait
93+
const [percentage, ...traitArray] = scoreText.split(' ');
94+
95+
// Return the traits details
96+
return {
97+
category: categoryText || "", // Trait category name, e.g., "Energy"
98+
value: traitArray.join(" ") || "", // Extracted trait, e.g., "Extraverted"
99+
score: percentage || "", // Extracted percentage, e.g., "75%"
100+
text: card.querySelector("p").innerText || "" // Description of the trait
101+
}
102+
}),
103+
104+
// Color
105+
color: document.querySelector(".card__bg") ? getComputedStyle(document.querySelector(".card__bg")).backgroundColor : defaultColor
106+
}
107+
})
108+
109+
// Format data
41110
const {color} = raw
42111
const type = raw.type.replace("(", "").replace(")", "").trim()
43112
const personality = await Promise.all(raw.personality.map(async ({category, value, image, text}) => ({
44113
category,
45114
value: value.replace(`(${type})`, "").trim(),
46-
image: await imports.imgb64(image),
115+
image: image.startsWith("data:image/svg+xml,") ? image : await imports.imgb64(image),
47116
text: text.replace(`${category}\n${value}\n`, "").trim(),
48117
})))
49118
const traits = raw.traits.map(({category, value, score, text}) => ({
50-
category,
119+
category: category.replace(":", "").trim(),
51120
value: `${value[0]}${value.substring(1).toLocaleLowerCase()}`,
52121
score: scores ? Number(score.replace("%", "")) / 100 : NaN,
53-
text: text.split(".").slice(1).join("."),
122+
text: text.trim()
54123
}))
55124

56-
//Results
125+
// Close browser
126+
await browser.close();
127+
128+
// Results
57129
return {sections, color, type, personality, traits}
58130
}
59-
//Handle errors
131+
// Handle errors
60132
catch (error) {
61133
throw imports.format.error(error)
62134
}

‎source/templates/classic/partials/16personalities.ejs‎

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,21 +14,42 @@
1414
</section>
1515
</div>
1616
<% } else { %>
17-
<% if ((plugins["16personalities"].sections.includes("personality"))||(plugins["16personalities"].sections.includes("profile"))) { %>
17+
<!-- Render Personality if the 'personality' section is enabled -->
18+
<% if (plugins["16personalities"].sections.includes("personality") || plugins["16personalities"].sections.includes("profile")) { %>
1819
<div class="row fill-width">
1920
<section class="personality-traits categories">
20-
<% for (const {category, value, image, text} of plugins["16personalities"].personality) { if (((!plugins["16personalities"].sections.includes("personality"))&&(/personality/i.test(category)))||((!plugins["16personalities"].sections.includes("profile"))&&(!/personality/i.test(category)))) continue %>
21+
<% for (const {category, value, image, text} of plugins["16personalities"].personality) { %>
22+
<%
23+
// Conditional check to filter categories if needed
24+
if (
25+
(!plugins["16personalities"].sections.includes("personality") && /personality/i.test(category)) ||
26+
(!plugins["16personalities"].sections.includes("profile") && !/personality/i.test(category))
27+
) continue;
28+
%>
2129
<div class="category">
22-
<img src="<%= image %>" alt="" />
30+
<!-- Render SVG or Image based on content -->
31+
<% if (image.startsWith('<svg')) { %>
32+
<!-- SVG handling -->
33+
<div class="svg-container" style="width: 50px; height: 50px;">
34+
<img src="<%= image %>" alt="<%= category %>" />
35+
</div>
36+
<% } else { %>
37+
<!-- Fallback for other images -->
38+
<img src="<%= image %>" alt="<%= category %>" />
39+
<% } %>
40+
2341
<div class="explanation">
24-
<span class="title" style="color: <%= plugins["16personalities"].color %>;"><span class="subtitle"><%= value %></span> <%= category.toLocaleLowerCase() %></span>
42+
<span class="title" style="color: <%= plugins["16personalities"].color %>;">
43+
<span class="subtitle"><%= value %></span> <%= category.toLowerCase() %>
44+
</span>
2545
<span class="text"><%= text %></span>
2646
</div>
2747
</div>
2848
<% } %>
2949
</section>
3050
</div>
3151
<% } %>
52+
<!-- Render Traits if the 'traits' section is enabled -->
3253
<% if (plugins["16personalities"].sections.includes("traits")) { %>
3354
<div class="row fill-width">
3455
<section class="personality-traits categories">

0 commit comments

Comments
 (0)