vc64web_player

[mithrendal]

I copied a detail webpage from a demo made by fieserWolf from csdb.dk in order to patch it as an example for a better and more addictive usage of the csdb.dk website 😎

essential I will describe here what is to do to integrate the player

first the webpage has to load the player code and after that set styles to adapt to the csdb design
therefore we add the following to the head element of the page.

<script src="https://vc64web.github.io/js/vc64web_player.js"></script>
<style>
		#player_container {
			background-color: black;
		}
		.player_icon_btn {
			background-color: transparent;
			color: white;
			margin-right: 15px;
			cursor: grab;
		}
</style>

second part is to activate the player onclick ... for this we have to locate the preview pic and add an onlick attribute to the anchor element...

<a 
href="https://csdb.dk/release/viewpic.php?id=197175&amp;zoom=1"   
onclick="vc64web_player.load(this,
'#openROMS=true#navbar=hidden#wide=true#border=false', 
'http://csdb.dk/getinternalfile.php/205484/elite-code-mechanics.prg');
return false;">
...
</a>

the first parameter is this which is the element where the player will be loaded into
the second parameter is the preconfig for the player see here for the list of options #87
the third parameter is the link of the demo

the result for discussion is here
https://vc64web.github.io/doc/csdb_detailpage/[CSDb]%20-%20Elite%20Code%20Mechanics%20by%20Abyss%20Connection%20(2020).html

[mithrendal]

customisation of the player buttons

the ids of the icons are these
toggle_icon
btn_unlock_audio
btn_overlay
btn_open_in_extra_tab

these can be configured via css

for example the following rule hides the open in extra tab icon button

#btn_open_in_extra_tab 
{
    display: none;
}

[mithrendal]

the ultimate csdb showcase ... I worked hard on it to get it right 😅... and I think I got it here

https://vc64web.github.io/doc/csdb_detailpage/to_norah.html

• watch out for the blue play button next to each download link 😎 which starts the vc64web player into the preview pic with that link ...

• clicking on the preview pic gets you like in the original to the big preview picture where you also have these non-invasive blue play buttons...

I think with this surgical non-invasive upgrade the classic style and functionality of the csdb is well preserved and at the same time it gets more attractive for users by the possiblity to play demos on site without the need to leave the site 😍...