Web Based Adventure (WBA)

[fleet]

...
@fleet
The dark (yellow transparent) square is the image map (location on an image) where the player can click on and be redirected to another page.
This square can be dragged by holding the left-mouse-button and moving the mouse. The dark small rectangle within the image map is for resizing.

Currently the interface is build with effectivity in mind.
I hope it will be userfriendly later on.

About the user guide, would you (or maybe Superawesomemans be willing to write some documentation?
Ill be happy to include it in the builder itself.
...

Thanks for the explanation about what the image map is and what it does.

I believe writing a user guide now (while the tool is still in alpha stage) is premature. Once you have the interface at or near its final form would be a better time to request help with documentation.

Very respectfully,
fleet

[tlaero]

I downloaded WBA and gave it a look. Using the web browser as a development environment is pretty cool, especially for people who aren't on Windows and can't use the existing tools. It'll be interesting to watch this grow.

Tlaero

[sylakone2]

Hey the tool looks good I was taking a look at it.
I seem to be having a problem with the prompt feature.
I fill out the fields and save it but when I go to that page the prompt never comes up.
Sometimes when i go back to editing it the prompt features has been removed so not sure what is causing that issue.

Anyway keep up the good work it has great promise.

Cheers

Sy

[SoulMate]

Hi everyone,

Glad to hear you all enjoy it :-)

A new version just arrived
- add/edit game variables
- add/edit achievements
- interface has been improved and is now light instead of dark
- prompt bug has been solved

Ill update the main post with the new download link.
Let me know if did introduce new bugs of if you have other feedback.

Happy building
SoulMate

[fleet]

I downloaded version 1.3
Playback still does not work correctly in Internet Explorer 11 (images on pages 2 and 3 did not change).



Playback did work correctly in Google Chrome and Mozilla Firefox.

[SoulMate]

@fleet
Damn IE11. I had an exception for handling images in IE because IE has a bug. But the IE detection did not work for IE11 (browser is no "Microsoft Internet Explorer" anymore, but its called "Netscape" (the same as Firefox). I modified the IE detection so it detects also IE11.
By the way: I think you meant V1.2.0 ;-)

I also added an new awsome feature: the overview page.
Feel free to try it out :-)

Update V1.3
- Added overview page
- Fixed IE11 images bug

https://mega.co.nz/#!GdkyBKQQ!ZNAwKib_n ... -GDBHsqOiE

Happy weekend!
SoulMate

[fleet]

Mia culpa, you are correct. I'll download version 1.3 now.

[fleet]

Sorry for the double post. Version 1.3 doesn't show the images when I open index.html in Internet Explorer 11.
When I opened build.html in Internet Explorer 11, it didn't show the options to add stuff under the EDIT tab.

It seems to work okay in Firefox and Google Chrome.

[SoulMate]

@fleet
I tested several games in IE8 to IE11, doesn't seem i can reproduce that bug. Maybe your data.js file is corrupted, can you test it against http://jsonlint.com/ (strip the first part "window.game_data = " and the ";" at the end) then the data.js should validate.
You can also send it the me and ill analase it for you.

If you press F12 in IE you can also view error messages in the console tab

[fleet]

@fleet
I tested several games in IE8 to IE11, doesn't seem i can reproduce that bug. Maybe your data.js file is corrupted, can you test it against http://jsonlint.com/ (strip the first part "window.game_data = " and the ";" at the end) then the data.js should validate.
You can also send it the me and ill analase it for you.

If you press F12 in IE you can also view error messages in the console tab

I tested the data.js file using jsonlint.com, and it told me the json was valid.

I tried to open the build.html file, the debug.html file, and the index.html file and none of the worked. I made the original game using google chrome.

This is what the console showed when I hit F12 in internet explorer.

CTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />

<link href="css/main.css" rel="stylesheet" type="text/css" />

<script src="js/jquery.min.js"></script>
<!-- Because chrome let us not retreive the data locally, insert the json into the window scope -->
<script src="data.js" type="text/javascript"></script>
<script src="js/game.js" type="text/javascript"></script>
<script src="custom.js" type="text/javascript"></script>
</head>
<body>


<div id="wrapper">
<div id="header">
<div class="title"></div>
</div>
<div id="main">
<div id="image-wrapper">
<div id="stats"></div>
<div id="inventory"></div>
<div id="tag"></div>
<img id="image" width="1000" src="" usemap="#map" />
<div id="image-caption">&nbsp;</div>
<div id="image-loading"></div>
<div id="fakemap">
<div id="fakemap-inner">
</div>
</div>
<map name="map" id="map"></map>
</div>
<div id="messages"></div>
<div id="responses"></div>
</div>
</div>
<div id="footer"></div>
</body>
</html>


Here is the data.js file

window.game_data = {
"image_width": 800,
"begin_page": "_begin",
"pages": {
"2": {
"image": "images/dragon-2.jpg",
"responses": [
{
"text": "click here",
"href": 3,
"func": null
}
]
},
"3": {
"image": "images/dragon-3.jpg",
"responses": [
{
"text": "click here",
"href": 4,
"func": null
}
]
},
"4": {
"image": "images/dragon-4.jpg",
"responses": [
{
"text": "click",
"href": 5,
"func": null
}
]
},
"5": {
"image": "images/dragon-5.jpg",
"responses": [
{
"text": "End",
"href": null,
"func": null
}
]
},
"_begin": {
"image": "images/dragon-1.jpg",
"responses": [
{
"text": "Click to advance",
"href": 2,
"func": null
}
],
"title_texts": [
{
"text": "Marigold",
"class": null
}
]
}
},
"title": "Demo game",
"vars": []
};

EDIT: I copied the zip file into a new folder and unzipped it. I tried to build a new game using IE 11, but the buttons/words to add imeage. title text and so forth don't appear.

[SoulMate]

@fleet. There sould also be a tab with errors. i tought its the second from above. Do you see any errors there?

[fleet]

@fleet. There sould also be a tab with errors. i tought its the second from above. Do you see any errors there?

I don't see any tab entitled errors. Which html file contains it?
I am getting frustrated.
I built a new game using Mozilla Firefox. It works fine in Google Chrome and Firefox, but won't open in IE 11.


Is anybody else having problems using IE 11 with WBA? It could be something unique to my computer. If it's unique to my PC, I'll assume it's hardware related and stop testing WBA.

[SoulMate]

Found the bug. Seems that IE does not allow localstorage if the webpage is runned from local filesystem, but only from a webserver. I developed on my Linux machine and served the page to my windows machine by a webbrowser for testing IE. So it worked for me. When i copied the code to the windows machine and run in locally in IE, it broke. I got a temporary fix for now by disabling the load and save (which uses localstorage). Ill look into a better solution so IE users can also load/save games.

A new version is available where your IE problem should be fixed. I also added 2 new features, random pages and see which pages link to the current page.
https://mega.co.nz/#!bUskhSSL!153L7HDox ... JesyzVdQKM (V1.4.1)

[fleet]

Found the bug. Seems that IE does not allow localstorage if the webpage is runned from local filesystem, but only from a webserver. I developed on my Linux machine and served the page to my windows machine by a webbrowser for testing IE. So it worked for me. When i copied the code to the windows machine and run in locally in IE, it broke. I got a temporary fix for now by disabling the load and save (which uses localstorage). Ill look into a better solution so IE users can also load/save games.

A new version is available where your IE problem should be fixed. I also added 2 new features, random pages and see which pages link to the current page.
https://mega.co.nz/#!bUskhSSL!153L7HDox ... JesyzVdQKM (V1.4.1)

I created a short four slide 'game' in IE 11 and successfully played it in IE 11, Firefox and Chrome. I erased everything and then created the same game using Chrome. It played successfully in IE 11, Firefox, and Chrome.
Is there a way to code 'close game' as a custom function?


EDIT: Link removed, test was successful. Thank you to those who tested it.

[tlaero]

Yeah, it's unfortunate. IE doesn't do localstorage on localhost and chrome doesn't allow local cookies, so there's no single way to do storage that works everywhere. AC does localstorage and falls back to cookies if its unavailable.

Tlaero