Merge pull request #35 from ThomasRubini/client_game_introduction_and_interrogation
[Client] Add game introduction + interrogation + emotion and culprit choices views
This commit is contained in:
AudricV
GitHub
commit
c3ee6272ee
189
truthseeker/static/css/game_ui_game.css
Normal file
189
truthseeker/static/css/game_ui_game.css
Normal file
@ -0,0 +1,189 @@
|
||||
html {
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
:root {
|
||||
--button-color : #FF0000;
|
||||
}
|
||||
|
||||
.game_app {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.current_background {
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
/* Place the background behind everything */
|
||||
z-index: -9999;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.action_button {
|
||||
border-color: black;
|
||||
border-style: solid;
|
||||
border-width: 0.125em;
|
||||
background-color: var(--button-color);
|
||||
border-radius: var(--button-and-dialog-border-radius);
|
||||
cursor: pointer;
|
||||
font-family: "Titan One", sans-serif;
|
||||
font-size: 1.5em;
|
||||
min-width: 10em;
|
||||
padding-bottom: 0.5em;
|
||||
padding-top: 0.5em;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
overflow: hidden;
|
||||
text-transform: uppercase;
|
||||
transition: box-shadow 0.5s, transform 0.5s;
|
||||
}
|
||||
|
||||
.action_button:hover {
|
||||
box-shadow: 10px 10px 0px 0px black;
|
||||
transform: translate(0.1em, 0.1em);
|
||||
}
|
||||
|
||||
.next_btn {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
fill: var(--button-color);
|
||||
height: 5em;
|
||||
padding: 0;
|
||||
transform: rotate(180deg);
|
||||
width: 5em;
|
||||
}
|
||||
|
||||
#emotion_and_culprit_choices_next_btn, #interrogation_next_btn {
|
||||
position: fixed;
|
||||
left: calc(100% - 6em);
|
||||
top: 1em;
|
||||
}
|
||||
|
||||
/* Introduction */
|
||||
.introduction {
|
||||
padding: 1em;
|
||||
max-width: 50vw;
|
||||
}
|
||||
|
||||
.introduction_title {
|
||||
color: var(--button-color);
|
||||
font-family: "Spicy Rice", serif;
|
||||
font-size: 5em;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.introduction_text {
|
||||
font-family: "Spicy Rice", serif;
|
||||
font-size: 2em;
|
||||
margin-bottom: 1em;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
/* Interrogation */
|
||||
.interrogation {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.interrogation_title {
|
||||
color: var(--button-color);
|
||||
font-family: "Spicy Rice", sans-serif;
|
||||
font-size: 3em;
|
||||
margin: 1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.suspects {
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.suspect {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
.suspect_picture {
|
||||
margin-bottom: 1em;
|
||||
height: 15em;
|
||||
width: 15em;
|
||||
}
|
||||
|
||||
.suspect_picture[alt] {
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-family: "Roboto Mono", sans-serif;
|
||||
font-size: 1em;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ask_button {
|
||||
background-color: white;
|
||||
color: black;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/* Emotion and culprit choices */
|
||||
.culprit_btn {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.culprit_icon {
|
||||
fill: white;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
.culprit_btn_text {
|
||||
margin: 0;
|
||||
margin-left: 0.25em;
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
|
||||
.culprit_btn_checked {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.suspect_emotion_chooser {
|
||||
background-color: #5A5656;
|
||||
border: none;
|
||||
border-radius: var(--button-and-dialog-border-radius);
|
||||
color: white;
|
||||
font-family: "Roboto Mono", sans-serif;
|
||||
font-size: 1em;
|
||||
margin: 1em;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.emotion_and_culprit_choices_title {
|
||||
font-size: 2em;
|
||||
margin: 0.5em;
|
||||
text-align: center;
|
||||
font-family: "Spicy Rice", sans-serif;
|
||||
color: var(--button-color);
|
||||
}
|
||||
@ -1,3 +1,84 @@
|
||||
game.html template
|
||||
<br>
|
||||
<a href="/">Return to index</a>
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<title>Truth Inquiry</title>
|
||||
<link rel="stylesheet" href="/static/css/game_ui.css">
|
||||
<link rel="stylesheet" href="/static/css/game_ui_game.css">
|
||||
<meta name="color-scheme" content="dark light">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta charset="UTF-8">
|
||||
</head>
|
||||
<body class="game_app">
|
||||
<div class="current_background"></div>
|
||||
<div class="introduction hidden">
|
||||
<h1 class="introduction_title">Truth Inquiry</h1>
|
||||
<p class="introduction_text">Bienvenue dans Truth Inquiry, vous allez intégrer la peau d’un enquêteur.<br><br>Vous avez été donné responsable de résoudre une enquête et devez trouver le coupable d’un vol.<br><br>Cliquez sur la flèche pour découvrir les suspects et les interroger.</p>
|
||||
<button id="introduction_next_btn" aria-label="Commencer">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
|
||||
<path d="m23.15 36.95-17.3-11.1Q4.7 25.25 4.7 24t1.15-1.9L23.15 11q1.15-.7 2.35-.075 1.2.625 1.2 2.025v8.75h15.8q.95 0 1.625.675T44.8 24q0 .95-.675 1.6-.675.65-1.625.65H26.7V35q0 1.45-1.2 2.075-1.2.625-2.35-.125Z">
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="interrogation hidden">
|
||||
<h1 class="interrogation_title">Suspects</h1>
|
||||
<button id="interrogation_next_btn" class="next_btn" aria-label="Passer à la suite">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
|
||||
<path d="m23.15 36.95-17.3-11.1Q4.7 25.25 4.7 24t1.15-1.9L23.15 11q1.15-.7 2.35-.075 1.2.625 1.2 2.025v8.75h15.8q.95 0 1.625.675T44.8 24q0 .95-.675 1.6-.675.65-1.625.65H26.7V35q0 1.45-1.2 2.075-1.2.625-2.35-.125Z">
|
||||
</svg>
|
||||
</button>
|
||||
<div class="suspects">
|
||||
<!-- TODO: suspect model, remove from HTML and add it dynamically with JavaScript for each suspect -->
|
||||
<div class="suspect">
|
||||
<img class="suspect_picture" src="/static/images/suspect_example.png" alt="Example" draggable="false">
|
||||
<button class="ask_button action_button">Interroger</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="emotion_and_culprit_choices">
|
||||
<h1 class="emotion_and_culprit_choices_title">Choix du coupable et émotion des suspects</h1>
|
||||
<button id="emotion_and_culprit_choices_next_btn" class="next_btn hidden" aria-label="Passer à la suite">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
|
||||
<path d="m23.15 36.95-17.3-11.1Q4.7 25.25 4.7 24t1.15-1.9L23.15 11q1.15-.7 2.35-.075 1.2.625 1.2 2.025v8.75h15.8q.95 0 1.625.675T44.8 24q0 .95-.675 1.6-.675.65-1.625.65H26.7V35q0 1.45-1.2 2.075-1.2.625-2.35-.125Z">
|
||||
</svg>
|
||||
</button>
|
||||
<div class="suspects">
|
||||
<!-- TODO: suspect model, remove from HTML and add it dynamically with JavaScript for each suspect -->
|
||||
<div class="suspect">
|
||||
<select class="suspect_emotion_chooser" required="required">
|
||||
<option value="">Choisissez une émotion</option>
|
||||
<!-- Add other emotions here -->
|
||||
</select>
|
||||
<img class="suspect_picture" src="/static/images/suspect_example.png" alt="Example" draggable="false">
|
||||
<!-- Add culprit_btn_checked class when a choice is checked -->
|
||||
<!-- Only one button can be checked at a time, so when one is checked, the previous one, if applicable, is unchecked -->
|
||||
<button class="culprit_btn action_button">
|
||||
<svg class="culprit_checked_icon hidden culprit_icon" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 48 48">
|
||||
<path d="M18.9 36.75 6.65 24.5l3.3-3.3 8.95 9L38 11.1l3.3 3.25Z"></path>
|
||||
</svg>
|
||||
<svg class="culprit_unchecked_icon culprit_icon" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 48 48">
|
||||
<path d="M12.45 38.7 9.3 35.55 20.85 24 9.3 12.5l3.15-3.2L24 20.8 35.55 9.3l3.15 3.2L27.2 24l11.5 11.55-3.15 3.15L24 27.2Z">
|
||||
</svg>
|
||||
<p class="culprit_btn_text">Couplable</p>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert_dialog_background"></div>
|
||||
<div class="unsupported_browser">
|
||||
<div id="unsupported_browser_dialog" class="alert_dialog">
|
||||
<h3 class="alert_dialog_title">Navigateur non supporté</h3>
|
||||
<p class="alert_dialog_msg unsupported_browser_msg"></p>
|
||||
</div>
|
||||
</div>
|
||||
<noscript>
|
||||
<div class="alert_dialog_background" style="display: block;"></div>
|
||||
<div class="js_requirement">
|
||||
<div id="js_requirement_dialog" class="alert_dialog" style="display: block;">
|
||||
<h3 class="alert_dialog_title" style="display: block;">JavaScript nécessaire</h3>
|
||||
<p class="alert_dialog_msg unsupported_browser_msg" style="display: block;">Désolé, mais JavaScript est nécessaire pour faire fonctionner Truth Inquiry. Veuillez l'activer dans votre navigateur ou en utiliser un qui le supporte afin de pouvoir jouer au jeu.</p>
|
||||
</div>
|
||||
</div>
|
||||
</noscript>
|
||||
<script src="/static/js/game_common.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user