diff --git a/app/modules/SteamApp.php b/app/modules/SteamApp.php index 60492a0..a20c5ed 100644 --- a/app/modules/SteamApp.php +++ b/app/modules/SteamApp.php @@ -39,12 +39,18 @@ class SteamApp if ((isset($obj->$appid->success)) && ($obj->$appid->success)) { $obj->$appid->data->online_count = 0; + $obj->$appid->data->rating_count = 0; try { $obj->$appid->data->online_count = static::queryUserCount($appid); } catch (\Exception $e) { } + try { + $obj->$appid->data->rating_count = static::queryRating($appid); + } catch (\Exception $e) { + } + return $obj->$appid->data; } @@ -84,4 +90,48 @@ class SteamApp throw new \Exception('Invalid data response'); } + + /** + * Query user rating + * + * @param $appid + * @return int + */ + public static function queryRating($appid) + { + $url = "https://store.steampowered.com/app/{$appid}/?l=english"; + + $handle = curl_init($url); + + curl_setopt($handle, CURLOPT_HEADER, false); + curl_setopt($handle, CURLOPT_RETURNTRANSFER, true); + curl_setopt($handle, CURLOPT_FOLLOWLOCATION, true); + + $response = curl_exec($handle); + + if(curl_error($handle) !== '') { + throw new \Exception('cURL error occured'); + } + + curl_close($handle); + + $metacode = ' 0) ? cardStyle: '') + `> @@ -169,8 +185,12 @@ class SteamAppElem extends HTMLElement
-
` + json.data.name + `
-
` + ((onlineCountText.length > 0) ? onlineCountText : '') + `
+
+
` + json.data.name + `
+
` + ratingCode + `
+
+ +
` + ((onlineCountText.length > 0) ? onlineCountText : '') + `
@@ -205,6 +225,7 @@ class SteamAppElem extends HTMLElement this.storedData.playtext, this.storedData.author, this.storedData.onlinecount, + this.storedData.rating, this.storedData.width, this.storedData.height, this.storedData.styleBorder, @@ -231,6 +252,7 @@ class SteamAppElem extends HTMLElement this.storedData.playtext, this.storedData.author, this.storedData.onlinecount, + this.storedData.rating, this.storedData.width, this.storedData.height, this.storedData.styleBorder, @@ -254,6 +276,7 @@ class SteamAppElem extends HTMLElement this.storedData.playtext, this.storedData.author, this.storedData.onlinecount, + this.storedData.rating, this.storedData.width, this.storedData.height, this.storedData.styleBorder, @@ -309,6 +332,7 @@ class SteamApp var appid = (typeof config.appid !== 'undefined') ? config.appid : null; var lang = (typeof config.lang !== 'undefined') ? config.lang : 'english'; var onlinecount = (typeof config.onlinecount !== 'undefined') ? config.onlinecount : null; + var rating = (typeof config.rating !== 'undefined') ? config.rating : 0; var playtext = (typeof config.playtext !== 'undefined') ? config.playtext : 'Play on Steam'; var author = (typeof config.author !== 'undefined') ? config.author : 'By :developer'; var width = (typeof config.width !== 'undefined') ? config.width : null; @@ -334,6 +358,10 @@ class SteamApp styleHideImage = (typeof config.style.hideimage !== 'undefined') ? config.style.hideimage : 0; } + if (typeof rating === 'boolean') { + rating = (rating) ? 1 : 0; + } + if (typeof styleShadow === 'boolean') { styleShadow = (styleShadow) ? 1 : 0; } @@ -347,6 +375,7 @@ class SteamApp this.elem.setAttribute('lang', lang); this.elem.setAttribute('playtext', playtext); this.elem.setAttribute('author', author); + this.elem.setAttribute('rating', rating); this.elem.setAttribute('style-border', styleBorder); this.elem.setAttribute('style-shadow', styleShadow); this.elem.setAttribute('style-color-background', styleColorBackground); diff --git a/app/views/index.php b/app/views/index.php index f92cc11..d7cb786 100644 --- a/app/views/index.php +++ b/app/views/index.php @@ -103,61 +103,66 @@ + rating + If set to true then the app rating will be shown as a 5-star-system, otherwise it is hidden + + + playtext Specifies the text of the button that eventually links to the Steam products store page - + author Specify a text that is displayed as the author of the product. You can use :developer and :publisher to dynamically insert the products developer and publisher names - + width Specify the width of the card - + height Specify the height of the card - + style-border / style.border Specify border rounding: Either none, small or max - + style-shadow / style.shadow You can specify false to prevent displaying box shadow or true to enable (default) - + style-color-background / style.colorBackground Specify a CSS value for the background color - + style-color-title / style.colorTitle Specify a CSS value for the title color - + style-color-description / style.colorDescription Specify a CSS value for the description color - + style-color-author / style.colorAuthor Specify a CSS value for the author color - + style-color-onlinecount / style.colorOnlinecount Specify a CSS value for the online count color - + style-hideimage / style.hideimage Specify whether the card image shall be hidden or not diff --git a/public/css/steamcards/v1/steam_app.css b/public/css/steamcards/v1/steam_app.css index 98a57b6..52ebec8 100644 --- a/public/css/steamcards/v1/steam_app.css +++ b/public/css/steamcards/v1/steam_app.css @@ -29,14 +29,28 @@ margin-bottom: 10px; } -.steam-app-title-name { +.steam-app-title-left { display: inline-block; +} + +.steam-app-title-left-name { color: rgb(220, 220, 220); font-size: 1.1em; font-family: Verdana, Arial, sans-serif; } -.steam-app-title-count { +.steam-app-title-left-rating { + position: relative; + top: -8px; + font-size: 0.8em; +} + +.steam-app-title-left-rating-star-grey { + color: transparent; + text-shadow: 0 0 0 rgb(200, 200, 200); +} + +.steam-app-title-right { position: relative; display: inline-block; top: 5px; diff --git a/public/js/steamcards/v1/steam_app.js b/public/js/steamcards/v1/steam_app.js index 409e3f9..45b42a8 100644 --- a/public/js/steamcards/v1/steam_app.js +++ b/public/js/steamcards/v1/steam_app.js @@ -25,6 +25,7 @@ class SteamAppElem extends HTMLElement var playtext = (typeof this.attributes.playtext !== 'undefined') ? this.attributes.playtext.value : 'Play on Steam'; var author = (typeof this.attributes.author !== 'undefined') ? this.attributes.author.value : 'By :developer'; var onlinecount = (typeof this.attributes.onlinecount !== 'undefined') ? this.attributes.onlinecount.value : null; + var rating = (typeof this.attributes.rating !== 'undefined') ? parseInt(this.attributes.rating.value) : 0; var width = (typeof this.attributes.width !== 'undefined') ? this.attributes.width.value : null; var height = (typeof this.attributes.height !== 'undefined') ? this.attributes.height.value : null; var styleBorder = (typeof this.attributes['style-border'] !== 'undefined') ? this.attributes['style-border'].value : null; @@ -43,6 +44,7 @@ class SteamAppElem extends HTMLElement playtext: playtext, author: author, onlinecount: onlinecount, + rating: rating, width: width, height: height, styleBorder: styleBorder, @@ -61,6 +63,7 @@ class SteamAppElem extends HTMLElement playtext, author, onlinecount, + rating, width, height, styleBorder, @@ -75,7 +78,7 @@ class SteamAppElem extends HTMLElement } } - setupCard(appid, lang, playtext, author, onlinecount, width, height, styleBorder, styleShadow, styleColorBackground, styleColorTitle, styleColorDescription, styleColorAuthor, styleColorOnlinecount, styleHideImage) + setupCard(appid, lang, playtext, author, onlinecount, rating, width, height, styleBorder, styleShadow, styleColorBackground, styleColorTitle, styleColorDescription, styleColorAuthor, styleColorOnlinecount, styleHideImage) { var req = new XMLHttpRequest(); var self = this; @@ -162,6 +165,19 @@ class SteamAppElem extends HTMLElement cardStyle = 'style="' + widthCode + borderCode + shadowCode + bgColor + '"'; } + + let ratingCode = ''; + if (rating) { + ratingCode = '
'; + + for (let i = 0; i < Math.round(json.data.rating_count / 2); i++) { + ratingCode += '⭐'; + } + + for (let i = Math.round(json.data.rating_count / 2); i < 5; i++) { + ratingCode += '⭐'; + } + } let html = `
0) ? cardStyle: '') + `> @@ -169,8 +185,12 @@ class SteamAppElem extends HTMLElement
-
` + json.data.name + `
-
` + ((onlineCountText.length > 0) ? onlineCountText : '') + `
+
+
` + json.data.name + `
+
` + ratingCode + `
+
+ +
` + ((onlineCountText.length > 0) ? onlineCountText : '') + `
@@ -205,6 +225,7 @@ class SteamAppElem extends HTMLElement this.storedData.playtext, this.storedData.author, this.storedData.onlinecount, + this.storedData.rating, this.storedData.width, this.storedData.height, this.storedData.styleBorder, @@ -231,6 +252,7 @@ class SteamAppElem extends HTMLElement this.storedData.playtext, this.storedData.author, this.storedData.onlinecount, + this.storedData.rating, this.storedData.width, this.storedData.height, this.storedData.styleBorder, @@ -254,6 +276,7 @@ class SteamAppElem extends HTMLElement this.storedData.playtext, this.storedData.author, this.storedData.onlinecount, + this.storedData.rating, this.storedData.width, this.storedData.height, this.storedData.styleBorder, @@ -309,6 +332,7 @@ class SteamApp var appid = (typeof config.appid !== 'undefined') ? config.appid : null; var lang = (typeof config.lang !== 'undefined') ? config.lang : 'english'; var onlinecount = (typeof config.onlinecount !== 'undefined') ? config.onlinecount : null; + var rating = (typeof config.rating !== 'undefined') ? config.rating : 0; var playtext = (typeof config.playtext !== 'undefined') ? config.playtext : 'Play on Steam'; var author = (typeof config.author !== 'undefined') ? config.author : 'By :developer'; var width = (typeof config.width !== 'undefined') ? config.width : null; @@ -334,6 +358,10 @@ class SteamApp styleHideImage = (typeof config.style.hideimage !== 'undefined') ? config.style.hideimage : 0; } + if (typeof rating === 'boolean') { + rating = (rating) ? 1 : 0; + } + if (typeof styleShadow === 'boolean') { styleShadow = (styleShadow) ? 1 : 0; } @@ -347,6 +375,7 @@ class SteamApp this.elem.setAttribute('lang', lang); this.elem.setAttribute('playtext', playtext); this.elem.setAttribute('author', author); + this.elem.setAttribute('rating', rating); this.elem.setAttribute('style-border', styleBorder); this.elem.setAttribute('style-shadow', styleShadow); this.elem.setAttribute('style-color-background', styleColorBackground);