Script inside the page dosen't work !

mao

Hi
I'm try to use the amazing Monogatari in an dynamic django site project, I wan to to generate the story dynamically depending on the users of the site.
For make this, first of all I need to generate the script.js to compose the story dynamically.

This is easy, if I just modify the script.js inside the page HTML when it's generate by the django server.

For do this I try to copy the script.js directly inside the HTML page, but whit my surprise it dosen't work (!).

I have an error message : "Start not found"

the script work only if externally linked with:
<script src="./js/script.js"></script>

and not if the same code is copied inside the page like :
<script>
.....
script.js
.....
</script>

How can I copy the script inside the page ?
Thanks to all,
Maurizio

mao

I found all the troubles came from the js scripts preload !
how to disable the jscritp preload ?
PS Where I can found the readable source code of monogatari ?

ShinProg

Hi,
This might be script call order. The monogatari.init() should be executed after you registered your script. Also, make sure you used monogatari.script() to register the story properly.

EDIT : You can disable script preload inside options.js
You can find the readable source of monogatari in Github at https://github.com/Monogatari/Monogatari

mao

Hi ShinProg
Thanks for your help !

I disabled the preload in the options.js, but it seem to work only for the images.

I make same tests, with no success.
When the scripts is generated from the server I have the error : "Start" Label was not found
I found no way to use an generate scrip instead an fixed file.

for example,
if the scrips.js is copied directly in the index.html in the right position like the following code, the app gone in error with : "Start" Label was not found

My django server works in this way, it can generate the index.html page with the scripts.js inside, but always gone in error.

Here, the script copied an pasted in the index.html page with no success...

`<!DOCTYPE html>

<head prefix="og: http://ogp.me/ns#">

	<title>Monogatari Visual Novel</title> <!--Up to 60-70 Characters. Optimal Format: Primary Keyword - Secondary Keyword | Brand Name-->

	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1">
	<meta http-equiv="Content-Security-Policy" content="default-src 'self' https:; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; script-src 'self' 'unsafe-eval'">
	<meta name="description" content=""> <!--Page description. No longer than 155 characters.-->
	<meta name="keywords" content="">
	<meta name="author" content=""> <!--Name of the author.-->

	<!--Facebook Meta Tags-->
	<meta property="og:image" content="http://" /> <!--URL of Image to show-->
	<meta property="og:description" content="" /> <!--Page Description-->
	<meta property="og:site_name" content="" /> <!--The Name Here-->
	<meta property="og:url" content="http://" /> <!--The Web main URL-->
	<meta property="og:title" content="" /> <!--The Title Here-->

	<!--Google Meta Tags-->
	<meta itemprop="name" content=""> <!--The Name or Title Here-->
	<meta itemprop="description" content=""> <!--Page Description-->
	<meta itemprop="image" content="http://"> <!--URL of Image to show-->

	<!--Twitter Meta Tags - You"ll have to validate your website here: https://dev.twitter.com/docs/cards/validation/validator-->
	<meta name="twitter:card" content="summary_large_image"> <!--Content Card Type-->
	<meta name="twitter:domain" content=""> <!--Your web"s domain-->
	<meta name="twitter:site" content="@"> <!--@publisher-->
	<meta name="twitter:title" content=""> <!--Page Title-->
	<meta name="twitter:description" content=""> <!--Page description less than 200 characters-->
	<meta name="twitter:creator" content="@"> <!--@author-->
	<meta name="twitter:image:src" content="http://"> <!--URL of Image to show-->

	<!--Android Meta Tags-->
	<meta name="mobile-web-app-capable" content="yes">
	<link rel="icon" sizes="192x192" href="assets/icons/icon_192x192.png"> <!--192 x 192 Icon-->
	<link rel="icon" sizes="128x128" href="assets/icons/icon_128x128.png"> <!--128 x 128 Icon-->

	<!--Apple Meta Tags-->
	<meta name="apple-mobile-web-app-title" content=""> <!--App Title or Name-->
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <!--Styling for the iOS Status Bar-->
	<link rel="apple-touch-icon" href="assets/icons/icon_60x60.png"> <!--60 x 60 Icon-->
	<link rel="apple-touch-icon" sizes="76x76" href="assets/icons/icon_76x76.png"> <!--76 x 76 Icon-->
	<link rel="apple-touch-icon" sizes="120x120" href="assets/icons/icon_120x120.png"> <!--120 x 120 Icon-->
	<link rel="apple-touch-icon" sizes="152x152" href="assets/icons/icon_152x152.png"> <!--152 x 152 Icon-->
	<link rel="apple-touch-icon" sizes="152x152" href="assets/icons/icon_167x167.png"> <!--167 x 167 Icon-->
	<link rel="apple-touch-icon" sizes="152x152" href="assets/icons/icon_180x180.png"> <!--180 x 180 Icon-->

	<!--Microsoft Tags-->
	<meta name="msapplication-TileColor" content=""> <!--Color of the tile on Windows. In hexadecimal format-->
	<meta name="application-name" content="" /> <!-- App Title -->
	<meta name="msapplication-tooltip" content="" /> <!--Small text on hover-->
	<meta name="msapplication-starturl" content="http://" /> <!-- URL to start in -->
	<meta name="msapplication-square70x70logo" content="assets/icons/icon_70x70.png" /> <!--Image for Tile 70x70-->
	<meta name="msapplication-square150x150logo" content="assets/icons/icon_150x150.png" /> <!--Image for Tile 150x150-->
	<meta name="msapplication-wide310x150logo" content="assets/icons/icon_310x150.png" /> <!--Image for Tile 310x150-->
	<meta name="msapplication-square310x310logo" content="assets/icons/icon_310x310.png" /> <!--Image for Tile 310x310-->

	<!--<link rel="publisher" href=""> Publisher"s Google+ URL-->

	<meta name="theme-color" content=""><!--Theme color for browsers in hexadecimal format.-->

	<link rel="shortcut icon" href="favicon.ico" /> <!--Favicon. Good tool for creating one: http://xiconeditor.com/ Create all sizes.-->
	<!--<link rel="canonical" href=""> Canonical URL of your webpage-->

	<link rel="manifest" href="manifest.json">

	<!-- Third Party CSS Libraries -->

	<!-- Monogatari CSS Libraries -->
	<link rel="stylesheet" href="./engine/core/monogatari.css">
	<link rel="stylesheet" href="./style/main.css">

	<!-- Third Party JavaScript Libraries -->

	<!-- Monogatari JavaScript Libraries -->
	<script src="./engine/debug/debug.js"></script>
	<script src="./engine/core/monogatari.js"></script>
	<script src="./js/options.js"></script>
	<script src="./js/storage.js"></script>
	

	<!-- 
              ################################################################################
              HERE  I JUST PASTE  THE SCRIP.JS INSTEAD LOAD IT FROM ./js/main.js  
	      ################################################################################

	-->
	<script>

/* global monogatari */

// Define the messages used in the game.
monogatari.action ('message').messages ({
'Help': {
title: 'Help',
subtitle: 'Some useful Links',
body: <p><a href='https://developers.monogatari.io/documentation/'>Documentation</a> - Everything you need to know.</p> <p><a href='https://monogatari.io/demo/'>Demo</a> - A simple Demo.</p>
}
});

// Define the notifications used in the game
monogatari.action ('notification').notifications ({
'Welcome': {
title: 'Welcome',
body: 'This is the Monogatari VN Engine',
icon: ''
}
});

// Define the Particles JS Configurations used in the game
monogatari.action ('particles').particles ({

});

// Define the canvas objects used in the game
monogatari.action ('canvas').objects ({

});

// Credits of the people involved in the creation of this awesome game
monogatari.configuration ('credits', {

});

// Define the images that will be available on your game's image gallery
monogatari.assets ('gallery', {

});

// Define the music used in the game.
monogatari.assets ('music', {

});

// Define the voice files used in the game.
monogatari.assets ('voices', {

});

// Define the sounds used in the game.
monogatari.assets ('sounds', {

});

// Define the videos used in the game.
monogatari.assets ('videos', {

});

// Define the images used in the game.
monogatari.assets ('images', {

});

// Define the backgrounds for each scene.
monogatari.assets ('scenes', {

});

// Define the Characters
monogatari.characters ({
'y': {
name: 'Yui',
color: '#5bcaff'
}
});

monogatari.script ({
// The game starts here.
'Start': [
'show scene #f7f6f6 with fadeIn',
'show notification Welcome',
{
'Input': {
'Text': 'What is your name?',
'Validation': function (input) {
return input.trim ().length > 0;
},
'Save': function (input) {
this.storage ({
player: {
name: input
}
});
return true;
},
'Revert': function () {
this.storage ({
player: {
name: ''
}
});
},
'Warning': 'You must enter a name!'
}
},
'y Hi {{player.name}} Welcome to Monogatari!',
{
'Choice': {
'Dialog': 'y Have you already read some documentation?',
'Yes': {
'Text': 'Yes',
'Do': 'jump Yes'
},
'No': {
'Text': 'No',
'Do': 'jump No'
}
}
}
],

'Yes': [
	'y Thats awesome!',
	'y Then you are ready to go ahead and create an amazing Game!',
	'y I can’t wait to see what story you’ll tell!',
	'end'
],

'No': [

	'y You can do it now.',

	'show message Help',

	'y Go ahead and create an amazing Game!',
	'y I can’t wait to see what story you’ll tell!',
	'end'
]

});

	</script>






	<script src="./js/main.js"></script>

</head>

<body>

	<!-- Fallback when JavaScript is not available -->
	<noscript>
		<div class="middle text--center">
			<h2>JavaScript Disabled or not Supported.</h2>
			<small>To play this game, please enable JavaScript executing or use a different browser.</small>
		</div>
	</noscript>

	<div id="monogatari">
		<visual-novel>
			<language-selection-screen></language-selection-screen>
			<loading-screen></loading-screen>
			<main-screen>
				<main-menu></main-menu>
			</main-screen>
			<game-screen>
				<dialog-log></dialog-log>
				<text-box></text-box>
				<quick-menu></quick-menu>
			</game-screen>
			<gallery-screen></gallery-screen>
			<credits-screen></credits-screen>
			<load-screen></load-screen>
			<save-screen></save-screen>
			<settings-screen></settings-screen>
			<help-screen></help-screen>
		</visual-novel>
	</div>
</body>

</html>
`

hyuchia

This happens because inline scripts are blocked by default in Monogatari's CSP (Content-Security-Policy).

To fix it, you just need to change the meta tag and add unsafe-inline as an allowed source for scripts.

From this:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' https:; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; script-src 'self' 'unsafe-eval'">

To this:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' https:; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; script-src 'self' 'unsafe-eval' 'unsafe-inline'">

hyuchia

Also, I'd recommend retrieving the script by doing an HTTP Request rather than printing the script that way. Unless you have a very specific use case, your Monogatari game and your django application should be independent and only communicate by providing a REST API.

mao

hyuchia

First of all,
Many thanks for your amazing help ! now work perfect ! 😀

Please , I have just another question ...

I try to use Monogatari in a Diango web site for teaching languages,
In this idea I need to generate dynamics contents in the novel depending on the user learning, like images, or audio files from an text to speech system.

In Django all the files are stored as reference in a data base and when needed these files can be retrieved like urls.

There is a way to force Monogatari to use links for the files ( images, audio .. ) instead to point to an fixed folder ?

Thanks for help !
Maurizio

ShinProg

aaa yes CSP issues, I never thought of that
thanks for the anwser, hyuchia !

hyuchia

That has already been responded in your previous post: https://community.monogatari.io/d/48-use-urls-instead-an-physical-files-in-assets