forked from s444420/AL-2020
zmiany
This commit is contained in:
parent
7ea0001618
commit
d6dd91e150
BIN
frontend/img/Down.png
Normal file
BIN
frontend/img/Down.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 560 B |
BIN
frontend/img/Left.png
Normal file
BIN
frontend/img/Left.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 567 B |
BIN
frontend/img/Right.png
Normal file
BIN
frontend/img/Right.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 574 B |
BIN
frontend/img/Up.png
Normal file
BIN
frontend/img/Up.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 509 B |
@ -2,108 +2,18 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width", initial-scale=1.0">
|
||||
<title>Inteligentny wózek</title>
|
||||
<link type="text/css" rel="stylesheet" href="styles.css">
|
||||
<script type="text/javascript" src="script.js">
|
||||
</script>
|
||||
<script type="text/javascript" src="./js/main.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="start()">
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="plansza">
|
||||
<div class="row" id="row-0">
|
||||
<div class="pole" id="0-0"> </div>
|
||||
<div class="pole" id="0-1"> </div>
|
||||
<div class="pole" id="0-2"> </div>
|
||||
<div class="pole" id="0-3"> </div>
|
||||
<div class="pole" id="0-4"> </div>
|
||||
<div class="pole" id="0-5"> </div>
|
||||
<div class="pole" id="0-6"> </div>
|
||||
<div class="pole" id="0-7"> </div>
|
||||
<div class="pole" id="0-8"> </div>
|
||||
<div class="pole" id="0-9"> </div>
|
||||
<div class="pole" id="0-10"> </div>
|
||||
</div>
|
||||
<div class="row" id="row-1">
|
||||
<div class="pole" id="1-0"> </div>
|
||||
<div class="pole" id="1-1"> </div>
|
||||
<div class="pole" id="1-2"> </div>
|
||||
<div class="pole" id="1-3"> </div>
|
||||
<div class="pole" id="1-4"> </div>
|
||||
<div class="pole" id="1-5"> </div>
|
||||
<div class="pole" id="1-6"> </div>
|
||||
<div class="pole" id="1-7"> </div>
|
||||
<div class="pole" id="1-8"> </div>
|
||||
<div class="pole" id="1-9"> </div>
|
||||
<div class="pole" id="1-10"> </div>
|
||||
</div>
|
||||
<div class="row" id="row-2">
|
||||
<div class="pole" id="2-0"> </div>
|
||||
<div class="pole" id="2-1"> </div>
|
||||
<div class="pole" id="2-2"> </div>
|
||||
<div class="pole" id="2-3"> </div>
|
||||
<div class="pole" id="2-4"> </div>
|
||||
<div class="pole" id="2-5"> </div>
|
||||
<div class="pole" id="2-6"> </div>
|
||||
<div class="pole" id="2-7"> </div>
|
||||
<div class="pole" id="2-8"> </div>
|
||||
<div class="pole" id="2-9"> </div>
|
||||
<div class="pole" id="2-10"> </div>
|
||||
</div>
|
||||
<div class="row" id="row-3">
|
||||
<div class="pole" id="3-0"> </div>
|
||||
<div class="pole" id="3-1"> </div>
|
||||
<div class="pole" id="3-2"> </div>
|
||||
<div class="pole" id="3-3"> </div>
|
||||
<div class="pole" id="3-4"> </div>
|
||||
<div class="pole" id="3-5"> </div>
|
||||
<div class="pole" id="3-6"> </div>
|
||||
<div class="pole" id="3-7"> </div>
|
||||
<div class="pole" id="3-8"> </div>
|
||||
<div class="pole" id="3-9"> </div>
|
||||
<div class="pole" id="3-10"> </div>
|
||||
</div>
|
||||
<div class="row" id="row-4">
|
||||
<div class="pole" id="4-0"> </div>
|
||||
<div class="pole" id="4-1"> </div>
|
||||
<div class="pole" id="4-2"> </div>
|
||||
<div class="pole" id="4-3"> </div>
|
||||
<div class="pole" id="4-4"> </div>
|
||||
<div class="pole" id="4-5"> </div>
|
||||
<div class="pole" id="4-6"> </div>
|
||||
<div class="pole" id="4-7"> </div>
|
||||
<div class="pole" id="4-8"> </div>
|
||||
<div class="pole" id="4-9"> </div>
|
||||
<div class="pole" id="4-10"> </div>
|
||||
</div>
|
||||
<div class="row" id="row-5">
|
||||
<div class="pole" id="5-0"> </div>
|
||||
<div class="pole" id="5-1"> </div>
|
||||
<div class="pole" id="5-2"> </div>
|
||||
<div class="pole" id="5-3"> </div>
|
||||
<div class="pole" id="5-4"> </div>
|
||||
<div class="pole" id="5-5"> </div>
|
||||
<div class="pole" id="5-6"> </div>
|
||||
<div class="pole" id="5-7"> </div>
|
||||
<div class="pole" id="5-8"> </div>
|
||||
<div class="pole" id="5-9"> </div>
|
||||
<div class="pole" id="5-10"> </div>
|
||||
</div>
|
||||
<div class="row" id="row-6">
|
||||
<div class="pole" id="6-0"> </div>
|
||||
<div class="pole" id="6-1"> </div>
|
||||
<div class="pole" id="6-2"> </div>
|
||||
<div class="pole" id="6-3"> </div>
|
||||
<div class="pole" id="6-4"> </div>
|
||||
<div class="pole" id="6-5"> </div>
|
||||
<div class="pole" id="6-6"> </div>
|
||||
<div class="pole" id="6-7"> </div>
|
||||
<div class="pole" id="6-8"> </div>
|
||||
<div class="pole" id="6-9"> </div>
|
||||
<div class="pole" id="6-10"> </div>
|
||||
</div>
|
||||
<div class="board" id="board">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<script type="module" src="./js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
87
frontend/js/Agent.js
Normal file
87
frontend/js/Agent.js
Normal file
@ -0,0 +1,87 @@
|
||||
export default class Agent{
|
||||
constructor(positionX, positionY, turn){
|
||||
this.positionX = positionX;
|
||||
this.positionY = positionY;
|
||||
this.turn = turn;
|
||||
}
|
||||
|
||||
getParams(){
|
||||
let params = {};
|
||||
|
||||
positionX = this.positionX;
|
||||
positionY = this.positionY;
|
||||
turn = this.turn;
|
||||
|
||||
params = {positionX, positionY, turn};
|
||||
|
||||
return params;
|
||||
}
|
||||
|
||||
goForward(){
|
||||
if(this.turn == 'Up'){
|
||||
this.positionY += 1;
|
||||
}
|
||||
else if(this.turn == 'Down'){
|
||||
this.positionY -= 1;
|
||||
}
|
||||
else if(this.turn == 'Left'){
|
||||
this.positionX -= 1;
|
||||
}
|
||||
else if(this.turn == 'Right'){
|
||||
this.positionX += 1;
|
||||
}
|
||||
}
|
||||
|
||||
turnLeft(){
|
||||
if(this.turn == 'Up'){
|
||||
this.turn = 'Left';
|
||||
}
|
||||
else if(this.turn == 'Down'){
|
||||
this.turn = 'Right';
|
||||
}
|
||||
else if(this.turn == 'Left'){
|
||||
this.turn = 'Down';
|
||||
}
|
||||
else if(this.turn == 'Right'){
|
||||
this.turn = 'Up'
|
||||
}
|
||||
}
|
||||
|
||||
turnRight(){
|
||||
if(this.turn == 'Up'){
|
||||
this.turn = 'Right';
|
||||
}
|
||||
else if(this.turn == 'Down'){
|
||||
this.turn = 'Left';
|
||||
}
|
||||
else if(this.turn == 'Left'){
|
||||
this.turn = 'Up';
|
||||
}
|
||||
else if(this.turn == 'Right'){
|
||||
this.turn = 'Down'
|
||||
}
|
||||
}
|
||||
|
||||
showAgent(){
|
||||
console.log(this.turn)
|
||||
if(this.turn === "Up"){
|
||||
document.getElementById(this.positionX + "-" + this.positionY).style.backgroundImage = "url('img/Up.png')";
|
||||
}
|
||||
else if(this.turn === "Down"){
|
||||
document.getElementById(this.positionX + "-" + this.positionY).style.backgroundImage = "url('img/Down.png')";
|
||||
}
|
||||
else if(this.turn === "Right"){
|
||||
document.getElementById(this.positionX + "-" + this.positionY).style.backgroundImage = "url('img/Right.png')";
|
||||
}
|
||||
else if(this.turn === "Left"){
|
||||
document.getElementById(this.positionX + "-" + this.positionY).style.backgroundImage = "url('img/Left.png')";
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
hideAgent(){
|
||||
document.getElementById(this.positionX + "-" + this.positionY).style.backgroundImage = "";
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
30
frontend/js/Board.js
Normal file
30
frontend/js/Board.js
Normal file
@ -0,0 +1,30 @@
|
||||
import Field from './Field.js'
|
||||
|
||||
export function createBoard(rangeX, rangeY){
|
||||
const board = [];
|
||||
|
||||
for(let y = 0; y < rangeY; y++){
|
||||
const row = [];
|
||||
for(let x = 0; x < rangeX; x++){
|
||||
let field = new Field(x, y, false, false, 1);
|
||||
row.push(field)
|
||||
}
|
||||
board.push(row)
|
||||
}
|
||||
return board
|
||||
}
|
||||
|
||||
export function showBoard(board){
|
||||
for(let y = board.length - 1; y >= 0 ; y--){
|
||||
document.getElementById("board").innerHTML += "<div class='row' id='row-" + y + "'> </div>";
|
||||
|
||||
for(let x = 0; x < board[y].length; x++){
|
||||
document.getElementById("row-" + y).innerHTML += "<div class='field' id=" + x + "-" + y + "> </div>"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
22
frontend/js/Field.js
Normal file
22
frontend/js/Field.js
Normal file
@ -0,0 +1,22 @@
|
||||
export default class Field{
|
||||
constructor(x, y, isShelf, isOccupiedByAgent, costOfTravel){
|
||||
this.xField = x;
|
||||
this.yField = y;
|
||||
this.isShelf = isShelf;
|
||||
this.isOccupiedByAgent = isOccupiedByAgent;
|
||||
this.costOfTravel = costOfTravel;
|
||||
}
|
||||
|
||||
getParams(){
|
||||
let params = {};
|
||||
|
||||
xField = this.xField;
|
||||
yField = this.yField;
|
||||
isShelf = this.isShelf;
|
||||
isOccupiedByAgent = this.isOccupiedByAgent;
|
||||
costOfTravel = this.costOfTravel;
|
||||
params = {xField, yField, isShelf, isOccupiedByAgent, costOfTravel}
|
||||
|
||||
return params;
|
||||
}
|
||||
}
|
||||
27
frontend/js/main.js
Normal file
27
frontend/js/main.js
Normal file
@ -0,0 +1,27 @@
|
||||
import * as Board from './Board.js'
|
||||
import Agent from './Agent.js'
|
||||
|
||||
let board = Board.createBoard(10,10);
|
||||
Board.showBoard(board);
|
||||
|
||||
let agent = new Agent(0,0, 'Right');
|
||||
|
||||
agent.showAgent();
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
125
frontend/js/script.js
Normal file
125
frontend/js/script.js
Normal file
@ -0,0 +1,125 @@
|
||||
// import Agent from './Agent.js'
|
||||
|
||||
// //Klasy
|
||||
|
||||
|
||||
// class Field {
|
||||
// constructor(x, y, isEmpty) {
|
||||
// this.xField = x;
|
||||
// this.yField = y;
|
||||
// this.isFieldEmpty = isEmpty;
|
||||
// }
|
||||
// getCoordinates(){
|
||||
// return this.xField + this.yField;
|
||||
// }
|
||||
|
||||
// getStatus(){
|
||||
// return this.isFieldEmpty;
|
||||
// }
|
||||
// }
|
||||
|
||||
// class Product {
|
||||
// constructor(name, type, farcing, price) {
|
||||
// this.name = name;
|
||||
// this.type = type;
|
||||
// this.farcing = farcing;
|
||||
// this.price = price
|
||||
// }
|
||||
// }
|
||||
|
||||
// class Rack{
|
||||
// constructor(noOfShelf, typOfProduct) {
|
||||
// this.noOfShelf = noOfShelf;
|
||||
// }
|
||||
|
||||
// addShelf(){
|
||||
// this.noOfShelf = this.noOfShelf + 1;
|
||||
// }
|
||||
|
||||
// isEmpty(){
|
||||
// if (this.noOfShelf === 0){
|
||||
// return true;
|
||||
// }else {
|
||||
// return false;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// class Shelf {
|
||||
// constructor(number) {
|
||||
// this.number = number;
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
// //Objekty i zmienne
|
||||
// var regaly = ['1-1', '1-3', '1-4', '1-6', '1-7', '1-9', '2-1', '2-9', '3-3', '3-4', '3-6', '3-7', '4-1', '4-9', '5-1', '5-3', '5-4', '5-6', '5-7', '5-9']
|
||||
// const agent1 = new Agent(3, 0);
|
||||
|
||||
// //Funkcja uruchamiająca prace calego scriptu
|
||||
// function start(){
|
||||
// //ponumerujPola();
|
||||
// pokolorujRegaly();
|
||||
// umiescAgenta(agent1);
|
||||
// droga(agent1);
|
||||
// }
|
||||
|
||||
// //Funkcja kolorujaca miejsca na planszy gdzie znajduja sie regaly
|
||||
// function pokolorujRegaly(){
|
||||
// let x;
|
||||
// for(x = 0; x < regaly.length; x++){
|
||||
// document.getElementById(regaly[x]).className = 'regal';
|
||||
// }
|
||||
// }
|
||||
|
||||
// //Funkcja wyswietlajaca id pol
|
||||
// function ponumerujPola(){
|
||||
// let x,y
|
||||
// for(x = 0; x < 7; x++){
|
||||
// for(y = 0; y < 11; y++){
|
||||
// id = x.toString() + "-" + y.toString();
|
||||
// document.getElementById(id).innerHTML = id;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// //Funkcja usuwająca agenta z pola, przed przemieszczeniem
|
||||
// function usunAgenta(agent){
|
||||
// document.getElementById(agent.getId()).style.backgroundImage = "none";
|
||||
// }
|
||||
|
||||
|
||||
// //Funckja wyswietlajaca agenta gdy ten zmieni polozenie
|
||||
// function umiescAgenta(agent) {
|
||||
// document.getElementById(agent.getId()).style.backgroundImage = "url('Agent.jpg')";
|
||||
// }
|
||||
|
||||
// //Funkcja zmieniajaca polozenie agenta o 1 pole
|
||||
// function przemieszczenie(side, time, agent){
|
||||
// const lastPosition = agent.getId();
|
||||
// setTimeout(function(){
|
||||
// usunAgenta(agent)
|
||||
// if(side == "left")
|
||||
// agent.left();
|
||||
// if(side == "right")
|
||||
// agent.right();
|
||||
// if(side == "up")
|
||||
// agent.up();
|
||||
// if(side == "down")
|
||||
// agent.down();
|
||||
// umiescAgenta(agent);
|
||||
// }, time);
|
||||
// }
|
||||
|
||||
// //Funkcja ktora ustala droge agenta do przebycia
|
||||
// function droga(agent) {
|
||||
// przemieszczenie("right", 1000, agent);
|
||||
// przemieszczenie("right", 2000, agent);
|
||||
// przemieszczenie("up", 3000, agent);
|
||||
// przemieszczenie("right", 4000, agent);
|
||||
// przemieszczenie("right", 5000, agent);
|
||||
// przemieszczenie("right", 6000, agent);
|
||||
// przemieszczenie("right", 7000, agent);
|
||||
// przemieszczenie("right", 8000, agent);
|
||||
// przemieszczenie("right", 9000, agent);
|
||||
// }
|
||||
@ -1,148 +0,0 @@
|
||||
//Klasy
|
||||
class Agent {
|
||||
constructor(x, y){
|
||||
this.xField = x;
|
||||
this.yField = y;
|
||||
}
|
||||
|
||||
getId(){
|
||||
return this.xField + "-" + this.yField;
|
||||
}
|
||||
|
||||
right(){
|
||||
this.yField++;
|
||||
}
|
||||
|
||||
left(){
|
||||
this.yField--;
|
||||
}
|
||||
|
||||
up(){
|
||||
this.xField--;
|
||||
}
|
||||
|
||||
down(){
|
||||
this.xField++;
|
||||
}
|
||||
}
|
||||
|
||||
class Field {
|
||||
constructor(x, y, isEmpty) {
|
||||
this.xField = x;
|
||||
this.yField = y;
|
||||
this.isFieldEmpty = isEmpty;
|
||||
}
|
||||
getCoordinates(){
|
||||
return this.xField + this.yField;
|
||||
}
|
||||
|
||||
getStatus(){
|
||||
return this.isFieldEmpty;
|
||||
}
|
||||
}
|
||||
|
||||
class Product {
|
||||
constructor(name, type, farcing, price) {
|
||||
this.name = name;
|
||||
this.type = type;
|
||||
this.farcing = farcing;
|
||||
this.price = price
|
||||
}
|
||||
}
|
||||
|
||||
class Rack{
|
||||
constructor(noOfShelf, typOfProduct) {
|
||||
this.noOfShelf = noOfShelf;
|
||||
}
|
||||
|
||||
addShelf(){
|
||||
this.noOfShelf = this.noOfShelf + 1;
|
||||
}
|
||||
|
||||
isEmpty(){
|
||||
if (this.noOfShelf === 0){
|
||||
return true;
|
||||
}else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class Shelf {
|
||||
constructor(number) {
|
||||
this.number = number;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//Objekty i zmienne
|
||||
var regaly = ['1-1', '1-3', '1-4', '1-6', '1-7', '1-9', '2-1', '2-9', '3-3', '3-4', '3-6', '3-7', '4-1', '4-9', '5-1', '5-3', '5-4', '5-6', '5-7', '5-9']
|
||||
const agent1 = new Agent(3, 0);
|
||||
|
||||
//Funkcja uruchamiająca prace calego scriptu
|
||||
function start(){
|
||||
//ponumerujPola();
|
||||
pokolorujRegaly();
|
||||
umiescAgenta(agent1);
|
||||
droga(agent1);
|
||||
}
|
||||
|
||||
//Funkcja kolorujaca miejsca na planszy gdzie znajduja sie regaly
|
||||
function pokolorujRegaly(){
|
||||
let x;
|
||||
for(x = 0; x < regaly.length; x++){
|
||||
document.getElementById(regaly[x]).className = 'regal';
|
||||
}
|
||||
}
|
||||
|
||||
//Funkcja wyswietlajaca id pol
|
||||
function ponumerujPola(){
|
||||
let x,y
|
||||
for(x = 0; x < 7; x++){
|
||||
for(y = 0; y < 11; y++){
|
||||
id = x.toString() + "-" + y.toString();
|
||||
document.getElementById(id).innerHTML = id;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Funkcja usuwająca agenta z pola, przed przemieszczeniem
|
||||
function usunAgenta(agent){
|
||||
document.getElementById(agent.getId()).style.backgroundImage = "none";
|
||||
}
|
||||
|
||||
|
||||
//Funckja wyswietlajaca agenta gdy ten zmieni polozenie
|
||||
function umiescAgenta(agent) {
|
||||
document.getElementById(agent.getId()).style.backgroundImage = "url('Agent.jpg')";
|
||||
}
|
||||
|
||||
//Funkcja zmieniajaca polozenie agenta o 1 pole
|
||||
function przemieszczenie(side, time, agent){
|
||||
const lastPosition = agent.getId();
|
||||
setTimeout(function(){
|
||||
usunAgenta(agent)
|
||||
if(side == "left")
|
||||
agent.left();
|
||||
if(side == "right")
|
||||
agent.right();
|
||||
if(side == "up")
|
||||
agent.up();
|
||||
if(side == "down")
|
||||
agent.down();
|
||||
umiescAgenta(agent);
|
||||
}, time);
|
||||
}
|
||||
|
||||
//Funkcja ktora ustala droge agenta do przebycia
|
||||
function droga(agent) {
|
||||
przemieszczenie("right", 1000, agent);
|
||||
przemieszczenie("right", 2000, agent);
|
||||
przemieszczenie("up", 3000, agent);
|
||||
przemieszczenie("right", 4000, agent);
|
||||
przemieszczenie("right", 5000, agent);
|
||||
przemieszczenie("right", 6000, agent);
|
||||
przemieszczenie("right", 7000, agent);
|
||||
przemieszczenie("right", 8000, agent);
|
||||
przemieszczenie("right", 9000, agent);
|
||||
}
|
||||
@ -1,33 +1,39 @@
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.container{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 1920px;
|
||||
min-height: 1080px;
|
||||
position: absolute;
|
||||
background-color: grey;
|
||||
background-color: rgb(37, 36, 36);
|
||||
}
|
||||
|
||||
.plansza{
|
||||
width: 1100px;
|
||||
#board{
|
||||
width: 700px;
|
||||
height: 700px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: lightyellow;
|
||||
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.row{
|
||||
width: 1100px;
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.pole{
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background-color: lightyellow;
|
||||
.field{
|
||||
height: 70px;
|
||||
width: 70px;
|
||||
background-color: white;
|
||||
background-image: none;
|
||||
background-size: cover;
|
||||
border-color: black;
|
||||
@ -43,8 +49,8 @@
|
||||
}
|
||||
|
||||
.regal{
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
color: lightyellow;
|
||||
background-color: darkslategrey;
|
||||
border-color: black;
|
||||
@ -57,3 +63,4 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user