rebillar/GrandTabernacleAutoVI
2
3
Fork 0
Code Issues 1 Pull requests Releases 2 Wiki Activity

phone

Browse source
This commit is contained in:
Killian Marty 2023-12-11 18:49:13 +01:00
parent d0a3a207bd
commit df7db329c5
4 changed files with 53 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
public_html/css/game.css
View file

@ -5,6 +5,7 @@ html, body{
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
#canvas{
@ -12,6 +13,18 @@ html, body{
max-width: 100vw;
}
#phoneContainer.hidden{
position: absolute;
right: 20px;
top: 100%;
}
#phoneContainer.visible{
position: absolute;
right: 20px;
bottom: 5%;
}
#phoneDiv{
position: relative;
}
@ -20,7 +33,7 @@ html, body{
width: 200px;
}
#phoneScreen{
background-color: 524b4a;
background-color: #322b2a;
position: absolute;
left: 7%;
top: 12%;
@ -37,6 +50,8 @@ html, body{
line-height: 7%;
padding: 0px;
overflow: hidden;
font-weight: bold;
background-color: #232120 ;
}
#chatHeader > p{
@ -46,6 +61,7 @@ html, body{
#chatMessages{
height: 80%;
width: 100%;
overflow: scroll;
}
#chatInputDiv{
height: 10%;
@ -70,6 +86,7 @@ html, body{
.message{
color: white;
font-family: sans-serif;
margin: 3%;
}
.messageTitle{

26
public_html/game.html
View file

@ -17,20 +17,24 @@
</head>
<body>
<canvas width="800" height="800" id="canvas"></canvas>
<div id="phoneDiv">
<img id="phone" src="assets/phone.png" alt="Phone">
<div id="phoneScreen">
<div id="chatHeader">
<p>Concorde</p>
</div>
<div id="chatMessages">
</div>
<div id="chatInputDiv">
<input type="text" placeholder="Ecrivez un message ici" id="chatInput" onkeydown="phone.keyPress(this)">
<div id="phoneContainer" class="hidden">
<div id="phoneDiv">
<img id="phone" src="assets/phone.png" alt="Phone">
<div id="phoneScreen">
<div id="chatHeader">
<p>Concord</p>
</div>
<div id="chatMessages">
</div>
<div id="chatInputDiv">
<input type="text" placeholder="Ecrivez un message ici" id="chatInput" onkeydown="phone.keyPress(this)">
</div>
</div>
</div>
</div>
</body>
</html>

8
public_html/js/input.js
View file

@ -33,7 +33,7 @@ class Input {
window.addEventListener("keydown", (e)=>{
//blocks the action of the key (cf. Killian)
if(["Space","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].indexOf(e.code) > -1) {
if(["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].indexOf(e.code) > -1) {
e.preventDefault();
}
this.keysDown.add(e.key.toLowerCase())
@ -44,6 +44,12 @@ class Input {
this.keysDown.delete(e.key.toLowerCase())
this.updateDir();
})
window.addEventListener("keypress", (e)=>{
if(e.key.toLowerCase()=="p"){
phone.changePosition();
}
})
}
updateDir(){

14
public_html/js/phone.js
View file

@ -21,7 +21,9 @@ class Phone{
msg.appendChild(h2);
msg.appendChild(p);
document.getElementById("chatMessages").appendChild(msg);
let chatMessages = document.getElementById("chatMessages");
chatMessages.appendChild(msg);
chatMessages.scrollTop = chatMessages.scrollHeight;
}
sendMessage(title, content){
@ -41,4 +43,14 @@ class Phone{
}
}
}
changePosition(){
if(this.position == 0){
document.getElementById("phoneContainer").className = "visible";
this.position = 1;
}else{
document.getElementById("phoneContainer").className = "hidden";
this.position = 0;
}
}
}