Skip to content

Commit d15a6fd

Browse files
JBrosDevelopmentJBrosDevelopment
committed
Now has a main game screen and the future ability to add server and client to the clone
1 parent c65e8df commit d15a6fd

14 files changed

Lines changed: 1108 additions & 113 deletions

File tree

‎Textures/bg.png‎

216 KB
Loading

‎createServer.html‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Host Server</title>
6+
<style>
7+
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
8+
9+
body {
10+
margin: 0;
11+
background: #3b3b3b;
12+
font-family: 'Press Start 2P', monospace;
13+
color: white;
14+
text-shadow: 2px 2px #000;
15+
padding: 20px;
16+
}
17+
18+
h2 {
19+
margin-bottom: 20px;
20+
}
21+
22+
.option {
23+
margin-bottom: 25px;
24+
}
25+
26+
label {
27+
display: block;
28+
font-size: 14px;
29+
margin-bottom: 8px;
30+
}
31+
32+
input {
33+
width: 95%;
34+
padding: 10px;
35+
font-size: 14px;
36+
border: 3px solid #000;
37+
background: #d9d9d9;
38+
}
39+
40+
button {
41+
margin-top: 10px;
42+
width: 100%;
43+
padding: 15px;
44+
background: #4c7f4c;
45+
border: 4px solid #2e4d2e;
46+
color: white;
47+
cursor: pointer;
48+
font-family: 'Press Start 2P';
49+
}
50+
51+
button:hover {
52+
background: #6aa96a;
53+
}
54+
</style>
55+
</head>
56+
<body>
57+
58+
<h2>Host Server</h2>
59+
60+
<div class="option">
61+
<label>Server Name</label>
62+
<input id="serverName" placeholder="My Awesome World">
63+
</div>
64+
65+
<div class="option">
66+
<label>Seed Number</label>
67+
<input id="seed" placeholder="123456789">
68+
</div>
69+
70+
<button onclick="createServer()">Create Server</button>
71+
72+
<script>
73+
function createServer() {
74+
const name = document.getElementById("serverName").value;
75+
const seed = document.getElementById("seed").value;
76+
77+
console.log("Creating server:", name, "Seed:", seed);
78+
}
79+
</script>
80+
81+
</body>
82+
</html>

‎game.html‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<head>
2+
<link rel="icon" type="image/x-icon" href="favicon.ico">
3+
<script src="src/input_manager.js" type="module"></script>
4+
<script src="src/settings.js" type="module"></script>
5+
<script src="src/block_manager.js" type="module"></script>
6+
<script src="src/atmosphere.js" type="module"></script>
7+
<script src="src/player_manager.js" type="module"></script>
8+
<script src="src/block_outline.js" type="module"></script>
9+
<script src="src/boime_manager.js" type="module"></script>
10+
<script src="src/game.js" type="module"></script>
11+
<title>MenCwaft - The Game</title>
12+
</head>
13+
<style>
14+
#crosshair {
15+
position: fixed;
16+
17+
width: 18px;
18+
height: 18px;
19+
20+
z-index: 1000;
21+
pointer-events: none;
22+
23+
filter: drop-shadow(0 0 2px black);
24+
}
25+
26+
#crosshair::before,
27+
#crosshair::after {
28+
content: "";
29+
30+
position: absolute;
31+
background: white;
32+
}
33+
34+
#crosshair::before {
35+
left: 8px;
36+
top: 0;
37+
width: 2px;
38+
height: 18px;
39+
}
40+
41+
#crosshair::after {
42+
left: 0;
43+
top: 8px;
44+
width: 18px;
45+
height: 2px;
46+
}
47+
#hotbar {
48+
position: fixed;
49+
bottom: 20px;
50+
left: 50%;
51+
transform: translateX(-50%);
52+
53+
display: flex;
54+
gap: 6px;
55+
56+
padding: 8px;
57+
background: rgba(20, 20, 20, 0.45);
58+
border: 2px solid rgba(255, 255, 255, 0.25);
59+
border-radius: 6px;
60+
61+
z-index: 999;
62+
}
63+
64+
.hotbar-slot {
65+
width: 48px;
66+
height: 48px;
67+
68+
border: 2px solid rgba(255, 255, 255, 0.25);
69+
border-radius: 4px;
70+
71+
display: flex;
72+
align-items: center;
73+
justify-content: center;
74+
75+
font-size: 18px;
76+
color: white;
77+
user-select: none;
78+
}
79+
80+
.hotbar-slot.selected {
81+
border-color: white;
82+
background: rgba(255, 255, 255, 0.15);
83+
border: 4px solid white;
84+
padding: 1px;
85+
}
86+
</style>
87+
<body>
88+
<div id="crosshair"></div>
89+
<div id="hotbar">
90+
</div>
91+
92+
</body>
93+
<canvas id="c"></canvas>

‎index.html‎

Lines changed: 108 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,124 @@
1-
<head>
2-
<link rel="icon" type="image/x-icon" href="favicon.ico">
3-
<script src="src/input_manager.js" type="module"></script>
4-
<script src="src/settings.js" type="module"></script>
5-
<script src="src/block_manager.js" type="module"></script>
6-
<script src="src/atmosphere.js" type="module"></script>
7-
<script src="src/player_manager.js" type="module"></script>
8-
<script src="src/block_outline.js" type="module"></script>
9-
<script src="src/boime_manager.js" type="module"></script>
10-
<script src="src/game.js" type="module"></script>
11-
<title>MenCwaft - The Game</title>
12-
</head>
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>MenCwaft</title>
136
<style>
14-
#crosshair {
15-
position: fixed;
16-
17-
width: 18px;
18-
height: 18px;
19-
20-
z-index: 1000;
21-
pointer-events: none;
7+
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
228

23-
filter: drop-shadow(0 0 2px black);
24-
}
9+
body {
10+
margin: 0;
11+
height: 100vh;
12+
display: flex;
13+
justify-content: center;
14+
align-items: center;
15+
flex-direction: column;
16+
background-image: url('Textures/bg.png');
17+
background-repeat: no-repeat;
18+
background-size: cover;
19+
font-family: 'Press Start 2P', monospace;
20+
color: white;
21+
text-shadow: 3px 3px #000;
22+
user-select: none;
23+
}
2524

26-
#crosshair::before,
27-
#crosshair::after {
28-
content: "";
25+
h1 {
26+
font-size: 48px;
27+
margin-bottom: 60px;
28+
}
2929

30-
position: absolute;
31-
background: white;
32-
}
30+
.menu-button {
31+
width: 320px;
32+
padding: 20px;
33+
margin: 12px;
34+
font-size: 18px;
35+
background: #4c7f4c;
36+
border: 4px solid #2e4d2e;
37+
cursor: pointer;
38+
color: white;
39+
text-shadow: 2px 2px #000;
40+
transition: 0.15s;
41+
}
3342

34-
#crosshair::before {
35-
left: 8px;
36-
top: 0;
37-
width: 2px;
38-
height: 18px;
39-
}
43+
.menu-button:hover {
44+
background: #6aa96a;
45+
transform: scale(1.03);
46+
}
4047

41-
#crosshair::after {
42-
left: 0;
43-
top: 8px;
44-
width: 18px;
45-
height: 2px;
46-
}
47-
#hotbar {
48-
position: fixed;
49-
bottom: 20px;
50-
left: 50%;
51-
transform: translateX(-50%);
48+
/* Modal background */
49+
#modal-bg {
50+
position: fixed;
51+
inset: 0;
52+
background: rgba(0,0,0,0.6);
53+
display: none;
54+
justify-content: center;
55+
align-items: center;
56+
}
5257

53-
display: flex;
54-
gap: 6px;
58+
/* Modal window */
59+
#modal-window {
60+
width: 500px;
61+
background: #2e2e2e;
62+
border: 5px solid #000;
63+
padding: 20px;
64+
color: white;
65+
text-shadow: 2px 2px #000;
66+
}
5567

56-
padding: 8px;
57-
background: rgba(20, 20, 20, 0.45);
58-
border: 2px solid rgba(255, 255, 255, 0.25);
59-
border-radius: 6px;
68+
iframe {
69+
width: 100%;
70+
height: 320px;
71+
border: none;
72+
}
6073

61-
z-index: 999;
62-
}
74+
#close-btn {
75+
margin-top: 15px;
76+
width: 100%;
77+
padding: 15px;
78+
background: #7a2e2e;
79+
border: 4px solid #4a1a1a;
80+
color: white;
81+
cursor: pointer;
82+
font-family: 'Press Start 2P';
83+
}
6384

64-
.hotbar-slot {
65-
width: 48px;
66-
height: 48px;
67-
68-
border: 2px solid rgba(255, 255, 255, 0.25);
69-
border-radius: 4px;
85+
#close-btn:hover {
86+
background: #a33b3b;
87+
}
88+
</style>
89+
</head>
90+
<body>
7091

71-
display: flex;
72-
align-items: center;
73-
justify-content: center;
92+
<h1>MenCwaft</h1>
7493

75-
font-size: 18px;
76-
color: white;
77-
user-select: none;
78-
}
94+
<button class="menu-button" onclick="openJoin()">Join Server</button>
95+
<button class="menu-button" onclick="startServer()">Start Server</button>
96+
<button class="menu-button" onclick="window.location.href = 'game.html'">Play Locally (FOR TESTING)</button>
7997

80-
.hotbar-slot.selected {
81-
border-color: white;
82-
background: rgba(255, 255, 255, 0.15);
83-
border: 4px solid white;
84-
padding: 1px;
85-
}
86-
</style>
87-
<body>
88-
<div id="crosshair"></div>
89-
<div id="hotbar">
98+
<!-- Modal -->
99+
<div id="modal-bg">
100+
<div id="modal-window">
101+
<iframe id="modal-frame"></iframe>
102+
<button id="close-btn" onclick="closeModal()">Close</button>
90103
</div>
104+
</div>
105+
106+
<script>
107+
function openJoin() {
108+
document.getElementById("modal-frame").src = "join.html";
109+
document.getElementById("modal-bg").style.display = "flex";
110+
}
111+
112+
function startServer() {
113+
document.getElementById("modal-frame").src = "startServer.html";
114+
document.getElementById("modal-bg").style.display = "flex";
115+
}
91116

117+
function closeModal() {
118+
document.getElementById("modal-bg").style.display = "none";
119+
document.getElementById("modal-frame").src = "";
120+
}
121+
</script>
122+
92123
</body>
93-
<canvas id="c"></canvas>
124+
</html>

0 commit comments

Comments
 (0)