538 lines
14 KiB
HTML
538 lines
14 KiB
HTML
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
|
|
<link rel="stylesheet" href="css/normalize.css" type="text/css">
|
|
<link rel="stylesheet" href="css/skeleton.css" type="text/css">
|
|
<link rel="stylesheet" href="css/styles.css" type="text/css">
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
|
|
<script>
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
|
|
|
ga('create', 'UA-68221124-1', 'auto');
|
|
ga('send', 'pageview');
|
|
|
|
</script>
|
|
<title>Resistance</title>
|
|
</head>
|
|
|
|
<body>
|
|
{{> main}}
|
|
</body>
|
|
|
|
<template name="main">
|
|
<div class="container">
|
|
{{> score}}
|
|
<br>
|
|
{{> Template.dynamic template=whichView}}
|
|
<br>
|
|
{{> history}}
|
|
<hr>
|
|
|
|
{{> footer}}
|
|
</div>
|
|
</template>
|
|
|
|
<template name="footer">
|
|
<p class="small"><a href="https://boardgamegeek.com/boardgame/41114/resistance" target="_blank">The Resistance: Avalon</a> was designed by Don Eskridge </p>
|
|
<p class="small">and published by <a href="http://www.indieboardsandcards.com/resistance.php">Indie Cards and Games</a></p>
|
|
<p class="small">Built by <a href="http://alantran.co" target="_blank">Alan Tran</a> | <a href="https://github.com/athtran/avalon" target="_blank">Github Link</a></p>
|
|
</template>
|
|
|
|
<template name="score">
|
|
{{#if game}}
|
|
<div class="access-code">
|
|
<p>Access Code: {{code}}</p>
|
|
</div>
|
|
<div class="score">
|
|
<div class="score-box {{roundFinished round=1}}"><p>{{missionNum round=1}}</p></div>
|
|
<div class="score-box {{roundFinished round=2}}"><p>{{missionNum round=2}}</p></div>
|
|
<div class="score-box {{roundFinished round=3}}"><p>{{missionNum round=3}}</p></div>
|
|
<div class="score-box {{roundFinished round=4}}"><p>{{missionNum round=4}}</p></div>
|
|
<div class="score-box {{roundFinished round=5}}"><p>{{missionNum round=5}}</p></div>
|
|
</div>
|
|
{{/if}}
|
|
</template>
|
|
|
|
<template name="roleInfo">
|
|
<div class="role-info">
|
|
<hr class="small-hr">
|
|
<p id="role-info">
|
|
Team: <b class="{{player.team}}">{{team}}</b> | Role: {{role}}
|
|
|
|
{{#if isSpy}}
|
|
<p>Other spies:
|
|
{{#each allSpies}}
|
|
<b class="spy">{{name}} </b>
|
|
{{/each}}
|
|
</p>
|
|
{{/if}}
|
|
|
|
{{#if isMerlin}}
|
|
<p>The spies {{#if gameHasMordred}}(except Mordred){{/if}} are:
|
|
{{#each allSpies}}
|
|
<b class="spy">{{name}} </b>
|
|
{{/each}}
|
|
</p>
|
|
{{/if}}
|
|
|
|
{{#if isPercival}}
|
|
<p>Merlin is {{possibleMerlins}}.</p>
|
|
{{/if}}
|
|
|
|
{{#if isAssassin}}
|
|
<p>Try to see if you can spot who the Merlin is. You'll have a chance to identify him at the end of the game to win it.</p>
|
|
{{/if}}
|
|
|
|
{{#if isMorgana}}
|
|
<p>Percival sees you as Merlin.</p>
|
|
{{/if}}
|
|
</p>
|
|
<p id="role-info-hidden">
|
|
Tap to view role info
|
|
</p>
|
|
</div>
|
|
|
|
<script>
|
|
$(document).ready(function () {
|
|
$('.role-info').click(function () {
|
|
$('#role-info').toggle();
|
|
$('#role-info-hidden').toggle();
|
|
})
|
|
})
|
|
</script>
|
|
</template>
|
|
|
|
<template name="startMenu">
|
|
<div class="main-menu">
|
|
<h2>Welcome to the Resistance</h2>
|
|
<br>
|
|
<div class="button-container">
|
|
<button class="button-new-game">New Game</button>
|
|
<button class="button-join-game">Join Game</button>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<template name="newGame">
|
|
<div class="new-game">
|
|
<h2>New Game</h2>
|
|
|
|
<form class="new-game-form">
|
|
<input class="name-input" type="text" placeholder="Name">
|
|
<div class="button-container">
|
|
<button class="button-create">Join</button>
|
|
<button class="button-main-menu">Back</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
|
|
<template name="joinGame">
|
|
<div class="join-game">
|
|
<h2>Join Game</h2>
|
|
|
|
<form class="join-game-form">
|
|
<input class="code-input" type="text" placeholder="Access Code">
|
|
<input class="name-input" type="text" placeholder="Name">
|
|
|
|
<div class="button-container">
|
|
<button type="submit" class="button-join">Join</button>
|
|
<button class="button-main-menu">Back</button>
|
|
</div>
|
|
</form>
|
|
<p class="alert-unique-name">Please choose a different name; there is already a player using that name.</p>
|
|
<p class="alert-game-started">That game has already started. If you want to rejoin, please enter your name exactly as you did before.</p>
|
|
<p class="alert-player-connected">The player you are trying to rejoin as is already in the game. Please try again in a few seconds if they have been disconnected.</p>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<template name="lobby">
|
|
<div class="lobby">
|
|
<h2>Lobby</h2>
|
|
<div class="lobby-info">
|
|
<div class="access-code">
|
|
<p>Access Code: {{code}}</p>
|
|
</div>
|
|
<div class="game-options">
|
|
<p class="options-header">Options</p>
|
|
<div class="role-options">
|
|
<li class="checked"><input type="checkbox" id="displayHistory" class="displayHistory" checked="{{displayHistory}}"><label for="displayHistory">show history table</label></li>
|
|
<li class="checked"><input type="checkbox" id="merlin" class="merlin" checked="{{merlin}}"><label for="merlin">Merlin</label></li>
|
|
<li class="checked"><input type="checkbox" id="assassin" class="assassin" checked="{{assassin}}"><label for="assassin">Assassin</label></li>
|
|
<li class="checked"><input type="checkbox" id="morgana" class="morgana" checked="{{morgana}}"><label for="morgana">Morgana</label></li>
|
|
<li class="checked"><input type="checkbox" id="mordred" class="mordred" checked="{{mordred}}"><label for="mordred">Mordred</label></li>
|
|
<li class="checked"><input type="checkbox" id="percival" class="percival" checked="{{percival}}"><label for="percival">Percival</label></li>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<ul>
|
|
{{#each players}}
|
|
<li>{{ name }}</li>
|
|
{{/each}}
|
|
</ul>
|
|
|
|
<div class="button-container">
|
|
<button class="button-start">Start</button>
|
|
<button class="button-leave">Leave</button>
|
|
</div>
|
|
<p class="player-alert-5">You must have at least 5 players to play!</p>
|
|
<p class="player-alert-10">You can't have more than 10 players to play!</p>
|
|
</div>
|
|
|
|
<script>
|
|
$(document).ready(function () {
|
|
$('.options-header').click(function () {
|
|
$('.role-options').toggle();
|
|
})
|
|
})
|
|
</script>
|
|
</template>
|
|
|
|
<template name="rolePhase">
|
|
<div class="role-phase">
|
|
<h2>Role Phase</h2>
|
|
{{> roleInfo}}
|
|
|
|
<p><b>Ready up!</b></p>
|
|
<ul>
|
|
{{#each players}}
|
|
<li class="{{#if ready}}ready{{/if}}">{{name}}</li>
|
|
{{/each}}
|
|
</ul>
|
|
<button type="submit">Ready</button>
|
|
</div>
|
|
</template>
|
|
|
|
<template name="pickPhase">
|
|
<style media="screen">
|
|
</style>
|
|
<div class="pick-phase">
|
|
<h2>Pick Phase</h2>
|
|
{{#if voteRejected}}
|
|
<p class="red">
|
|
The previous vote has been rejected. A new leader has been chosen.
|
|
</p>
|
|
{{/if}}
|
|
|
|
{{> voteResults}}
|
|
|
|
{{#if chosenPlayers}}
|
|
<p>Your leader, <b class="role">{{leader}}</b>, is choosing: </p>
|
|
{{#each chosenPlayers}}
|
|
<li>{{name}}</li>
|
|
{{/each}}
|
|
{{/if}}
|
|
{{#if chosen}}
|
|
<p>You have been chosen!</p>
|
|
{{else}}
|
|
<p>Please wait while your leader, {{leader}}, chooses a team.</p>
|
|
{{/if}}
|
|
</div>
|
|
</template>
|
|
|
|
<template name="pickPhaseLeader">
|
|
<div class="pick-phase">
|
|
<h2>Pick Phase</h2>
|
|
{{#if voteRejected}}
|
|
<p class="red">
|
|
The previous vote has been rejected. You are now the leader.
|
|
</p>
|
|
{{/if}}
|
|
|
|
{{> voteResults}}
|
|
|
|
<p><b>You are the leader!</b> Tap on the names to choose a team.</p>
|
|
<ul>
|
|
{{#each players}}
|
|
{{> player}}
|
|
{{/each}}
|
|
</ul>
|
|
<button class="{{#if pickMax}}ready{{/if}}">Submit</button>
|
|
</div>
|
|
</template>
|
|
|
|
<template name="player">
|
|
<li class="player {{#if chosen}}chosen{{/if}}">
|
|
{{name}}
|
|
</li>
|
|
</template>
|
|
|
|
<template name="votingPhase">
|
|
<div class="voting-phase">
|
|
<h2>Voting Phase</h2>
|
|
</div>
|
|
|
|
<p><b>Please vote on the following team:</b></p>
|
|
<ul>
|
|
{{#each chosenPlayers}}
|
|
<li>{{name}}</li>
|
|
{{/each}}
|
|
</ul>
|
|
|
|
<p><b>Waiting for {{ playersCount }} people to vote.</b></p>
|
|
|
|
<div class="button-container">
|
|
<button class="button-accept">Accept</button>
|
|
<button class="button-reject">Reject</button>
|
|
</div>
|
|
|
|
{{#if isLeader}}
|
|
<div class="button-container">
|
|
<button class="button-cancel">Change team</button>
|
|
</div>
|
|
{{/if}}
|
|
|
|
{{#if playerVote}}
|
|
<p>You are voting: {{ playerVote }}</p>
|
|
{{/if}}
|
|
</template>
|
|
|
|
<template name="missionPhase">
|
|
<div class="mission-phase">
|
|
<h2>Mission Phase</h2>
|
|
|
|
<p>
|
|
The vote has passed. You have not been selected. Please wait.
|
|
</p>
|
|
|
|
{{> voteResults}}
|
|
</div>
|
|
</template>
|
|
|
|
<template name="missionPhaseChosen">
|
|
<div class="mission-phase">
|
|
<h2>Mission Phase</h2>
|
|
|
|
<p>
|
|
The vote has passed. You have been chosen to go on the mission.
|
|
</p>
|
|
|
|
{{> voteResults}}
|
|
|
|
<div class="button-container">
|
|
<button class="button-pass">Pass</button>
|
|
<button class="button-fail">Fail</button>
|
|
</div>
|
|
|
|
{{#if mission}}
|
|
<p>
|
|
You are submitting: {{mission}}
|
|
</p>
|
|
{{/if}}
|
|
</div>
|
|
</template>
|
|
|
|
<template name="voteResults">
|
|
{{#if missionExists}}
|
|
<p class="{{#if numSabotaged}}red{{/if}}">
|
|
The previous mission {{missionResult}}. {{#if numSabotaged}} {{numSabotaged}} sabotaged the mission. {{/if}}
|
|
</p>
|
|
{{/if}}
|
|
|
|
{{> roleInfo}}
|
|
|
|
{{#if exists}}
|
|
<hr class="small-hr">
|
|
<span id="voteHeader"><h2>Previous Vote Results</h2>(tap to show/hide results)</span>
|
|
|
|
<div id="voteResults">
|
|
<div class="voteContainer">
|
|
<div class="voteSubContainer">
|
|
<div>
|
|
<p><b>Voted to accept:</b></p>
|
|
</div>
|
|
<div class="voters">
|
|
<ul>
|
|
{{#each acceptVoters}}
|
|
<li class="voter">{{name}}</li>
|
|
{{/each}}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<div class="voteSubContainer">
|
|
<div>
|
|
<p><b>Voted to reject:</b></p>
|
|
</div>
|
|
<div class="voters">
|
|
<ul>
|
|
{{#each rejectVoters}}
|
|
<li class="voter">{{name}}</li>
|
|
{{/each}}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr class="small-hr">
|
|
{{/if}}
|
|
|
|
<script>
|
|
$(document).ready(function () {
|
|
$('#voteHeader').click(function () {
|
|
$('#voteResults').toggle();
|
|
})
|
|
})
|
|
</script>
|
|
</template>
|
|
|
|
<template name="gameOver">
|
|
<div class="gameOver">
|
|
<p>
|
|
Game Over
|
|
|
|
{{voteResults}}
|
|
{{destroyGame}}
|
|
</p>
|
|
</div>
|
|
</template>
|
|
|
|
<template name="specialGameOver">
|
|
<div class="gameOver">
|
|
<p>
|
|
Game Over
|
|
</p>
|
|
|
|
{{> roleInfo}}
|
|
{{#if resistanceWins}}
|
|
<p>The assassin guessed incorectly! The resistance wins.</p>
|
|
{{else}}
|
|
<p>The assassin guessed correctly! Spies win.</p>
|
|
{{/if}}
|
|
|
|
{{destroyGame}}
|
|
</div>
|
|
</template>
|
|
|
|
<template name="assassinPhase">
|
|
<div class="assassin-phase">
|
|
<p>
|
|
Assassin Phase
|
|
</p>
|
|
|
|
<ul>
|
|
{{#each resistanceMembers}}
|
|
{{> assassinPick}}
|
|
{{/each}}
|
|
</ul>
|
|
|
|
<button type="submit" class="assassinate">Assassinate</button>
|
|
</div>
|
|
</template>
|
|
|
|
<template name="assassinPick">
|
|
<li class=" player {{#if chosen}}chosen{{/if}}">
|
|
{{name}}
|
|
</li>
|
|
</template>
|
|
|
|
<template name="assassinPhaseWait">
|
|
<div class="assassin-phase">
|
|
<p>
|
|
The resistance have won 3 rounds! Please wait while the assassin choses a target.
|
|
</p>
|
|
{{> roleInfo}}
|
|
</div>
|
|
</template>
|
|
|
|
<template name="history">
|
|
{{#if displayHistory}}
|
|
<table id="history">
|
|
<thead>
|
|
<tr>
|
|
{{#each players}}
|
|
<th><p>{{ name }}</p></th>
|
|
{{/each}}
|
|
</tr>
|
|
</thead>
|
|
{{#each rounds}}
|
|
<tbody>
|
|
{{#each votes}}
|
|
<tr class="{{status}}">
|
|
{{#each playerVotes}}
|
|
<td class="{{classList}}"></td>
|
|
{{/each}}
|
|
</tr>
|
|
{{/each}}
|
|
{{#if isCompleted}}
|
|
<tr class="summary {{result}}">
|
|
<td colspan="5">Mission {{round}} {{result}}ed with {{fails}} failures</td>
|
|
</tr>
|
|
{{/if}}
|
|
</tbody>
|
|
{{/each}}
|
|
</table>
|
|
{{/if}}
|
|
</template>
|
|
|
|
<template name="test">
|
|
<table id="history">
|
|
<thead>
|
|
<th><p>Player 1</p></th>
|
|
<th><p>Player 2</p></th>
|
|
<th><p>Player 3</p></th>
|
|
<th><p>Player 4</p></th>
|
|
<th><p>Player 5</p></th>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="reject">
|
|
<td class="leader chosen reject"></td>
|
|
<td class="reject"></td>
|
|
<td class="chosen accept"></td>
|
|
<td class="reject"></td>
|
|
<td class="accept"></td>
|
|
</tr>
|
|
<tr class="accept-pending">
|
|
<td class="chosen accept"></td>
|
|
<td class="leader accept"></td>
|
|
<td class="reject"></td>
|
|
<td class="reject"></td>
|
|
<td class="chosen accept"></td>
|
|
</tr>
|
|
<tr class="fail">
|
|
<td class="accept"></td>
|
|
<td class="chosen accept"></td>
|
|
<td class="leader chosen reject"></td>
|
|
<td class="reject"></td>
|
|
<td class="accept"></td>
|
|
</tr>
|
|
<tr class="summary fail">
|
|
<td colspan="5">Mission 1 failed with 2 failures</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody>
|
|
<tr class="pending">
|
|
<td class=""></td>
|
|
<td class=""></td>
|
|
<td class=""></td>
|
|
<td class="leader"></td>
|
|
<td class=""></td>
|
|
</tr>
|
|
<tr class="voting">
|
|
<td class="chosen"></td>
|
|
<td class=""></td>
|
|
<td class=""></td>
|
|
<td class=""></td>
|
|
<td class="leader chosen"></td>
|
|
</tr>
|
|
<tr class="pass">
|
|
<td class="leader accept"></td>
|
|
<td class="chosen accept"></td>
|
|
<td class="chosen reject"></td>
|
|
<td class="reject chosen"></td>
|
|
<td class="accept"></td>
|
|
</tr>
|
|
<tr class="summary pass">
|
|
<td colspan="5">Mission 2 passed</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</template>
|