nbillard/sokoban
1
1
Fork 0
Code Issues Pull requests Releases Wiki Activity

Merge branch 'master' of https://git.etud.insa-toulouse.fr/nbillard/sokoban

Browse source
This commit is contained in:
nbillard 2022-12-12 17:13:31 +01:00
commit 766cdaa003
2 changed files with 41 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
index.html
View file

@ -25,30 +25,38 @@
<ol id="level-list" class="not-in-win-animation">
</ol>
</nav>
<main>
<div class="controls not-in-win-animation">
<div class="container">
<aside class="left-sidebar">
<table>
SCORE
</table>
</aside>
<main>
<article class="not-in-win-animation">
<canvas id="canvas" width="800" height="400"></canvas>
<div id="tutorial-speech-bubble" class="text-bubble">
<div class="dialog">
<p id="tutorial-box" class="speech"></p>
<div class="right-point">
</div>
<div class="right-point shifted">
</div>
</div>
</div>
</article>
</main>
<aside class="controls not-in-win-animation right-sidebar">
<div id="timer">Time</div>
<button id="pause-1">Pause</button>
<button id="pause-2">Pause</button><br/>
<label for="dificulty-slider">Difficulty</label><br/>
<input type="range" min="0" max="100" value="50" id="difficulty-slider">
<br/>
</div>
<div class="not-in-win-animation">
<canvas id="canvas" width="800" height="400"></canvas>
<div id="tutorial-speech-bubble" class="text-bubble">
<div class="dialog">
</aside>
</div>
<p id="tutorial-box" class="speech"></p>
<div class="right-point">
</div>
<div class="right-point shifted">
</div>
</div>
</div>
</div>
</main>
<footer>
<p>Sokoban 2022</p>
<p>Pour une meilleure expérience, veuillez utiliser ce jeu sur un ordinateur avec un écran horizontal.</p>

21
style.css
View file

@ -6,7 +6,7 @@
body {
background-color: var(--main-background-color);
color: --main-invert-color;
color: --main-text-color;
display: flex;
flex-direction: column;
margin: 0;
@ -17,12 +17,25 @@ main {
display: flex;
flex-direction: column;
align-items: center;
margin: 1rem 0;
float: left;
}
.container {
padding: 2rem 0 0 0;
display: flex;
min-height: 40vh;
}
aside {
margin: 0 auto;
float: left;
width: 10rem;
justify-content: space-between;
flex-direction: column;
}
nav {
display: flex;
/*width: 100%; */
background-color: yellowgreen;
padding: 0 20%;
}
@ -50,6 +63,7 @@ footer {
align-items: center;
flex-direction: column;
position:fixed;
margin-top: auto;
width: 100%;
bottom: 0;
background-color: yellowgreen;
@ -60,7 +74,6 @@ footer p:last-child {
}
.text-bubble {
/* transform: rotate(90deg); */
position: relative;
margin: auto;
margin-left: 185px;