Separated client files

2019-01-07 15:03:08 +01:00
parent afe4e79a87
commit 5016f1191c
5 changed files with 204 additions and 203 deletions
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="fr">
+<head>
+    <meta charset="utf-8">
+    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
+    <script src="/socket.io/socket.io.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
+    <link href="main.css" rel="stylesheet">
+</head>
+<body>
+<canvas id="game" width="1600" height="900"></canvas>
+<script src="main.js"></script>
+</body>
+</html>
@@ -0,0 +1,21 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font: 13px Roboto, sans-serif;
+    background-color: #212121;
+}
+
+canvas {
+    background-color: #424242;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 100vh;
+    margin: auto;
+}
@@ -0,0 +1,163 @@
+const canvas = document.getElementById('game');
+const ctx = canvas.getContext('2d');
+
+let hsize = 300;
+let current;
+let players;
+
+let history = {};
+
+function ellipse(cx, cy, rx, ry) {
+  ctx.save(); // save state
+  ctx.beginPath();
+
+  ctx.translate(cx - rx, cy - ry);
+  ctx.scale(rx, ry);
+  ctx.arc(1, 1, 1, 0, 2 * Math.PI, false);
+
+  ctx.restore(); // restore to original state
+  ctx.fill();
+}
+
+function drawPlayer(ratio, p) {
+  ctx.fillStyle = p.color;
+  ctx.fillText(p.name, p.pos.x, p.pos.y - ratio * 10);
+  ellipse(p.pos.x, p.pos.y, ratio * 3, ratio * 3);
+  if(p.starting > 0)
+    return;
+  if (!history[p.name])
+    history[p.name] = {
+      i0: 0,
+      list: new Array(hsize)
+    };
+  else
+    history[p.name].i0 = (history[p.name].i0 + 1) % hsize;
+  history[p.name].list[history[p.name].i0] = p.pos;
+}
+
+function drawHistory(p) {
+  if (history[p.name]) {
+    const h = history[p.name];
+    ctx.strokeStyle = p.color;
+    ctx.beginPath();
+    if(!h.list[h.i0])
+      return;
+    ctx.moveTo(h.list[h.i0].x, h.list[h.i0].y);
+    let last = h.list[h.i0];
+    for (let di = 1; di < hsize; di++) {
+      const point = h.list[(h.i0 - di + hsize) % hsize];
+      if (point){
+        if (Math.abs(last.x - point.x) >= 1600 * .9) {
+          ctx.stroke();
+          ctx.moveTo(point.x, point.y);
+        } else if (Math.abs(last.y - point.y) >= 900 * .9) {
+          ctx.stroke();
+          ctx.moveTo(point.x, point.y);
+        } else {
+          ctx.lineTo(point.x, point.y)
+        }
+        last = point;
+      }else{
+        break;
+      }
+    }
+    ctx.stroke();
+  }
+}
+
+function drawGame() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  const ratio = canvas.height / window.innerHeight;
+
+  ctx.font = `bold ${ratio * 120}px Roboto`;
+  ctx.textAlign = 'center';
+
+  ctx.fillStyle = '#4b4b4b';
+  ctx.fillText('snex.io', canvas.width/2 - ratio * 3, canvas.height/2 + ratio*37);
+  ctx.fillStyle = '#545454';
+  ctx.fillText('snex.io', canvas.width/2, canvas.height/2 + ratio*40);
+
+  ctx.lineCap = "round";
+  ctx.lineJoin = "round";
+  ctx.lineWidth = 3;
+
+  ctx.textAlign = 'left';
+  ctx.font = `normal ${ratio * 10}px Roboto`;
+  const names = Object.keys(players);
+  names.forEach(function (name) {
+    const p = players[name];
+    if(p.alive)
+      drawPlayer(ratio, players[name]);
+    if (name === current.name)
+      current = players[name];
+    drawHistory(players[name]);
+  });
+
+  requestAnimationFrame(drawGame);
+}
+
+const socket = io({
+  'reconnection': true,
+  'reconnectionDelay': 1000,
+  'reconnectionDelayMax': 5000
+});
+socket.on('connect', function () {
+  console.log('connected');
+});
+socket.on('disconnect', function () {
+  console.log('disconnected');
+});
+
+socket.on('info', function(res){
+  current = res.self;
+  history = res.history;
+  hsize = res.hsize;
+  players = res.players;
+  drawGame()
+});
+
+socket.on('players', function (p) {
+  players = p;
+});
+
+$(document).on('keydown', function (e) {
+  switch (e.keyCode) {
+    case 32://space;
+      current.color = 'new';
+      socket.emit('update', current);
+      return;
+    case 37://left;
+      current.angleSpd = -1;
+      socket.emit('update', current);
+      break;
+    case 38://up;
+      break;
+    case 39://right;
+      current.angleSpd = 1;
+      socket.emit('update', current);
+      break;
+    case 40://down;
+      break;
+  }
+});
+
+$(document).on('keyup', function (e) {
+  switch (e.keyCode) {
+    case 32://space;
+      current.color = 'new';
+      socket.emit('update', current);
+      return;
+    case 37://left;
+      current.angleSpd = 0;
+      socket.emit('update', current);
+      break;
+    case 38://up;
+      break;
+    case 39://right;
+      current.angleSpd = 0;
+      socket.emit('update', current);
+      break;
+    case 40://down;
+      break;
+  }
+});