steamcards.js

SteamCards Node Package

(C) 2022 by Daniel Brendel

Released under the MIT license

About

SteamCards is a clientside web component that offers an easy way to integrate Steam Cards of various Steam entities into your website. Therefore you only need very few code in order to render Steam Cards into your document.

SteamCards is used via JavaScript. Since JavaScript is supported by all major browser per default it is platform independent and compatible.

The following Widgets are currently available:

• Steam App Widget
• Steam Server Widget
• Steam User Widget

Installation

npm i steamcards.js

import 'steamcards.js'; //Import all available widgets

import 'steamcards.js/steam_app'; //Import Steam App Widget
import 'steamcards.js/steam_server'; //Import Steam Server Widget
import 'steamcards.js/steam_user'; //Import Steam User Widget

Steam App

When referenced the required Steam App module, the minimum code to render a card is as follows:

<steam-app appid="620"></steam-app>

This renders the following card:

You can define these options:

Attribute	Value
appid	Specifies the ID of a Steam game/app
lang	Specifies the language of the localized Steam data
onlinecount	If specified this will be the text for the online count. Use :count to dynamically insert the actual products player/user count.
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

You can also dynamically create Steam Cards via JavaScript:

<div id="app-card"></div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        let card = new SteamApp('#app-card', {
            appid: '620',
            //You can specify the same attributes as shown in the table above
        });
    });
</script>

The following methods are available for a Steam App element / object:

Method	Description
updateCard()	Updates the card data and displays them
changeLang(lang, playtext, author, onlinecount)	Changes the language of the card using the given information
setImageVisibility(visibility)	Sets the card image visibility
remove()	Removes the card from the document

Steam Server

When referenced the required Steam Server module, the minimum code to render a card is as follows:

<steam-server addr="ip:port"></steam-server>

This renders the following card:

You can define these options:

Attribute	Value
addr	Specifies the address of the server using format ip:port
header	If you want to render the card with a header image you may specify the URL to an image here
bots	Specify the text for the bot info. Use :count to render the actual bot count
secure_yes	Specifies the text that is displayed if the server is a secure server
secure_no	Specifies the text that is displayed if the server is not a secure server
hosting_dedicated	Specifies the text that is displayed if the server is a dedicated server
hosting_listen	Specifies the text that is displayed if the server is a listen server
playtext	Specifies the text of the button that issues a connection to the server
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-text-bright / style.colorTextBright	Specify a CSS value for the bright texts
style-color-text-dark / style.colorTextDark	Specify a CSS value for the dark texts

You can also dynamically create Steam Server cards via JavaScript:

<div id="server-card"></div>

<script>
document.addEventListener('DOMContentLoaded', function() {
	let card = new SteamServer('#server-card', {
		addr: 'ip:port',
		//You can specify the same attributes as shown in the table above
	});
});
</script>

The following methods are available for a Steam Server element / object:

Method	Description
updateCard()	Updates the card data and displays them
changeLang(bots, secure_yes, secure_no, hosting_dedicated, hosting_listen, playtext)	Changes the language of the card using the given information
setImageVisibility(visibility)	Sets the card image visibility
remove()	Removes the card from the document

Steam User

When referenced the required Steam User module, the minimum code to render a card is as follows:

<steam-user steamid="id"></steam-user>

This renders the following card:

You can define these options:

Attribute	Value
steamid	Specifies the SteamID of the Steam user
header	If you want to render the card with a header image you may specify the URL to an image here
online_yes	Specifies the text that is displayed if the user is currently online
online_no	Specifies the text that is displayed if the user is not currently online
member_since	Specifies the text and format of the info that shows since when the user account is registered. Use :year, :month and :day to format the date.
viewtext	Specifies the text of the button which can be used to go to the users Steam Community profile
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-text-bright / style.colorTextBright	Specify a CSS value for the bright texts
style-color-text-dark / style.colorTextDark	Specify a CSS value for the dark texts

You can also dynamically create Steam User cards via JavaScript:

<div id="user-card"></div>

<script>
	document.addEventListener('DOMContentLoaded', function() {
        let card = new SteamUser('#user-card', {
            steamid: 'id',
            //You can specify the same attributes as shown in the table above
        });
    });
</script>

The following methods are available for a Steam User element / object:

Method	Description
updateCard()	Updates the card data and displays them
changeLang(online_yes, online_no, member_since, viewtext)	Changes the language of the card using the given information
setImageVisibility(visibility)	Sets the card image visibility
remove()	Removes the card from the document