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

24
public_html/game.html
View file

@ -17,20 +17,24 @@
</head> </head>
<body> <body>
<canvas width="800" height="800" id="canvas"></canvas> <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="phoneContainer" class="hidden">
<div id="chatInputDiv"> <div id="phoneDiv">
<input type="text" placeholder="Ecrivez un message ici" id="chatInput" onkeydown="phone.keyPress(this)"> <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> </div>
</div> </div>
</body> </body>
</html> </html>

8
public_html/js/input.js
View file

@ -33,7 +33,7 @@ class Input {
window.addEventListener("keydown", (e)=>{ window.addEventListener("keydown", (e)=>{
//blocks the action of the key (cf. Killian) //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(); e.preventDefault();
} }
this.keysDown.add(e.key.toLowerCase()) this.keysDown.add(e.key.toLowerCase())
@ -44,6 +44,12 @@ class Input {
this.keysDown.delete(e.key.toLowerCase()) this.keysDown.delete(e.key.toLowerCase())
this.updateDir(); this.updateDir();
}) })
window.addEventListener("keypress", (e)=>{
if(e.key.toLowerCase()=="p"){
phone.changePosition();
}
})
} }
updateDir(){ updateDir(){

14
public_html/js/phone.js
View file

@ -21,7 +21,9 @@ class Phone{
msg.appendChild(h2); msg.appendChild(h2);
msg.appendChild(p); msg.appendChild(p);
document.getElementById("chatMessages").appendChild(msg); let chatMessages = document.getElementById("chatMessages");
chatMessages.appendChild(msg);
chatMessages.scrollTop = chatMessages.scrollHeight;
} }
sendMessage(title, content){ 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;
}
}
} }