diff --git a/assets/css/style.css b/assets/css/style.css new file mode 100644 index 0000000..d27f1dd --- /dev/null +++ b/assets/css/style.css @@ -0,0 +1,339 @@ +html, body{ + width: 100%; + height: 100%; + margin: 0%; + background-color: black; + color: white; + user-select: none; + -webkit-user-select: none; + -moz-user-select: none; +} + +.container{ + width: 100%; + height: 100%; + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; +} + +table{ + width: 55rem; + height: 45rem; + table-layout: fixed; + border-collapse: collapse; + background-color: white; +} + +table tr td{ + border: 1px solid black; +} + +.content table{ + width: 100%; + height: 100%; +} + +.table-border{ + border: none !important; + border-collapse: collapse; +} + +.table-border tr td{ + border: none; +} + +.rounded{ + width: 100%; + height: 100%; + border-radius: 100%; + box-shadow: 1px 1px 5px black; + transition: .5s; +} + +.border-top{ + border-top: 1px solid black !important; +} + +.border-bottom{ + border-bottom: 1px solid black !important; +} + +.border-left{ + border-left: 1px solid black !important; +} + +.border-right{ + border-right: 1px solid black !important; +} + +.padding{ + padding: 5px 30px; +} + +.center{ + display: flex; + justify-content: center; + align-items: center; +} + +.bg-blue{ + background-color: #149DC9; +} + +.bg-red{ + background-color: #D43B1F; +} + +.bg-yellow{ + background-color: #C7C415; +} + +.bg-green{ + background-color: #15C720; +} + +.bg-gray{ + background-color: gray; +} + +.bg-degrade-blue{ + background-color: #149cc998; +} + +.bg-degrade-red{ + background-color: #d43a1f98; +} + +.bg-degrade-yellow{ + background-color: #c7c4159d; +} + +.bg-degrade-green{ + background-color: #15c7219a; +} + +.central{ + position: absolute; + + border-top: 15rem solid #C7C415 !important; + border-bottom: 15rem solid #D43B1F !important; + border-left: 15rem solid #149DC9 !important; + border-right: 15rem solid #15C720 !important; + border-radius: 15rem; +} + +.center{ + display: flex; + justify-content: center; + align-items: center; +} + +.container-central{ + position: absolute; + top: 18.7rem; + width: 11.5rem; + height: 10rem; + overflow: hidden; + border-radius: 1rem; +} + +.records{ + width: 7.5rem; + height: 6rem; + background-color: white; +} + +.boxes{ + overflow: hidden; +} + +.boxes .container-boxes{ + width: 100%; + height: 100%; +} + +.g-n-43{ + transform: rotate(-43grad); + margin-top: -40%; + margin-left: -38%; +} + +.g-n-43-mirror{ + transform: rotate(-43grad); + margin-top: -80%; + margin-left: -6%; +} + +.g-43{ + transform: rotate(43grad); + margin-left: 40%; + margin-top: -40%; +} + +.g-43-mirror{ + transform: rotate(43grad); + margin-left: 2%; + margin-top: -85%; +} + +.boxes .container-boxes div{ + width: 150%; + height: 100%; +} + +.boxes .container-boxes:first-child{ + border-bottom: 1px solid black; +} + +.mouse-move-normal table tr td:hover{ + background-color: rgba(238, 230, 230, 0.671); +} + +.mouse-move-yellow:hover{ + background-color: #c7c4159d !important; +} + +.mouse-move-col-yellow table tr td:hover{ + background-color: #c7c4159d !important; +} + +.mouse-move-gray:hover{ + background-color: rgb(155, 151, 151) !important; +} + +.mouse-move-col-blue table tr td:hover{ + background-color: #149cc998 !important; +} + +.mouse-move-blue:hover{ + background-color: #149cc998 !important; +} + +.mouse-move-green:hover{ + background-color: #15c7219a !important; +} + +.mouse-move-col-green table tr td:hover{ + background-color: #15c7219a !important; +} + +.mouse-move-red:hover{ + background-color: #d43a1f98 !important; +} + +.mouse-move-col-red table tr td:hover{ + background-color: #d43a1f98 !important; +} + +.rounded:hover{ + transform: scale(1.01); +} + +.boxes .container-boxes div:hover{ + background-color: rgba(238, 230, 230, 0.671) !important; +} + +.record-yellow-1, .record-yellow-2, .record-yellow-3, .record-yellow-4, +.record-blue-1, .record-blue-2, .record-blue-3, .record-blue-4, +.record-green-1, .record-green-2, .record-green-3, .record-green-4, +.record-red-1, .record-red-2, .record-red-3, .record-red-4{ + width: 25px; + height: 25px; + margin-left: 5px; + border-radius: 100%; + border: 2px solid white; + cursor: pointer; + position: absolute; + top: 0px; + left: 0px; +} + +.record-yellow-1, .record-yellow-2, .record-yellow-3, .record-yellow-4{ + background-color: #C7C415; +} + +.record-blue-1, .record-blue-2, .record-blue-3, .record-blue-4{ + background-color: #149DC9; +} + +.record-green-1, .record-green-2, .record-green-3, .record-green-4{ + background-color: #15C720; +} + +.record-red-1, .record-red-2, .record-red-3, .record-red-4{ + background-color: #D43B1F; +} + +.board{ + width: 15%; + height: 70%; + background-color: white; + position: absolute; + top: 2%; + left: 84%; + overflow: hidden; + border-radius: 1rem; +} + +.board .board-header{ + width: 100%; + height: 10%; +} + +.board .board-body{ + width: 100%; + height: 80%; + background-color: rgb(221, 215, 215); + overflow: scroll; + font-size: 13px; +} +.board .board-body div{ + width: 100%; + height: 5%; +} + +.board .board-footer{ + width: 100%; + height: 10%; +} + +.board .board-footer button{ + border: none; + width: 100%; + height: 100%; + color: white; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + font-size: 25px; + transition: .2s; + +} + +.board .board-header .dice{ + width: 5rem; + height: 90%; + border: 1px solid black; + color: white; + margin-left: 5px; + margin-right: 5px; + overflow: hidden; + border-radius: 1rem; +} + +.dice .dice-title{ + font-size: 12px !important; + width: 100%; + height: auto; + background-color: black; + color: white; +} + +td{ + color: black; +} + +.dice .dice-text{ + font-size: 25px; + font-weight: bold; +} \ No newline at end of file diff --git a/assets/image/parchis.png b/assets/image/parchis.png new file mode 100644 index 0000000..a54ae50 Binary files /dev/null and b/assets/image/parchis.png differ diff --git a/assets/js/script.js b/assets/js/script.js new file mode 100644 index 0000000..cc9aa86 --- /dev/null +++ b/assets/js/script.js @@ -0,0 +1,100 @@ +var scord = null; +var moveElement = null; +var nextElement = null; +var border = null; +var position = {};// alamcenando la posición de cada ficha. + +function onMouseDown(e, element) { + moveElement = element; + if (border == null) { + border = moveElement.style.border; + moveElement.style.border = "1px solid gray"; + } + + if (position[element.id] == undefined) { + position[element.id] = { x: e.clientX, y: e.clientY }; + } +} + +function onMouseEnter(e, element) { + nextElement = element; + console.log(element) +} + +function addPosition(X, Y, element) { + + element.style.transform = 'translate3d(' + X + 'px,' + Y + 'px, 0px)'; +} + +function getRandom(min, max){ + return Math.floor(Math.random() * (max - min)) + min; +} + +let turn = 0; +let cont = 0; +var classess = ['bg-green mouse-move-green', 'bg-yellow mouse-move-yellow', 'bg-blue mouse-move-blue', 'bg-red mouse-move-red']; +var bgClass = ['bg-green', 'bg-yellow', 'bg-blue', 'bg-red']; +function trhowDice(){ + let dice1 = getRandom(1, 7); + let dice2 = getRandom(1, 7); + document.getElementById('dice-one').innerHTML = dice1; + document.getElementById('dice-two').innerHTML = dice2; + var element = document.getElementsByClassName('dice'); + for(var index in element){ + element[index].className = 'dice ' + bgClass[(turn == -1 ? 3 : turn)]; + } + + // Agregando jugadas al tablero + element = document.getElementsByClassName('board-body')[0]; + var div = document.createElement('div'); + var text = document.createTextNode(`- Jugada #${++cont}: Dado #1: ${dice1}, Dado #2: ${dice2}`); + div.className = bgClass[(turn == -1 ? 3 : turn)]; + div.appendChild(text); + element.appendChild(div); + element.scrollTop = element.scrollHeight;// mantiene el scroll abajo + // fin de agregar jugadas + if(dice1 == dice2){ + if(dice2 != 6){ + document.getElementById('btn-trhow-dice').className = classess[++turn]; + } + }else{ + document.getElementById('btn-trhow-dice').className = classess[++turn]; + } + turn = turn == 3 ? -1 : turn; +} + +window.addEventListener('mouseup', (e) => { + if (moveElement != null) { + moveElement.style.border = border; + border = null; + // alert(moveElement.id + ' - x:' + e.clientX + ' - y:' + e.clientY); + moveElement = null; + nextElement = null; + } +}) + +window.addEventListener('mousemove', (e) => { + if (moveElement != null) { + let posY = e.clientY - moveElement.offsetHeight/2; + let posX = e.clientX - moveElement.offsetWidth/2; + moveElement.style.transform = 'translate3d(' + posX + 'px,' + posY + 'px, 0px)'; + // console.log(moveElement.id, 'x', e.clientX, 'y', e.clientY) + } +}) + +window.onload = ()=>{ + [ + {id: 'y1', x: 430, y: 70}, {id: 'y2', x: 550, y: 70}, {id: 'y3', x: 430, y: 160}, {id: 'y4', x: 550, y: 160}, + {id: 'b1', x: 430, y: 570}, {id: 'b2', x: 550, y: 570}, {id: 'b3', x: 430, y: 660}, {id: 'b4', x: 550, y: 660}, + {id: 'g1', x: 1010, y: 70}, {id: 'g2', x: 1130, y: 70}, {id: 'g3', x: 1010, y: 160}, {id: 'g4', x: 1130, y: 160}, + {id: 'r1', x: 1010, y: 570}, {id: 'r2', x: 1130, y: 570}, {id: 'r3', x: 1010, y: 660}, {id: 'r4', x: 1130, y: 660} + ].forEach((element)=>{ + addPosition( + element.x, + element.y, + document.getElementById(element.id) + ); + position[element.id] = {x: 0, y: 0}; + + }) +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..50140c3 --- /dev/null +++ b/index.html @@ -0,0 +1,402 @@ + + + + + + + + + + + Parchis + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ 		+ + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + +
+ 		+ + + + + + + + + + + + + + + + + + + + + + +
+ 		+ + + + + + + + + + + + + + + + + + + + + + +
+
+ 		+
+
+ + + + + + + + + + +
+ + + + + + + + + + +
+
+ + + + + + + + + + +
+
+ + + + + + + + + + +
+
+ 		+ + + + + + + + + + + + + + + + +
+
+
+
+
+ 		+
+
+
+
+
+
+
+
+
+ 		+
+
+
+
+
+ +
+
+
+
+
+
+
+ + 		+ + + + + + + + + + + + +
+ + + + + + + + + + +
+
+ + + + + + + + + + +
+
+ + + + + + + + + + +
+
+
+
+ 		+ + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + +
+ 		+ + + + + + + + + + + + + + + + + + + + + + +
+ 		+ + + + + + + + + + + + + + + + + + + + + + +
+
+ 		+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+
Dado 1
+
+
+
+
Dado 2
+
+
+
+
+ +
+ +
+ +
+
+
+ + + + \ No newline at end of file