Specify folder for main.js?

Monkey Targets Forums/HTML5/Specify folder for main.js?

Yoda	(Posted 2014) [#1]

I want to have the main.js and data etc. in a different folder than the monkeygame.html, i.e.:

monkeygame.html
GAMENAMEFOLDER
main.js
DATA
otherhtml.html
anotherhtml.html

So I can display different monkey-games on the same webpage, depending on which folder+filename I put in the Canvas.

How can I do this? If I just replace the "main.js" with "gamenamefolder/main.js" it seems to load something, but doesn't run the game.

Any help appreciated!!

dawlane

(Posted 2014) [#2]

Have a look at using iframes. They basically allow you to have a web page within a web page.

Yoda	(Posted 2014) [#3]

Thanks for the hint. I know that iframes do this, but how do I implement that? I'd need some code and instructions to do it.

dawlane

(Posted 2014) [#4]

If I understand, you are wanting to use a common html holding page that can display the game currently selected. The method I used required php code and a MySQL database to create the pages on the fly. You maybe able to store data into a file and load it as a php array and then work with that, but the way you wish to do it will not work as I think that the server will not allow you to do such things, security issues etc. Unfortunately my site is no longer publicly available for you to see as an example.

As I was supporting a number of targets I had to use two database tables: One for the device type with games id's and one with game information; instruction etc. I could then query the database like so.

$result = mysql_query("	SELECT 	device.game_id,device.date,url,type_id,name,state FROM device, games 
		 							WHERE device.type_id = ".$device." AND device.game_id = games.game_id
									ORDER BY
										date DESC
									");

Note $device is a variable who's value was passed within a link and retrieved by

$device=isset($_GET['device'])?(int)$_GET['device']:0;
		//Trap any dogdy values
		if ($device==0){
			include($_SERVER['DOCUMENT_ROOT']."/page/not-found.php");
			exit;
		}

To pass a value to a variable, the link format would be /site-files/mygame-template.php?device=value
To pass more than one value use the ampersand (&) to append a value pare e.g. /site-files/mygame-template.php?device=value&game=value
Doing it this way allowed me to refine my query search like so

//Parse both tables for one game
	$result=mysql_query("	SELECT 	
							type_id,url,state,name,version,descrip,instr_keys_com,instr_pc,instr_mob,instr_iphone,instr_web,instr_xbox,instr_com
							FROM games,device
							WHERE games.game_id = ".$game." AND type_id = ".$device." AND device.game_id = ".$game);
	$data=mysql_fetch_assoc($result);
	mysql_free_result($result);

and construct the page accordingly by testing the database device id with the switch statement. I could then create iframes or canvas windows e.g.

echo '<iframe seamless style="width: 665px; height: 519px" src="/games/'.$data['url'].'/web/'.$data['url'].'.html"></iframe>'."\n";

or construct links

echo'<a href="/games/'.$data['url'].'/archive/linux/linux-'.$data['url'].'-'.$data['version'].'.tar.gz">Down Load</a>'."\n";

Using this method meant that I could keep the structure of the site like this.

/game/
	mygame1/
		archive/
			linux
			windows
			osx
		web/
			data
			mygame1.html
			mygame1.js
			mygame1.swf
	mygame2/
		archive/
			linux
			windows
			osx
		web/
			data
			mygame2.html
			mygame2.js
			mygame2.swf
/site-files/
	home.php
	game.php
index.php

Yoda	(Posted 2014) [#5]

That looks like an interesting solution! Thanks!! I'll try that, in a slighty modified version without the mysql database.

dawlane

(Posted 2014) [#6]

Here is a very simple example of how to do such a thing without using a database. But I should point out that a database search is a lot faster.
First thing is how the directory structure will look

/games/
	mygame1/
		data
		main.js
		stub.html
	mygame2/
		data
		main.js
		stub.html
/pages/
	instructions/
		mygame1.php
		mygame2.php
	launch.php
	gamelist
index.php

Your games directories should match what's in the gamelist, but illegal charcters cannot be used. The gamelist can have illegal characters in, but you have to strip them out to make a valid url.

You must replace the MonkeyGame.html with

<!DOCTYPE html>

<html>
<head>
	<!-- Important to get rid of the space around the frame
		You have to get rid of all margins and padding out of the html document-->
	<style>	
		body{margin:0;padding: 0}
		canvas{margin: 0; padding: 0; display:block}
	</style>
	<script>

		var CANVAS_RESIZE_MODE=0;	//0=locked, 1=stretch, 2=resize

		var CANVAS_WIDTH=640;
		var CANVAS_HEIGHT=480;

		window.onload=function( e ){

			var canvas=document.getElementById( "GameCanvas" );

			canvas.width=CANVAS_WIDTH;
			canvas.height=CANVAS_HEIGHT;

			BBMonkeyGame.Main( canvas );
		};
</script>
</head>

<body>
<!-- To get immediate focus set the tabindex to 1 -->
<div><canvas id="GameCanvas" tabindex=1></canvas></div>
	<script src="main.js"></script><noscript><img src="/images/nojava.png" /></noscript>
</body>
</html>

and name it stub.html. You could leave it as MonkeyGame.html, but you would have to change whats in launch.php.

The pages directory is where the php scripts and web pages that go to make up your site should be placed.
The gamelist is just text file with Monkey Game names. You should avoid using illegal url characters unless you strip them out when building the url for any links.
The instruction directory is where you can place the instructions. Again these should have the same names as what is in the games directory.
You should wrap them in a divider tag.

<div>These are MyGame1 instructions</div>

The launch.php takes two value pairs as parameters: One for the url directory name and one for the title.

<!DOCTYPE html>
<!-- Holding page that will use an iframe to sandbox other web pages.
	In this case our monkey web applications-->
<html>
<head>
	<!-- Style our iframe to get rid of the white space boarder
		Note the stub.html will also need some styling-->
	<style>
		iframe{display:block; padding:0; margin:0; width: 640px; height: 480px; overflow: hidden;}
	</style>
</head>

<body>
<?php
	// Get the part of the name that will form part of a url and a title to show
	// Bad values are not checked here. It's a lot easier to check against a integer number than a string.
	// Checking against the gamelist file would slow the loading of the page.
	$game=$_GET['game'];
	$title=$_GET['title'];
	// Add a link to get back home
	echo'<a href="../index.php">HOME</a>'."\n";
	// Use a divider for the title, iframe and instructions. The style will auto centre it
	echo'<div style="width: 50%; margin:0 auto">'."\n";
	echo'<p>'.$title.'</p>';
	// Set the tabindex to 1 so that the iframe takes immediate focus
	echo '<iframe tabindex=1 src="/games/'.$game.'/stub.html"></iframe>'."\n";	
	// display game instructions etc
	include($_SERVER['DOCUMENT_ROOT']."/pages/instructions/".$game."_instructions.php");
	echo'</div>'."\n";
?>

</body>
</html>

The last file is the site's landing page index.php. This is just a simple php script that reads the gamelist and create the links to the game pages.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>NON DATA BASE GAME TEST</title>
	</head>
	<body>
		<p>NON DATA BASE GAME TEST</p>
		<?php
			// Load the list of games
			$gamelist=file($_SERVER['DOCUMENT_ROOT']."/pages/gamelist", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
			// Use whatever method you want to parse and construct you game links
			foreach ($gamelist as $line_num => $line) {
				// get rid of white space character and convert to lowercase
				$direcory=strtolower(preg_replace('/\s+/', '', $line));
				// Build a link that will pass the directory and a title
				echo'<div><a href="/pages/launch.php?game='.$direcory.'&title='.$line.'">'.$line.'</a></div>'."\n";
			}
		?>
	</body>
</html>

Yoda	(Posted 2014) [#7]

Yes!! That's exactly what I did! Check it out on www.yodasvideoarcade.com, works well!

dawlane

(Posted 2014) [#8]

I would suggest that you make your list of game links scrollable without having to scroll the entire page.