The road to a single page app

Clase 53 de 61 • Curso de JavaScript y jQuery 2015

Clase anteriorSiguiente clase

Manuel Calle Pérez

student•

Donde están los archivos?

Mario Flores

student•

no me quedo claro, por qué pasando window.user como parámetro solo así funciono el home template?, que sin eso no funciona? -en routes.js.

Raúl Segura Nabarret

student•

Les comparto mi archivo final funcionando de routes.js

'use strict'

var $ = window.jQuery

var page = window.page

var signinTemplate = `<label>Ingresa tu nombre</label>

    <input type="text" id="firstName" name="firstName" tabindex="1" placeholder="First Name" class="Signin-name-input"/>

    <button tabindex="2" class="Signin-button">Ingresar</button>`

var homeTemplate = `<section class="Layout">

    <section class="Layout-rival">

      <div class="Card-hidden">

        <div style="width: 200px; height: 300px; border: 5px solid black; background-image: url('./public/images/logo.jpg'); background-size: 100% 100%; background-repeat: no-repeat;" class="Card-hidden-image"></div>

      </div>

      <div class="Card-hidden">

        <div style="width: 200px; height: 300px; border: 5px solid black; background-image: url('./public/images/logo.jpg'); background-size: 100% 100%; background-repeat: no-repeat;" class="Card-hidden-image"></div>

      </div>

      <div class="Card-hidden">

        <div style="width: 200px; height: 300px; border: 5px solid black; background-image: url('./public/images/logo.jpg'); background-size: 100% 100%; background-repeat: no-repeat;" class="Card-hidden-image"></div>

      </div>

      <div class="Card-hidden">

        <div style="width: 200px; height: 300px; border: 5px solid black; background-image: url('./public/images/logo.jpg'); background-size: 100% 100%; background-repeat: no-repeat;" class="Card-hidden-image"></div>

      </div>

      <div class="Card-hidden">

        <div style="width: 200px; height: 300px; border: 5px solid black; background-image: url('./public/images/logo.jpg'); background-size: 100% 100%; background-repeat: no-repeat;" class="Card-hidden-image"></div>

      </div>

    </section>

    <section class="Layout-main">

      <div class="Layout-status">

        <div class="Status">

          <h3 class="Status-player">Raul</h3>

          <p class="Status-points">::0000::</p>

        </div>

        <div class="Status">

          <h3 class="Status-player">Raul2</h3>

          <p class="Status-points">::0000::</p>

        </div>

      </div>

      <div class="Layout-battle">

        <div class="Battle">

          <div class="Battle-rival">

            <div class="Card">

              <h2 class="Card-name">Name</h2>

              <div class="Card-image"><img src="./public/images/wolverine.jpg" alt=":image-description:"></div>

              <div class="Card-points"><span>:points:</span></div>

            </div>

            <div class="Card">

              <h2 class="Card-name">Name</h2>

              <div class="Card-image"><img src="./public/images/wolverine.jpg" alt=":image-description:"></div>

              <div class="Card-points"><span>:points:</span></div>

            </div>

            <div class="Card">

              <h2 class="Card-name">Name</h2>

              <div class="Card-image"><img src="./public/images/wolverine.jpg" alt=":image-description:"></div>

              <div class="Card-points"><span>:points:</span></div>

            </div>

            <div class="Card">

              <h2 class="Card-name">Name</h2>

              <div class="Card-image"><img src="./public/images/wolverine.jpg" alt=":image-description:"></div>

              <div class="Card-points"><span>:points:</span></div>

            </div>

            <div class="Card">

              <h2 class="Card-name">Name</h2>

              <div class="Card-image"><img src="./public/images/wolverine.jpg" alt=":image-description:"></div>

              <div class="Card-points"><span>:points:</span></div>

            </div>

          </div>

          <div class="Battle-player">

            <div class="Card">

              <h2 class="Card-name">Name</h2>

              <div class="Card-image"><img src="./public/images/wolverine.jpg" alt=":image-description:"></div>

              <div class="Card-points"><span>:points:</span></div>

            </div>

            <div class="Card">

              <h2 class="Card-name">Name</h2>

              <div class="Card-image"><img src="./public/images/wolverine.jpg" alt=":image-description:"></div>

              <div class="Card-points"><span>:points:</span></div>

            </div>

            <div class="Card">

              <h2 class="Card-name">Name</h2>

              <div class="Card-image"><img src="./public/images/wolverine.jpg" alt=":image-description:"></div>

              <div class="Card-points"><span>:points:</span></div>

            </div>

            <div class="Card">

              <h2 class="Card-name">Name</h2>

              <div class="Card-image"><img src="./public/images/wolverine.jpg" alt=":image-description:"></div>

              <div class="Card-points"><span>:points:</span></div>

            </div>

            <div class="Card">

              <h2 class="Card-name">Name</h2>

              <div class="Card-image"><img src="./public/images/wolverine.jpg" alt=":image-description:"></div>

              <div class="Card-points"><span>:points:</span></div>

            </div>

          </div>

        </div>

      </div>

      <div class="Layout-phases">

        <div class="Phases">

          <div class="Phases">

            <p>:Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, officia:</p>

          </div>

        </div>

      </div>

    </section>

    <section class="Layout-player">

      <div class="Card-hidden">

        <div style="width: 200px; height: 300px; border: 5px solid black; background-image: url('./public/images/logo.jpg'); background-size: 100% 100%; background-repeat: no-repeat;" class="Card-hidden-image"></div>

      </div>

      <div class="Card-hidden">

        <div style="width: 200px; height: 300px; border: 5px solid black; background-image: url('./public/images/logo.jpg'); background-size: 100% 100%; background-repeat: no-repeat;" class="Card-hidden-image"></div>

      </div>

      <div class="Card-hidden">

        <div style="width: 200px; height: 300px; border: 5px solid black; background-image: url('./public/images/logo.jpg'); background-size: 100% 100%; background-repeat: no-repeat;" class="Card-hidden-image"></div>

      </div>

      <div class="Card-hidden">

        <div style="width: 200px; height: 300px; border: 5px solid black; background-image: url('./public/images/logo.jpg'); background-size: 100% 100%; background-repeat: no-repeat;" class="Card-hidden-image"></div>

      </div>

      <div class="Card-hidden">

        <div style="width: 200px; height: 300px; border: 5px solid black; background-image: url('./public/images/logo.jpg'); background-size: 100% 100%; background-repeat: no-repeat;" class="Card-hidden-image"></div>

      </div>

    </section>

  </section>`

page('/', restrict, home)

page('/signin', signin)

page()

function restrict(ctx, next) {

	if(!window.user) return page('/signin')

	next()

function home () {

	console.log('Home')

	$('.app-container').html($(homeTemplate))

function signin(ctx, next) {

	$('.app-container').html(signinTemplate)

	$('.Signin-button').on('click', function (e) {

		e.preventDefault()

		var username = $('.Signin-name-input')[0].value

		if (!username) return alert('Error')

		window.user = { username: username }

		page('/')

})

Ivan Cardozo

student•

No anda el full screen boton