Networked Card Players

You move the current card (blue) with the mouse. The other cards (red) move as they would on a networked player's screen.

by bricksphd

HTML

<div>
    <div class="table-div">
    </div>
    <div>
      This example shows how the current players card (blue) can be shown moving on other players' (red "ghost" cards).
      Below you
      can change the number of players and the angle offset of the starting player.
    </div>
    <div>
      <p>Players</p>
      <input type="text" onchange="playerChange()" id="playerText" value="6">
    </div>
    <div>
      <p>Angle (Degrees)</p>
      <input type="text" onchange="angleChange()" id="angleText" value="45">
    </div>
    <canvas id="canv"></canvas>
  </div>

CSS

body {
      margin: 0;
    }

    canvas {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 9;
    }

    .table-div {
      background-color: lightgreen;
      width: 400px;
      height: 400px;
    }

    .card {
      position: absolute;
      width: 50px;
      height: 70px;
    }

    .current {
      background-color: blue;
    }

    .ghost {
      background-color: red;
    }

JavaScript

//A simple class to hold an x,y pair
    class Vector2 {
      constructor(x, y) { [this.x, this.y] = [x, y] }
    }

    //Set up our parameters
    let playerCount = 6; //Can be changed by the user
    let offsetAngle = 45; //Can be changed by the user
    let width = 400;
    let height = width;
    let radius = width / 2;
    let cardWidth = 50;
    let cardHeight = 50 * 1.4;//~70
    let cards;

    //Track the mouse
    let lastMouse = null;
    let currentMouse = null;
    let mouseDown = false;

    //The angle in radians between each player on the table
    let angleDelta;

    //Grab the table div
    let tableElement = document.querySelector(".table-div");
    let canvas = document.querySelector("canvas")
    let ctx = canvas.getContext("2d");
    canvas.style.width = width + "px";
    canvas.style.height = height + "px"
    canvas.width = width;
    canvas.height = height;

    function update() {
      ctx.clearRect(0, 0, width, height);

      for (let i = 0; i < playerCount; i++) {
        //Draw the first axis
        ctx.strokeStyle = "red";
        ctx.beginPath();
        ctx.moveTo(radius, radius);
        ctx.lineTo(radius + Math.cos(angleDelta * i + offsetAngle) * radius, radius + Math.sin(angleDelta * i + offsetAngle) * radius)
        ctx.stroke();

        //Draw the second axis
        let secondAxisAngle = angleDelta * i + Math.PI / 2;
        let startX = radius + Math.cos(angleDelta * i + offsetAngle) * radius / 2;
        let startY = radius + Math.sin(angleDelta * i + offsetAngle) * radius / 2;
        let endX = Math.cos(secondAxisAngle + offsetAngle) * radius / 4;
        let endY = Math.sin(secondAxisAngle + offsetAngle) * radius / 4;

        ctx.strokeStyle = "green";
        ctx.beginPath();
        ctx.moveTo(startX, startY)
        ctx.lineTo(startX + endX, startY + endY)
        ctx.stroke();
      }
    }

    document.body.addEventListener("mousemove", e => {
      //Keep track of the last mouse position so we can...