File index.html:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="Roberto Naldi">
<link rel="shortcut icon" href="1417151246_56297.ico" />
<link rel="stylesheet" type="text/css" href="jsframe01.css" />
<title>Inizio</title>
</head>
<body onload="settaggiBase();">
<div>
<header>
<h1>CoderDojo Firenze</h1>
</header>
<section id="sezStoria">
<h1 id="titolo"> </h1>
<p id="descrizione"> </p>
<section id="scelte">
<p><a href="#scelta1" id="scelta1" onclick="raggiungiLuogo(this);">nbsp;</a></p>
<p><a href="#scelta2" id="scelta2" onclick="raggiungiLuogo(this);">nbsp;</a></p>
</section>
</section>
<section id="sezComandi">
<h1>Crea la tua storia!</h1>
<form>
<fieldset>
<legend>Usa questi campi per aggiungere nuove situazioni</legend>
<div>
<label>Un titolo per questa situazione:</label>
<input type="text" placeholder="Es. La Sala del Tesoro" id="nuovoTitolo" />
</div>
<div>
<label>Descrivi cosa c’è e cosa succede:</label>
<textarea cols="60" rows="10" placeholder="Ti trovi in un grande..." id="nuovaDescri"></textarea>
</div>
<div class="bordato">
<p>Se non è il finale, dovrai offrire almeno un’azione da compiere; sarebbero meglio due.</p>
<div>
<label>Descrivi qui la prima scelta:</label>
<input type="text" placeholder="Esco dalla porta..." id="nuovaScelta1" />
</div>
<div>
<label>Scrivi il nome della situazione in cui si andrà a finire:</label>
<input type="text" placeholder="es. ScalaRipida" id="nuovoLuogo1" class="corto" />
</div>
<hr />
<div>
<label>Descrivi qui la seconda scelta:</label>
<input type="text" placeholder="Passo dalla finestra..." id="nuovaScelta2" class="corto" />
</div>
<div>
<label>Scrivi il nome della situazione in cui si andrà a finire:</label>
<input type="text" placeholder="es. Terrazza" id="nuovoLuogo2" class="corto" />
</div>
</div>
<div>
<p class="centrato grassetto grande">Attenzione! Il primo nome deve essere “Inizio”!</p>
<label>Il nome che il pc userà per ritrovare questa situazione:</label>
<input type="text" placeholder="es. StanzaBlu" id="nuovoNome" class="corto" />
</div>
<div>
<label>Per caricare in memoria clicka qui:</label>
<input type="button" value="Registra" class="corto" onclick="registraLuogo();" />
</div>
</fieldset>
<div>
<label>Quando hai finito clicka qui:</label>
<input type="button" value="Dammi lista" class="corto" onclick="listaDaCopiare();" />
</div>
</form>
</section>
<section id="sezDaCopiare"> </section>
<footer>
<p>© Copyright by Coder Dojo Firenze</p>
</footer>
</div>
<script type="text/javascript" src="fm01.js"></script>
<script type="text/javascript" src="settaggi.js"></script>
</body>
</html>
File fm01.js
/*--------------------------------------------------------------
* VARIABILI GLOBALI
-------------------------------------------------------------*/
/*
* Contenitore di tutti i luoghi esistenti
*/
var luoghi = {};
/*
* Contenitore per i luoghi che saranno creati
*/
var nuoviLuoghi = {};
/*
* Connessioni 'permanenti' ad elementi HTML
* Le seguenti variabili servono per ridurre le chiamate
* a document.getElementById
*/
var htmlTitolo = document.getElementById("titolo");
var htmlDescrizione = document.getElementById("descrizione");
var htmlScelta1 = document.getElementById("scelta1");
var htmlScelta2 = document.getElementById("scelta2");
var htmlNuovoNome = document.getElementById("nuovoNome");
var htmlNuovoTitolo = document.getElementById("nuovoTitolo");
var htmlNuovaDescrizione = document.getElementById("nuovaDescri");
var htmlNuovaScelta1Des = document.getElementById("nuovaScelta1");
var htmlNuovaScelta1Nome = document.getElementById("nuovoLuogo1");
var htmlNuovaScelta2Des = document.getElementById("nuovaScelta2");
var htmlNuovaScelta2Nome = document.getElementById("nuovoLuogo2");
// la seguente variabile tiene traccia del luogo dove siamo
// in questo momento
var gloPosizione;
/*--------------------------------------------------------------
* Oggetto base che rappresenta un luogo
*
* Un 'luogo' rappresenta il nucleo della narrazione.
-------------------------------------------------------------*/
// Creo il costruttore di luogo
function luogo(nome, titolo, descrizione)
{
// Proprieta'
this.luogoNome = nome; // nome sara' usato per identificare il luogo
this.luogoTitolo = titolo;
this.luogoDescrizione = descrizione;
this.alternative = {
vaiA1 : { testo : "testo a schermo", posto : "PrimaScelta"},
vaiA2 : { testo : "testo a schermo", posto : "SecondaScelta"}
};
}
/*--------------------------------------------------------------
* settaggiBase() inizializza gli oggetti
*
-------------------------------------------------------------*/
function settaggiBase() {
elencaLuoghi();
gloPosizione = luoghi["Inizio"];
storiaASchermo();
}
function raggiungiLuogo(partenza) {
var tmpPosizione;
// Il valore di 'partenza' a questo punto è simile a:
// file:///C:/...index.html#scelta1
// A noi ci servono gli ultimi 7 caratteri (scelta1/2)
// Quindi, 7imo carattere prima della fine, una string di 7 caratteri
partenza = partenza.toString();
partenza = partenza.substr(partenza.length - 7, 7);
switch(partenza) {
case "scelta1":
tmpPosizione = gloPosizione.alternative.vaiA1.posto;
break;
case "scelta2":
tmpPosizione = gloPosizione.alternative.vaiA2.posto;
break;
default:
alert("Errore nel programma!\nFunzione raggiungiLuogo\nIstruzione switch\nPartenza = " + partenza);
return;
}
gloPosizione = luoghi[tmpPosizione];
storiaASchermo();
}
function storiaASchermo () {
htmlTitolo.innerHTML = gloPosizione.luogoTitolo;
htmlDescrizione.innerHTML = gloPosizione.luogoDescrizione;
htmlScelta1.innerHTML = gloPosizione.alternative.vaiA1.testo;
htmlScelta2.innerHTML = gloPosizione.alternative.vaiA2.testo;
}
function caricaLuoghi(name, tit, descr, a1_testo, a1_luogo, a2_testo, a2_luogo) {
var tmpLuogo = new luogo;
tmpLuogo.luogoNome = name;
tmpLuogo.luogoTitolo = tit;
tmpLuogo.luogoDescrizione = descr;
tmpLuogo.alternative.vaiA1.testo = a1_testo;
tmpLuogo.alternative.vaiA1.posto = a1_luogo;
tmpLuogo.alternative.vaiA2.testo = a2_testo;
tmpLuogo.alternative.vaiA2.posto = a2_luogo;
luoghi[tmpLuogo.luogoNome] = tmpLuogo;
}
function registraLuogo() {
var tmpLuogo = new luogo;
tmpLuogo.luogoNome = htmlNuovoNome.value;
tmpLuogo.luogoTitolo = htmlNuovoTitolo.value;
tmpLuogo.luogoDescrizione = htmlNuovaDescrizione.value;
tmpLuogo.alternative.vaiA1.testo = htmlNuovaScelta1Des.value;
tmpLuogo.alternative.vaiA1.posto = htmlNuovaScelta1Nome.value;
tmpLuogo.alternative.vaiA2.testo = htmlNuovaScelta2Des.value;
tmpLuogo.alternative.vaiA2.posto = htmlNuovaScelta2Nome.value;
nuoviLuoghi[tmpLuogo.luogoNome] = tmpLuogo;
htmlNuovoNome.value = "";
htmlNuovoTitolo.value = "";
htmlNuovaDescrizione.value = "";
htmlNuovaScelta1Des.value = "";
htmlNuovaScelta1Nome.value = "";
htmlNuovaScelta2Des.value = "";
htmlNuovaScelta2Nome.value = "";
}
function listaDaCopiare() {
//alert("listaDaCopiare()");
inizioListaDaCopiare();
var rifSezDaCopiare = document.getElementById("sezDaCopiare");
for(var indice in nuoviLuoghi) {
if (nuoviLuoghi.hasOwnProperty(indice)) {
var elemento = nuoviLuoghi[indice];
var pNome = document.createElement("p");
var tnNome = document.createTextNode('var nome = "' + elemento.luogoNome + '";');
pNome.appendChild(tnNome);
var pTitolo = document.createElement("p");
var tnTitolo = document.createTextNode('var titolo = "' + elemento.luogoTitolo + '";');
pTitolo.appendChild(tnTitolo);
var pDescrizione = document.createElement("p");
var tnDescrizione = document.createTextNode('var descrizione = "' + elemento.luogoDescrizione + '";');
pDescrizione.appendChild(tnDescrizione);
var pVaiA1_testo = document.createElement("p");
var tnVaiA1_testo = document.createTextNode('var vaiA1_testo = "' + elemento.alternative.vaiA1.testo + '";');
pVaiA1_testo.appendChild(tnVaiA1_testo);
var pVaiA1_luogo = document.createElement("p");
var tnVaiA1_luogo = document.createTextNode('var vaiA1_luogo = "' + elemento.alternative.vaiA1.posto + '";');
pVaiA1_luogo.appendChild(tnVaiA1_luogo);
var pVaiA2_testo = document.createElement("p");
var tnVaiA2_testo = document.createTextNode('var vaiA2_testo = "' + elemento.alternative.vaiA2.testo + '";');
pVaiA2_testo.appendChild(tnVaiA2_testo);
var pVaiA2_luogo = document.createElement("p");
var tnVaiA2_luogo = document.createTextNode('var vaiA2_luogo = "' + elemento.alternative.vaiA2.posto + '";');
pVaiA2_luogo.appendChild(tnVaiA2_luogo);
var pCaricaLuoghi = document.createElement("p");
var tnCaricaLuoghi = document.createTextNode('caricaLuoghi(nome, titolo, descrizione, vaiA1_testo, vaiA1_luogo, vaiA2_testo, vaiA2_luogo);');
pCaricaLuoghi.appendChild(tnCaricaLuoghi);
rifSezDaCopiare.appendChild(pNome);
rifSezDaCopiare.appendChild(pTitolo);
rifSezDaCopiare.appendChild(pDescrizione);
rifSezDaCopiare.appendChild(pVaiA1_testo);
rifSezDaCopiare.appendChild(pVaiA1_luogo);
rifSezDaCopiare.appendChild(pVaiA2_testo);
rifSezDaCopiare.appendChild(pVaiA2_luogo);
rifSezDaCopiare.appendChild(pCaricaLuoghi);
}
}
var pGraffaFinale = document.createElement("p");
var tnGraffaFinale = document.createTextNode("}");
pGraffaFinale.appendChild(tnGraffaFinale);
rifSezDaCopiare.appendChild(pGraffaFinale);
}
function inizioListaDaCopiare () {
// La prima parte della lista deve essere
// function elencaLuoghi() {
var pEleLuoghi = document.createElement("p");
var tnEleLuoghi = document.createTextNode("function elencaLuoghi() {");
pEleLuoghi.appendChild(tnEleLuoghi);
// a questo punto si può decidere se costringere ad un inizio
// standard oppure no.
// Il primo luogo si deve chiamare "Inizio"
// con la 'I' maiuscola
/*var pNome = document.createElement("p");
var tnNome = document.createTextNode('var nome = "Inizio";');
pNome.appendChild(tnNome);
var pTitolo = document.createElement("p");
var tnTitolo = document.createTextNode('var titolo = "Il gioco dei bivi";');
pTitolo.appendChild(tnTitolo);
var pDescrizione = document.createElement("p");
var tnDescrizione = document.createTextNode('var descrizione = "Stai per iniziare un’avventura scritta da qualcuno della tua età!";');
pDescrizione.appendChild(tnDescrizione);
var pVaiA1_testo = document.createElement("p");
var tnVaiA1_testo = document.createTextNode('var vaiA1_testo = "Inizia";');
pVaiA1_testo.appendChild(tnVaiA1_testo);
var pVaiA1_luogo = document.createElement("p");
var tnVaiA1_luogo = document.createTextNode('var vaiA1_luogo = "InizioGioco";');
pVaiA1_luogo.appendChild(tnVaiA1_luogo);
var pVaiA2_testo = document.createElement("p");
var tnVaiA2_testo = document.createTextNode('var vaiA2_testo = "Rinuncia";');
pVaiA2_testo.appendChild(tnVaiA2_testo);
var pVaiA2_luogo = document.createElement("p");
var tnVaiA2_luogo = document.createTextNode('var vaiA2_luogo = "FineGioco";');
pVaiA2_luogo.appendChild(tnVaiA2_luogo);
var pCaricaLuoghi = document.createElement("p");
var tnCaricaLuoghi = document.createTextNode('caricaLuoghi(nome, titolo, descrizione, vaiA1_testo, vaiA1_luogo, vaiA2_testo, vaiA2_luogo);');
pCaricaLuoghi.appendChild(tnCaricaLuoghi);*/
var rifSezDaCopiare = document.getElementById("sezDaCopiare");
rifSezDaCopiare.appendChild(pEleLuoghi);
/*rifSezDaCopiare.appendChild(pNome);
rifSezDaCopiare.appendChild(pTitolo);
rifSezDaCopiare.appendChild(pDescrizione);
rifSezDaCopiare.appendChild(pVaiA1_testo);
rifSezDaCopiare.appendChild(pVaiA1_luogo);
rifSezDaCopiare.appendChild(pVaiA2_testo);
rifSezDaCopiare.appendChild(pVaiA2_luogo);
rifSezDaCopiare.appendChild(pCaricaLuoghi);*/
}
// Funzione per conoscere le dimensioni di un oggetto JavaScript
function dimOggetto(oggetto) {
var contatore = 0;
if (typeof oggetto == "object") {
if (Object.keys) {
contatore = Object.keys(oggetto).length;
} else if (window._) {
contatore = _.keys(oggetto).length;
} else if (window.$) {
contatore = $.map(oggetto, function() { return 1; }).length;
} else {
for (var key in oggetto) if (oggetto.hasOwnProperty(key)) contatore++;
}
}
return contatore;
}
File settaggi.js:
function elencaLuoghi() {
var nome = "Inizio";
var titolo = "Il gioco dei bivi";
var descrizione = "Stai per iniziare un’avventura scritta da qualcuno della tua età!";
var vaiA1_testo = "Inizia";
var vaiA1_luogo = "InizioGioco";
var vaiA2_testo = "Rinuncia";
var vaiA2_luogo = "FineGioco";
caricaLuoghi(nome, titolo, descrizione, vaiA1_testo, vaiA1_luogo, vaiA2_testo, vaiA2_luogo);
nome = "InizioGioco";
titolo = "Il Castello Maledetto";
descrizione = "Ti trovi fuori da un castello dall’aspetto tetro.<br />Davanti a te c’è un ponte levatoio del tutto allo scoperto.<br />Sotto di te un fossato pieno d'acqua.<br />Cosa fai?";
vaiA1_testo = "Attraverso il ponte levatoio";
vaiA1_luogo = "PuntoMorto";
vaiA2_testo = "Mi tuffo nel fossato";
vaiA2_luogo = "PuntoMorto";
caricaLuoghi(nome, titolo, descrizione, vaiA1_testo, vaiA1_luogo, vaiA2_testo, vaiA2_luogo);
nome = "FineGioco";
titolo = "Il Castello Maledetto";
descrizione = "Peccato! Speravo tanto tu ci volessi giocare...<br />Ora cosa farai?";
vaiA1_testo = "Spengo il computer e vado a nanna.";
vaiA1_luogo = "PuntoMorto";
vaiA2_testo = "Imparo qualcos’altro.";
vaiA2_luogo = "PuntoMorto";
caricaLuoghi(nome, titolo, descrizione, vaiA1_testo, vaiA1_luogo, vaiA2_testo, vaiA2_luogo);
}
File jsframe01.css:
body {
background-color: #E6E6E6;
}
header {
background-color: teal;
color: yellow;
margin-bottom: 3em;
}
header h1 {
margin-left: 0;
text-align: center;
}
footer {
background-color: blue;
color: yellow;
margin-top: 2em;
}
footer p {
margin-left: 0;
text-align: center;
}
fieldset > div {
margin-top: 1em;
}
fieldset > div > div {
margin-top: 0.5em;
}
hr {
margin: 1em 30%;
}
input {
width: 25em;
}
input.corto {
width: auto;
}
- sezStoria {
border-style: ridge;
margin: auto 20%;
padding: 1em;
}
- sezComandi {
border-style: ridge;
margin: auto 20%;
padding: 1em;
}
- sezDaCopiare {
margin-top: 2em;
background-color: #FFFFCC;
}
- sezDaCopiare p{
margin: 0 auto;
}
.centrato {
margin-left: 0;
text-align: center;
}
.bordato {
border-style: ridge;
padding: 0.5em;
}
.grassetto {
font-weight: bold;
}
.grande {
font-size: large;
}