Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="starting-overlay">
<h1 class="game-title">A <span>Spooky M</span><span>o</span><span>v</span><span>i</span><span>e</span><span>s</span> Game</h1>
<button class="start-game">play a spooky movies game</button>
  <p class="start-with-instructions"><a href="" class="start-with-instructions-link">teach me how to play first</a></p>
</div>

<div id="rules-overlay">
  <div class="rules-inner">
    <h3 class="rules-headline">How to play</h3>
    <p class="rules-details">A Spooky Movies Game is based on Google's ability to correctly identify a movie when given a very vague plot summary.</p> 
        <p class="rules-details">It's like the normal A Movies game, except all of the movies are halloween movies.</p> 
    <p class="rules-details">The aim is simple: without using any actor, director or character names, or words from the title, can you make a Google search that results in a movie's IMDB or Wikipedia page as the first result? How many words do you need? Can you do it in five words? Three?</p>
    <p class="rules-details">For example, you might get the movie Inception*. If you type "stealing dreams movie" in the search box, you've made a three word guess. Press the button or hit enter to find out if you're correct**. If you're not, try again. If you are, try another with fewer words, or get a new movie and play again.
    <p class="rules-details">That's pretty much it. Feel free to reach out with comments, bugs, requests, or anything else.</p>
    <p class="rules-details">*the movie is picked randomly from a subset of IMDB's 1000 top rated movies</p>
      <p class="rules-details">**You won't be, by the way. That query comes up with the 1995 movie The City Of Lost Children. "Stealing dreams top movie" is a winner though, as is "dreams extraction movie".</p>
    <p class="rules-details"></p>
<p class="rules-details">
    <a href="" class="dismiss-rules-trigger">
    <svg>
      <path stroke="#444" stroke-width="2" fill="none" d="M0,0,17.75,17.75" />
      <path stroke="#444" stroke-width="2" fill="none" d="M0,17.75,17.75,0" />
  </svg>
  </a>
  </div>
</div>

<div id="game-container">
  <p class="helper-text -upper">
    your movie is...
  </p>
  <h2 class="movie-title"></h2>
  <p class="helper-text -lower">
    <span class="default-helper">
      your guess is <span class="guess-word-count">0</span> <span class="guess-word-word">words</span> long
    </span>
    <span class="winner-helper">you got it in <span class="guess-word-count">0</span> <span class="guess-word-word">words</span>! can you do better?</span>
    <span class="loser-helper">your guess was <span class="guess-word-count">0</span> <span class="guess-word-word">words</span> long</span>
  </p>
  <div class="guess-input-group">
    <div class="guess-input-wrapper">
      <input class="guess-input" type="text" />
      <button class="guess-button">guess!</button>
    </div>
  </div>
  <p class="helper-links">stumped? 
    <a href="" class="more-details-link"><!--see more about the movie</a> or -->
    <a href="" class="reset-game-link">get a different movie</a>
  </p>
  <div class="search-results">
  </div>
  <a href="" class="display-rules-trigger">?</a>
</div>

<div id="win-overlay"></div>
<div id="lose-overlay"></div>
              
            
!

CSS

              
                @import 'https://fonts.googleapis.com/css?family=Rubik:300,300i,400,700,700i';
@import 'https://fonts.googleapis.com/css?family=Creepster';

$blue: #FF851B;
$red: #FF851B;
$yellow: #FF851B;
$green: #0f9d58;
$black: #333333;
$dark-gray: #555555;
$mid-gray: #818181;
$light-gray: #DDDDDD;
$white: #FFFFFF;

$huge-text-size: 100px;
$big-text-size: 32px;
$medium-text-size: 24px;
$small-text-size: 18px;

$bold: 700;
$medium: 400;
$light: 300;

$win-lose-overlay-z-index: 10;
$starting-overlay-z-index: 4;
$rules-overlay-z-index: 3;
$rules-button-overlay-z-index: 2;

$sans-font: 'Rubik', Helvetica, Arial, sans-serif;

@mixin big-text {
  font-family: 'Creepster';
  letter-spacing: 2px;
  @include breakpoint-large {
    font-size: $huge-text-size;
  }
  @include breakpoint-medium{
    font-size: 75px;
  }
  @include breakpoint-small {
    font-size: 55px;
  }
  @include breakpoint-extra-small {
    font-size: 40px;
  }
}
@mixin big-button {
  -webkit-appearance: none;
  font-family: $sans-font;
  font-weight: $bold;
  background: $blue;
  color: $white;
  border: none;
  border-radius: 40px;
  @include breakpoint-medium-or-larger {
    font-size: $medium-text-size;
    padding: 17px 55px 18px 55px;
  }
  @include breakpoint-small {
    font-size: $small-text-size;
    padding: 17px 40px 18px 40px;
  }
}

* {
  box-sizing: border-box;
  // border: 1px dotted #0f0 !important;
}

#starting-overlay {
  position: fixed;
  z-index: $starting-overlay-z-index;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: $white;
  overflow-y: scroll;
  @include breakpoint-medium-or-larger {
    padding: 200px 0;
  }
  @include breakpoint-small {
    padding: 100px 0;
  }
  
  .game-title {
    @include big-text;
    text-align: center;
    color: $dark-gray;
    span:nth-child(1) { color: $blue; }
    span:nth-child(2) { color: $red; }
    span:nth-child(3) { color: $yellow; }
    span:nth-child(4) { color: $blue; }
    span:nth-child(5) { color: $blue; }
    span:nth-child(6) { color: $red; }
  }
  .start-game {
    @include big-button;
    display: block;
    @include breakpoint-medium-or-larger {
      margin: 50px auto 30px auto;
    }
    @include breakpoint-small {
      margin: 30px auto 20px auto;
    }
    &:hover {
      cursor: pointer;
      background: lighten($blue, 5);
    }
  }
  .start-with-instructions {
    font-family: $sans-font;
    font-weight: $light;
    text-align: center;

  }
  .start-with-instructions-link {
    color: $mid-gray;
    &:hover {
      color: lighten($mid-gray, 10);
    }
    @include breakpoint-small {
      font-size: 14px;
      padding: 15px 0;
    }
  }
}

#rules-overlay {
  display: none;
  z-index: $rules-overlay-z-index;
  background: rgba(0,0,0,0.1);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  cursor: pointer;
  @include breakpoint-medium-or-larger {
    padding: 30px 10px;
  }
  @include breakpoint-small {
    padding: 15px 10px;
  }
  
  .rules-inner {
    background: $white;
    max-width: 420px;
    min-height: 420px;
    margin: 0 auto;
    padding: 30px;
    position: relative;
    cursor: auto;
    color: $dark-gray;
  }
  
  .rules-headline {
    font-family: $sans-font;
    font-weight: $bold;
    font-size: $medium-text-size;
    margin-bottom: 15px;
    @include breakpoint-extra-small {
      font-size: 20px;
    }
  }
  
  .rules-details {
    font-family: $sans-font;
    font-weight: $light;
    line-height: 1.4;
    margin-bottom: 10px;
    @include breakpoint-extra-small {
      font-size: 15px;
    }
  }
  
  .dismiss-rules-trigger {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
    cursor: pointer;
    padding: 13px;
  }
}

#game-container {
  @include breakpoint-medium-or-larger {
    padding: 100px 20px;    
  }
  @include breakpoint-small {
    padding: 40px 15px;
  }
  .movie-title {
    @include big-text;
    text-align: center;
    color: $black;
    padding: 0 20px;
    @include breakpoint-large {
      margin: 80px auto;
    }
    @include breakpoint-medium {
      margin: 60px auto;
    }
    @include breakpoint-small {
      margin: 40px auto;
    }
    &.-winner {
      color: $green;
    }
    &.-loser {
      color: $red;
    }
  }
  .movie-year {
    color: $dark-gray;
    &.-winner {
      color: $green;
    }
    &.-loser {
      color: $red;
    }
  }
  .helper-text {
    font-family: $sans-font;
    font-weight: $bold;
    color: $dark-gray;
    text-align: center;
    @include breakpoint-medium-or-larger {
      font-size: $big-text-size;
    }
    @include breakpoint-small {
      font-size: $medium-text-size;
    }
    @include breakpoint-extra-small {
      font-size: 20px;
    }
    &.-upper {
      @include breakpoint-medium-or-larger {
        margin: 0 auto 30px auto;
      }
      @include breakpoint-small {
        margin: 0 auto 10px auto;
      }
    }
    &.-lower {
      @include breakpoint-medium-or-larger {
        margin: 60px auto 20px auto;
      }
      @include breakpoint-small {
        margin: 40px auto 15px auto;
      }
    }
  }
  .loser-helper, .winner-helper {
    display: none;
  }
  .guess-word-count {
    color: $blue;
  }
  .helper-links {
    font-family: $sans-font;
    font-weight: $light;
    text-align: center;
    color: $mid-gray;
    @include breakpoint-small {
      font-size: 14px;
      padding: 0 35px;
      line-height: 1.7;
    }
    .reset-game-link, .more-details-link {
      color: $mid-gray;
      // padding: 10px 0;
      &:hover {
        color: lighten($mid-gray, 10);
      }
      @include breakpoint-small {
        padding: 5px 0;
        white-space: nowrap;
      }
    }
  }
  .guess-input-wrapper {
    max-width: 800px;
    overflow: hidden;
    margin: 0 auto 25px auto;
  }
  .guess-input {
    display: inline-block;
    float: left;
    font-family: $sans-font;
    font-weight: $bold;
    font-size: $medium-text-size;
    color: $mid-gray;
    padding: 17px 15px 18px 30px;
    border: 1px solid $light-gray;
    border-radius: 40px;
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    @include breakpoint-medium-or-larger {
      width: 80%;
    }
    @include breakpoint-small {
      width: 75%;
      font-size: $small-text-size;
    }
    @include breakpoint-extra-small {
      padding: 13px 15px 14px 25px;
      width: 65%;
    }
    &:focus, &:active {
      border: 1px solid $blue;
      border-right: none;
      outline: none;
    }
  }
  .guess-button {
    @include big-button;
    float: right;
    text-align: center;
    border: 1px solid $blue;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    &:hover, &:focus, &:active {
      cursor: pointer;
      background: lighten($blue, 5);
    }
    @include breakpoint-medium-or-larger {
      width: 20%;
      font-size: $medium-text-size;
      padding: 17px 10px 18px 0;
    }
    @include breakpoint-small {
      width: 25%;
      font-size: $small-text-size;
      padding: 17px 10px 18px 0;
    }
    @include breakpoint-extra-small {
      padding: 13px 10px 14px 0;
      width: 35%;
    }
  }
  .display-rules-trigger {
    font-family: $sans-font;
    font-weight: $bold;
    font-size: $medium-text-size;
    text-decoration: none;
    cursor: pointer;
    width: 44px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    border-radius: 100%;
    position: fixed;
    bottom: 15px;
    right: 15px;
    background: $blue;
    color: white;
    &:hover {
       box-shadow: 1px 1px 2px 2px rgba(0,0,0,0.15);
    }
  }
  .search-results {
    max-width: 800px;
    padding: 0 10px 0 10px;
    margin: 0 auto;
    font-family: $sans-font;
    font-size: $small-text-size;
    line-height: 1.3;
    color: $dark-gray;
    font-weight: $light;
    @include breakpoint-small {
      font-size: 16px;
    }
    @include breakpoint-extra-small {
      font-size: 14px;
    }
    b {
      font-weight: $medium;
    }
  }
  .search-result {
    margin: 15px 0;
  }
  .search-result-title, .search-result-snippet {
    margin-bottom: 3px;
  }
  .search-result-title > a {
    color: $blue;
  }
  .search-result-website {
    color: $black;
    font-weight: bold;
  }
}

#win-overlay, #lose-overlay {
  display: none;
  position: fixed;
  z-index: $win-lose-overlay-z-index;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
#win-overlay {
  background: $green;
}
#lose-overlay {
  background: $red;
}
              
            
!

JS

              
                var randomMovie = {};

var randomFromArray = function(array) {
  return array[Math.floor(Math.random() * array.length)];
};

$('.start-game').on('click', function() {
  $('#starting-overlay').fadeOut(200);
  pickARandomMovie();
});

$('.start-with-instructions-link').on('click', function(e) {
  e.preventDefault();
  $('#rules-overlay').show();
  $('#starting-overlay').fadeOut(200);
  pickARandomMovie();
});

$('.dismiss-rules-trigger').on('click', function(e) {
  e.preventDefault();
  $('#rules-overlay').fadeOut(200);
})

$('.display-rules-trigger').on('click', function(e) {
  e.preventDefault();
  $('#rules-overlay').fadeIn(200);
})

$('#rules-overlay').on('mousedown', function(e) {
	var clicked = $(e.target);
	if (clicked.is('.rules-inner') || clicked.parents().is('.rules-inner')) {
		return;
   } else {
     $('#rules-overlay').fadeOut(200);
   }
});

$('.more-details-link').on('click', function(e) {
  e.preventDefault();
  getMovieData(randomMovie.title,randomMovie.year);
});

$('.reset-game-link').on('click', function(e) {
  e.preventDefault();
  pickARandomMovie();
});

var pickARandomMovie = function() {
  randomMovie = randomFromArray(moviesList);
  $('.movie-title , .movie-year').removeClass('-winner').removeClass('-loser');
  $('.guess-input').val('')//.focus();
  $('.guess-word-count').html(0);
  $('.movie-title').html(randomMovie.title + ' <br/><span class="movie-year">(' + randomMovie.year + ')</span>')
};

var getMovieData = function( title , year ) {
  $.getJSON('http://www.omdbapi.com/?t=' + title.replace(' ', '+') + '&y=' + year + '&plot=short&r=json', function(data) {
    showMovieDetails(data);
  }).fail( function(d, textStatus, error) {
    console.error('oh fuck (omdbapi)');
    });
}

var showMovieDetails = function(movie) {
    movieDetails = data;
    //show stuff goes here; gotta go here because callbacks
};

$('.guess-input').on('keyup', function(e) {
  var guess = $('.guess-input').val();
  $('.helper-text.-lower .winner-helper, .helper-text.-lower .loser-helper ').hide();
  $('.helper-text.-lower .default-helper').show();
  //TODO revert the guess text to normal
  if (e.which === 13) {
    searchGoogle();  
  } else if ( guess === '') {
     $('.guess-word-count').html(0);
     $('.guess-word-word').html('words');
  } else {
    updateWords(guess);
  }
});

$('.guess-button').on('click', function () {
  searchGoogle();
});

var searchGoogle = function() {
  var query = $('.guess-input').val()
  $.getJSON('https://www.googleapis.com/customsearch/v1?key=AIzaSyA0uUM2FJFmVaVod00_AwFYabWmHp3O7Ys&cx=004814594758536366120:iq3f_h_8jdm&prettyPrint=true&q=' + encodeURIComponent(query), function(data) {
  if (data.items[0].displayLink === 'en.wikipedia.org' || data.items[0].displayLink === 'www.imdb.com') {
    setWinner(data);
  } else {
    setLoser(data)
  }
  }).fail( function(d, textStatus, error) {
    console.error('oh fuck (google)');
    });
};

var setWinner = function(results) {
   console.log('you win!');
    $('#win-overlay').show();
    setTimeout( function() {
      $('.movie-title , .movie-year').removeClass('-loser').addClass('-winner');
      $('.helper-text.-upper').html('you got it!')
      $('.helper-text.-lower .default-helper, .helper-text.-lower .loser-helper').hide();
      $('.helper-text.-lower .winner-helper').show();
      //TODO change the button
      $('#win-overlay').fadeOut(200);
    }, 100)
    displaySearchResults(results);
}

var setLoser = function(results) {
   console.log('you lose');
    $('#lose-overlay').show();
    setTimeout( function() {
      $('.movie-title , .movie-year').removeClass('-winner').addClass('-loser');
      $('.helper-text.-upper').html('try again.')
      $('.helper-text.-lower .default-helper, .helper-text.-lower .winner-helper').hide();
      $('.helper-text.-lower .loser-helper').show();
      updateWords($('.guess-input').val());
      //TODO change the button
      $('#lose-overlay').fadeOut(200);
    }, 100)
    displaySearchResults(results);
}

var displaySearchResults = function(results) {
  $('.search-results').html('');
  for (i = 0; i < 3; i++) { 
    $('.search-results').append(
    '<div class="search-result"> <h3 class="search-result-title"><a href="' + results.items[i].formattedUrl + '">' + results.items[i].htmlTitle + '</a></h3><p class="search-result-snippet">' + results.items[i].htmlSnippet.replace('<br>','') + '</p><p class="search-result-website">' + results.items[i].htmlFormattedUrl + '</p></div>'    
    )
  }    
}

function updateWords(s){
    s = s.replace(/(^\s*)|(\s*$)/gi,"");
    s = s.replace(/[ ]{2,}/gi," ");
    s = s.replace(/\n /,"\n"); 
    var wordCount = s.split(' ').length; 
    $('.guess-word-count').html(wordCount);
    if (wordCount === 1) {
     $('.guess-word-word').html('word');
    } else {
     $('.guess-word-word').html('words');
    }
}


// "show me more about the movie"
// you win/you lose conditionality
  // you win
    // flash screen DONE
    // color text
    // color input, guess again
    // update upper text
    // can you do better?
    // play again with a new movie
  // try again 
    // flash screen
    // color input, guess again
    // color text
    // update upper text
// Uh oh, you X has a Y in it!
    //banned word list
    //validate on submission? on keyup?`
// need to revisit the helper links' placement
// revisit design choices generally
// graceful failure of queries, nice ajaxing
// refactor everything basically
// edit the movies list

              
            
!
999px

Console