☰

Metacritic score for GOG

Adds metacritic score to GOG game's page

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

  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.0
  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. 	//
  43. 	// API section
  44. 	//
  45. 	// =============================================================
  46.  
  47. 	const css = (() => {
  48. 		return `
  49. .mcg-wrap {
  50. 	/* Base size for all icons */
  51. 	--size: 80px;
  52.  
  53. 	display: flex;
  54. 	flex-flow: row;
  55. 	flex-wrap: wrap;
  56. 	align-items: center;
  57. 	justify-content: center;
  58.  
  59. 	width: auto;
  60. 	padding: 4px;
  61. 	box-sizing: border-box;
  62. }
  63.  
  64. .mcg-wrap * {
  65. 	all: unset;
  66. 	box-sizing: border-box;
  67. }
  68.  
  69. .mcg-score-summary {
  70. 	display: flex;
  71. 	flex-flow: row nowrap;
  72. 	justify-content: flex-start;
  73. 	align-items: center;
  74.  
  75. 	margin: 0 2px 0 2px;
  76. }
  77.  
  78. .mcg-score-summary__score {
  79. 	display: flex;
  80. 	flex-flow: row;
  81. 	justify-content: center;
  82. 	align-items: center;
  83.  
  84. 	min-width: calc(var(--size) * 0.5);
  85. 	min-height: calc(var(--size) * 0.5);
  86. 	width: calc(var(--size) * 0.5);
  87. 	height: calc(var(--size) * 0.5);
  88. 	margin: 0 4px 0 4px;
  89.  
  90. 	background-color: #0f0;
  91. 	background-color: #c0c0c0;
  92. 	border-radius: 6px;
  93. 	font-family: sans-serif;
  94. 	
  95. 	font-size: 1.2em;
  96. 	font-weight: bold;
  97. 	color: white;
  98. }
  99.  
  100. .mcg-score--bad {
  101. 	background-color: #f00;
  102. 	color: white;
  103. }
  104.  
  105. .mcg-score--mixed {
  106. 	background-color: #fc3;
  107. 	color: #111;
  108. }
  109.  
  110. .mcg-score--good {
  111. 	background-color: #6c3;
  112. 	color: white;
  113. }
  114.  
  115. .mcg-score-summary__score--circle {
  116. 	border-radius: 50%;
  117. }
  118.  
  119. .mcg-score-summary .mcg-score-summary__label {
  120. 	align-self: flex-start;
  121. 	align-self: center;
  122. 	
  123. 	max-width: 50px;
  124.  
  125. 	font-size: 0.9em;
  126. 	font-size: 14px;
  127. 	font-weight: bold;
  128. 	text-align: left;
  129. 	text-align: center;
  130. }
  131.  
  132. .mcg-logo {
  133. 	display: flex;
  134. 	flex-flow: row;
  135. 	align-items: center;
  136. }
  137.  
  138. .mcg-logo__img {
  139. 	background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Metacritic.svg/200px-Metacritic.svg.png);
  140. 	background-position: center center;
  141. 	background-size: cover;
  142. 	
  143. 	min-width: calc(var(--size) * 0.5);
  144. 	min-height: calc(var(--size) * 0.5);
  145. 	width: calc(var(--size) * 0.5);
  146. 	height: calc(var(--size) * 0.5);
  147. }
  148.  
  149. .mcg-logo p {
  150. 	display: flex;
  151. 	flex-flow: column;
  152. 	align-items: center;
  153. 	justify-content: center;
  154.  
  155. 	margin: 4px 6px;
  156.  
  157. 	font-family: sans-serif;
  158. 	font-size: 22px;
  159. 	text-align: center;
  160. 	font-weight: bold;
  161. }
  162.  
  163. .mcg-logo p > a {
  164. 	cursor: pointer;
  165. 	
  166. 	text-decoration: underline;
  167. 	font-size: 0.65em;
  168. 	font-size: 14px;
  169. 	font-weight: normal;
  170. 	color: #36c;
  171. }`
  172. 	})()
  173.  
  174. 	const defaultHeaders = {
  175. 		"Origin": null,
  176. 		"Referer": null,
  177. 	}
  178.  
  179. 	/**
  180. 	 * Sends xmlHttpRequest via GM api (this allows crossdomain reqeusts).
  181. 	 * NOTE Different userscript engines support different
  182. 	 * details object format.
  183. 	 * 
  184. 	 * Violentmonkey @see https://violentmonkey.github.io/api/gm/#gm_xmlhttprequest
  185. 	 * 
  186. 	 * Greasemonkey @see https://wiki.greasespot.net/GM.xmlHttpRequest
  187. 	 * @param {Object} details @see ...
  188. 	 * @returns {Promise}
  189. 	 */
  190. 	function ajax(details) {
  191. 		return new Promise((resolve, reject) => {
  192. 			details.onloadend = resolve
  193. 			details.onerror = reject
  194. 			GM_xmlhttpRequest(details)
  195. 		}) 
  196. 	}
  197.  
  198. 	/**
  199. 	 * Returns an URL to make a search request
  200. 	 * for given game.
  201. 	 * @param {String} game Game name
  202. 	 * @param {String} platform Target platform (PC is default)
  203. 	 */
  204. 	function getSearhURL(game, platform) {
  205. 		// searches GAME only in "game" for PC platform (plats[3]=1)
  206. 		///TODO sanitize game name (trim, remove extra spacebars etc) ?
  207. 		return `https://www.metacritic.com/search/game/${game}/results?search_type=advanced&plats[3]=1`
  208. 	}
  209.  
  210. 	/**
  211. 	 * Returns an array of search results from given html code
  212. 	 * @param {String} html Raw html from which seach results will be parsed
  213. 	 */
  214. 	function parseSearchResults(html) {
  215. 		
  216. 		const doc = new DOMParser().parseFromString(html, 'text/html')
  217. 		const yearReg = /\d{4}/
  218. 		const results = $(doc).find('ul.search_results .result_wrap')
  219.  
  220. 		return results.map((ind, elt) => {
  221. 			const result = $(elt)
  222. 			let year = yearReg.exec(result.find('.main_stats p').text())
  223. 			year = year == null ? 0 : parseInt(year[0])
  224. 			
  225. 			return {
  226. 				title: result.find('.product_title').text().trim(),
  227. 				pageurl: 'https://www.metacritic.com' + result.find('.product_title > a').attr('href'),
  228. 				platform: result.find('.platform').text().trim(),
  229. 				year,
  230. 				metascore: parseInt(result.find('.metascore_w').text()),
  231. 				criticReviewsCount: 0,
  232. 				userscore: 0.0,
  233. 				userReviewsCount: 0,
  234. 				description: result.find('.deck').text().trim()
  235. 			}
  236. 		})
  237. 		.get()
  238. 	}
  239.  
  240. 	function swap(arr, ind1, ind2) {
  241. 		const tmp = arr[ind1]
  242. 		arr[ind1] = arr[ind2]
  243. 		arr[ind2] = tmp
  244. 	}
  245.  
  246. 	/**
  247. 	 * Returns integer which represents total user reviews
  248. 	 * @param {Object} doc jQuery document object
  249. 	 * @returns {Number}
  250. 	 */
  251. 	function getUserReviesCount(doc) {
  252. 		const reg = /\d+/
  253. 		let count = doc.find('.feature_userscore .count a').text()
  254. 		count = reg.exec(count)
  255. 		count = count == null ? 0 : parseInt(count[0])
  256. 		return count;
  257. 	}
  258.  
  259. 	/**
  260. 	 * Returns float which represents user score
  261. 	 * @param {Object} doc jQuery document object
  262. 	 * @returns {Number}
  263. 	 */
  264. 	function getUserScore(doc) {
  265. 		return parseFloat(doc.find('.feature_userscore .metascore_w.user').eq(0).text())
  266. 	}
  267. 	
  268. 	/**
  269. 	 * Returns a number of crititc reviews
  270. 	 * @param {Object} doc jQuery document object
  271. 	 * @returns {Number}
  272. 	 */
  273. 	function getCriticReviewsCount(doc) {
  274. 		return parseInt(doc.find('.score_summary.metascore_summary a>span').text())
  275. 	}
  276.  
  277. 	/**
  278. 	 * Converts given object to string 
  279. 	 * like `foo=bar&bizz=bazz`
  280. 	 * @param {Object} obj 
  281. 	 */
  282. 	function objectToUrlArgs(obj) {
  283. 		return Object.entries(obj)
  284. 			.map(kv => `${kv[0]}=${kv[1]}`)
  285. 			.join('&')
  286. 	}
  287.  
  288. 	/**
  289. 	 * Query metacritic autosearch api.
  290. 	 * Returns Promise with an array with results objects.
  291. 	 * Result object properties:
  292. 	 * - url: link to page
  293. 	 * - name: game name
  294. 	 * - itemDate: release date (string ?)
  295. 	 * - imagePath: url to cover image
  296. 	 * - metaScore: critic score (int)
  297. 	 * - scoreWord: like mixed, good, bad etc
  298. 	 * - refType: item type, e.g "PC Game"
  299. 	 * - refTypeId: type id, (string)
  300. 	 * @param {String} query term for search
  301. 	 * @returns {Promise}
  302. 	 */
  303. 	function autoSearch(query) {
  304. 		return ajax({
  305. 			url: 'https://www.metacritic.com/autosearch',
  306. 			method: 'post',
  307. 			data: objectToUrlArgs({ image_size: 98, search_term: query }),
  308. 			responseType: 'json',
  309. 			// Strictly recomended to watch Network log
  310. 			// and get Request Headers from it
  311. 			headers: {
  312. 				"Origin": null,
  313. 				"Referer": "https://www.metacritic.com",
  314. 				"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
  315. 				"X-Requested-With":	"XMLHttpRequest"
  316. 			}
  317. 		})
  318. 		.then(response => JSON.parse(response.responseText).autoComplete)
  319. 	}
  320.  
  321. 	/**
  322. 	 * Queries metacritic search page with given query.
  323. 	 * Returns Promise with `response` object.
  324. 	 * Html code of the page can be read from `response.responseText`
  325. 	 * @param {String} query term for search
  326. 	 * @returns {Promise}
  327. 	 */
  328. 	function fullSearch(query) {
  329. 		return ajax({
  330. 			url: getSearhURL(query),
  331. 			method: "GET",
  332. 			headers: defaultHeaders,
  333. 			context: { query }
  334. 		})
  335. 	}
  336.  
  337. 	/**
  338. 	 * Returns a resolved Promise with game data object on success
  339. 	 * and rejected Promise on failure.
  340. 	 * Game data object has these fields:
  341. 	 * - title: Game title
  342. 	 * - pageurl: Game page url
  343. 	 * - platform: Game platform (pc, ps3 etc)
  344. 	 * - year: Release year (int)
  345. 	 * - metascore: Critic score (int)
  346. 	 * - criticReviewsCount: The number of critic reviews
  347. 	 * - userscore: User score (float)
  348. 	 * - userReviewsCount: The number of user reviews
  349. 	 * - description: Description of the game
  350. 	 * - queryString: Original query string
  351. 	 * @param {String} gameName Game name
  352. 	 */
  353. 	function getGameData(gameName) {
  354. 		return fullSearch(gameName)
  355. 			.then(response => {
  356. 					const { context, responseText } = response
  357. 					const results = parseSearchResults(responseText)
  358.  
  359. 					if (results.length == 0) {
  360. 						throw `There is no game with title ${context.query}`
  361. 					}
  362.  
  363. 					// I have to sort results and this is not so easy,
  364. 					// metacritic gives stupid order, e.g
  365. 					// most relevant game for "mass effect" is ME: Andromeda,
  366. 					// not the first Mass Effect game from 2007.
  367. 					// lets assume that GOG has correct game titles
  368. 					// then we can get game from results with the same
  369. 					// title as in search query
  370. 					const ind = results.findIndex(result => result.title.toLowerCase()===context.query.toLowerCase())
  371. 					if (ind != -1) {
  372. 						const res = results.splice(ind, 1)[0]
  373. 						results.unshift(res)
  374. 					}
  375.  
  376. 					return results[0]
  377. 				},
  378. 					e => console.error("Network Error", e)
  379. 			)
  380. 			.then(gameData => {
  381.  
  382. 					// request to the game page to get
  383. 					// user score and reviews count
  384. 					return ajax({
  385. 						url: gameData.pageurl,
  386. 						method: 'GET',
  387. 						headers: defaultHeaders,
  388. 						context: { gameData },
  389. 					})
  390. 				},
  391. 					// catches error, if there is no such game
  392. 					e => console.error(e)
  393. 			).then(response => {
  394. 					const { context, responseText } = response
  395. 					const { gameData } = context
  396. 					const doc = $(new DOMParser().parseFromString(responseText, 'text/html'))
  397.  
  398. 					gameData.userReviewsCount = getUserReviesCount(doc)
  399. 					gameData.userscore = getUserScore(doc)
  400. 					gameData.criticReviewsCount = getCriticReviewsCount(doc)
  401. 					
  402. 					return { ...gameData, queryString: gameName }
  403. 				},
  404. 					// catches error when fetching game page
  405. 					e => console.error(e)
  406. 			);
  407. 	}
  408.  
  409. 	function MetacriticLogo(props) {
  410. 		let { reviewsUrl } = props
  411.  
  412. 		return `
  413. 			<div class="mcg-logo">
  414. 				<div class="mcg-logo__img" title="metacritic logo"></div>
  415. 				<p>
  416. 					metacritic
  417. 					<a href=${ reviewsUrl || "#" } target="_blank" rel="noopener noreferer">
  418. 						Read reviews
  419. 						<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" />
  420. 					</a>
  421. 				</p>
  422. 			</div>
  423. 		`
  424. 	}
  425.  
  426. 	function getScoreColor(score) {
  427. 		// tbd - gray
  428. 		// 0-49 - red
  429. 		// 50-74 - yellow
  430. 		// 75 - 100 - green
  431. 	
  432. 		if (score === 'tbd' || score !== score)
  433. 			// default bg color is already present in css
  434. 			return ''
  435. 		else {
  436. 			// convert score to 100 scale
  437. 			if (Math.floor(score) !== score) score = score * 10
  438. 			if (score < 50)			return 'mcg-score--bad'
  439. 			else if (score < 75)	return 'mcg-score--mixed'
  440. 			else					return 'mcg-score--good'
  441. 		}
  442. 	}
  443.  
  444. 	function ScoreSummary(props) {
  445. 		const { score, scoreLabel, scoreTypeClass } = props
  446. 		const scoreText = (score !== score) ? "tbd" : score;
  447. 		const scoreEltClass = `"mcg-score-summary__score ${scoreTypeClass} ${ getScoreColor(score) }"`
  448. 		
  449. 		return `
  450. 			<div class="mcg-score-summary">
  451. 				<span class=${ scoreEltClass }>${ scoreText }</span>
  452. 				<span class="mcg-score-summary__label">${ scoreLabel }</span>
  453. 			</div>
  454. 		`
  455. 	}
  456.  
  457. 	function MetacriticScore(props) {
  458. 		const { metascore, userscore, pageurl } = props;
  459.  
  460. 		return `
  461. 		<div class='mcg-wrap'>
  462. 			${ ScoreSummary({ 
  463. 				score: userscore, 
  464. 				scoreLabel: 'User score', 
  465. 				scoreTypeClass: 'mcg-score-summary__score--circle' 
  466. 				}) 
  467. 			}
  468. 			${ ScoreSummary({ 
  469. 				score: metascore, 
  470. 				scoreLabel: 'Meta score',
  471. 				scoreTypeClass: ""
  472. 				})
  473. 			}
  474. 			${ MetacriticLogo({ reviewsUrl: pageurl }) }
  475. 		</div>
  476. 		`
  477. 	}
  478.  
  479. 	// =============================================================
  480. 	//
  481. 	// Code section
  482. 	//
  483. 	// =============================================================
  484.  
  485. 	GM_addStyle(css).then(style => style.id = 'metacritic-for-gog')
  486. 	
  487. 	// getting game title
  488. 	const title = document.getElementsByClassName("productcard-basics__title")[0]
  489.  
  490. 	// process request to metacritic
  491. 	getGameData(title.textContent).then(data => {
  492. 		
  493. 		const metascore = MetacriticScore(data) 
  494. 		$('div[content-summary-section-id="productDetails"] > .details')
  495. 			.append('<hr class="details__separator"/>')
  496. 			.append(metascore)
  497. 			.append('<hr class="details__separator"/>')
  498. 	})
  499. 	
  500. })();