added painting pawns based on data from server
This commit is contained in:
Wenszel
parent
148fa85601
commit
c1db9e4bb8
@ -1,6 +1,24 @@
|
||||
var express = require('express');
|
||||
var router = express.Router();
|
||||
|
||||
function setNextPlayer(req, res){
|
||||
RoomModel.findOne({_id: req.session.roomId}, function (err, doc){
|
||||
if (err) {
|
||||
res.status(500).send(err)
|
||||
} else {
|
||||
const index = doc.players.findIndex( player => player.nowMoving === true);
|
||||
const roomSize = doc.player.length;
|
||||
doc.players[index].nowMoving = false;
|
||||
if(index++ === roomSize){
|
||||
doc.players[0].nowMoving = true;
|
||||
}else{
|
||||
doc.players[index].nowMoving = true;
|
||||
}
|
||||
RoomModel.findOneAndUpdate({_id: req.session.roomId}, doc);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
router.get('/roll', function (req, res){
|
||||
res.send({number: Math.ceil(Math.random() * 6)});
|
||||
});
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
var express = require('express');
|
||||
var router = express.Router();
|
||||
var RoomModel = require('../schemas/room');
|
||||
|
||||
var changeReadyState = (req, res, exit) =>{
|
||||
RoomModel.findOne({_id: req.session.roomId}, function (err, doc){
|
||||
if (err) {
|
||||
@ -12,13 +11,11 @@ var changeReadyState = (req, res, exit) =>{
|
||||
let index = updatedPlayers.findIndex(
|
||||
player => (player._id).toString() == (req.session.playerId).toString()
|
||||
);
|
||||
console.log(doc, updatedPlayers, index);
|
||||
if(!exit) updatedPlayers[index].ready = !updatedPlayers[index].ready;
|
||||
else updatedPlayers[index].ready = false;
|
||||
const updatedDoc = {
|
||||
players: updatedPlayers
|
||||
}
|
||||
console.log(updatedPlayers.filter(player => player.ready).length);
|
||||
if(updatedPlayers.filter(player => player.ready).length >= 2){
|
||||
updatedDoc.started = true;
|
||||
updatedDoc.players[0].nowMoving = true;
|
||||
|
||||
@ -1,16 +1,27 @@
|
||||
var express = require('express');
|
||||
var router = express.Router();
|
||||
const express = require('express');
|
||||
const router = express.Router();
|
||||
const RoomModel = require('../schemas/room');
|
||||
|
||||
var RoomModel = require('../schemas/room');
|
||||
const colors = ['red','blue','green','yellow'];
|
||||
|
||||
var colors = ['red','blue','green','yellow'];
|
||||
function getStartPositions(){
|
||||
const startPositions = [];
|
||||
for( let i = 0; i < 16; i++){
|
||||
let pawn = {};
|
||||
pawn.position = i;
|
||||
if(i < 4) pawn.color = colors[0];
|
||||
else if(i < 8) pawn.color = colors[1];
|
||||
else if(i < 12) pawn.color = colors[2];
|
||||
else if (i < 16) pawn.color = colors[3]
|
||||
startPositions.push(pawn);
|
||||
}
|
||||
return startPositions;
|
||||
}
|
||||
|
||||
//creating new room in db
|
||||
router.post('/add', function (req, res) {
|
||||
RoomModel.findOne( { full: false, started: false }, function (err, results) {
|
||||
if (err) {
|
||||
console.log(err);
|
||||
}
|
||||
if (err) console.log(err);
|
||||
if (!results) {
|
||||
let newRoom = new RoomModel({
|
||||
createDate: new Date,
|
||||
@ -22,6 +33,7 @@ router.post('/add', function (req, res) {
|
||||
ready: false,
|
||||
color: colors[0]
|
||||
}],
|
||||
pawns: getStartPositions(),
|
||||
});
|
||||
newRoom.save()
|
||||
.then(function(){
|
||||
@ -46,6 +58,7 @@ router.post('/add', function (req, res) {
|
||||
updateObj.full = true; // Room is full
|
||||
updateObj.started = true; // Game started
|
||||
updateObj.players[0].nowMoving = true; //First joined player moving
|
||||
updateObj.pawns = startPositions
|
||||
}
|
||||
RoomModel.findOneAndUpdate(
|
||||
{ _id: results._id }, //find room by id
|
||||
@ -77,4 +90,4 @@ router.get('/', function(req,res){
|
||||
)
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
module.exports = router;
|
||||
|
||||
@ -6,6 +6,7 @@ var RoomSchema = new Schema({
|
||||
createDate: Date,
|
||||
started: Boolean,
|
||||
full: Boolean,
|
||||
timer: Number,
|
||||
players: [{
|
||||
name: String,
|
||||
color: String,
|
||||
|
||||
@ -5,9 +5,10 @@ import Dice from './game-board-components/Dice'
|
||||
import Navbar from './Navbar'
|
||||
|
||||
const Gameboard = ({id}) => {
|
||||
|
||||
const [pawns, setPawns] = useState([]);
|
||||
const [players, setPlayers] = useState([]);
|
||||
const [nowMoving, setNowMoving] = useState(false);
|
||||
const [started, setStarted] = useState(false);
|
||||
//fetching players data to display them in navbar
|
||||
const fetchData = () => {
|
||||
axios.get('http://localhost:3000/room/',{
|
||||
@ -19,12 +20,14 @@ const Gameboard = ({id}) => {
|
||||
name: "...",
|
||||
})
|
||||
}
|
||||
setPlayers(response.data.players);
|
||||
if(id===response.data.players.find(player => player.nowMoving === true)?._id){
|
||||
setNowMoving(true);
|
||||
}else{
|
||||
setNowMoving(false);
|
||||
}
|
||||
setPlayers(response.data.players);
|
||||
setPawns(response.data.pawns);
|
||||
setStarted(response.data.started);
|
||||
})
|
||||
}
|
||||
useEffect(()=>{
|
||||
@ -33,9 +36,9 @@ const Gameboard = ({id}) => {
|
||||
},[]);
|
||||
return (
|
||||
<>
|
||||
<Navbar players={players}/>
|
||||
<Navbar players={players} started={started}/>
|
||||
{nowMoving ? <Dice nowMoving={nowMoving}/> : null}
|
||||
<Map/>
|
||||
<Map pawns={pawns}/>
|
||||
</>
|
||||
)
|
||||
|
||||
|
||||
@ -2,13 +2,13 @@ import React from 'react';
|
||||
import NameContainer from './navbar-components/NameContainer'
|
||||
import ReadyButton from './navbar-components/ReadyButton'
|
||||
import './Navbar.css';
|
||||
const Navbar = ( { players }) => {
|
||||
const Navbar = ( { players, started }) => {
|
||||
return(
|
||||
<div className="navbar-container">
|
||||
{players.map( (player, index) =>
|
||||
<NameContainer key={index} player = {player}/>
|
||||
)}
|
||||
<ReadyButton/>
|
||||
{started ? null : <ReadyButton/>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,44 +1,33 @@
|
||||
import React, { useEffect, useState, useRef } from 'react';
|
||||
import positions from './positions';
|
||||
import './Map.css';
|
||||
import axios from 'axios'
|
||||
const Map = () => {
|
||||
//map of positions <1,92> and their equivalent of pixels in canvas
|
||||
const mapOfLocations = {
|
||||
};
|
||||
//obj schema: {color: [pos,pos,pos]}
|
||||
const [pawnPositions, setPawnPositions] = useState({
|
||||
|
||||
});
|
||||
|
||||
const Map = ({ pawns }) => {
|
||||
const paintPawn = (context, x, y, color) =>{
|
||||
console.log(x,y,color);
|
||||
context.fillStyle = color
|
||||
context.beginPath();
|
||||
context.arc(x, y, 12, 0, 2 * Math.PI);
|
||||
context.stroke();
|
||||
context.fill();
|
||||
}
|
||||
const fetchData = () => {
|
||||
axios.get('http://localhost:3000/game',{withCredentials: true})
|
||||
.then(response => setPawnPositions(response.data.positions))
|
||||
}
|
||||
|
||||
const canvasRef = useRef(null)
|
||||
|
||||
useEffect(() => {
|
||||
//fetchData();
|
||||
const canvas = canvasRef.current
|
||||
const context = canvas.getContext('2d')
|
||||
var image = new Image();
|
||||
image.src = 'https://img-9gag-fun.9cache.com/photo/a8GdpYZ_460s.jpg'
|
||||
image.onload = function() {
|
||||
context.drawImage(image, 0 , 0);
|
||||
/* pawnPositions.forEach( pawn => {
|
||||
paintPawn(context, pawn.x,pawn.y,'#ffa1a1')
|
||||
pawns.forEach( pawn => {
|
||||
console.log("rysuje")
|
||||
console.log(positions[pawn.position]);
|
||||
paintPawn(context, positions[pawn.position].x, positions[pawn.position].y, pawn.color);
|
||||
})
|
||||
*/
|
||||
}
|
||||
|
||||
}, []);
|
||||
|
||||
}, [pawns]);
|
||||
return(
|
||||
<canvas className="canvas-container" width={480} height={480} ref={canvasRef}></canvas>
|
||||
)
|
||||
|
||||
24
src/components/game-board-components/positions.js
Normal file
24
src/components/game-board-components/positions.js
Normal file
@ -0,0 +1,24 @@
|
||||
const positions = [
|
||||
// Red base
|
||||
{x: 67, y: 67},
|
||||
{x: 67, y: 116},
|
||||
{x: 117, y: 67},
|
||||
{x: 117, y: 116},
|
||||
// Blue base
|
||||
{x: 67, y: 343},
|
||||
{x: 67, y: 392},
|
||||
{x: 117, y: 343},
|
||||
{x: 117, y: 392},
|
||||
// Green base
|
||||
{x: 343, y: 343},
|
||||
{x: 392, y: 392},
|
||||
{x: 392, y: 343},
|
||||
{x: 343, y: 392},
|
||||
// Yellow base
|
||||
{x: 343, y: 67},
|
||||
{x: 392, y: 116},
|
||||
{x: 392, y: 67},
|
||||
{x: 343, y: 116},
|
||||
];
|
||||
|
||||
export default positions;
|
||||
Loading…
Reference in New Issue
Block a user