306 lines
10 KiB
HTML
306 lines
10 KiB
HTML
<!doctype html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width" />
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
|
<title>The Crew</title>
|
|
<style>
|
|
form {
|
|
background: #CCCCCC;
|
|
}
|
|
|
|
.bordered {
|
|
border: 1ex solid black;
|
|
display: inline-block;
|
|
margin: 1ex;
|
|
padding: 1ex;
|
|
}
|
|
|
|
div.card.done {
|
|
opacity: .3;
|
|
}
|
|
|
|
ul {
|
|
list-style-type: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<form id="thecrew-config-form">
|
|
<label for="thecrew-player1">Player 1</label><input id="thecrew-player1" type="text"/><br/>
|
|
<label for="thecrew-player2">Player 2</label><input id="thecrew-player2" type="text"/><br/>
|
|
<label for="thecrew-player3">Player 3</label><input id="thecrew-player3" type="text"/><br/>
|
|
<label for="thecrew-player4">Player 4</label><input id="thecrew-player4" type="text"/><br/>
|
|
<label for="thecrew-player5">Player 5</label><input id="thecrew-player5" type="text"/><br/>
|
|
<label for="thecrew-cardtype">Cartes classiques</label><input id="thecrew-cardtype" type="checkbox"/><br/>
|
|
<input id="thecrew-validate" type="submit" value="Valider"/>
|
|
</form>
|
|
<form id="thecrew-run-form">
|
|
<select id="thecrew-level" name="thecrew-level">
|
|
</select>
|
|
<input id="thecrew-run" type="submit" value="Démarrer la partie"/>
|
|
</form>
|
|
<span id="thecrew-question">Sélectionnez les paramètres de base</span>
|
|
<div id="thecrew-select-captain">
|
|
</div>
|
|
<div id="thecrew-select-tasks">
|
|
</div>
|
|
<div id="thecrew-game">
|
|
<dl id="thecrew-special-rules"></dl>
|
|
<ul id="thecrew-assigned-tasks"></ul>
|
|
</div>
|
|
</main>
|
|
|
|
<script th:inline="javascript">
|
|
// Helpers
|
|
function listProd(l1,l2) {
|
|
var o = []
|
|
for (i in l1) {
|
|
for (j in l2) {
|
|
o.push([l1[i],l2[j]])
|
|
}
|
|
}
|
|
return o
|
|
}
|
|
function emptyListList(k) {
|
|
var o = []
|
|
for (let i=0;i<k;i++) {
|
|
o.push([])
|
|
}
|
|
return o
|
|
}
|
|
function takeNRandom(l,n) {
|
|
let ll = l.slice()
|
|
let o = []
|
|
for (let i=0; i<n; i++) {
|
|
k = Math.floor(Math.random() * ll.length)
|
|
o.push(ll[k])
|
|
ll.splice(k,1)
|
|
}
|
|
return o
|
|
}
|
|
function joinLists(l1,l2) {
|
|
let ll = l1.slice()
|
|
ll.push.apply(ll,l2)
|
|
return ll
|
|
}
|
|
function makeCardImg(l) {
|
|
s = l[1]
|
|
n = l[0]
|
|
b = l[2]
|
|
i = numbers.indexOf(n)
|
|
tn = numbersText[i]
|
|
cardFileName=tn+"-of-"+s+".png"
|
|
out = $('<div/>')
|
|
.addClass('bordered')
|
|
.addClass('card')
|
|
$('<img/>')
|
|
.attr('src','/thecrew/'+cardFileName)
|
|
.appendTo(out)
|
|
if(b){
|
|
modifierFileName=modifierMap[b].toLowerCase()+".png"
|
|
$('<img/>')
|
|
.attr('src','/thecrew/'+modifierFileName)
|
|
.appendTo(out)
|
|
}
|
|
return out
|
|
}
|
|
|
|
const thecrewSuits = ['square','triangle','circle','cross']
|
|
const regularSuits = ['hearts','spades','clubs','diamonds']
|
|
const numbers = ['1','2','3','4','5','6','7','8','9']
|
|
const numbersText = ['one','two','three','four','five','six','seven','eight','nine']
|
|
const trumpNumbers = ['1','2','3','4']
|
|
const otherThecrewCards = listProd(numbers,thecrewSuits)
|
|
const otherRegularCards = listProd(numbers,regularSuits)
|
|
const trumpCards = listProd(trumpNumbers, [null])
|
|
const allCards = joinLists
|
|
const modifierMap = {
|
|
">": "onearrow",
|
|
">>": "twoarrow",
|
|
">>>": "threearrow",
|
|
">>>>": "fourarrow",
|
|
"1": "one",
|
|
"2": "two",
|
|
"3": "three",
|
|
"4": "four",
|
|
"5": "five",
|
|
"Ω": "omega",
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
|
|
var missionsData = {}
|
|
$.getJSON('missions.json',function(data) {
|
|
missionsData = data
|
|
for (md in missionsData['missions']) {
|
|
$('<option/>')
|
|
.data('thecrew-mission',md)
|
|
.text(md)
|
|
.appendTo('#thecrew-level')
|
|
}
|
|
});
|
|
|
|
function makeMissionRules(i) {
|
|
var out = {}
|
|
var missionRules = missionsData['missions'][i]
|
|
out['cards'] = takeNRandom(otherCards, missionRules['cards'].length)
|
|
for (c in out['cards']) {
|
|
out['cards'][c].push(missionRules['cards'][c])
|
|
}
|
|
out['specialRules'] = {}
|
|
for (mr in missionRules['special']) {
|
|
let specialRule = missionRules['special'][mr]
|
|
out['specialRules'][specialRule] = missionsData['specialRules'][specialRule]
|
|
}
|
|
return out
|
|
}
|
|
|
|
var joueureuses = []
|
|
var jl = 0
|
|
var otherCards = otherThecrewCards
|
|
|
|
function configGame(e) {
|
|
e.preventDefault()
|
|
joueureuses = []
|
|
for (let i=0;i<5;i++){
|
|
player = $('#thecrew-player'+(i+1)).val()
|
|
if (player) {
|
|
joueureuses.push(player)
|
|
}
|
|
}
|
|
jl = joueureuses.length
|
|
if ($('#thecrew-cardtype').is(":checked")) {
|
|
otherCards = otherRegularCards
|
|
} else {
|
|
otherCards = otherThecrewCards
|
|
}
|
|
$('#thecrew-config-form').hide()
|
|
$('#thecrew-run-form').show()
|
|
}
|
|
$('#thecrew-validate').click(configGame)
|
|
|
|
|
|
var missionRules = null
|
|
var captain = -1
|
|
var assignedTasks = emptyListList(jl)
|
|
var nextToAssign = -1
|
|
var toAssign = []
|
|
var specialRules = {}
|
|
|
|
function startMission(e) {
|
|
e.preventDefault()
|
|
missionNumber = $('#thecrew-level').val()
|
|
missionRules = makeMissionRules(missionNumber)
|
|
toAssign = missionRules['cards']
|
|
specialRules = missionRules['specialRules']
|
|
captain = -1
|
|
assignedTasks = emptyListList(jl)
|
|
nextToAssign = -1
|
|
|
|
$('#thecrew-question').text('Qui est capitaine ?')
|
|
$('#thecrew-select-captain').empty()
|
|
for (j in joueureuses) {
|
|
$('<button/>')
|
|
.text(joueureuses[j])
|
|
.click(selectedCaptain)
|
|
.appendTo('#thecrew-select-captain')
|
|
}
|
|
$('#thecrew-game').hide()
|
|
$('#thecrew-select-tasks').hide()
|
|
$('#thecrew-select-captain').show()
|
|
}
|
|
$('#thecrew-run').click(startMission)
|
|
|
|
function selectedCaptain(e) {
|
|
let captainName = e.currentTarget.innerText
|
|
captain = joueureuses.indexOf(captainName)
|
|
nextToAssign = captain
|
|
if (toAssign.length == 1) {
|
|
assignTask(0)
|
|
startPlaying()
|
|
} else if (toAssign.length == 0) {
|
|
startPlaying()
|
|
} else {
|
|
nextAssignTask()
|
|
}
|
|
$('#thecrew-select-captain').hide()
|
|
$('#thecrew-select-tasks').show()
|
|
}
|
|
|
|
function nextAssignTask(){
|
|
$('#thecrew-question').text(joueureuses[nextToAssign%jl]+': Quelle tâche choisit-tu ?')
|
|
$('#thecrew-select-tasks').empty()
|
|
for (at in toAssign) {
|
|
makeCardImg(toAssign[at])
|
|
.data("thecrew-task",at)
|
|
.click(chooseAssignation)
|
|
.appendTo('#thecrew-select-tasks')
|
|
}
|
|
}
|
|
|
|
function assignTask(tindex) {
|
|
assignedTasks[nextToAssign%jl].push(toAssign[tindex])
|
|
toAssign.splice(tindex,1)
|
|
nextToAssign += 1
|
|
}
|
|
|
|
function chooseAssignation(e) {
|
|
assignedIndex = $(e.currentTarget).data("thecrew-task")
|
|
assignTask(assignedIndex)
|
|
|
|
if(toAssign.length==1){
|
|
assignTask(0)
|
|
startPlaying()
|
|
} else {
|
|
nextAssignTask()
|
|
}
|
|
}
|
|
|
|
function startPlaying() {
|
|
$('#thecrew-question').text("Bon jeu !")
|
|
$('#thecrew-select-tasks').empty()
|
|
$('#thecrew-assigned-tasks').empty()
|
|
$('#thecrew-special-rules').empty()
|
|
for (at in assignedTasks) {
|
|
thePlayerLi = $('<li/>').addClass('bordered')
|
|
$('<h2/>')
|
|
.text("Tâches de "+joueureuses[at])
|
|
.appendTo(thePlayerLi)
|
|
playerList = $('<ul/>')
|
|
for (tt in assignedTasks[at]) {
|
|
theTaskLi = $('<li/>')
|
|
makeCardImg(assignedTasks[at][tt])
|
|
.data("thecrew-task",[at,tt])
|
|
.click(taskDone)
|
|
.appendTo(theTaskLi)
|
|
theTaskLi.appendTo(playerList)
|
|
}
|
|
playerList.appendTo(thePlayerLi)
|
|
thePlayerLi.appendTo('#thecrew-assigned-tasks')
|
|
}
|
|
for (sr in specialRules) {
|
|
$('<dt/>').text(sr).appendTo('#thecrew-special-rules')
|
|
$('<dd/>').text(specialRules[sr]).appendTo('#thecrew-special-rules')
|
|
}
|
|
$('#thecrew-select-captain').hide()
|
|
$('#thecrew-select-tasks').hide()
|
|
$('#thecrew-game').show()
|
|
}
|
|
|
|
function taskDone(e) {
|
|
ll = $(e.currentTarget).data("thecrew-task")
|
|
$(e.currentTarget).toggleClass('done')
|
|
}
|
|
$('#thecrew-run-form').hide()
|
|
$('#thecrew-select-captain').hide()
|
|
$('#thecrew-select-tasks').hide()
|
|
$('#thecrew-game').hide()
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|