Sophia/steamwidgets-web
1
0
Fork 0
mirror of https://github.com/SophiaAtkinson/steamwidgets-web.git synced 2025-06-27 18:57:41 -07:00
Code Issues Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Daniel Brendel
2022-08-16 13:54:30 +02:00
commit 94353ac3c8
64 changed files with 32771 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
public/.htaccess Normal file
View File

@ -0,0 +1,21 @@
<IfModule mod_rewrite.c>
<IfModule mod_negotiation.c>
Options -MultiViews -Indexes
</IfModule>
RewriteEngine On
# Handle Authorization Header
RewriteCond %{HTTP:Authorization} .
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
# Redirect Trailing Slashes If Not A Folder...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} (.+)/$
RewriteRule ^ %1 [L,R=301]
# Handle Front Controller...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [L]
</IfModule>

159
public/css/app.css Normal file
View File

@ -0,0 +1,159 @@
/*
app.scss
*/
html, body {
width: 100%;
height: auto;
margin: 0 auto;
}
body {
overflow-x: hidden;
}
@media screen and (min-width: 1088px) {
.navbar-start {
flex-grow: 1;
justify-content: center;
transform: translate(11%, -0%)
}
}
.is-font-title {
font-family: 'Helvetica', Verdana, Arial, sans-serif;
font-size: 20px;
}
.content-section {
padding: 20px;
}
.content-centered {
text-align: center;
}
.content-top-margin {
margin-top: 90px;
}
@media screen and (max-width: 1088px) {
.content-top-margin {
margin-top: 58px;
}
}
.content-section h1 {
font-size: 2.0em;
margin-bottom: 10px;
}
.content-section h2 {
font-size: 1.5em;
color: rgb(100, 100, 100);
}
.content-section h3 {
font-size: 1.2em;
color: rgb(100, 100, 100);
margin-bottom: 30px;
}
.content-section p {
margin-bottom: 20px;
}
.content-section a {
color: #3273dc;
}
.content-section a:hover {
color: #3273dc;
text-decoration: underline;
}
.content-section pre {
padding: unset;
margin-top: -15px;
margin-bottom: -61px;
background-color: unset;
}
.content-section code {
background-color: rgb(230, 230, 230);
border-radius: 4px;
}
.content-section ul {
list-style: square;
}
.content-section li {
margin-left: 15px;
}
.content-section table {
margin-bottom: 40px;
}
.content-section tbody {
border: 1px solid #ccc;
}
.content-section td {
padding: 15px;
}
.tr-colored {
background-color: rgb(200, 200, 200);
}
.content-section hr {
background-color: rgb(200, 200, 200);
}
.scroll-to-top {
position: fixed;
z-index: 3;
bottom: 12px;
right: 12px;
}
.scroll-to-top-inner {
background-color: rgb(100, 100, 100);
border-radius: 50%;
padding: 12px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.scroll-to-top-inner a {
color: rgb(200, 200, 200);
}
.scroll-to-top-inner a:hover {
color: rgb(200, 200, 200);
}
.footer {
width: 100%;
color: rgb(100, 100, 100);
background-color: rgb(235, 235, 235);
padding: 1rem 1.5rem 1rem;
}
.footer-frame {
width: 100%;
}
.footer-content {
text-align: center;
}
.footer-content a {
color: rgb(130, 130, 130);
}
.footer-content a:hover {
color: rgb(150, 150, 150);
text-decoration: none;
}

11406
public/css/bulma.css vendored Normal file
View File

File diff suppressed because it is too large Load Diff

89
public/css/steamcards/v1/steam_app.css Normal file
View File

@ -0,0 +1,89 @@
.steam-app {
position: relative;
max-width: 360px;
background-color: rgb(22, 32, 45);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 25px;
margin-top: 20px;
margin-left: 10px;
margin-right: 10px;
}
.steam-app-image {
position: relative;
width: 100%;
height: 176px;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.steam-app-infos {
position: relative;
padding: 15px;
}
.steam-app-title {
width: 100%;
margin-bottom: 10px;
}
.steam-app-title-name {
display: inline-block;
color: rgb(220, 220, 220);
font-size: 1.1em;
font-family: Verdana, Arial, sans-serif;
}
.steam-app-title-count {
position: relative;
display: inline-block;
top: 5px;
color: rgb(55, 230, 111);
font-size: 0.8em;
font-family: Verdana, Arial, sans-serif;
float: right;
}
.steam-app-description {
width: 100%;
color: rgb(150, 150, 150);
font-size: 0.8em;
font-family: Verdana, Arial, sans-serif;
margin-bottom: 20px;
}
.steam-app-footer {
width: 100%;
margin-bottom: 10px;
}
.steam-app-footer-author {
display: inline-block;
color: rgb(200, 200, 200);
font-family: Verdana, Arial, sans-serif;
font-size: 0.8em;
}
.steam-app-footer-button {
display: inline-block;
float: right;
}
.steam-app-footer-button a {
color: #D2E885;
background: linear-gradient(to bottom, #a4d007 5%, #536904 95%);
border-radius: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
text-decoration: none;
font-size: 0.9em;
font-family: 'Motiva Sans', sans-serif;
}
.steam-app-footer-button a:hover {
color: rgb(250, 250, 250);
}

103
public/css/steamcards/v1/steam_server.css Normal file
View File

@ -0,0 +1,103 @@
.steam-server {
position: relative;
max-width: 360px;
background-color: rgb(22, 32, 45);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 25px;
margin-top: 20px;
margin-left: 10px;
margin-right: 10px;
}
.steam-server-image {
position: relative;
width: 100%;
height: 176px;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.steam-server-infos {
position: relative;
padding: 15px;
}
.steam-server-title {
}
.steam-server-title-left {
position: relative;
display: inline-block;
}
.steam-server-title-left-addr {
color: rgb(200, 200, 200);
}
.steam-server-title-left-name {
color: rgb(150, 150, 150);
font-size: 0.8em;
}
.steam-server-title-right {
position: relative;
display: inline-block;
float: right;
}
.steam-server-title-right-count {
color: rgb(130, 130, 130);
font-size: 0.7em;
}
.steam-server-title-right-bots {
color: rgb(130, 130, 130);
font-size: 0.7em;
}
.steam-server-gameinfo {
position: relative;
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
}
.steam-server-gameinfo-item {
color: rgb(150, 150, 150);
font-size: 0.65em;
}
.steam-server-gameinfo-item-green {
color: rgb(85, 190, 111);
}
.steam-server-gameinfo-item-red {
color: rgb(179, 115, 115);
}
.steam-server-action {
position: relative;
display: inline-block;
float: right;
margin-top: 10px;
margin-bottom: 10px;
}
.steam-server-action a {
color: #D2E885;
background: linear-gradient(to bottom, #a4d007 5%, #536904 95%);
border-radius: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
text-decoration: none;
font-size: 0.9em;
font-family: 'Motiva Sans', sans-serif;
}
.steam-server-action a:hover {
color: rgb(250, 250, 250);
}

97
public/css/steamcards/v1/steam_user.css Normal file
View File

@ -0,0 +1,97 @@
.steam-user {
position: relative;
max-width: 360px;
background-color: rgb(22, 32, 45);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 25px;
margin-top: 20px;
margin-left: 10px;
margin-right: 10px;
}
.steam-user-image {
position: relative;
width: 100%;
height: 176px;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.steam-user-infos {
position: relative;
padding: 15px;
}
.steam-user-infos-left {
position: relative;
display: inline-block;
}
.steam-user-infos-left-avatar {
position: relative;
display: inline-block;
}
.steam-user-infos-left-avatar img {
width: 64px;
height: 64px;
border-radius: 50%;
}
.steam-user-infos-left-text {
position: relative;
display: inline-block;
top: -16px;
margin-left: 10px;
}
.steam-user-infos-left-text-name {
color: rgb(200, 200, 200);
}
.steam-user-infos-left-text-since {
color: rgb(150, 150, 150);
font-size: 0.8em;
}
.steam-user-infos-right {
position: relative;
display: inline-block;
margin-right: 5px;
float: right;
}
.steam-user-infos-right-online {
position: relative;
top: 11px;
color: rgb(100, 100, 100);
font-size: 0.8em;
}
.steam-user-infos-right-online-green {
color: rgb(85, 190, 111);
}
.steam-user-infos-right-view {
position: relative;
top: 15px;
}
.steam-user-infos-right-view a {
color: #D2E885;
background: linear-gradient(to bottom, #a4d007 5%, #536904 95%);
border-radius: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
text-decoration: none;
font-size: 0.9em;
font-family: 'Motiva Sans', sans-serif;
}
.steam-user-infos-right-view a:hover {
color: rgb(250, 250, 250);
}

BIN
public/img/genbg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 148 KiB

BIN
public/img/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

21
public/index.php Normal file
View File

@ -0,0 +1,21 @@
<?php
/*
Asatru PHP (dnyAsatruPHP) developed by Daniel Brendel
(C) 2019 - 2022 by Daniel Brendel
Version: 1.0
Contact: dbrendel1988<at>gmail<dot>com
GitHub: https://github.com/danielbrendel/
Released under the MIT license
*/
//If composer is installed then utilize its autoloader
if (file_exists(__DIR__ . '/../vendor/autoload.php')) {
require_once __DIR__ . '/../vendor/autoload.php';
}
//Include the framework bootstrap script in order to process the application
require_once __DIR__ . '/../vendor/danielbrendel/asatru-php-framework/src/bootstrap.php';

1
public/js/app.js Normal file
View File

File diff suppressed because one or more lines are too long

2
public/js/fontawesome.js Normal file
View File

@ -0,0 +1,2 @@
window.FontAwesomeKitConfig = {"asyncLoading":{"enabled":true},"autoA11y":{"enabled":true},"baseUrl":"https://kit-free.fontawesome.com","license":"free","method":"css","minify":{"enabled":true},"v4shim":{"enabled":false},"version":"latest"};
!function(){!function(){if(!(void 0===window.Element||"classList"in document.documentElement)){var e,t,n,i=Array.prototype,o=i.push,a=i.splice,s=i.join;r.prototype={add:function(e){this.contains(e)||(o.call(this,e),this.el.className=this.toString())},contains:function(e){return-1!=this.el.className.indexOf(e)},item:function(e){return this[e]||null},remove:function(e){if(this.contains(e)){for(var t=0;t<this.length&&this[t]!=e;t++);a.call(this,t,1),this.el.className=this.toString()}},toString:function(){return s.call(this," ")},toggle:function(e){return this.contains(e)?this.remove(e):this.add(e),this.contains(e)}},window.DOMTokenList=r,e=Element.prototype,t="classList",n=function(){return new r(this)},Object.defineProperty?Object.defineProperty(e,t,{get:n}):e.__defineGetter__(t,n)}function r(e){for(var t=(this.el=e).className.replace(/^\s+|\s+$/g,"").split(/\s+/),n=0;n<t.length;n++)o.call(this,t[n])}}();function f(e){var t,n,i,o;prefixesArray=e||["fa"],prefixesSelectorString="."+Array.prototype.join.call(e,",."),t=document.querySelectorAll(prefixesSelectorString),Array.prototype.forEach.call(t,function(e){n=e.getAttribute("title"),e.setAttribute("aria-hidden","true"),i=!e.nextElementSibling||!e.nextElementSibling.classList.contains("sr-only"),n&&i&&((o=document.createElement("span")).innerHTML=n,o.classList.add("sr-only"),e.parentNode.insertBefore(o,e.nextSibling))})}var e,t,u=function(e){var t=document.createElement("link");t.href=e,t.media="all",t.rel="stylesheet",document.getElementsByTagName("head")[0].appendChild(t)},m=function(e){!function(e,t,n){var i,o=window.document,a=o.createElement("link");if(t)i=t;else{var s=(o.body||o.getElementsByTagName("head")[0]).childNodes;i=s[s.length-1]}var r=o.styleSheets;a.rel="stylesheet",a.href=e,a.media="only x",function e(t){if(o.body)return t();setTimeout(function(){e(t)})}(function(){i.parentNode.insertBefore(a,t?i:i.nextSibling)});var l=function(e){for(var t=a.href,n=r.length;n--;)if(r[n].href===t)return e();setTimeout(function(){l(e)})};function c(){a.addEventListener&&a.removeEventListener("load",c),a.media=n||"all"}a.addEventListener&&a.addEventListener("load",c),(a.onloadcssdefined=l)(c)}(e)},n=function(e,t){var n=t&&void 0!==t.autoFetchSvg?t.autoFetchSvg:void 0,i=t&&void 0!==t.async?t.async:void 0,o=t&&void 0!==t.autoA11y?t.autoA11y:void 0,a=document.createElement("script"),s=document.scripts[0];a.src=e,void 0!==o&&a.setAttribute("data-auto-a11y",o?"true":"false"),n&&(a.setAttributeNode(document.createAttribute("data-auto-fetch-svg")),a.setAttribute("data-fetch-svg-from",t.fetchSvgFrom)),i&&a.setAttributeNode(document.createAttribute("defer")),s.parentNode.appendChild(a)};function h(e,t){var n=t&&t.shim?e.license+"-v4-shims":e.license,i=t&&t.minify?".min":"";return e.baseUrl+"/releases/"+("latest"===e.version?"latest":"v".concat(e.version))+"/"+e.method+"/"+n+i+"."+e.method}try{if(window.FontAwesomeKitConfig){var i=window.FontAwesomeKitConfig;"js"===i.method&&(t={async:(e=i).asyncLoading.enabled,autoA11y:e.autoA11y.enabled},"pro"===e.license&&(t.autoFetchSvg=!0,t.fetchSvgFrom=e.baseUrl+"/releases/"+("latest"===e.version?"latest":"v".concat(e.version))+"/svgs"),e.v4shim.enabled&&n(h(e,{shim:!0,minify:e.minify.enabled})),n(h(e,{minify:e.minify.enabled}),t)),"css"===i.method&&function(e){var t,n,i,o,a,s,r,l,c=f.bind(f,["fa","fab","fas","far","fal"]);e.autoA11y.enabled&&(n=c,o=[],a=document,s=a.documentElement.doScroll,r="DOMContentLoaded",(l=(s?/^loaded|^c/:/^loaded|^i|^c/).test(a.readyState))||a.addEventListener(r,i=function(){for(a.removeEventListener(r,i),l=1;i=o.shift();)i()}),l?setTimeout(n,0):o.push(n),t=c,"undefined"!=typeof MutationObserver&&new MutationObserver(t).observe(document,{childList:!0,subtree:!0})),e.v4shim.enabled&&(e.asyncLoading.enabled?m(h(e,{shim:!0,minify:e.minify.enabled})):u(h(e,{shim:!0,minify:e.minify.enabled})));var d=h(e,{minify:e.minify.enabled});e.asyncLoading.enabled?m(d):u(d)}(i)}}catch(e){}}();

396
public/js/steamcards/v1/steam_app.js Normal file
View File

@ -0,0 +1,396 @@
/**
* SteamCards - Steam Cards for your website
*
* Module: Steam Game/App Widget
*
* Visit: https://github.com/danielbrendel
*/
const STEAMCARDS_APP_ENDPOINT = 'http://localhost:8000';
const STEAMCARDS_APP_VERSION = 'v1';
/**
* Class SteamAppElem
*
* Handle custom HTML element to render Steam app/game widgets
*/
class SteamAppElem extends HTMLElement
{
storedData = {};
connectedCallback()
{
var appid = (typeof this.attributes.appid !== 'undefined') ? this.attributes.appid.value : null;
var lang = (typeof this.attributes.lang !== 'undefined') ? this.attributes.lang.value : 'english';
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 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;
var styleShadow = (typeof this.attributes['style-shadow'] !== 'undefined') ? parseInt(this.attributes['style-shadow'].value) : 1;
var styleColorBackground = (typeof this.attributes['style-color-background'] !== 'undefined') ? this.attributes['style-color-background'].value : null;
var styleColorTitle = (typeof this.attributes['style-color-title'] !== 'undefined') ? this.attributes['style-color-title'].value : null;
var styleColorDescription = (typeof this.attributes['style-color-description'] !== 'undefined') ? this.attributes['style-color-description'].value : null;
var styleColorAuthor = (typeof this.attributes['style-color-author'] !== 'undefined') ? this.attributes['style-color-author'].value : null;
var styleColorOnlinecount = (typeof this.attributes['style-color-onlinecount'] !== 'undefined') ? this.attributes['style-color-onlinecount'].value : null;
var styleHideImage = (typeof this.attributes['style-hideimage'] !== 'undefined') ? parseInt(this.attributes['style-hideimage'].value) : 0;
if (appid !== null) {
this.storedData = {
appid: appid,
lang: lang,
playtext: playtext,
author: author,
onlinecount: onlinecount,
width: width,
height: height,
styleBorder: styleBorder,
styleShadow: styleShadow,
styleColorBackground: styleColorBackground,
styleColorTitle: styleColorTitle,
styleColorDescription: styleColorDescription,
styleColorAuthor: styleColorAuthor,
styleColorOnlinecount: styleColorOnlinecount,
styleHideImage: styleHideImage
};
this.setupCard(
appid,
lang,
playtext,
author,
onlinecount,
width,
height,
styleBorder,
styleShadow,
styleColorBackground,
styleColorTitle,
styleColorDescription,
styleColorAuthor,
styleColorOnlinecount,
styleHideImage
);
}
}
setupCard(appid, lang, playtext, author, onlinecount, width, height, styleBorder, styleShadow, styleColorBackground, styleColorTitle, styleColorDescription, styleColorAuthor, styleColorOnlinecount, styleHideImage)
{
var req = new XMLHttpRequest();
var self = this;
req.onreadystatechange = function() {
if (req.readyState == XMLHttpRequest.DONE) {
let json = JSON.parse(req.responseText);
if (author.indexOf(':developer') !== false) {
let developers = '';
json.data.developers.forEach(function(elem, index) {
developers += elem;
if (index < json.data.developers.length - 1) {
developers += ', ';
}
});
author = author.replace(':developer', developers);
}
if (author.indexOf(':publisher') !== false) {
let publishers = '';
json.data.publishers.forEach(function(elem, index) {
publishers += elem;
if (index < json.data.publishers.length - 1) {
publishers += ', ';
}
});
author = author.replace(':publisher', publishers);
}
if (!document.getElementById('steamcards-app-styles')) {
let link = document.createElement('link');
link.id = 'steamcards-app-styles';
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = STEAMCARDS_APP_ENDPOINT + '/api/resource/query?type=css&module=app&version=' + STEAMCARDS_APP_VERSION;
document.getElementsByTagName('head')[0].appendChild(link);
}
let onlineCountText = '';
if ((onlinecount !== null) && (json.data.online_count > 0)) {
onlineCountText = onlinecount;
onlineCountText = onlineCountText.replace(':count', self.readableCount(json.data.online_count));
}
let cardImageStyle = '';
let cardStyle = '';
if ((width !== null) || (styleBorder !== null) || (styleShadow !== true) || (styleColorBackground !== null)) {
let widthCode = '';
if (width !== null) {
widthCode = 'max-width: ' + width + 'px;';
}
let borderCode = '';
if (styleBorder !== null) {
if (styleBorder === 'max') {
borderCode = 'border-radius: 25px;';
cardImageStyle = 'border-top-left-radius: 25px; border-top-right-radius: 25px;';
} else if (styleBorder === 'small') {
borderCode = 'border-radius: 4px;';
cardImageStyle = 'border-top-left-radius: 4px; border-top-right-radius: 4px;';
} else if (styleBorder === 'none') {
borderCode = 'border-radius: unset;';
cardImageStyle = 'border-top-left-radius: unset; border-top-right-radius: unset;';
}
}
let shadowCode = '';
if (!styleShadow) {
shadowCode = 'box-shadow: unset;';
}
let bgColor = '';
if (styleColorBackground !== null) {
bgColor = 'background-color: ' + styleColorBackground + ';';
}
cardStyle = 'style="' + widthCode + borderCode + shadowCode + bgColor + '"';
}
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-count" ` + ((styleColorOnlinecount !== null) ? 'style="color: ' + styleColorOnlinecount + ';"' : '') + `>` + ((onlineCountText.length > 0) ? onlineCountText : '') + `</div>
</div>
<div class="steam-app-description" ` + ((styleColorDescription !== null) ? 'style="color: ' + styleColorDescription + ';"' : '') + `>
` + json.data.short_description + `
</div>
<div class="steam-app-footer">
<div class="steam-app-footer-author" ` + ((styleColorAuthor !== null) ? 'style="color: ' + styleColorAuthor + ';"' : '') + `>
` + author + `
</div>
<div class="steam-app-footer-button">
<a href="https://store.steampowered.com/app/` + json.appid + `">` + playtext + `</a>
</div>
</div>
</div>
</div>
`;
self.innerHTML = html;
}
};
req.open('GET', STEAMCARDS_APP_ENDPOINT + '/api/query/app?appid=' + appid + '&lang=' + lang, true);
req.send();
}
updateCard()
{
this.setupCard(
this.storedData.appid,
this.storedData.lang,
this.storedData.playtext,
this.storedData.author,
this.storedData.onlinecount,
this.storedData.width,
this.storedData.height,
this.storedData.styleBorder,
this.storedData.styleShadow,
this.storedData.styleColorBackground,
this.storedData.styleColorTitle,
this.storedData.styleColorDescription,
this.storedData.styleColorAuthor,
this.storedData.styleColorOnlinecount,
this.storedData.styleHideImage
);
}
changeLang(lang, playtext, author, onlinecount)
{
this.storedData.lang = lang;
this.storedData.playtext = playtext;
this.storedData.author = author;
this.storedData.onlinecount = onlinecount;
this.setupCard(
this.storedData.appid,
this.storedData.lang,
this.storedData.playtext,
this.storedData.author,
this.storedData.onlinecount,
this.storedData.width,
this.storedData.height,
this.storedData.styleBorder,
this.storedData.styleShadow,
this.storedData.styleColorBackground,
this.storedData.styleColorTitle,
this.storedData.styleColorDescription,
this.storedData.styleColorAuthor,
this.storedData.styleColorOnlinecount,
this.storedData.styleHideImage
);
}
setImageVisibility(visibility)
{
this.storedData.styleHideImage = !visibility;
this.setupCard(
this.storedData.appid,
this.storedData.lang,
this.storedData.playtext,
this.storedData.author,
this.storedData.onlinecount,
this.storedData.width,
this.storedData.height,
this.storedData.styleBorder,
this.storedData.styleShadow,
this.storedData.styleColorBackground,
this.storedData.styleColorTitle,
this.storedData.styleColorDescription,
this.storedData.styleColorAuthor,
this.storedData.styleColorOnlinecount,
this.storedData.styleHideImage
);
}
readableCount(count)
{
const COUNT_MILLION = 1000000;
const COUNT_HUNDREDTHOUSAND = 100000;
const COUNT_TENTHOUSAND = 10000;
const COUNT_THOUSAND = 1000;
if (count >= COUNT_MILLION) {
return (Math.round(count / COUNT_MILLION, 1)).toString() + 'M';
} else if ((count < COUNT_MILLION) && (count >= COUNT_HUNDREDTHOUSAND)) {
return (Math.round(count / COUNT_THOUSAND, 1)).toString() + 'K';
} else if ((count < COUNT_HUNDREDTHOUSAND) && (count >= COUNT_TENTHOUSAND)) {
return (Math.round(count / COUNT_THOUSAND, 1)).toString() + 'K';
} else if ((count < COUNT_TENTHOUSAND) && (count >= COUNT_THOUSAND)) {
return (Math.round(count / COUNT_THOUSAND, 1)).toString() + 'K';
} else {
return count.toString();
}
}
}
window.customElements.define('steam-app', SteamAppElem);
/**
* Class SteamApp
*
* Dynamically create a Steam game/app card via JavaScript
*/
class SteamApp
{
elem = null;
selident = null;
cfg = {};
constructor(selector, config = {})
{
this.selident = selector;
this.cfg = config;
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 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;
var height = (typeof config.height !== 'undefined') ? config.height : null;
var styleBorder = null;
var styleShadow = 1;
var styleColorBackground = null;
var styleColorTitle = null;
var styleColorDescription = null;
var styleColorAuthor = null;
var styleColorOnlinecount = null;
var styleHideImage = 0;
if (typeof config.style !== 'undefined') {
styleBorder = (typeof config.style.border !== 'undefined') ? config.style.border : null;
styleShadow = (typeof config.style.shadow !== 'undefined') ? config.style.shadow : 1;
styleColorBackground = (typeof config.style.colorBackground !== 'undefined') ? config.style.colorBackground : null;
styleColorTitle = (typeof config.style.colorTitle !== 'undefined') ? config.style.colorTitle : null;
styleColorDescription = (typeof config.style.colorDescription !== 'undefined') ? config.style.colorDescription : null;
styleColorAuthor = (typeof config.style.colorAuthor !== 'undefined') ? config.style.colorAuthor : null;
styleColorOnlinecount = (typeof config.style.colorOnlinecount !== 'undefined') ? config.style.colorOnlinecount : null;
styleHideImage = (typeof config.style.hideimage !== 'undefined') ? config.style.hideimage : 0;
}
if (typeof styleShadow === 'boolean') {
styleShadow = (styleShadow) ? 1 : 0;
}
if (typeof styleHideImage === 'boolean') {
styleHideImage = (styleHideImage) ? 1 : 0;
}
this.elem = document.createElement('steam-app');
this.elem.setAttribute('appid', appid);
this.elem.setAttribute('lang', lang);
this.elem.setAttribute('playtext', playtext);
this.elem.setAttribute('author', author);
this.elem.setAttribute('style-border', styleBorder);
this.elem.setAttribute('style-shadow', styleShadow);
this.elem.setAttribute('style-color-background', styleColorBackground);
this.elem.setAttribute('style-color-title', styleColorTitle);
this.elem.setAttribute('style-color-description', styleColorDescription);
this.elem.setAttribute('style-color-author', styleColorAuthor);
this.elem.setAttribute('style-color-onlinecount', styleColorOnlinecount);
this.elem.setAttribute('style-hideimage', styleHideImage);
if (onlinecount !== null) {
this.elem.setAttribute('onlinecount', onlinecount);
}
if (width !== null) {
this.elem.setAttribute('width', width);
}
if (height !== null) {
this.elem.setAttribute('height', height);
}
let sel = document.querySelector(selector);
if (sel) {
sel.appendChild(this.elem);
}
}
updateCard()
{
this.elem.updateCard();
}
changeLang(lang, playtext, author, onlinecount)
{
this.elem.changeLang(lang, playtext, author, onlinecount);
}
setImageVisibility(visibility)
{
this.elem.setImageVisibility(visibility);
}
remove()
{
this.elem.remove();
}
}

377
public/js/steamcards/v1/steam_server.js Normal file
View File

@ -0,0 +1,377 @@
/**
* SteamCards - Steam Cards for your website
*
* Module: Steam Server Widget
*
* Visit: https://github.com/danielbrendel
*/
const STEAMCARDS_SERVER_ENDPOINT = 'http://localhost:8000';
const STEAMCARDS_SERVER_VERSION = 'v1';
/**
* Class SteamServerElem
*
* Handle custom HTML element to render Steam server widgets
*/
class SteamServerElem extends HTMLElement
{
storedData = {};
oldHeader = '';
connectedCallback()
{
var addr = (typeof this.attributes.addr !== 'undefined') ? this.attributes.addr.value : null;
var header = (typeof this.attributes.header !== 'undefined') ? this.attributes.header.value : '';
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 bots = (typeof this.attributes.bots !== 'undefined') ? this.attributes.bots.value : ':count bots';
var secure_yes = (typeof this.attributes['secure-yes'] !== 'undefined') ? this.attributes['secure-yes'].value : 'secure';
var secure_no = (typeof this.attributes['secure-no'] !== 'undefined') ? this.attributes['secure-no'].value : 'insecure';
var hosting_dedicated = (typeof this.attributes['hosting-dedicated'] !== 'undefined') ? this.attributes['hosting-dedicated'].value : 'dedicated';
var hosting_listen = (typeof this.attributes['hosting-listen'] !== 'undefined') ? this.attributes['hosting-listen'].value : 'listen';
var playtext = (typeof this.attributes.playtext !== 'undefined') ? this.attributes.playtext.value : 'Join';
var styleBorder = (typeof this.attributes['style-border'] !== 'undefined') ? this.attributes['style-border'].value : null;
var styleShadow = (typeof this.attributes['style-shadow'] !== 'undefined') ? parseInt(this.attributes['style-shadow'].value) : 1;
var styleColorBackground = (typeof this.attributes['style-color-background'] !== 'undefined') ? this.attributes['style-color-background'].value : null;
var styleColorTextBright = (typeof this.attributes['style-color-text-bright'] !== 'undefined') ? this.attributes['style-color-text-bright'].value : null;
var styleColorTextDark = (typeof this.attributes['style-color-text-dark'] !== 'undefined') ? this.attributes['style-color-text-dark'].value : null;
if (addr !== null) {
this.storedData = {
addr: addr,
header: header,
width: width,
height: height,
bots: bots,
secure_yes: secure_yes,
secure_no: secure_no,
hosting_dedicated: hosting_dedicated,
hosting_listen: hosting_listen,
playtext: playtext,
styleBorder: styleBorder,
styleShadow: styleShadow,
styleColorBackground: styleColorBackground,
styleColorTextBright,
styleColorTextDark
};
this.setupCard(
addr,
header,
width,
height,
bots,
secure_yes,
secure_no,
hosting_dedicated,
hosting_listen,
playtext,
styleBorder,
styleShadow,
styleColorBackground,
styleColorTextBright,
styleColorTextDark
);
}
}
setupCard(addr, header, width, height, bots, secure_yes, secure_no, hosting_dedicated, hosting_listen, playtext, styleBorder, styleShadow, styleColorBackground, styleColorTextBright, styleColorTextDark)
{
var req = new XMLHttpRequest();
var self = this;
req.onreadystatechange = function() {
if (req.readyState == XMLHttpRequest.DONE) {
let json = JSON.parse(req.responseText);
if (!document.getElementById('steamcards-server-styles')) {
let link = document.createElement('link');
link.id = 'steamcards-server-styles';
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = STEAMCARDS_SERVER_ENDPOINT + '/api/resource/query?type=css&module=server&version=' + STEAMCARDS_SERVER_VERSION;
document.getElementsByTagName('head')[0].appendChild(link);
}
let cardImageStyle = '';
let cardStyle = '';
if ((width !== null) || (styleBorder !== null) || (styleShadow !== true) || (styleColorBackground !== null)) {
let widthCode = '';
if (width !== null) {
widthCode = 'max-width: ' + width + 'px;';
}
let borderCode = '';
if (styleBorder !== null) {
if (styleBorder === 'max') {
borderCode = 'border-radius: 25px;';
cardImageStyle = 'border-top-left-radius: 25px; border-top-right-radius: 25px;';
} else if (styleBorder === 'small') {
borderCode = 'border-radius: 4px;';
cardImageStyle = 'border-top-left-radius: 4px; border-top-right-radius: 4px;';
} else if (styleBorder === 'none') {
borderCode = 'border-radius: unset;';
cardImageStyle = 'border-top-left-radius: unset; border-top-right-radius: unset;';
}
}
let shadowCode = '';
if (!styleShadow) {
shadowCode = 'box-shadow: unset;';
}
let bgColor = '';
if (styleColorBackground !== null) {
bgColor = 'background-color: ' + styleColorBackground + ';';
}
cardStyle = 'style="' + widthCode + borderCode + shadowCode + bgColor + '"';
}
let bgimage = '';
if (header !== '') {
bgimage = 'background-image: url(\'' + header + '\');';
}
bots = bots.replace(':count', json.data.bots);
let security = '';
let seccol = '';
if (json.data.secure) {
security = secure_yes;
seccol = 'steam-server-gameinfo-item-green';
} else {
security = secure_no;
seccol = 'steam-server-gameinfo-item-red';
}
let hosting = '';
if (json.data.dedicated) {
hosting = hosting_dedicated;
} else {
hosting = hosting_listen;
}
let html = `
<div class="steam-server" ` + ((cardStyle.length > 0) ? cardStyle: '') + `>
<div class="steam-server-image" style="` + bgimage + ` ` + ((header == '') ? 'display: none;' : '') + ` ` + ((height !== null) ? 'height: ' + height + 'px;' : '') + ((cardImageStyle.length > 0) ? cardImageStyle : '') + `"></div>
<div class="steam-server-infos">
<div class="steam-server-title">
<div class="steam-server-title-left">
<div class="steam-server-title-left-addr" ` + ((styleColorTextBright !== null) ? 'style="color: ' + styleColorTextBright + ';"' : '') + `>` + json.data.addr + `</div>
<div class="steam-server-title-left-name" ` + ((styleColorTextDark !== null) ? 'style="color: ' + styleColorTextDark + ';"' : '') + `>`+ json.data.name + `</div>
</div>
<div class="steam-server-title-right">
<div class="steam-server-title-right-count" ` + ((styleColorTextDark !== null) ? 'style="color: ' + styleColorTextDark + ';"' : '') + `>` + json.data.players + `/` + json.data.max_players + `</div>
<div class="steam-server-title-right-bots" ` + ((styleColorTextDark !== null) ? 'style="color: ' + styleColorTextDark + ';"' : '') + `>` + bots + `</div>
</div>
</div>
<div class="steam-server-footer">
<div class="steam-server-gameinfo" ` + ((styleColorTextDark !== null) ? 'style="color: ' + styleColorTextDark + ';"' : '') + `>
<span class="steam-server-gameinfo-item">` + json.data.product + `</span>
|
<span class="steam-server-gameinfo-item">`+ json.data.map + `</span>
|
<span class="steam-server-gameinfo-item ` + seccol + `">` + security + `</span>
|
<span class="steam-server-gameinfo-item">` + hosting + `</span>
</div>
<div class="steam-server-action">
<a href="steam://connect/` + json.data.addr + `">` + playtext + `</a>
</div>
</div>
</div>
</div>
`;
self.innerHTML = html;
}
};
req.open('GET', STEAMCARDS_SERVER_ENDPOINT + '/api/query/server?addr=' + addr, true);
req.send();
}
updateCard()
{
this.setupCard(
this.storedData.addr,
this.storedData.header,
this.storedData.width,
this.storedData.height,
this.storedData.bots,
this.storedData.secure_yes,
this.storedData.secure_no,
this.storedData.hosting_dedicated,
this.storedData.hosting_listen,
this.storedData.playtext,
this.storedData.styleBorder,
this.storedData.styleShadow,
this.storedData.styleColorBackground,
this.storedData.styleColorTextBright,
this.storedData.styleColorTextDark,
);
}
changeLang(bots, secure_yes, secure_no, hosting_dedicated, hosting_listen, playtext)
{
this.storedData.bots = bots;
this.storedData.secure_yes = secure_yes;
this.storedData.secure_no = secure_no;
this.storedData.hosting_dedicated = hosting_dedicated;
this.storedData.hosting_listen = hosting_listen;
this.storedData.playtext = playtext;
this.setupCard(
this.storedData.addr,
this.storedData.header,
this.storedData.width,
this.storedData.height,
this.storedData.bots,
this.storedData.secure_yes,
this.storedData.secure_no,
this.storedData.hosting_dedicated,
this.storedData.hosting_listen,
this.storedData.playtext,
this.storedData.styleBorder,
this.storedData.styleShadow,
this.storedData.styleColorBackground,
this.storedData.styleColorTextBright,
this.storedData.styleColorTextDark,
);
}
setImageVisibility(visibility)
{
if (visibility) {
this.storedData.header = this.oldHeader;
} else {
if (this.storedData.header != '') {
this.oldHeader = this.storedData.header;
}
this.storedData.header = '';
}
this.setupCard(
this.storedData.addr,
this.storedData.header,
this.storedData.width,
this.storedData.height,
this.storedData.bots,
this.storedData.secure_yes,
this.storedData.secure_no,
this.storedData.hosting_dedicated,
this.storedData.hosting_listen,
this.storedData.playtext,
this.storedData.styleBorder,
this.storedData.styleShadow,
this.storedData.styleColorBackground,
this.storedData.styleColorTextBright,
this.storedData.styleColorTextDark,
);
}
}
window.customElements.define('steam-server', SteamServerElem);
/**
* Class SteamServer
*
* Dynamically create a Steam server card via JavaScript
*/
class SteamServer
{
elem = null;
selident = null;
cfg = {};
constructor(selector, config = {})
{
this.selident = selector;
this.cfg = config;
var addr = (typeof config.addr !== 'undefined') ? config.addr : null;
var header = (typeof config.header !== 'undefined') ? config.header : '';
var width = (typeof config.width !== 'undefined') ? config.width : null;
var height = (typeof config.height !== 'undefined') ? config.height : null;
var bots = (typeof config.bots !== 'undefined') ? config.bots : ':count bots';
var secure_yes = (typeof config.secure_yes !== 'undefined') ? config.secure_yes : 'secure';
var secure_no = (typeof config.secure_no !== 'undefined') ? config.secure_no : 'insecure';
var hosting_dedicated = (typeof config.hosting_dedicated !== 'undefined') ? config.hosting_dedicated : 'dedicated';
var hosting_listen = (typeof config.hosting_listen !== 'undefined') ? config.hosting_listen : 'listen';
var playtext = (typeof config.playtext !== 'undefined') ? config.playtext : 'Join';
var styleBorder = null;
var styleShadow = 1;
var styleColorBackground = null;
var styleColorTextBright = null;
var styleColorTextDark = null;
if (typeof config.style !== 'undefined') {
styleBorder = (typeof config.style.border !== 'undefined') ? config.style.border : null;
styleShadow = (typeof config.style.shadow !== 'undefined') ? config.style.shadow : 1;
styleColorBackground = (typeof config.style.colorBackground !== 'undefined') ? config.style.colorBackground : null;
styleColorTextBright = (typeof config.style.colorTextBright !== 'undefined') ? config.style.colorTextBright : null;
styleColorTextDark = (typeof config.style.colorTextDark !== 'undefined') ? config.style.colorTextDark : null;
}
if (typeof styleShadow === 'boolean') {
styleShadow = (styleShadow) ? 1 : 0;
}
this.elem = document.createElement('steam-server');
this.elem.setAttribute('addr', addr);
this.elem.setAttribute('header', header);
this.elem.setAttribute('style-border', styleBorder);
this.elem.setAttribute('style-shadow', styleShadow);
this.elem.setAttribute('style-color-background', styleColorBackground);
this.elem.setAttribute('style-color-text-bright', styleColorTextBright);
this.elem.setAttribute('style-color-text-dark', styleColorTextDark);
this.elem.setAttribute('bots', bots);
this.elem.setAttribute('secure-yes', secure_yes);
this.elem.setAttribute('secure-no', secure_no);
this.elem.setAttribute('hosting-dedicated', hosting_dedicated);
this.elem.setAttribute('hosting-listen', hosting_listen);
this.elem.setAttribute('playtext', playtext);
if (width !== null) {
this.elem.setAttribute('width', width);
}
if (height !== null) {
this.elem.setAttribute('height', height);
}
let sel = document.querySelector(selector);
if (sel) {
sel.appendChild(this.elem);
}
}
updateCard()
{
this.elem.updateCard();
}
changeLang(bots, secure_yes, secure_no, hosting_dedicated, hosting_listen, playtext)
{
this.elem.changeLang(bots, secure_yes, secure_no, hosting_dedicated, hosting_listen, playtext);
}
setImageVisibility(visibility)
{
this.elem.setImageVisibility(visibility);
}
remove()
{
this.elem.remove();
}
}

344
public/js/steamcards/v1/steam_user.js Normal file
View File

@ -0,0 +1,344 @@
/**
* SteamCards - Steam Cards for your website
*
* Module: Steam User Widget
*
* Visit: https://github.com/danielbrendel
*/
const STEAMCARDS_USER_ENDPOINT = 'http://localhost:8000';
const STEAMCARDS_USER_VERSION = 'v1';
/**
* Class SteamUserElem
*
* Handle custom HTML element to render Steam user widgets
*/
class SteamUserElem extends HTMLElement
{
storedData = {};
oldHeader = '';
connectedCallback()
{
var steamid = (typeof this.attributes.steamid !== 'undefined') ? this.attributes.steamid.value : null;
var header = (typeof this.attributes.header !== 'undefined') ? this.attributes.header.value : '';
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 online_yes = (typeof this.attributes['online-yes'] !== 'undefined') ? this.attributes['online-yes'].value : 'online';
var online_no = (typeof this.attributes['online-no'] !== 'undefined') ? this.attributes['online-no'].value : 'offline';
var member_since = (typeof this.attributes['member-since'] !== 'undefined') ? this.attributes['member-since'].value : 'Member since: :year-:month-:day';
var viewtext = (typeof this.attributes.viewtext !== 'undefined') ? this.attributes.viewtext.value : 'View';
var styleBorder = (typeof this.attributes['style-border'] !== 'undefined') ? this.attributes['style-border'].value : null;
var styleShadow = (typeof this.attributes['style-shadow'] !== 'undefined') ? parseInt(this.attributes['style-shadow'].value) : 1;
var styleColorBackground = (typeof this.attributes['style-color-background'] !== 'undefined') ? this.attributes['style-color-background'].value : null;
var styleColorTextBright = (typeof this.attributes['style-color-text-bright'] !== 'undefined') ? this.attributes['style-color-text-bright'].value : null;
var styleColorTextDark = (typeof this.attributes['style-color-text-dark'] !== 'undefined') ? this.attributes['style-color-text-dark'].value : null;
if (steamid !== null) {
this.storedData = {
steamid: steamid,
header: header,
width: width,
height: height,
online_yes: online_yes,
online_no: online_no,
member_since: member_since,
viewtext: viewtext,
styleBorder: styleBorder,
styleShadow: styleShadow,
styleColorBackground: styleColorBackground,
styleColorTextBright,
styleColorTextDark
};
this.setupCard(
steamid,
header,
width,
height,
online_yes,
online_no,
member_since,
viewtext,
styleBorder,
styleShadow,
styleColorBackground,
styleColorTextBright,
styleColorTextDark
);
}
}
setupCard(steamid, header, width, height, online_yes, online_no, member_since, viewtext, styleBorder, styleShadow, styleColorBackground, styleColorTextBright, styleColorTextDark)
{
var req = new XMLHttpRequest();
var self = this;
req.onreadystatechange = function() {
if (req.readyState == XMLHttpRequest.DONE) {
let json = JSON.parse(req.responseText);
if (!document.getElementById('steamcards-user-styles')) {
let link = document.createElement('link');
link.id = 'steamcards-user-styles';
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = STEAMCARDS_USER_ENDPOINT + '/api/resource/query?type=css&module=user&version=' + STEAMCARDS_USER_VERSION;
document.getElementsByTagName('head')[0].appendChild(link);
}
let cardImageStyle = '';
let cardStyle = '';
if ((width !== null) || (styleBorder !== null) || (styleShadow !== true) || (styleColorBackground !== null)) {
let widthCode = '';
if (width !== null) {
widthCode = 'max-width: ' + width + 'px;';
}
let borderCode = '';
if (styleBorder !== null) {
if (styleBorder === 'max') {
borderCode = 'border-radius: 25px;';
cardImageStyle = 'border-top-left-radius: 25px; border-top-right-radius: 25px;';
} else if (styleBorder === 'small') {
borderCode = 'border-radius: 4px;';
cardImageStyle = 'border-top-left-radius: 4px; border-top-right-radius: 4px;';
} else if (styleBorder === 'none') {
borderCode = 'border-radius: unset;';
cardImageStyle = 'border-top-left-radius: unset; border-top-right-radius: unset;';
}
}
let shadowCode = '';
if (!styleShadow) {
shadowCode = 'box-shadow: unset;';
}
let bgColor = '';
if (styleColorBackground !== null) {
bgColor = 'background-color: ' + styleColorBackground + ';';
}
cardStyle = 'style="' + widthCode + borderCode + shadowCode + bgColor + '"';
}
let bgimage = '';
if (header !== '') {
bgimage = 'background-image: url(\'' + header + '\');';
}
let onstatus = '';
let oncolor = '';
if (json.data.personastate) {
onstatus = online_yes;
oncolor = 'steam-user-infos-right-online-green';
} else {
onstatus = online_no;
oncolor = '';
}
let regdate = new Date(json.data.timecreated * 1000);
member_since = member_since.replace(':year', regdate.getFullYear());
member_since = member_since.replace(':month', regdate.getMonth() + 1);
member_since = member_since.replace(':day', regdate.getDate());
let html = `
<div class="steam-user" ` + ((cardStyle.length > 0) ? cardStyle: '') + `>
<div class="steam-user-image" style="` + bgimage + ` ` + ((header == '') ? 'display: none;' : '') + ` ` + ((height !== null) ? 'height: ' + height + 'px;' : '') + ((cardImageStyle.length > 0) ? cardImageStyle : '') + `"></div>
<div class="steam-user-infos">
<div class="steam-user-infos-left">
<div class="steam-user-infos-left-avatar"><img src="` + json.data.avatarfull + `" alt="Avatar"/></div>
<div class="steam-user-infos-left-text">
<div class="steam-user-infos-left-text-name" ` + ((styleColorTextBright !== null) ? 'style="color: ' + styleColorTextBright + ';"' : '') + `>` + json.data.personaname + `</div>
<div class="steam-user-infos-left-text-since" ` + ((styleColorTextDark !== null) ? 'style="color: ' + styleColorTextDark + ';"' : '') + `>` + member_since + `</div>
</div>
</div>
<div class="steam-user-infos-right">
<div class="steam-user-infos-right-online ` + ((json.data.personastate) ? oncolor : '') + `" ` + (((styleColorTextDark !== null) && (json.data.personastate)) ? 'style="color: ' + styleColorTextDark + ';"' : '') + `>` + onstatus + `</div>
<div class="steam-user-infos-right-view">
<a href="` + json.data.profileurl + `">` + viewtext + `</a>
</div>
</div>
</div>
</div>
`;
self.innerHTML = html;
}
};
req.open('GET', STEAMCARDS_USER_ENDPOINT + '/api/query/user?steamid=' + steamid, true);
req.send();
}
updateCard()
{
this.setupCard(
this.storedData.steamid,
this.storedData.header,
this.storedData.width,
this.storedData.height,
this.storedData.online_yes,
this.storedData.online_no,
this.storedData.member_since,
this.storedData.viewtext,
this.storedData.styleBorder,
this.storedData.styleShadow,
this.storedData.styleColorBackground,
this.storedData.styleColorTextBright,
this.storedData.styleColorTextDark,
);
}
changeLang(online_yes, online_no, member_since, viewtext)
{
this.storedData.online_yes = online_yes;
this.storedData.online_no = online_no;
this.storedData.member_since = member_since;
this.storedData.viewtext = viewtext;
this.setupCard(
this.storedData.steamid,
this.storedData.header,
this.storedData.width,
this.storedData.height,
this.storedData.online_yes,
this.storedData.online_no,
this.storedData.member_since,
this.storedData.viewtext,
this.storedData.styleBorder,
this.storedData.styleShadow,
this.storedData.styleColorBackground,
this.storedData.styleColorTextBright,
this.storedData.styleColorTextDark,
);
}
setImageVisibility(visibility)
{
if (visibility) {
this.storedData.header = this.oldHeader;
} else {
if (this.storedData.header != '') {
this.oldHeader = this.storedData.header;
}
this.storedData.header = '';
}
this.setupCard(
this.storedData.steamid,
this.storedData.header,
this.storedData.width,
this.storedData.height,
this.storedData.online_yes,
this.storedData.online_no,
this.storedData.member_since,
this.storedData.viewtext,
this.storedData.styleBorder,
this.storedData.styleShadow,
this.storedData.styleColorBackground,
this.storedData.styleColorTextBright,
this.storedData.styleColorTextDark,
);
}
}
window.customElements.define('steam-user', SteamUserElem);
/**
* Class SteamUser
*
* Dynamically create a Steam user card via JavaScript
*/
class SteamUser
{
elem = null;
selident = null;
cfg = {};
constructor(selector, config = {})
{
this.selident = selector;
this.cfg = config;
var steamid = (typeof config.steamid !== 'undefined') ? config.steamid : null;
var header = (typeof config.header !== 'undefined') ? config.header : '';
var width = (typeof config.width !== 'undefined') ? config.width : null;
var height = (typeof config.height !== 'undefined') ? config.height : null;
var online_yes = (typeof config.online_yes !== 'undefined') ? config.online_yes : 'online';
var online_no = (typeof config.online_no !== 'undefined') ? config.online_no : 'offline';
var member_since = (typeof config.member_since !== 'undefined') ? config.member_since : 'Member since: :year-:month-:day';
var viewtext = (typeof config.viewtext !== 'undefined') ? config.viewtext : 'View';
var styleBorder = null;
var styleShadow = 1;
var styleColorBackground = null;
var styleColorTextBright = null;
var styleColorTextDark = null;
if (typeof config.style !== 'undefined') {
styleBorder = (typeof config.style.border !== 'undefined') ? config.style.border : null;
styleShadow = (typeof config.style.shadow !== 'undefined') ? config.style.shadow : 1;
styleColorBackground = (typeof config.style.colorBackground !== 'undefined') ? config.style.colorBackground : null;
styleColorTextBright = (typeof config.style.colorTextBright !== 'undefined') ? config.style.colorTextBright : null;
styleColorTextDark = (typeof config.style.colorTextDark !== 'undefined') ? config.style.colorTextDark : null;
}
if (typeof styleShadow === 'boolean') {
styleShadow = (styleShadow) ? 1 : 0;
}
this.elem = document.createElement('steam-user');
this.elem.setAttribute('steamid', steamid);
this.elem.setAttribute('header', header);
this.elem.setAttribute('style-border', styleBorder);
this.elem.setAttribute('style-shadow', styleShadow);
this.elem.setAttribute('style-color-background', styleColorBackground);
this.elem.setAttribute('style-color-text-bright', styleColorTextBright);
this.elem.setAttribute('style-color-text-dark', styleColorTextDark);
this.elem.setAttribute('online-yes', online_yes);
this.elem.setAttribute('online-no', online_no);
this.elem.setAttribute('member-since', member_since);
this.elem.setAttribute('viewtext', viewtext);
if (width !== null) {
this.elem.setAttribute('width', width);
}
if (height !== null) {
this.elem.setAttribute('height', height);
}
let sel = document.querySelector(selector);
if (sel) {
sel.appendChild(this.elem);
}
}
updateCard()
{
this.elem.updateCard();
}
changeLang(online_yes, online_no, member_since, viewtext)
{
this.elem.changeLang(online_yes, online_no, member_since, viewtext);
}
setImageVisibility(visibility)
{
this.elem.setImageVisibility(visibility);
}
remove()
{
this.elem.remove();
}
}

11944
public/js/vue.js Normal file
View File

File diff suppressed because it is too large Load Diff

6
public/js/vue.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
public/robots.txt Normal file
View File

@ -0,0 +1,2 @@
User-agent: *
Disallow: