summaryrefslogtreecommitdiff
path: root/client/index.html
diff options
context:
space:
mode:
authorjak1 <mike.wollmann@gmail.com>2021-08-01 17:02:17 +0200
committerjak1 <mike.wollmann@gmail.com>2021-08-01 17:02:17 +0200
commita8fb9c3e5ca4e089b8161b0e0f0150c1100d68c3 (patch)
treeb3eb94b0ff4cd3792fcebb8b34e0e7192d0c7b50 /client/index.html
parentc9bdbee1b58b8530b6508ea705d5b9fd9a17f627 (diff)
downloadthepixelworld-a8fb9c3e5ca4e089b8161b0e0f0150c1100d68c3.tar.gz
thepixelworld-a8fb9c3e5ca4e089b8161b0e0f0150c1100d68c3.tar.bz2
thepixelworld-a8fb9c3e5ca4e089b8161b0e0f0150c1100d68c3.tar.xz
thepixelworld-a8fb9c3e5ca4e089b8161b0e0f0150c1100d68c3.zip
added some more features, and fixed some bugs (was to lazy to commit every change *hides)
Diffstat (limited to 'client/index.html')
-rw-r--r--client/index.html187
1 files changed, 142 insertions, 45 deletions
diff --git a/client/index.html b/client/index.html
index c77e929..0d576d8 100644
--- a/client/index.html
+++ b/client/index.html
@@ -1,8 +1,23 @@
<!DOCTYPE html>
-<html lang="en_US">
+<html lang="en_US" style='background-color:#858590;'>
<meta charset="UTF-8">
<title>ThePixelWorld</title>
<!-- Login -->
+ <style type="text/css">
+ .chat-tab{
+ margin-left: 2px;
+ margin-right: 2px;
+ padding-left: 3px;
+ padding-right: 3px;
+ float: left;
+ color: #858590;
+ background-color: #555555;
+ border-radius: 4px;
+ }
+ #active{
+ color: lime;
+ }
+ </style>
<div id="signDiv" style='text-align:center;'>
Username: <input id="signDiv-username" type="text"></input><br>
Password: <input id="signDiv-password" type="password"></input><br>
@@ -19,8 +34,9 @@
To disable the limit, set it to <b>0</b>.
<hr>
<h3>News:</h3>
- I have some trouble while parsing tmx maps.<br>
- currently we are using just a sprite file as "map" :D<br>
+ tmx maps loading and rendering nearly done, beside collision system.<br>
+ basic chat system (guild/party/... wip) {may also implement an api for irc usage?}<br>
+ every player has a name drawn above there head now.<br>
<h3>ToDo</h3>
to much, and to lazy to write it down *blush*
</div>
@@ -28,25 +44,34 @@
<!-- Game -->
<div id="gameDiv" style="display:none;">
- <canvas id="ctx" width="500" height="500" style="border:1px solid #000000;"></canvas>
- <div id="chat-text" style="width:500px; height:100px; overflow-y:scroll;"> <!--https://www.sitepoint.com/community/t/auto-scrolling-a-div-with-overflow-scroll-auto/2291--></div>
- <form id="chat-form">
- <input id="chat-input" type="text" style="width:500px;"></input>
- </form>
+ <canvas id="ctx" width="500" height="500" tabindex="1" style="border:1px solid #000000;"></canvas>
+ <div id="chat-wrapper" style="width:500px; height:20px; overflow: hidden; white-space: nowrap;">
+ <div class="chat-tab" id='active' onclick="setActiveChatTab('world', this)" >WORLD</div>
+ <!-- TODO only show up on permission to use the GM tab.
+ <div class="chat-tab" onclick="setActiveChatTab('gm', this)"> GM</div> -->
+ <div class="chat-tab" onclick="setActiveChatTab('guild', this)">[#] Guild (WIP)</div>
+ <div class="chat-tab" onclick="setActiveChatTab('party', this)">[.] Party (WIP)</div>
+ </div>
+ <div id="chat-text" style="width:500px; height:100px; overflow-y:scroll;"></div>
+ <form id="chat-form">
+ <input id="chat-input" type="text" style="width:500px;"></input>
+ </form>
+ </div>
</div>
<!-- loading socket.io library -->
<script src="https://cdn.socket.io/4.1.3/socket.io.js"></script>
+ <script src="client/lib/socket.io.js"></script>
<script src="client/consts.js"></script>
<script src="client/tmxloader.js"></script>
<script>
var socket = io();
var errno = 0;
-
+
socket.on('disconnect', function(){
errno = CONNECTION_LOST;
- alert("Connection lost..." + err);
+ alert("Connection lost..." + errno);
});
// Login
@@ -80,12 +105,30 @@
});
// Chat
+ var activeChatTab = "world"; // default tab on join.
+ var chatContents = [];
+ chatContents[activeChatTab] = "";
+
var chatText = document.getElementById("chat-text");
var chatInput = document.getElementById("chat-input");
var chatForm = document.getElementById("chat-form");
socket.on('addToChat', function(data){
- chatText.innerHTML += "<div>" + data + "</div>";
+ if(data.tab === "any")
+ data.tab = activeChatTab;
+ if (chatContents[data.tab] === undefined)
+ document.getElementById("chat-wrapper").innerHTML += "<div class=\"chat-tab\" onclick=\"setActiveChatTab('" + data.tab + "', this)\">" + data.tab + "</div>";
+
+ if(!chatContents[data.tab])
+ chatContents[data.tab] = "<div title=\"" + data.ctimestamp + "\">" + data.content + "</div>"
+ else
+ chatContents[data.tab] += "<div title=\"" + data.ctimestamp + "\">" + data.content + "</div>"
+
+ if (activeChatTab === data.tab){
+ chatText.innerHTML = chatContents[activeChatTab];
+ //scroll down
+ chatText.scrollTop = chatText.scrollHeight;
+ }
});
socket.on('evalAnswer', function(data){
console.log(data);
@@ -93,33 +136,32 @@
chatForm.onsubmit = function(e){
e.preventDefault();
- if (chatInput.value[0] === "/")
+ if (chatInput.value[0] === "*")
socket.emit("evalServer", chatInput.value.slice(1));
+ else if (chatInput.value[0] === "@" || chatInput.value[0] === "/"
+ || chatInput.value[0] === "." || chatInput.value[0] === "#")
+ socket.emit("command", chatInput.value);
+ else if(activeChatTab !== "world")
+ socket.emit("command", "/w " + activeChatTab + " " + chatInput.value);
else
socket.emit("sendMsgToServer", chatInput.value);
chatInput.value = "";
}
- var TMXMap = function(mapId){
- var self = new TMXLoader(mapId);
- return self;
- };
-
// Game
var Img = {};
Img.player = new Image();
Img.player.src = '/client/assets/sprites/races/human-female.png';
Img.bullet = new Image();
Img.bullet.src = '/client/assets/sprites/blaze.png';
- Img.map = new Image();
- Img.map.src = '/client/assets/sprites/races/human-female.png';
var ctx = document.getElementById("ctx").getContext("2d");
- ctx.font = '30px Arial';
+ ctx.font = '16px Arial';
var Player = function(initPack){
var self = {};
self.id = initPack.id;
+ self.playerName = initPack.playerName;
self.number = initPack.number;
self.x = initPack.x;
self.y = initPack.y;
@@ -127,31 +169,40 @@
self.hp = initPack.hp;
self.hpMax = initPack.hpMax;
self.score = initPack.score;
+ self.dir = DIR_DOWN;
- self.draw = function(){
+ self.drawPlayer = function(){
var x = self.x - Player.list[selfId].x + WIDTH/2;
var y = self.y - Player.list[selfId].y + HEIGHT/2;
- var hpWidth = 30 * self.hp / self.hpMax;
- // hp-bar
- ctx.fillStyle="rgba(255,0,0,0.8)";
- ctx.fillRect(x - hpWidth/2, y - 40, hpWidth, 4);
// 'player'
var width = 64;
var height = 64;
-
ctx.drawImage(Img.player,
0,0,
width, height,
x-width/2, y-height/2,
width, height);
}
-
+ self.drawPlayerName = function(){
+ var x = self.x - Player.list[selfId].x + WIDTH/2;
+ var y = self.y - Player.list[selfId].y + HEIGHT/2;
+ var hpWidth = 30 * self.hp / self.hpMax;
+ // hp-bar
+ ctx.fillStyle="rgba(255,0,0,0.8)";
+ ctx.fillRect(x - hpWidth/2, y - 40, hpWidth, 4);
+ ctx.fillStyle="rgba(75,75,75,0.8)";
+ var metrics = ctx.measureText(Player.list[self.id].playerName);
+ ctx.fillText(Player.list[self.id].playerName,
+ x - metrics.width/2, y - 45, metrics.width, 4);
+ }
+
Player.list[self.id] = self;
return self;
};
Player.list = {};
+ tmxmap=null;
var Bullet = function(initPack){
var self = {};
@@ -193,7 +244,7 @@
}
if(data.selfId){
selfId = data.selfId;
- new TMXMap(Player.list[selfId].map);
+ tmxmap = new TMXLoader(Player.list[selfId].map);
}
});
// update (diff)
@@ -210,6 +261,10 @@
p.hp = pack.hp;
if(pack.score !== undefined)
p.score = pack.score;
+ if(pack.dir !== undefined)
+ p.dir = pack.dir;
+ if(pack.dir !== undefined)
+ p.playerName = pack.playerName;
}
}
for(var i = 0; i < data.bullet.length; i++){
@@ -233,27 +288,65 @@
delete Bullet.list[data.bullet[i]];
}
});
-
+
+ setActiveChatTab = function(tabName, tab){
+ if (!chatContents[tabName])
+ chatContents[tabName] = "";
+ activeChatTab = tabName;
+ chatText.innerHTML = chatContents[activeChatTab];
+ Array.from(document.getElementsByClassName("chat-tab")).forEach(function(element, index, array) {
+ element.setAttribute("id", "");
+ })
+ tab.setAttribute("id", "active");
+ chatText.scrollTop = chatText.scrollHeight;
+ }
+
setInterval(function(){
- if(!selfId)
+ if(!selfId || errno != 0)
return;
ctx.clearRect(0,0,500,500);
-
- drawMap();
+ drawMapGround();
+ drawGFXGround();
+ drawEntities();
+ drawMapOver();
+ for(var i in Player.list){
+ Player.list[i].drawPlayerName();
+ }
+ drawGFXOver();
//drawScore();
+ }, 1000/25);
+
+ var drawMapGround = function(){
+ var x = WIDTH/2 - Player.list[selfId].x;
+ var y = HEIGHT/2 - Player.list[selfId].y;
+
+ tmxmap.drawLayer("ground",x,y);
+ }
+
+ var drawGFXGround = function(){
+
+ }
+
+ var drawEntities = function(){
for(var i in Player.list){
- Player.list[i].draw();
+ Player.list[i].drawPlayer();
}
for(var i in Bullet.list){
Bullet.list[i].draw();
}
- }, 1000/25);
+ }
- var drawMap = function(){
+ var drawMapOver = function(){
var x = WIDTH/2 - Player.list[selfId].x;
- var y= HEIGHT/2 - Player.list[selfId].y;
- ctx.drawImage(Img.map,x,y);
+ var y = HEIGHT/2 - Player.list[selfId].y;
+ tmxmap.drawLayer("fringe",x,y); // needs to get rendered on last pos.
+ tmxmap.drawLayer("over",x,y);
+ }
+
+ var drawGFXOver = function(){
+
}
+ // TODO Collision
var drawScore = function(){
ctx.fillStyle = 'green';
@@ -262,14 +355,16 @@
document.onkeydown = function(event){
//console.log(event.keyCode);
- if(event.keyCode === 68 || event.keyCode === 39) // d
- socket.emit('keyPress',{inputId: 'right', state: true});
- else if(event.keyCode === 65 || event.keyCode === 37) // a
- socket.emit('keyPress',{inputId: 'left', state: true});
- else if(event.keyCode === 83 || event.keyCode === 40) // s
- socket.emit('keyPress',{inputId: 'down', state: true});
- else if(event.keyCode === 87 || event.keyCode === 38) // w
- socket.emit('keyPress',{inputId: 'up', state: true});
+ if (document.activeElement === document.getElementById('ctx')){
+ if(event.keyCode === 68 || event.keyCode === 39) // d
+ socket.emit('keyPress',{inputId: 'right', state: true});
+ else if(event.keyCode === 65 || event.keyCode === 37) // a
+ socket.emit('keyPress',{inputId: 'left', state: true});
+ else if(event.keyCode === 83 || event.keyCode === 40) // s
+ socket.emit('keyPress',{inputId: 'down', state: true});
+ else if(event.keyCode === 87 || event.keyCode === 38) // w
+ socket.emit('keyPress',{inputId: 'up', state: true});
+ }
}
document.onkeyup = function(event){
@@ -284,7 +379,9 @@
}
document.onmousedown = function(event){
+ if (document.activeElement === document.getElementById('ctx')){
socket.emit('keyPress',{inputId: 'attack', state: true});
+ }
}
document.onmouseup = function(event){
generated by cgit v1.2.3-60-g2f50 (git 2.42.0) at 2024-06-25 07:13:25 +0000