Story

README_01.md

A little story.

View Twiddle | Copy Twiddle | View Gist

Original idea of this README taken from @rwjblue

application.controller.js

import Ember from 'ember';
import Content from '../content';

export default Ember.Controller.extend({
  index:0,
  model:Ember.computed(function(){
     return Content.sort(function(a,b){
       return a.index - b.index;
     });
  }),
  element: Ember.computed('index',function(){
    return this.get('model')[this.get('index')];
  }),
  actions:{
    actionClicked:function(value){
      const action = this.get('element').actions.filter(function(item){
        return item.text === value? true:false;
      });
      const goTo = action[0].goTo;
      this.set('index', goTo);
    }
  }
});

application.template.hbs

{{{element.text}}}
<br>
<p class="action-group">
{{#each element.actions as |item|}}
<span class="action" {{action 'actionClicked' item.text}}>{{item.text}}</span>
{{/each}}
</p>

content.js

export default [
  {
    index: 0,
    text:`<p class="capitalLetter">La noche del 17 de noviembre no pintaba especialmente distinta al resto de noches que había tenido el año, ni ella esperaba que ocurriera algo distinto. Los años transcurridos le habían enseñado que no valía la pena ilusionarse al respecto, que ese segundo entre las 23:59:59 y las 0:00:00 era demasiado insignificante para que tuviera la más mínima importancia. Todo seguiría siendo exactamente igual. Era un pensamiento pesimista que le invadía año tras año; sabía que no era del todo cierto. Otros años había recibido sorpresas bastante agradables el día de su cumpleaños pero, si calculabas la media de las emociones vividas cada 18 de noviembre, acababan saliendo números negativos. - Al menos las cosas están algo mejor últimamente - se consoló pensando. Resignada, se fue a la cama tras tomarse un batido de cacaolat. Cogió uno de los libros amontonados en su mesa de noche sin demasiado interés y peleó durante algunas horas intentando conseguir dormirse. Tras varios asaltos el sueño asestó un gancho impecable al interés por el libro y consigió vencer por KO.</p>`,
    actions: [
      {text: 'Continuar', goTo: 1}
    ]
  },
  {
    index: 1,
    text:`<p class="capitalLetter">Ñam, ñam, ñam.</p>
<p class="commonParagraph">El frío hacía tiempo que había llegado y lo había hecho con fuerza este año, cargado de humedad y vientos. Con los ojos todavía cerrados y sintiendo como la conciencia se debatía entre seguir en el mundo de los sueños o abrazar la realidad, trató de razonar cuán tarde debía de ser. Se le ocurrió que debía de ser todavía temprano porque su despertador no había sonado. Podía mirar la hora en su móvil, que reposaba silenciosamente en la mesa de noche pero todos sus miembros se habían aliado para no abandonar el refugio de las sábanas bajo ningún concepto.</p>
<p class="commonParagraph">ñam, ñam, ñam.</p>
<p class="commonParagraph">El día podía esperar.</p>`,
    actions: [
      {text: 'Continuar', goTo: 2}  
    ]
  },
  {
    index: 2,
    text:`<p class="capitalLetter">Ñam, ñam, ñam.</p>
<p class="commonParagraph">Los minutos avanzaban con su ritmo lento pero implacable mientras el bullicio de la calle comenzaba a cobrar vida. El despertador seguía sin sonar lo cual empezaba a irritarle. Sabía que lo había cargado hacía poco, así que no podía estar sin batería, por lo que se preguntaba molesta si se habría estropeado o su sistema habría dado algún tipo de error.</p>
<p class="commonParagraph">Ñam, ñam, ñam.</p>
<p class="commonParagraph">Algo en el fondo de su cerebro estaba inquieto, sentía que debía estar preocupada por algo, pero no sabía el qué. Reunió toda la voluntad de la que disponía en ese momento para vencer al frío y estiró su brazo en dirección a la mesa de noche. Tanteó a ciegas buscando algo reconocible pero, en vez de encontrar los bordes suavizados de la madera de la mesa de noche, se encontró con algo húmedo que subía y bajaba. Ella...</p>`,
    actions: [
      {text: 'abrió los ojos', goTo: 3},
      {text: 'retiró la mano', goTo: 4}
    ]
  },
  {
    index: 4,
    text:`<p class="capitalLetter">Retiró la mano rápidamente por instinto, ocultándola bajo las sábanas y durante unos segundos no hizo movimiento alguno. Su cerebro había optado por encender un cartel luminoso para ver si su conciencia terminaba de despertar del todo, pero ésta seguía de camino entre el sueño y la realidad</p>
<p class="commonParagraph">Se llevó la mano húmeda a la cara y la olisqueó. El fuerte olor a animal terminó por hacer que su conciencia recorriese los 100 metros lisos hasta despertar por completo.</p>`,
    actions: [
      {text: 'Continuar', goTo: 3}  
    ]
  },
  {
    index: 3,
    text:`<p class="capitalLetter">Abrió los ojos de golpe y lo que se encontró a pocos centímetros de su cara era el inexpresivo rostro de una vaca, que se entretenía mascando una de sus zapatillas.</p>
<p class="commonParagraph">Su primer instinto fue el de gritar tras la sorpresa aunque la bocanada de aire cargado de olor a vaca provocó que su grito acabase convertido en un acceso de tos. La vaca, que no se dejaba impresionar fácilmente, centraba todos sus esfuerzos en convertir la zapatilla en papilla.</p>
<p class="commonParagraph">Viendo que su vida no se encontraba en peligro y habiéndose calmado algo más tras el susto inicial empezó a dejar que la lógica dirigiera los pensamientos en su cerebro. - ¿Qué demonios hace una vaca en mi cuarto? - </p>`,
    actions: [
      {text: 'Continuar', goTo: 3}  
    ]
  },
  {
    index: 5,
    text:`<p class="capitalLetter">insult selected</p><p class="commonParagraph">Con la resignación de la experiencia se acostó en la cama</p>`,
    actions: [
      {text: 'Insultar', goTo: 1},
      {text: 'Halagar', goTo: 2},
      {text: 'Interrogar', goTo: 1},
      {text: 'Ignorar', goTo: 1}    
    ]
  },
  {
    index: 100,
    text:`<p class="capitalLetter">insult selected</p><p class="commonParagraph">Con la resignación de la experiencia se acostó en la cama</p>`,
    actions: [
      {text: 'Insultar', goTo: 1},
      {text: 'Halagar', goTo: 2},
      {text: 'Interrogar', goTo: 1},
      {text: 'Ignorar', goTo: 1}    
    ]
  }
];

styles.app.css

@import url(https://fonts.googleapis.com/css?family=Sigmar+One);

body {
  padding: 10px;
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 10pt;
   background-image: url(http://orig13.deviantart.net/4498/f/2009/058/6/7/tea_texture_red_and_black_by_shadsie.jpg);
  background-size: 100vw 100vh;
}

.capitalLetter:first-letter {
    font-family: Times;
    font-weight: bold;
    font-size: 400%; 
    float:left;
  	padding: 5px 5px 5px 5px;
}
.capitalLetter,.commonParagraph{
    text-align: justify;
}
.action-group{
  text-align:center;
}
.action{
  border: solid black 1px;
  padding: 5px;
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */ 
  cursor: pointer;
}
.action:hover{
  background-color: white;
}

twiddle.json

{
  "version": "0.4.13",
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.10/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.13/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.10/ember-template-compiler.js"
  }
}