☰

Metacritic score for GOG

Adds metacritic score to GOG game's page

目前为 2019-04-11 提交的版本。查看 最新版本。

  1. /* 
  2.     Metacritic score for GOG - Adds metacritic score to GOG game's page.
  3. 	Copyright (C) 2019  T1mL3arn
  4. 	
  5.     This program is free software: you can redistribute it and/or modify
  6.     it under the terms of the GNU General Public License as published by
  7.     the Free Software Foundation, either version 3 of the License, or
  8. 	(at your option) any later version.
  9. 	
  10.     This program is distributed in the hope that it will be useful,
  11.     but WITHOUT ANY WARRANTY; without even the implied warranty of
  12.     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  13.     GNU General Public License for more details.
  14.     You should have received a copy of the GNU General Public License
  15.     along with this program. If not, see <https://www.gnu.org/licenses/>.
  16. */
  17.  
  18. // ==UserScript==
  19. // @name Metacritic score for GOG
  20. // @description Adds metacritic score to GOG game's page
  21. // @version 1.1.1
  22. // @author T1mL3arn
  23. // @namespace https://github.com/T1mL3arn
  24. // @icon https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Metacritic.svg/88px-Metacritic.svg.png
  25. // @match https://gog.com/game/*
  26. // @match https://www.gog.com/game/*
  27. // @require https://code.jquery.com/jquery-3.3.1.min.js
  28. // @grant GM_xmlhttpRequest
  29. // @grant GM.xmlhttpRequest
  30. // @grant GM_xmlHttpRequest
  31. // @grant GM.xmlHttpRequest
  32. // @grant GM_addStyle
  33. // @grant GM.addStyle
  34. // @license GPLv3
  35. // @homepageURL https://github.com/t1ml3arn-userscript-js/Metacritic-score-for-GOG
  36. // @supportURL https://github.com/t1ml3arn-userscript-js/Metacritic-score-for-GOG/issues
  37. // ==/UserScript==
  38.  
  39. (function () {
  40. 	// =============================================================
  41. 	//
  42. 	// Greasemonkey polyfill
  43. 	//
  44. 	// =============================================================
  45. 	
  46. 	// probably it is Greasemonkey
  47. 	if (typeof GM !== 'undefined') {
  48. 		if (typeof GM.info !== 'undefined')
  49. 			window.GM_info = GM.info;
  50.  
  51. 		// VM has GM_xmlhttpRequest but GM has GM_xmlHttpRequest
  52. 		// Mad mad world !
  53. 		if (typeof GM.xmlHttpRequest !== 'undefined') {
  54. 			window.GM_xmlhttpRequest = GM.xmlHttpRequest
  55. 		}
  56.     
  57.     	// addStyle
  58. 		window.GM_addStyle = function(css) {
  59. 			return new Promise((resolve, reject) => {
  60. 				try {
  61. 					let style = document.head.appendChild(document.createElement('style'))
  62. 					style.type = 'text/css'
  63. 					style.textContent = css;
  64. 					resolve(style)
  65. 				} catch(e) {
  66. 					console.error(`It is not possible to add style with GM_addStyle()`)
  67. 					reject(e)
  68. 				}
  69. 			})
  70. 		}
  71. 	}
  72.  
  73. 	//console.log(`[${GM_info.scriptHandler}][${GM_info.script.name} v${GM_info.script.version}] inited`)
  74. 	
  75.  
  76. 	// =============================================================
  77. 	//
  78. 	// API section
  79. 	//
  80. 	// =============================================================
  81.  
  82. 	const css = (() => {
  83. 		return `
  84. .mcg-wrap {
  85. 	/* Base size for all icons */
  86. 	--size: 80px;
  87.  
  88. 	display: flex;
  89. 	flex-flow: row;
  90. 	flex-wrap: wrap;
  91. 	align-items: center;
  92. 	justify-content: center;
  93.  
  94. 	width: auto;
  95. 	padding: 4px;
  96. 	box-sizing: border-box;
  97. }
  98.  
  99. .mcg-wrap * {
  100. 	all: unset;
  101. 	box-sizing: border-box;
  102. }
  103.  
  104. .mcg-score-summary {
  105. 	display: flex;
  106. 	flex-flow: row nowrap;
  107. 	justify-content: flex-start;
  108. 	align-items: center;
  109.  
  110. 	margin: 0 2px 0 2px;
  111. }
  112.  
  113. .mcg-score-summary__score {
  114. 	display: flex;
  115. 	flex-flow: row;
  116. 	justify-content: center;
  117. 	align-items: center;
  118.  
  119. 	min-width: calc(var(--size) * 0.5);
  120. 	min-height: calc(var(--size) * 0.5);
  121. 	width: calc(var(--size) * 0.5);
  122. 	height: calc(var(--size) * 0.5);
  123. 	margin: 0 4px 0 4px;
  124.  
  125. 	background-color: #0f0;
  126. 	background-color: #c0c0c0;
  127. 	border-radius: 6px;
  128. 	font-family: sans-serif;
  129. 	
  130. 	font-size: 1.2em;
  131. 	font-weight: bold;
  132. 	color: white;
  133. }
  134.  
  135. .mcg-score--bad {
  136. 	background-color: #f00;
  137. 	color: white;
  138. }
  139.  
  140. .mcg-score--mixed {
  141. 	background-color: #fc3;
  142. 	color: #111;
  143. }
  144.  
  145. .mcg-score--good {
  146. 	background-color: #6c3;
  147. 	color: white;
  148. }
  149.  
  150. .mcg-score-summary__score--circle {
  151. 	border-radius: 50%;
  152. }
  153.  
  154. .mcg-score-summary .mcg-score-summary__label {
  155. 	align-self: flex-start;
  156. 	align-self: center;
  157. 	
  158. 	max-width: 50px;
  159.  
  160. 	font-size: 0.9em;
  161. 	font-size: 14px;
  162. 	font-weight: bold;
  163. 	text-align: left;
  164. 	text-align: center;
  165. }
  166.  
  167. .mcg-logo {
  168. 	display: flex;
  169. 	flex-flow: row;
  170. 	align-items: center;
  171. }
  172.  
  173. .mcg-logo__img {
  174. 	background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Metacritic.svg/200px-Metacritic.svg.png);
  175. 	background-position: center center;
  176. 	background-size: cover;
  177. 	
  178. 	min-width: calc(var(--size) * 0.5);
  179. 	min-height: calc(var(--size) * 0.5);
  180. 	width: calc(var(--size) * 0.5);
  181. 	height: calc(var(--size) * 0.5);
  182. }
  183.  
  184. .mcg-logo p {
  185. 	display: flex;
  186. 	flex-flow: column;
  187. 	align-items: center;
  188. 	justify-content: center;
  189.  
  190. 	margin: 4px 6px;
  191.  
  192. 	font-family: sans-serif;
  193. 	font-size: 22px;
  194. 	text-align: center;
  195. 	font-weight: bold;
  196. }
  197.  
  198. .mcg-logo p > a {
  199. 	cursor: pointer;
  200. 	
  201. 	text-decoration: underline;
  202. 	font-size: 0.65em;
  203. 	font-size: 14px;
  204. 	font-weight: normal;
  205. 	color: #36c;
  206. }`
  207. 	})()
  208.  
  209. 	const defaultHeaders = {
  210. 		"Origin": null,
  211. 		"Referer": null,
  212. 		"Cache-Control": "max-age=3600",
  213. 	}
  214.  
  215. 	/**
  216. 	 * Sends xmlHttpRequest via GM api (this allows crossdomain reqeusts).
  217. 	 * NOTE Different userscript engines support different
  218. 	 * details object format.
  219. 	 * 
  220. 	 * Violentmonkey @see https://violentmonkey.github.io/api/gm/#gm_xmlhttprequest
  221. 	 * 
  222. 	 * Greasemonkey @see https://wiki.greasespot.net/GM.xmlHttpRequest
  223. 	 * @param {Object} details @see ...
  224. 	 * @returns {Promise}
  225. 	 */
  226. 	function ajax(details) {
  227. 		return new Promise((resolve, reject) => {
  228. 			details.onloadend = resolve
  229. 			details.onerror = reject
  230. 			GM_xmlhttpRequest(details)
  231. 		}) 
  232. 	}
  233.  
  234. 	/**
  235. 	 * Returns an URL to make a search request
  236. 	 * for given game.
  237. 	 * @param {String} game Game name
  238. 	 * @param {String} platform Target platform (PC is default)
  239. 	 */
  240. 	function getSearhURL(game, platform) {
  241. 		// searches GAME only in "game" for PC platform (plats[3]=1)
  242. 		///TODO sanitize game name (trim, remove extra spacebars etc) ?
  243. 		return `https://www.metacritic.com/search/game/${game}/results?search_type=advanced&plats[3]=1`
  244. 	}
  245.  
  246. 	/**
  247. 	 * Returns an array of search results from given html code
  248. 	 * @param {String} html Raw html from which seach results will be parsed
  249. 	 */
  250. 	function parseSearchResults(html) {
  251. 		
  252. 		const doc = new DOMParser().parseFromString(html, 'text/html')
  253. 		const yearReg = /\d{4}/
  254. 		const results = $(doc).find('ul.search_results .result_wrap')
  255.  
  256. 		return results.map((ind, elt) => {
  257. 			const result = $(elt)
  258. 			let year = yearReg.exec(result.find('.main_stats p').text())
  259. 			year = year == null ? 0 : parseInt(year[0])
  260. 			
  261. 			return {
  262. 				title: result.find('.product_title').text().trim(),
  263. 				pageurl: 'https://www.metacritic.com' + result.find('.product_title > a').attr('href'),
  264. 				platform: result.find('.platform').text().trim(),
  265. 				year,
  266. 				metascore: parseInt(result.find('.metascore_w').text()),
  267. 				criticReviewsCount: 0,
  268. 				userscore: 0.0,
  269. 				userReviewsCount: 0,
  270. 				description: result.find('.deck').text().trim()
  271. 			}
  272. 		})
  273. 		.get()
  274. 	}
  275.  
  276. 	function swap(arr, ind1, ind2) {
  277. 		const tmp = arr[ind1]
  278. 		arr[ind1] = arr[ind2]
  279. 		arr[ind2] = tmp
  280. 	}
  281.  
  282. 	/**
  283. 	 * Returns integer which represents total user reviews
  284. 	 * @param {Object} doc jQuery document object
  285. 	 * @returns {Number}
  286. 	 */
  287. 	function getUserReviesCount(doc) {
  288. 		const reg = /\d+/
  289. 		let count = doc.find('.feature_userscore .count a').text()
  290. 		count = reg.exec(count)
  291. 		count = count == null ? 0 : parseInt(count[0])
  292. 		return count;
  293. 	}
  294.  
  295. 	/**
  296. 	 * Returns float which represents user score
  297. 	 * @param {Object} doc jQuery document object
  298. 	 * @returns {Number}
  299. 	 */
  300. 	function getUserScore(doc) {
  301. 		return parseFloat(doc.find('.feature_userscore .metascore_w.user').eq(0).text())
  302. 	}
  303. 	
  304. 	/**
  305. 	 * Returns a number of crititc reviews
  306. 	 * @param {Object} doc jQuery document object
  307. 	 * @returns {Number}
  308. 	 */
  309. 	function getCriticReviewsCount(doc) {
  310. 		return parseInt(doc.find('.score_summary.metascore_summary a>span').text())
  311. 	}
  312.  
  313. 	/**
  314. 	 * Converts given object to string 
  315. 	 * like `foo=bar&bizz=bazz`
  316. 	 * @param {Object} obj 
  317. 	 */
  318. 	function objectToUrlArgs(obj) {
  319. 		return Object.entries(obj)
  320. 			.map(kv => `${kv[0]}=${kv[1]}`)
  321. 			.join('&')
  322. 	}
  323.  
  324. 	/**
  325. 	 * Query metacritic autosearch api.
  326. 	 * Returns Promise with an array with results objects.
  327. 	 * Result object properties:
  328. 	 * - url: link to page
  329. 	 * - name: game name
  330. 	 * - itemDate: release date (string ?)
  331. 	 * - imagePath: url to cover image
  332. 	 * - metaScore: critic score (int)
  333. 	 * - scoreWord: like mixed, good, bad etc
  334. 	 * - refType: item type, e.g "PC Game"
  335. 	 * - refTypeId: type id, (string)
  336. 	 * @param {String} query term for search
  337. 	 * @returns {Promise}
  338. 	 */
  339. 	function autoSearch(query) {
  340. 		return ajax({
  341. 			url: 'https://www.metacritic.com/autosearch',
  342. 			method: 'post',
  343. 			data: objectToUrlArgs({ image_size: 98, search_term: query }),
  344. 			responseType: 'json',
  345. 			// Strictly recomended to watch Network log
  346. 			// and get Request Headers from it
  347. 			headers: {
  348. 				"Origin": null,
  349. 				"Referer": "https://www.metacritic.com",
  350. 				"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
  351. 				"X-Requested-With":	"XMLHttpRequest"
  352. 			}
  353. 		})
  354. 		.then(response => JSON.parse(response.responseText).autoComplete)
  355. 	}
  356.  
  357. 	/**
  358. 	 * Queries metacritic search page with given query.
  359. 	 * Returns Promise with `response` object.
  360. 	 * Html code of the page can be read from `response.responseText`
  361. 	 * @param {String} query term for search
  362. 	 * @returns {Promise}
  363. 	 */
  364. 	function fullSearch(query) {
  365. 		return ajax({
  366. 			url: getSearhURL(query),
  367. 			method: "GET",
  368. 			headers: defaultHeaders,
  369. 			context: { query }
  370. 		})
  371. 	}
  372.  
  373. 	/**
  374. 	 * Returns a resolved Promise with game data object on success
  375. 	 * and rejected Promise on failure.
  376. 	 * Game data object has these fields:
  377. 	 * - title: Game title
  378. 	 * - pageurl: Game page url
  379. 	 * - platform: Game platform (pc, ps3 etc)
  380. 	 * - year: Release year (int)
  381. 	 * - metascore: Critic score (int)
  382. 	 * - criticReviewsCount: The number of critic reviews
  383. 	 * - userscore: User score (float)
  384. 	 * - userReviewsCount: The number of user reviews
  385. 	 * - description: Description of the game
  386. 	 * - queryString: Original query string
  387. 	 * @param {String} gameName Game name
  388. 	 */
  389. 	function getGameData(gameName) {
  390. 		return fullSearch(gameName)
  391. 			.then(response => {
  392. 					const { context, responseText } = response
  393. 					const results = parseSearchResults(responseText)
  394.  
  395. 					if (results.length == 0) {
  396. 						throw `There is no game with title ${context.query}`
  397. 					}
  398.  
  399. 					// I have to sort results and this is not so easy,
  400. 					// metacritic gives stupid order, e.g
  401. 					// most relevant game for "mass effect" is ME: Andromeda,
  402. 					// not the first Mass Effect game from 2007.
  403. 					// lets assume that GOG has correct game titles
  404. 					// then we can get game from results with the same
  405. 					// title as in search query
  406. 					const ind = results.findIndex(result => result.title.toLowerCase()===context.query.toLowerCase())
  407. 					if (ind != -1) {
  408. 						const res = results.splice(ind, 1)[0]
  409. 						results.unshift(res)
  410. 					}
  411.  
  412. 					return results[0]
  413. 				},
  414. 					e => console.error("Network Error", e)
  415. 			)
  416. 			.then(gameData => {
  417.  
  418. 					// request to the game page to get
  419. 					// user score and reviews count
  420. 					return ajax({
  421. 						url: gameData.pageurl,
  422. 						method: 'GET',
  423. 						headers: defaultHeaders,
  424. 						context: { gameData },
  425. 					})
  426. 				},
  427. 					// catches error, if there is no such game
  428. 					e => console.error(e)
  429. 			).then(response => {
  430. 					const { context, responseText } = response
  431. 					const { gameData } = context
  432. 					const doc = $(new DOMParser().parseFromString(responseText, 'text/html'))
  433.  
  434. 					gameData.userReviewsCount = getUserReviesCount(doc)
  435. 					gameData.userscore = getUserScore(doc)
  436. 					gameData.criticReviewsCount = getCriticReviewsCount(doc)
  437. 					
  438. 					return { ...gameData, queryString: gameName }
  439. 				},
  440. 					// catches error when fetching game page
  441. 					e => console.error(e)
  442. 			);
  443. 	}
  444.  
  445. 	function MetacriticLogo(props) {
  446. 		let { reviewsUrl } = props
  447.  
  448. 		return `
  449. 			<div class="mcg-logo">
  450. 				<div class="mcg-logo__img" title="metacritic logo"></div>
  451. 				<p>
  452. 					metacritic
  453. 					<a href=${ reviewsUrl || "#" } target="_blank" rel="noopener noreferer">
  454. 						Read reviews
  455. 						<img src="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22%3E %3Cpath fill=%22%23fff%22 stroke=%22%2336c%22 d=%22M1.5 4.518h5.982V10.5H1.5z%22/%3E %3Cpath fill=%22%2336c%22 d=%22M5.765 1H11v5.39L9.427 7.937l-1.31-1.31L5.393 9.35l-2.69-2.688 2.81-2.808L4.2 2.544z%22/%3E %3Cpath fill=%22%23fff%22 d=%22M9.995 2.004l.022 4.885L8.2 5.07 5.32 7.95 4.09 6.723l2.882-2.88-1.85-1.852z%22/%3E %3C/svg%3E" />
  456. 					</a>
  457. 				</p>
  458. 			</div>
  459. 		`
  460. 	}
  461.  
  462. 	function getScoreColor(score) {
  463. 		// tbd - gray
  464. 		// 0-49 - red
  465. 		// 50-74 - yellow
  466. 		// 75 - 100 - green
  467. 	
  468. 		if (score === 'tbd' || score !== score)
  469. 			// default bg color is already present in css
  470. 			return ''
  471. 		else {
  472. 			if (score < 50)			return 'mcg-score--bad'
  473. 			else if (score < 75)	return 'mcg-score--mixed'
  474. 			else					return 'mcg-score--good'
  475. 		}
  476. 	}
  477.  
  478. 	/**
  479. 	 * Converts user score value to its string representation.
  480. 	 * @param {Number} score user score
  481. 	 * @returns {String} a string in format like "7.0" or "8.8",
  482. 	 * or "tbd" if a given score is NaN 
  483. 	 */
  484. 	function formatUserScore(score) {
  485. 		return score !== score ? 'tbd' : score.toFixed(1)
  486. 	}
  487.  
  488. 	/**
  489. 	 * Converts critic score to its string representation.
  490. 	 * @param {Number} score critic score 
  491. 	 * @returns {String} a string like "98" or "100",
  492. 	 * or "tbd" if a given score is NaN
  493. 	 */
  494. 	function formatMetaScore(score) {
  495. 		return score !== score ? 'tbd' : score
  496. 	}
  497.  
  498. 	function ScoreSummary(props) {
  499. 		const { score, scoreLabel, scoreTypeClass, scoreColorClass } = props
  500. 		const scoreEltClass = `"mcg-score-summary__score ${scoreTypeClass} ${scoreColorClass}"`
  501. 		
  502. 		return `
  503. 			<div class="mcg-score-summary">
  504. 				<span class=${ scoreEltClass }>${ score }</span>
  505. 				<span class="mcg-score-summary__label">${ scoreLabel }</span>
  506. 			</div>
  507. 		`
  508. 	}
  509.  
  510. 	function MetacriticScore(props) {
  511. 		const { metascore, userscore, pageurl } = props;
  512.  
  513. 		return `
  514. 		<div class='mcg-wrap'>
  515. 			${ ScoreSummary({ 
  516. 				score: formatUserScore(userscore), 
  517. 				scoreLabel: 'User score', 
  518. 				scoreTypeClass: 'mcg-score-summary__score--circle',
  519. 				scoreColorClass: getScoreColor(userscore * 10),
  520. 				}) 
  521. 			}
  522. 			${ ScoreSummary({ 
  523. 				score: formatMetaScore(metascore), 
  524. 				scoreLabel: 'Meta score',
  525. 				scoreTypeClass: '',
  526. 				scoreColorClass: getScoreColor(metascore),
  527. 				})
  528. 			}
  529. 			${ MetacriticLogo({ reviewsUrl: pageurl }) }
  530. 		</div>
  531. 		`
  532. 	}
  533.  
  534. 	// =============================================================
  535. 	//
  536. 	// Code section
  537. 	//
  538. 	// =============================================================
  539.  
  540. 	GM_addStyle(css).then(style => style.id = 'metacritic-for-gog')
  541. 	
  542. 	// getting game title
  543. 	const title = document.getElementsByClassName("productcard-basics__title")[0]
  544.  
  545. 	// process request to metacritic
  546. 	getGameData(title.textContent).then(data => {
  547. 		
  548. 		const metascore = MetacriticScore(data) 
  549. 		$('div[content-summary-section-id="productDetails"] > .details')
  550. 			.append('<hr class="details__separator"/>')
  551. 			.append(metascore)
  552. 			.append('<hr class="details__separator"/>')
  553. 	})
  554. 	
  555. })();