puzzle.html

<template name="puzzle">
<div class="row-fluid bb-puzzleround">
 <!-- this is a puzzle page -->

{{#with data}}
<div class="bb-splitter">
<div class="bb-top-content">{{! start top of splitter }}

<div class="bb-top-left-content">{{! start top left splitter }}
{{#unless puzzle.solved}}
  {{#with puzzle}}{{> puzzle_callin_modal}}{{> puzzle_summon_modal}}{{/with}}
{{/unless}}
<h1 class="{{#if stuck}}bb-status-stuck{{/if}}">Puzzle <small>{{puzzle.name}}
  (<a class="bb-wiki" href="{{wikiRP r=round_num p=puzzle_num}}">wiki r{{round_num}}p{{puzzle_num}}</a>)
  {{#if puzzle.link}}(<a href="{{puzzle.link}}" target="_blank">puzzle link <i class="icon-share-alt"></i></a>){{/if}}
</small></h1>

{{#with puzzle}}{{> blackboard_tags }}{{/with}}
{{#if puzzle.solved}}{{#with puzzle}}{{> puzzle_correct_answer}}{{/with}}{{/if}}
{{#with puzzle}}{{> puzzle_incorrect_answers}}{{/with}}

{{#unless "true"}}
<ul>
<li>Round: {{link id=round._id}}</li>
<li><a href="/chat/puzzles/{{puzzle._id}}" class="chat-link">Chat room for this puzzle</a></li>

<li><a href="{{drive_link puzzle.drive}}">Google drive folder for this puzzle</a></li>
<li><a href="{{drive_link puzzle.drive}}" class="bb-drive-upload">Upload file to google drive for this puzzle</a></li>
</ul>

Experimental:
<ul>
<li><a href="{{drive_link puzzle.drive}}" class="bb-drive-select">Select file from google drive</a></li>
</ul>
{{/unless}}
</div>

<div class="bb-splitter-handle"></div>

<div class="bb-top-right-content">{{! start top right splitter }}

<div class="bb-message-container">
  {{> messages }}
</div>

<div class="bb-chat-input bb-chat-footer">
  {{> messages_input }}
</div>

<div class="bb-chat-pop-out">
  <a href="/chat/puzzles/{{puzzle._id}}" class="chat-link bb-pop-out"
     target="chat{{puzzle._id}}"><i class="icon-share-alt"></i>
Pop out</a>
</div>

</div>

</div> {{! end top of splitter }}

<div class="bb-splitter-handle"></div>

<div class="bb-bottom-content">{{! start bottom of splitter }}

{{#if puzzle.spreadsheet}}
<div class="bb-bottom-header">
<a align="center" href="{{spread_link puzzle.spreadsheet}}"
   target="_blank"><i class='icon-fullscreen'></i>
Open spreadsheet in new window</a>
</div>

<iframe class="bb-spreadsheet-frame" frameborder='0' src='https://docs.google.com/spreadsheet/ccc?key={{puzzle.spreadsheet}}&widget=true&chrome=false'></iframe>
{{else}}
<p>No spreadsheet.</p>
{{/if}}

</div>{{! end bottom of splitter }}
</div>
{{/with}}

</div>
</template>

<template name="puzzle_correct_answer">
  <dl class="dl-horizontal bb-correct-answer">
    <dt>Answer:</dt><dd class="answer"><span>{{tag "answer"}}</span>
    <span class="timestamp">{{pretty_ts solved}}</span>
    {{#if tag "backsolve"}}<span class="backsolve">(backsolve)</span>{{/if}}
    </dd>
  </dl>
</template>

<template name="puzzle_incorrect_answers">
<dl class="dl-horizontal bb-incorrect-answers">
{{#each incorrectAnswers}}
  <dt>Incorrect answer:</dt><dd class="answer"><span>{{answer}}</span>
    <span class="timestamp">{{pretty_ts timestamp}}</span>
    {{#if backsolve}}<span class="backsolve">(backsolve)</span>{{/if}}
    </dd>
{{/each}}
</dl>
</template>

<template name="puzzle_summon_modal">
<button class="btn btn-small bb-summon-btn {{#if stuck}}stuck{{else}}unstuck{{/if}} {{#if currentPageEquals "chat"}}btn-inverse{{/if}}">{{#if stuck}}Clear STUCK status{{else}}Flag as STUCK{{/if}}</button>
<div class="modal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Call in the cavalry on a STUCK puzzle</h3>
  </div>
  <div class="modal-body">

    <p>So you're stuck, huh?  We have a few team members who are
      particularly good at the process needed to get puzzles over
      persistent humps.</p>

    <p>Before you call them in, have you gone through
      a <a target="_blank"
      href="https://acme-corp.com/0101/haveyoutried.pdf">"Have You
      Tried?"</a> list? (Here's <a target="_blank"
      href="http://www.danielwakabayashi.com/pturnips_andy_stuck.html">another
      one</a>.)  If you've done something once, have you tried "doing it
      again"?</p>

    <p>If you're ready to call in the cavalry, could you categorize
      your particular brand of stuck-ness?</p>

    <form class="form-inline bb-summon-form">
      <p>
        <label>I'm stuck
        <select class="stuck-at">
          <option value="at start">at the very start of the puzzle (no clue).</option>
          <option value="after obvious">after we've done the initial obvious stuff.</option>
          <option value="in the middle">somewhere in the middle muddle.</option>
          <option value="at extraction">at the final extraction step.</option>
        </select></label>
      </p>
      <p>
        <label>I need
        <select class="stuck-need">
          <option value="ideas">any idea how to proceed.</option>
          <option value="narrowing">help narrowing down a lot of possible ideas.</option>
          <option value="a thing">a physical item.</option>
          <option value="a place">presence at a physical location.</option>
          <option value="special skills">someone with special skills.</option>
          <option value="other">something else.</option>
        </select></label>
      </p>
      <p>
        <label class="label-stuck-other">
        Other brief information that may be helpful:<br/>
        <input class="stuck-other input-block-level" type="text" placeholder="I need a rubber chicken.">
        </label>
      </p>
    </form>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal">Cancel</button>
    <button class="btn btn-primary bb-summon-submit">Send in the call for help!</button>
  </div>
</div>
</template>

<template name="puzzle_callin_modal">
<button class="btn btn-small bb-callin-btn {{#if currentPageEquals "chat"}}btn-inverse{{/if}}">Request Call-In</button>
<div class="modal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Request an answer call-in</h3>
  </div>
  <div class="modal-body">
    <form class="form">
      <label>Answer to call in:</label>
      <input type="text" class="bb-callin-answer" placeholder="Answer">
      <label class="checkbox">
        <input type="checkbox" value="backsolve"> Backsolved?
      </label>
      <label class="checkbox">
        <input type="checkbox" value="provided"> Answer provided by HQ?
        <!-- ie, because we brought a physical object to HQ, won a
             game, or cashed in points -->
      </label>
    </form>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal">Cancel</button>
    <button class="btn btn-primary bb-callin-submit">Request Call-in</button>
  </div>
</div>
</template>