Skip to content

Commit

Permalink
Main menu added (#27)
Browse files Browse the repository at this point in the history 
* Main menu added

* code organized

* Some changes to main menu

* game.html and index.html

- game.html receives via GET params the username, ip and port

* form working

Co-authored-by: Miguel Dinis <[email protected]>
  • Loading branch information
@Descatres @MigDinny
Descatres and MigDinny authored Nov 30, 2022
1 parent a0e9100 commit 9f2de11
Show file tree
Hide file tree
Showing 4 changed files with 288 additions and 136 deletions.
139 changes: 139 additions & 0 deletions client/game.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
<!DOCTYPE html>
<html>
<head>
<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.min.js"></script>
<style>
.skillClicked {
box-shadow: 0px 0px 6px 3px red;
}
</style>
</head>
<body style="background-color: black">
<!-- GAME UI -->

<div style="width: 960px">
<center>
<div
id="timer-bar"
style="background-color: red; width: 960px; height: 25px"
></div>
</center>
</div>
<div id="game_parent" style="height: 480px; width: 960px"></div>
<div
id="hud"
style="
height: 150px;
width: 950px;
background-image: url('img/HUD/background.png');
padding: 5px;
"
>
<div id="skills">
<div
style="
display: inline-block;
width: 100px;
height: 100px;
text-align: center;
background-color: gold;
vertical-align: top;
"
>
<div
id="position"
style="
height: 100%;
line-height: 100px;
font-size: 40px;
font-weight: bold;
color: black;
font-family: fantasy;
"
>
1st
</div>
</div>
<img id="harvest" src="img/HUD/harvest-enabled.png" />
<img id="sow" src="img/HUD/sow-enabled.png" />
<img id="xp" src="img/HUD/xp-enabled.png" />
<img id="fight" src="img/HUD/fight-disabled.png" />
<img id="share" src="img/HUD/share-disabled.png" />
<img id="steal" src="img/HUD/steal-disabled.png" />
<img id="flee" src="img/HUD/flee-disabled.png" />
</div>
<div
id="bars"
style="width: 100%; height: auto; background-color: white"
>
<div
style="
width: 100%;
height: 20px;
background-image: url('img/HUD/background-bar.png');
text-align: center;
color: white;
font-family: fantasy;
border: 2px solid white;
border-bottom: 0px;
"
>
<div
id="hp-bar"
style="
background: linear-gradient(
to top,
#850808 0%,
#ff0000 100%
);
width: 100%;
height: 100%;
vertical-align: top;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
"
></div>
<span id="hp-text" style="position: relative; top: -20px"
>HP: 34/100</span
>
</div>

<div
style="
width: 100%;
height: 20px;
background-image: url('img/HUD/background-bar.png');
text-align: center;
color: white;
font-family: fantasy;
border: 2px solid white;
"
>
<div
id="xp-bar"
style="
width: 100%;
height: 20px;
background: linear-gradient(
to top,
#120488 0%,
#003cff 100%
);
text-align: center;
color: white;
font-family: fantasy;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
"
></div>
<span id="xp-text" style="position: relative; top: -20px"
>XP: 420</span
>
</div>
</div>
</div>

<!-- PHASER ENGINE code -->
<script type="module" src="src/main.js"></script>
</body>
</html>
Binary file added client/img/header.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
212 changes: 98 additions & 114 deletions client/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,132 +1,116 @@
<!DOCTYPE html>
<html>
<head>
<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.min.js"></script>
<style>
.skillClicked {
box-shadow: 0px 0px 6px 3px red;
.button {
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}

.button1 {
background-color: beige;
color: black;
border: 2px solid beige;
}

.button1:hover {
background-color: #4caf50;
color: white;
border: 2px solid #4caf50;
}
#port-input::-webkit-outer-spin-button,
#port-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
</style>
</head>
<body style="background-color: black">
<div style="width: 960px;">
<center>
<div id="timer-bar" style="background-color: red; width: 960px; height: 25px"></div>
</center>
</div>
<div id="game_parent" style="height: 480px; width: 960px"></div>
<!-- OVERLAY for the MAIN MENU -->
<div
id="hud"
id="overlay"
style="
height: 150px;
width: 950px;
background-image: url('img/HUD/background.png');
padding: 5px;
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
"
>
<div id="skills">
<div
style="
display: inline-block;
width: 100px;
height: 100px;
text-align: center;
background-color: gold;
vertical-align: top;
"
>
<div
id="position"
style="
height: 100%;
line-height: 100px;
font-size: 40px;
font-weight: bold;
color: black;
font-family: fantasy;
"
>
1st
</div>
</div>
<img id="harvest" src="img/HUD/harvest-enabled.png" />
<img id="sow" src="img/HUD/sow-enabled.png" />
<img id="xp" src="img/HUD/xp-enabled.png" />
<img id="fight" src="img/HUD/fight-disabled.png" />
<img id="share" src="img/HUD/share-disabled.png" />
<img id="steal" src="img/HUD/steal-disabled.png" />
<img id="flee" src="img/HUD/flee-disabled.png" />
</div>
<div
id="bars"
style="width: 100%; height: auto; background-color: white"
id="menu"
style="
width: 600px;
height: 600px;
text-align: center;
border-color: antiquewhite;
"
>
<div
style="
width: 100%;
height: 20px;
background-image: url('img/HUD/background-bar.png');
text-align: center;
color: white;
font-family: fantasy;
border: 2px solid white;
border-bottom: 0px;
"
>
<div
id="hp-bar"
style="
background: linear-gradient(
to top,
#850808 0%,
#ff0000 100%
);
width: 100%;
height: 100%;
vertical-align: top;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
"
></div>
<span id="hp-text" style="position: relative; top: -20px"
>HP: 34/100</span
>
</div>

<div
style="
width: 100%;
height: 20px;
background-image: url('img/HUD/background-bar.png');
text-align: center;
color: white;
font-family: fantasy;
border: 2px solid white;
"
>
<div
id="xp-bar"
style="
width: 100%;
height: 20px;
background: linear-gradient(
to top,
#120488 0%,
#003cff 100%
);
text-align: center;
color: white;
font-family: fantasy;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
"
></div>
<span id="xp-text" style="position: relative; top: -20px"
>XP: 420</span
>
</div>
<form action="game.html">
<div id="username" style="padding-top: 90px">
<input
type="text"
placeholder="Username"
name="username"
style="
text-align: center;
background-color: beige;
width: 65%;
font-size: xx-large;
padding: 10px;
"
required
/>
</div>
<div id="ip" style="padding-top: 40px">
<input
type="text"
placeholder="Server IP"
name="ip"
style="
text-align: center;
background-color: beige;
width: 60%;
font-size: x-large;
padding: 10px;
"
required
/>
</div>
<div id="port" style="padding-top: 40px">
<input
id="port-input"
type="number"
placeholder="Server Port"
name="port"
style="
text-align: center;
background-color: beige;
width: 55%;
font-size: large;
padding: 10px;
"
required
/>
</div>
<!--<div id="how-to-play" style="padding-top: 40px"></div>-->
<div id="connect" style="padding-top: 50px">
<input type="submit" class="button button1">Connect</input>
</div>
</form>
</div>
</div>
<script type="module" src="src/main.js"></script>
</body>
</html>
Loading

0 comments on commit 9f2de11

Please sign in to comment.