forked from rolodub/pschiit
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
138 lines (129 loc) · 8.16 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Pschiiit</title>
<!-- On définie le viewport (la fenêtre) pour donner ses dimention et signifier les possibilités de zoom de l'utilisateur (ici seul l'affiche normal est autorisé) -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Les 2 balises suivantes permettent d'indiquer au navigateur qu'il peut considérer le site en temps que Web app lorsque il est lancé depuis le bureau -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Style de la barre d'état (valeurs: default / black / black-translucent) -->
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<!-- Nom de la webapp sur le bureau-->
<meta name="apple-mobile-web-app-title" content="Pschiiit">
<meta name="mobile-web-app-title" content="Pschiiit">
<link rel="apple-touch-icon" sizes="57x57" href="https://cpd-rush2017.herokuapp.com/pschiiit/icone/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="https://cpd-rush2017.herokuapp.com/pschiiit/icone/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="https://cpd-rush2017.herokuapp.com/pschiiit/icone/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://cpd-rush2017.herokuapp.com/pschiiit/icone/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://cpd-rush2017.herokuapp.com/pschiiit/icone/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://cpd-rush2017.herokuapp.com/pschiiit/icone/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://cpd-rush2017.herokuapp.com/pschiiit/icone/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://cpd-rush2017.herokuapp.com/pschiiit/icone/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://cpd-rush2017.herokuapp.com/pschiiit/icone/apple-icon-180x180.png">
<!--
On appel jQuery Mobile pour préparer la UI de notre webApp
On appel addtohomescreen.css et addtohomescreen.min.js pour donner un message d'information aux utilisateurs afin de leur indiquer que la webApp est enregistrable sur tablette et smartphone
-->
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<link rel="stylesheet" href="pschitt_style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="http://demo.lapprimerie.com/rush2016/js/addtohomescreen.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<!-- On créé la page home -->
<div data-role="page" id="home">
<!-- On ajoute un panel dans lequel on mettra les options réglables par le joueur -->
<!-- On ajoute la div principale de la page -->
<div role="main" class="content">
<!--<img id="fond1" src="/assets/aatitlepagefond.png">-->
<div class="cocotte"></div>
<a href="#options" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-btn-large" data-transition="flip">Démarrer</a>
</div>
</div>
<!-- On crée la page options -->
<div data-role="page" id="options">
<!-- Titre du panel -->
<div data-role="header" data-theme="a">
<a href="#home" data-rel="back" class="ui-btn ui-btn-left ui-alt-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
<h1>Options</h1>
</div>
<div role="main" class="ui-content">
<!-- On créé un slider (input type="range") pour choisir le nombre de donuts -->
<div class="full-width-slider">
<label for="menuGravity">Nombre de joueurs</label>
<input type="range" id="menuGravity" data-highlight="true" min="1" max="5" value="1" data-show-value="true" data-popup-enabled="true">
</div>
<br>
<!-- On créé un controlgroup (défini par jQueryMobile) dans lequel on place 3 boutons radio permettant de choisir la difficulté -->
<fieldset data-role="controlgroup" data-type="vertical" data-mini="true">
<legend>Difficulté</legend>
<input type="radio" name="menuDifficulty" id="menuDifficulty1" value="1" checked="checked">
<label for="menuDifficulty1">Facile</label>
<input type="radio" name="menuDifficulty" id="menuDifficulty2" value="2">
<label for="menuDifficulty2">Moyen</label>
<input type="radio" name="menuDifficulty" id="menuDifficulty3" value="3">
<label for="menuDifficulty3">Difficile</label>
</fieldset>
<a href="#rules" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-btn-mini">Comment jouer ?</a>
<a href="#game" class="ui-btn ui-shadow ui-corner-all ui-btn-inline ui-btn-mini">Jouer !</a>
<div class="alumette"></div>
</div>
</div>
<!-- On crée la page Rules -->
<div data-role="page" data-dialog="true" id="rules">
<!-- Titre du panel -->
<div data-role="header" data-theme="a">
<h1>Règles</h1>
</div>
<div role="main" class="ui-content rules">
<h3>Objectif principal :</h3>
<p>Faites le plus de tours possibles ensemble et fais en sorte de ne pas voir la cocotte exploser dans tes mains.</p>
<h4>Attention à la pression! Si tu bouges trop la cocotte, elle explose.</h4>
<h4>Actions :</h4>
<ul>
<li> Récupère et maintiens ton doigt sur la cocotte, </li>
<li> Dis "tic" ou "tac",</li>
<li> Carte Boost : Fais monter la pression à tout moment,</li>
<li> Carte Soupape : Fais baisser la pression 1 fois pendant le tour,</li>
<li> Passe délicatement la cocotte à ta gauche.</li>
</ul>
<p>Si tu ne dis pas "tic" ou "tac", le tour ne compte pas!</p>
<a href="#index" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" data-rel="back">J'ai compris!</a>
</div>
</div>
<!-- On créé la page game -->
<div data-role="page" id="game">
<!-- On créé un bouton de retour vers la page home -->
<a href="#home" data-rel="back" class="ui-btn ui-btn-left ui-alt-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
<!-- On ajoute la div principale de la page (dans laquelle se trouvera le jeu) -->
<div data-role="main" class="content">
<div id="roulage"></div>
<div id="tangage"></div>
<div class="gameZone">
<img id="img_1" class="circle" src="https://cpd-rush2017.herokuapp.com/pschiiit/images/cercle1.png"/>
<img id="img_2" class="circle" src="https://cpd-rush2017.herokuapp.com/pschiiit/images/cercle2.png"/>
<img id="img_3" class="circle" src="https://cpd-rush2017.herokuapp.com/pschiiit/images/cercle3.png"/>
<img id="cocotte_game" class="cocotte" src="https://cpd-rush2017.herokuapp.com/pschiiit/images/CocotteFinale.png"/>
<div id="timing"></div>
</div>
<div class="bang_div">
<a href="#game" class="btnContinue ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Continuer</a>
<!-- <img id="bang_img" src="/assets/BOUM_GIF.gif"/> -->
</div>
</div>
<!-- On ajoute une balise audio avec une id pour pouvoir l'appeler facilement depuis le JS -->
<audio>
<source id="son_mini" src="https://cpd-rush2017.herokuapp.com/pschiiit/sons/son_mini.mp3" type="audio/mpeg">
</audio>
<audio>
<source id="son_medium" src="https://cpd-rush2017.herokuapp.com/pschiiit/sons/son_medium.mp3" type="audio/mpeg">
</audio>
<audio>
<source id="son_hard" src="https://cpd-rush2017.herokuapp.com/pschiiit/sons/son_hard.mp3" type="audio/mpeg">
</audio>
</body>
</html>