-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
119 lines (103 loc) · 3.88 KB
/
main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
{/* <div class="screen-disply">
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
<div class="pixel"></div>
</div> */}
const LocationX = [] ;
LocationX[0] = 1
const LocationY = [] ;
LocationY[0] = 1
// geanrit an
// get the node arrey
function getAllDivInScreen(numRow){
elementList = document.querySelectorAll('.screen-disply div');
console.log(elementList)
const sources = Array.from(elementList, item => item);
console.log(sources)
// make the div arr to 2d
screenArr = arr1Dto2D(sources,numRow);
}
// convert the div node arrey to a 2d arrey
function arr1Dto2D(arr1 , numXnum){
const arr = arr1;
const DivArr2d = [];
while(arr.length) DivArr2d.push(arr.splice(0,numXnum));
return DivArr2d ;
}
// console.log(arr1Dto2D(sources));
//add grid-template-columns: repeat(arry lenghe,auto)
//ceaing 1 div proprty to filled
// DivArr2d[1][0].classList.add('filled');
//a funcsin thet move the pinter brist on an arowKey
document.addEventListener('keydown', ChangePleas );
function ChangePleas (e){
//delet the new class
screenArr[LocationY[0]][LocationX[0]].classList.remove('now-pixel');
// if the Location is out of screen dont move
if(e.code === 'ArrowDown' && screenArr.length - 1 > LocationY[0]){
LocationY[0] = LocationY[0] + 1;
console.log("good");
}
// if the Location is out of screen dont move
if(e.code === 'ArrowUp' && LocationY[0] > 0){
LocationY[0] = LocationY[0] - 1;
console.log("good");
}
// if the Location is out of screen dont move
if(e.code === 'ArrowRight' && screenArr.length - 1 > LocationX[0]){
LocationX[0] = LocationX[0] + 1;
console.log("good");
}
// if the Location is out of screen dont move
if(e.code === 'ArrowLeft' && LocationX[0] > 0){
LocationX[0] = LocationX[0] - 1;
console.log("good");
}
// if Location is filled dont fill it agine
if (screenArr[LocationY[0]][LocationX[0]].classList[1] !== 'filled'){
screenArr[LocationY[0]][LocationX[0]].classList.add('filled');
console.log(screenArr[LocationY[0]][LocationX[0]].classList);
}
// add a new class to the
screenArr[LocationY[0]][LocationX[0]].classList.add('now-pixel');
}
function removeElementsByClass(className){
var elements = document.getElementsByClassName(className);
while(elements.length > 0){
elements[0].parentNode.removeChild(elements[0]);
}
}
// screenArr = arr1Dto2D(sources);
// screenArr[LocationY[0]][LocationX[0]].classList.add('filled');
addEventListener('submit', val);
//geting the input from the form to desid the size of the bord
function val()
{
// removeDivs()
removeElementsByClass('pixel');
const input = document.getElementById("userInput").value;
// make sure thet input is a numbre
if (isNaN(input)){
alert("enret only numbres")
}
// create the elements
const DivNum = input * input;
for (let index = 0; index < DivNum; index++) {
let newDivPixle = document.createElement('div');
console.log(newDivPixle)
newDivPixle.classList.add('pixel');
let screen = document.getElementsByClassName('screen-disply');
screen.item(0).appendChild(newDivPixle);
}
const screen = document.getElementsByClassName("screen-disply");
screen.item(0).style.gridTemplateColumns = `repeat(${parseInt(input)},auto)`;
screen.item(0).style.gridTemplateRows = `repeat(${parseInt(input)},auto)`;
getAllDivInScreen(input);
}
// add grid-template-columns: repeat(arry lenghe,auto)