Merge of Beerpong-Youtube and Tic-Tac-Toe

Output/public/css/style.css

@@ -1,97 +1,142 @@
-@font-face {
+:root{
-    font-family: 'Lato';
+    --top:0px;
-    font-style: normal;
+    --top325:325px;
-    font-weight: 400;
-    src: local('Lato Regular'), local('Lato-Regular'), url(Lato.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
 }
-
+*{
-@font-face {
+    padding: 0;
-    font-family: 'Quicksand';
+    margin: 0;
-    font-style: normal;
+    outline: none;
-    font-weight: 400;
-    src: local('Quicksand'), local('Quicksand'), url(Quicksand.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
 }
-
-::selection {
-    background: transparent;
-}
-
 body{
-    background: #A5DAD2;
+    overflow-x: hidden;
-    font-family: Quicksand, san-serif;
+    display: block;
 }
-
+ellipse{
-.bgWhite {
+    fill:hsl(0, 0%, 90%);
-    background: #F5F2F5;
+    stroke: black;
+    stroke-weight: 1px;
 }
+#reshoot, #restart{
+    margin: 15rem auto;
+    font-size: 2rem;
+    padding: 1rem 2rem;
+    border-radius: 0.3rem;
+    display: block;
+    color: black;
+    border: 3px solid black;
+    background-color: yellow;
+    z-index: 10;
 
-.colorWhite {
-    color: #F5F2F5 !important;
 }
-
+#reshoot:hover, #restart:hover{
-.bgDark {
-    background: #516D66;
-}
-
-.colorDark {
-    color: #516D66;
-}
-
-.bgRed {
-    background: #F286A0;
-}
-
-.colorRed {
-    color: #F286A0 !important;
-}
-
-.gameBoard, .scoreBoard {
-    font-weight: 400;
-}
-
-.gameBoard {
-    width: 100%;
-}
-
-.gameBoard td {
-    text-align: center;
-    color: #516D66;
-    font-size: 8em;
     cursor: pointer;
-    transition: all 0.5s;
+    background-color: black;
+    color: yellow;
+    z-index:
+}
+#time {
+  margin: auto;
+  display: block;
+  text-align: center;
+  font-size: 3rem;
+  font-family: sans-serif;
+  font-weight: bold;
 }
 
-.gameCell {
+
-    width: 181px;
+.cups{
-    height: 181px;
+    margin: auto;
+    width: 1100px;
+}
+.tisch{
+  position: absolute;
+  margin-top: 0rem;
+  margin-left: -440px;
+  width: 1090px;
+  z-index: -1;
+}
+.cup{
+    width: 100px;
+    position: relative;
+}
+.row1{
+    margin-top: 00rem;
+    margin-left: 350px;
+}
+.row2{
+    margin-top: -10rem;
+    margin-left: 400px;
+}
+.row3{
+    margin-top: -10rem;
+    margin-left: 450px;
+}
+.row4{
+    margin-top: -10rem;
+    margin-left: 500px;
 }
 
-.gameCell:not(.marked):hover {
+.cup5{
-    box-shadow: 0 0 42px #555;
+    top: 5rem;
 }
-
+.cup6{
-.gameBoard td.gameCell.notActive:hover, .gameBoard td.gameCell.notActive:active {
+    top: 5rem;
-    box-shadow: none !important;
-    cursor: default;
 }
-
+.cup7{
-.scoreBoard {
+    top: 5rem;
-    color: #516D66;
-    height: 100px;
 }
-
+.cup8{
-.boardCol {
+    top: 10rem;
-    width: 5px;
-    cursor: default !important;
 }
-
+.cup9{
-.boardRow {
+    top: 10rem;
-    height: 5px;
-    cursor: default !important;
 }
-
+.cup10{
-.scoreBoard span.active {
+    top: 15rem;
-    border-bottom: 4px solid #F286A0;
+}
+.ball{
+    width: 50px;
+    height: 50px;
+    position: relative;
+}
+.shooter{
+    position: relative;
+    top: 250px;
+    left: 125px;
+    width: 300px;
+    margin: auto;
+}
+.shootX{
+    animation: shootX 1s infinite linear;
+}
+@keyframes shootX{
+    0%{left:0px}
+    25%{left:125px}
+    50%{left:0px}
+    75%{left:-125px}
+    100%{left:0px}
+}
+.shootY{
+    animation: shootY 1s infinite linear;
+}
+@keyframes shootY{
+    0%{top:0px}
+    50%{top:175px}
+    100%{top:0px}
+}
+.fadeAway{
+    animation: fadeAway 1s;
+    opacity: 0
+}
+@keyframes fadeAway{
+    0%{opacity: 1}
+    100%{opacity: 0}
+}
+.Shoot{
+    animation: Shoot 1s;
+    animation-timing-function: ease;
+}
+@keyframes Shoot{
+    0%{top: var(--top)}
+    100%{top: var(--top325)}
 }

Output/public/js/script.js

@@ -0,0 +1,159 @@
+var html = document.getElementById("html");
+var reshoot = document.getElementById("reshoot");
+var ball = document.getElementById("ball");
+var root = document.documentElement;
+var restartbuttonvisible = 1;
+var cupsOut = [];
+
+//function shootY(){
+    //let top = window.getComputedStyle(ball).getPropertyValue("top");
+    //ball.classList.remove("shootY");
+    //ball.classList.add("shootX");
+    //ball.style.top = top;
+    //let onclick = "shootX('".concat(top.toString(), "')");
+    //html.setAttribute("onclick", onclick);
+//}
+
+function shoot(event){
+    //let top = valueY;
+    //let topInt = parseInt(valueY);
+    //let left = window.getComputedStyle(ball).getPropertyValue("left");
+    //let leftInt = parseInt(left);
+    //let newtop = topInt-325;
+    //root.style.setProperty('--top', (topInt)+ "px");
+    //root.style.setProperty('--top325', (newtop)+ "px");
+    ball.classList.add("Shoot");
+
+
+    switch (event.key)
+    {
+      case 'e':
+      case 'E':
+      root.style.setProperty('--top325', "-350"+ "px");
+      ball.style.top = "-350px"
+      ball.style.left = "-155px";
+        removeCup("1");
+        break;
+      case 'r':
+      case 'R':
+        root.style.setProperty('--top325', "-350"+ "px");
+        ball.style.top = "-350px"
+        ball.style.left = "-50px";
+        removeCup("2");
+        break;
+      case 't':
+      case 'T':
+        root.style.setProperty('--top325', "-350"+ "px");
+        ball.style.top = "-350px"
+        ball.style.left = "55px";
+        removeCup("3");
+        break;
+      case 'z':
+      case 'Z':
+        root.style.setProperty('--top325', "-350"+ "px");
+        ball.style.top = "-350px"
+        ball.style.left = "160px";
+        removeCup("4");
+        break;
+      case 'd':
+      case 'D':
+        root.style.setProperty('--top325', "-290"+ "px");
+        ball.style.top = "-290px"
+        ball.style.left = "-100px";
+        removeCup("5");
+        break;
+      case 'f':
+      case 'F':
+        root.style.setProperty('--top325', "-290"+ "px");
+        ball.style.top = "-290px"
+        ball.style.left = "0px";
+        removeCup("6");
+        break;
+      case 'g':
+      case 'G':
+        root.style.setProperty('--top325', "-290"+ "px");
+        ball.style.top = "-290px"
+        ball.style.left = "110px";
+        removeCup("7");
+        break;
+      case 'c':
+      case 'C':
+        root.style.setProperty('--top325', "-220"+ "px");
+        ball.style.top = "-220px"
+        ball.style.left = "-50px";
+        removeCup("8");
+        break;
+      case 'v':
+      case 'V':
+        root.style.setProperty('--top325', "-220"+ "px");
+        ball.style.top = "-220px"
+        ball.style.left = "55px";
+        removeCup("9");
+        break;
+      case 'b':
+      case 'B':
+        root.style.setProperty('--top325', "-160"+ "px");
+        ball.style.top = "-160px"
+        ball.style.left = "0px";
+        removeCup("10");
+        break;
+      default:
+        break;
+    }
+
+    setTimeout(function(){
+        if(cupsOut.length == 10 && restartbuttonvisible == 1){
+            let restartBtn = document.createElement("BUTTON");
+            restartBtn.innerHTML = "Restart";
+            restartBtn.setAttribute("onclick","location.reload()");
+            restartBtn.setAttribute("id","restart");
+            document.body.appendChild(restartBtn);
+            restartbuttonvisible = 2;
+            ball.style.top = "0px";
+            ball.style.left = "0px";
+        }else{
+          reshot();
+            //let reshootBtn = document.createElement("BUTTON");
+            //reshootBtn.innerHTML = "Reshoot";
+            //reshootBtn.setAttribute("onclick","reshot()");
+            //reshootBtn.setAttribute("id","reshoot");
+            //document.body.appendChild(reshootBtn);
+        }
+    },1000);
+}
+
+//Cup entfernen bei Treffer
+function removeCup(cup){
+    let element = "cup".concat(cup);
+    let alreadyExists = cupsOut.includes(cup);
+
+    if(alreadyExists==false){
+        cupsOut.push(cup);
+    }
+    setTimeout(function(){
+ document.getElementById(element).classList.add("fadeAway");
+},1000);
+}
+
+
+function reshot(){
+    //document.getElementById("reshoot").remove();
+    ball.classList.remove("Shoot");
+    ball.style.top = "0px";
+    ball.style.left = "0px";
+
+    //root.style.setProperty('--top325', "0"+ "px");
+    //setTimeout(function(){
+    //    html.setAttribute("onclick", "shoot()");
+    //},1000);
+}
+
+
+
+// Cup Positionen + Toleranz
+//Cup 1: -20<topInt && topInt<20 && -125<leftInt && leftInt<-60
+//Cup 2: -20<topInt && topInt<20 && -40<leftInt && leftInt<40
+//Cup 3: -20<topInt && topInt<20 && 60<leftInt && leftInt<125
+//Cup 4: 60<topInt && topInt<100 && -90<leftInt && leftInt<-25
+//Cup 5: 60<topInt && topInt<100 && 15<leftInt && leftInt<80
+//Cup 6: 140<topInt && topInt<180 && -45<leftInt && leftInt<45

Output/routes/index.js

@@ -3,7 +3,7 @@ var router = express.Router();
 
 /* GET home page. */
 router.get('/', function(req, res) {
-  res.render('index', { title: 'Tic Tac Toe' });
+  res.render('index', { title: 'Beer Pong' });
 });
 
 module.exports = router;

Output/views/error.jade

@@ -1,6 +0,0 @@
-extends layout
-
-block content
-  h1= message
-  h2= error.status
-  pre #{error.stack}

Output/views/index.jade

@@ -1,20 +1,23 @@
 extends layout 
 
 block content
-    .container
+   .cups
-        .row
+      .tisch
-            .col-sm-3.col-sm-offset-3.scoreBoard
+        img(src='bierbankgarnitur_ausg.png')
-                h1
+      .row.row1
-                    span#p1Score
+        img#cup1.cup.cup1(src='cup.png' alt='')
-            .col-sm-3.scoreBoard
+        img#cup2.cup.cup2(src='cup.png' alt='')
-                h1.text-right
+        img#cup3.cup.cup3(src='cup.png' alt='')
-                    span#p2Score
+        img#cup4.cup.cup4(src='cup.png' alt='')
-        .row
+      .row.row2
-            .col-sm-6.col-sm-offset-3#gameBoard
+        img#cup5.cup.cup5(src='cup.png' alt='')
-                h1.text-center.colorDark Enter your name
+        img#cup6.cup.cup6(src='cup.png' alt='')
-                .panel.panel-danger
+        img#cup7.cup.cup7(src='cup.png' alt='')
-                      .panel-body
+      .row.row3
-                        .input-group
+        img#cup8.cup.cup8(src='cup.png' alt='')
-                            input#nickname.form-control.input-lg( autofocus )
+        img#cup9.cup.cup9(src='cup.png' alt='')
-                            span.input-group-btn
+      .row.row4
-                                button#startBtn.btn.btn-lg.btn-danger PLAY!
+        img#cup10.cup.cup10(src='cup.png' alt='')
+    #shooter.shooter
+      svg#ball.ball
+        ellipse(cx='25' cy='25' rx='24' ry='24')

Output/views/layout.jade

@@ -1,13 +1,14 @@
 doctype html
-html( lang="en" )
+html(lang='en' onkeypress='shoot(event)')
   head
-        meta( charset='utf-8' )
+    meta(charset='UTF-8')
     meta( http-equiv='X-UA-Compatible', content='IE=edge' )
-        meta( name='viewport', content='width=device-width, initial-scale=1.0' )
+    meta(name='viewport' content='width=device-width, initial-scale=1.0')
     title= title
-        link(rel='stylesheet', href='/css/bootstrap.min.css')
+    link(rel='stylesheet' href='/css/style.css')
-        link(rel='stylesheet', href='/css/style.css')
+    link(rel='icon' href='cup.png')
+
 body
     block content
-    script(src='/js/Board.js')
+    script(src='/js/index.js')
-    script(src='/js/app.js')
+    script(src='/js/script.js')