Rating for apps

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 = '<meta itemprop="ratingValue" content="';
+        $metaitem = strpos($response, $metacode);
+        if ($metaitem !== false) {
+            $metaitem += strlen($metacode);
+
+            $rating = '';
+            for ($i = $metaitem; $i < strlen($response); $i++) {
+                if (substr($response, $i, 1) === '"') {
+                    break;
+                }
+
+                $rating .= substr($response, $i, 1);
+            }
+
+            return intval($rating);
+        }
+
+        return 0;
+    }
 }

app/resources/css/steam_app.dev.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;

app/resources/js/steam_app.dev.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;
@@ -163,14 +166,31 @@ class SteamAppElem extends HTMLElement
                     cardStyle = 'style="' + widthCode + borderCode + shadowCode + bgColor + '"';
                 }
                 
+                let ratingCode = '';
+                if (rating) {
+                    ratingCode = '<br/>';
+
+                    for (let i = 0; i < Math.round(json.data.rating_count / 2); i++) {
+                        ratingCode += '<span>&#x2B50;</span>';
+                    }
+
+                    for (let i = Math.round(json.data.rating_count / 2); i < 5; i++) {
+                        ratingCode += '<span class="steam-app-title-left-rating-star-grey">&#x2B50;</span>';
+                    }
+                }
+
                 let html = `
                     <div class="steam-app" ` + ((cardStyle.length > 0) ? cardStyle: '') + `>
                         <div class="steam-app-image" style="background-image: url('` + json.data.header_image + `'); ` + ((height !== null) ? 'height: ' + height + 'px;' : '') + ((cardImageStyle.length > 0) ? cardImageStyle : '') + ((styleHideImage) ? 'display: none;' : '') + `"></div>
                     
                         <div class="steam-app-infos">
                             <div class="steam-app-title">
-                                <div class="steam-app-title-name" ` + ((styleColorTitle !== null) ? 'style="color: ' + styleColorTitle + ';"' : '') + `>` + json.data.name + `</div>
+                                <div class="steam-app-title-left">
-                                <div class="steam-app-title-count" ` + ((styleColorOnlinecount !== null) ? 'style="color: ' + styleColorOnlinecount + ';"' : '') + `>` + ((onlineCountText.length > 0) ? onlineCountText : '') + `</div>
+                                    <div class="steam-app-title-left-name" ` + ((styleColorTitle !== null) ? 'style="color: ' + styleColorTitle + ';"' : '') + `>` + json.data.name + `</div>
+                                    <div class="steam-app-title-left-rating">` + ratingCode + `</div>
+                                </div>
+                                
+                                <div class="steam-app-title-right" ` + ((styleColorOnlinecount !== null) ? 'style="color: ' + styleColorOnlinecount + ';"' : '') + `>` + ((onlineCountText.length > 0) ? onlineCountText : '') + `</div>
                             </div>
                             
                             <div class="steam-app-description" ` + ((styleColorDescription !== null) ? 'style="color: ' + styleColorDescription + ';"' : '') + `>
@@ -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);

app/views/index.php

@@ -103,61 +103,66 @@
 				</tr>
 
 				<tr>
+					<td>rating</td>
+					<td>If set to true then the app rating will be shown as a 5-star-system, otherwise it is hidden</td>
+				</tr>
+
+				<tr class="tr-colored">
 					<td>playtext</td>
 					<td>Specifies the text of the button that eventually links to the Steam products store page</td>
 				</tr>
 
-				<tr class="tr-colored">
+				<tr>
 					<td>author</td>
 					<td>Specify a text that is displayed as the author of the product. You can use <b>:developer</b> and <b>:publisher</b> to dynamically insert the products developer and publisher names</td>
 				</tr>
 
-				<tr>
+				<tr class="tr-colored">
 					<td>width</td>
 					<td>Specify the width of the card</td>
 				</tr>
 
-				<tr class="tr-colored">
+				<tr>
 					<td>height</td>
 					<td>Specify the height of the card</td>
 				</tr>
 
-				<tr>
+				<tr class="tr-colored">
 					<td>style-border / style.border</td>
 					<td>Specify border rounding: Either none, small or max</td>
 				</tr>
 
-				<tr class="tr-colored">
+				<tr>
 					<td>style-shadow / style.shadow</td>
 					<td>You can specify false to prevent displaying box shadow or true to enable (default)</td>
 				</tr>
 
-				<tr>
+				<tr class="tr-colored">
 					<td>style-color-background / style.colorBackground</td>
 					<td>Specify a CSS value for the background color</td>
 				</tr>
 
-				<tr class="tr-colored">
+				<tr>
 					<td>style-color-title / style.colorTitle</td>
 					<td>Specify a CSS value for the title color</td>
 				</tr>
 
-				<tr>
+				<tr class="tr-colored">
 					<td>style-color-description / style.colorDescription</td>
 					<td>Specify a CSS value for the description color</td>
 				</tr>
 
-				<tr class="tr-colored">
+				<tr>
 					<td>style-color-author / style.colorAuthor</td>
 					<td>Specify a CSS value for the author color</td>
 				</tr>
 
-				<tr>
+				<tr class="tr-colored">
 					<td>style-color-onlinecount / style.colorOnlinecount</td>
 					<td>Specify a CSS value for the online count color</td>
 				</tr>
 
-				<tr class="tr-colored">
+				<tr>
 					<td>style-hideimage / style.hideimage</td>
 					<td>Specify whether the card image shall be hidden or not</td>
 				</tr>

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;

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;
@@ -163,14 +166,31 @@ class SteamAppElem extends HTMLElement
                     cardStyle = 'style="' + widthCode + borderCode + shadowCode + bgColor + '"';
                 }
                 
+                let ratingCode = '';
+                if (rating) {
+                    ratingCode = '<br/>';
+
+                    for (let i = 0; i < Math.round(json.data.rating_count / 2); i++) {
+                        ratingCode += '<span>&#x2B50;</span>';
+                    }
+
+                    for (let i = Math.round(json.data.rating_count / 2); i < 5; i++) {
+                        ratingCode += '<span class="steam-app-title-left-rating-star-grey">&#x2B50;</span>';
+                    }
+                }
+
                 let html = `
                     <div class="steam-app" ` + ((cardStyle.length > 0) ? cardStyle: '') + `>
                         <div class="steam-app-image" style="background-image: url('` + json.data.header_image + `'); ` + ((height !== null) ? 'height: ' + height + 'px;' : '') + ((cardImageStyle.length > 0) ? cardImageStyle : '') + ((styleHideImage) ? 'display: none;' : '') + `"></div>
                     
                         <div class="steam-app-infos">
                             <div class="steam-app-title">
-                                <div class="steam-app-title-name" ` + ((styleColorTitle !== null) ? 'style="color: ' + styleColorTitle + ';"' : '') + `>` + json.data.name + `</div>
+                                <div class="steam-app-title-left">
-                                <div class="steam-app-title-count" ` + ((styleColorOnlinecount !== null) ? 'style="color: ' + styleColorOnlinecount + ';"' : '') + `>` + ((onlineCountText.length > 0) ? onlineCountText : '') + `</div>
+                                    <div class="steam-app-title-left-name" ` + ((styleColorTitle !== null) ? 'style="color: ' + styleColorTitle + ';"' : '') + `>` + json.data.name + `</div>
+                                    <div class="steam-app-title-left-rating">` + ratingCode + `</div>
+                                </div>
+                                
+                                <div class="steam-app-title-right" ` + ((styleColorOnlinecount !== null) ? 'style="color: ' + styleColorOnlinecount + ';"' : '') + `>` + ((onlineCountText.length > 0) ? onlineCountText : '') + `</div>
                             </div>
                             
                             <div class="steam-app-description" ` + ((styleColorDescription !== null) ? 'style="color: ' + styleColorDescription + ';"' : '') + `>
@@ -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);