diff --git a/assets/css/src/style.scss b/assets/css/src/style.scss index 9ca8214..34dd50d 100644 --- a/assets/css/src/style.scss +++ b/assets/css/src/style.scss @@ -12,8 +12,8 @@ $bgcolor: #2f6f2a; $line: 0.2rem; @mixin border { - border-radius: 0.25em; - border: 0.3em black solid; + border-radius: 0.5rem; + border: 0.3rem black solid; } @mixin button { @@ -193,49 +193,12 @@ h1,h2,h3,h4,h5,h6{ } } -body.home{ - header{ - display: flex; - justify-content: center; - align-items: center; - height: 42%; - &>img{ - display: block; - width: 50%; - height: auto; - } - } - h1{ - text-align: center; - color: white; - font-size: 2.6rem; - text-shadow: $shadow; - } - .menu{ - flex-grow: 1; - display: flex; - align-items: center; - padding-bottom: 7.5rem; - - .mainmenu{ - width: 100%; - display: flex; - align-items: center; - flex-direction: column; - justify-content: center; - h1{ - margin-bottom: 1em; - } - } - - } -} - nav.list{ display: flex; justify-content: center; flex-grow: 1; + width: 100%; &.horizontal{ flex-direction: row; @@ -257,12 +220,12 @@ nav.list{ // Elements //////////////////////////////////////////////////////////////////////////////// - .element{ @include border; border-width: 0.3rem; background-color: $bg; cursor: pointer; + box-shadow: 0.25rem 0.25rem 1rem rgba(0,0,0, 0.3); &:focus, &:hover{ outline: none; @@ -283,6 +246,7 @@ nav.list{ justify-content: flex-start; align-items: center; padding: 0.7em; + height: 4.5em; h2{ font-size: 1.3em; @@ -300,13 +264,48 @@ nav.list{ } } + &.scorer{ + @include button-text; + display: flex; + justify-content: flex-start; + align-items: center; + padding: 0.7em; + height: 4.5em; + + .player{ + display: flex; + justify-content: flex-start; + align-items: center; + min-width: 0; + flex-basis: 0; + flex-grow: 1; + text-align: left; + + h2{ + font-size: 1.3em; + } + + &>*{ + margin-right: 1em; + } + + img{ + height: 3em; + aspect-ratio: 1/1; + object-position: top; + object-fit: cover; + } + } + + } + &.plain{ @include button-text; padding: 1rem 2rem; justify-content: center; align-items: center; - box-shadow: 0.25rem 0.25rem 1rem rgba(0,0,0, 0.3); font-size: 1.6em; + &:hover,&:focus{ background-color: rgba(0, 0, 0, 0.2); border-color: $orange; @@ -319,9 +318,7 @@ nav.list{ background-color: darken($bg, 5%); } } - &.player { - height: 4.5em; - } + &.square{ font-size: 1rem; width: 20em; @@ -365,9 +362,52 @@ nav.list{ } } +//////////////////////////////////////////////////////////////////////////////// +// Home +//////////////////////////////////////////////////////////////////////////////// + +body.home{ + header{ + display: flex; + justify-content: center; + align-items: center; + height: 42%; + &>img{ + display: block; + width: 50%; + height: auto; + } + } + h1{ + text-align: center; + color: white; + font-size: 2.6rem; + text-shadow: $shadow; + } + .menu{ + flex-grow: 1; + display: flex; + align-items: center; + padding-bottom: 7.5rem; + + .mainmenu{ + width: 60%; + margin: 0 auto; + display: flex; + align-items: center; + flex-direction: column; + justify-content: center; + h1{ + margin-bottom: 1em; + } + } + + } +} + //////////////////////////////////////////////////////////////////////////////// -// Game Setup +// Game //////////////////////////////////////////////////////////////////////////////// body.xoi{ @@ -402,8 +442,8 @@ body.xoi{ grid-template-columns: 3fr 3fr 2fr 3fr 3fr; grid-template-rows: 11.5rem 52rem 4rem; grid-template-areas: - "player1 toGo1 score toGo2 player2" - "player1 game game game player2" + "scorer1 toGo1 score toGo2 scorer2" + "scorer1 game game game scorer2" "navi navi navi navi navi" ; background-color: black; @@ -460,19 +500,77 @@ body.xoi{ } .player{ background-color: $bgcolor; - margin-bottom: $line/2; + margin-bottom: calc($line/2); + + &.team{ + $anim: 0.3s linear; + .images{ + position: relative; + left: 0; + top: 0; + width: 100%; + padding-bottom: 128.5714286%; + background-color: #737373; + img{ + transform: translate(24%,0) scale(0.42); + position: absolute; + left: 0; + top: 0; + transition: transform $anim, box-shadow $anim, z-index $anim; + z-index: 10; + box-shadow: 0.6rem 0.6rem 0.6rem rgba(0, 0, 0, 0.4); + } + img:nth-child(1){ + transform: translate(-24%,0) scale(0.42); + } + img:nth-child(1).inactive{ + transform: translate(-25%,25%) scale(0.35); + } + img.inactive{ + transform: translate(25%,25%) scale(0.35); + } + img.active{ + box-shadow: 0rem 0rem 0rem #000; + transform: scale(1); + z-index: 1; + } + } + .titles{ + display: grid; + & > *{ + grid-column: 1; + grid-row: 1; + } + .title{ + display: flex; + flex-direction: column; + justify-content: center; + + h2, h3{ + opacity: 0; + } + &.active{ + h2, h3{ + transition: opacity $anim; + opacity: 1; + } + } + } + } + } - &.player1{ - grid-area: player1; + &.scorer1{ + grid-area: scorer1; } - &.player2{ - grid-area: player2; + &.scorer2{ + grid-area: scorer2; } img{ width: 100%; aspect-ratio: 35/45; object-fit: cover; } + h2, h3{ text-align: center; margin: 0.2em; @@ -524,8 +622,6 @@ body.xoi{ background: white; color: black; margin: 0 0 $line $line; - width: calc(100% - $line); - height: calc(100% - $line); border: 0.15em transparent solid; display: flex; justify-content: center; @@ -541,17 +637,17 @@ body.xoi{ color: white; text-shadow: $text-shadow; } - &.player1.points{ + &.scorer1.points{ grid-column: 1; } - &.player1.toGo{ + &.scorer1.toGo{ grid-column: 2; font-size: 1.6rem; } - &.player2.points{ + &.scorer2.points{ grid-column: 4; } - &.player2.toGo{ + &.scorer2.toGo{ grid-column: 5; margin-right: $line; // width: calc(100% - 2*$line); @@ -586,7 +682,7 @@ body.xoi{ .nav{ grid-area: navi; background-color: $bgcolor; - margin-top: $line/2; + margin-top: calc($line/2); display: flex; justify-content: space-evenly; align-items: center; diff --git a/assets/css/style.min.css b/assets/css/style.min.css index b852581..bc7ee9e 100644 --- a/assets/css/style.min.css +++ b/assets/css/style.min.css @@ -1 +1 @@ -html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}@font-face{font-display:swap;font-family:'Open Sans';font-style:normal;font-weight:300;src:url("../fonts/opensans/open-sans-v40-latin-300.woff2") format("woff2")}@font-face{font-display:swap;font-family:'Open Sans';font-style:italic;font-weight:300;src:url("../fonts/opensans/open-sans-v40-latin-300italic.woff2") format("woff2")}@font-face{font-display:swap;font-family:'Open Sans';font-style:normal;font-weight:400;src:url("../fonts/opensans/open-sans-v40-latin-regular.woff2") format("woff2")}@font-face{font-display:swap;font-family:'Open Sans';font-style:italic;font-weight:400;src:url("../fonts/opensans/open-sans-v40-latin-italic.woff2") format("woff2")}@font-face{font-display:swap;font-family:'Open Sans';font-style:normal;font-weight:500;src:url("../fonts/opensans/open-sans-v40-latin-500.woff2") format("woff2")}@font-face{font-display:swap;font-family:'Open Sans';font-style:italic;font-weight:500;src:url("../fonts/opensans/open-sans-v40-latin-500italic.woff2") format("woff2")}@font-face{font-display:swap;font-family:'Open Sans';font-style:normal;font-weight:600;src:url("../fonts/opensans/open-sans-v40-latin-600.woff2") format("woff2")}@font-face{font-display:swap;font-family:'Open Sans';font-style:italic;font-weight:600;src:url("../fonts/opensans/open-sans-v40-latin-600italic.woff2") format("woff2")}@font-face{font-display:swap;font-family:'Open Sans';font-style:normal;font-weight:700;src:url("../fonts/opensans/open-sans-v40-latin-700.woff2") format("woff2")}@font-face{font-display:swap;font-family:'Open Sans';font-style:italic;font-weight:700;src:url("../fonts/opensans/open-sans-v40-latin-700italic.woff2") format("woff2")}@font-face{font-display:swap;font-family:'Open Sans';font-style:normal;font-weight:800;src:url("../fonts/opensans/open-sans-v40-latin-800.woff2") format("woff2")}@font-face{font-display:swap;font-family:'Open Sans';font-style:italic;font-weight:800;src:url("../fonts/opensans/open-sans-v40-latin-800italic.woff2") format("woff2")}*{box-sizing:border-box;margin:0;padding:0}:root{font-size:Min(1.11111vw, 1.48148vh)}body{margin:0;font-family:"Open Sans";background-color:black;display:flex;justify-content:center;align-items:center;height:100vh;color:white;display:flex;flex-direction:column;overflow:hidden}input{font-family:"Open Sans"}main{border-left:0.2rem solid black;border-right:0.2rem solid black;height:67.5rem;width:90rem;background-color:#2f6f2a;display:flex;flex-direction:column}h1,h2,h3,h4,h5,h6{font-weight:bold}.game .body{height:48rem}.center{display:flex;justify-content:center}.hidden{display:none !important}.label{font-size:1.8em;padding:0.3em 0;font-weight:bold;display:block}.overlay{border-radius:0.25em;border:0.3em black solid;position:absolute;top:50%;left:50%;z-index:1000;transform:translate(-50%, -50%);width:45rem;max-height:60rem;overflow-y:auto;background-color:#2f6f2a;padding:2em 1.7em}.overlay::-webkit-scrollbar{width:0}.dialog{flex-grow:1;display:flex;flex-direction:column;justify-content:center;align-items:center;width:auto}.dialog h2{font-size:2.4em;margin-bottom:0.5em;text-shadow:0.2rem 0.2rem 0.4rem #000}.dialog p{font-size:1.4em;margin-bottom:1em;text-shadow:0.2rem 0.2rem 0.4rem #000}body.home header{display:flex;justify-content:center;align-items:center;height:42%}body.home header>img{display:block;width:50%;height:auto}body.home h1{text-align:center;color:white;font-size:2.6rem;text-shadow:0.2rem 0.2rem 0.4rem #000}body.home .menu{flex-grow:1;display:flex;align-items:center;padding-bottom:7.5rem}body.home .menu .mainmenu{width:100%;display:flex;align-items:center;flex-direction:column;justify-content:center}body.home .menu .mainmenu h1{margin-bottom:1em}nav.list{display:flex;justify-content:center;flex-grow:1}nav.list.horizontal{flex-direction:row;justify-content:space-evenly}nav.list.horizontal>*+*{margin-left:1em}nav.list.vertical{flex-direction:column}nav.list.vertical>*+*{margin-top:1em}.element{border-radius:0.25em;border:0.3em black solid;border-width:0.3rem;background-color:#214d1d;cursor:pointer}.element:focus,.element:hover{outline:none;border-color:orange}.element.input{font-size:2em;padding:0.3em;background-color:white;color:black;display:block;width:100%}.element.player{display:flex;justify-content:flex-start;align-items:center;padding:0.7em}.element.player h2{font-size:1.3em}.element.player>*{margin-right:1em}.element.player img{height:3em;aspect-ratio:1/1;object-position:top;object-fit:cover}.element.plain{color:white;font-weight:bold;padding:0.3em 0.5em;text-align:center;display:flex;align-items:flex-end;text-shadow:0.2rem 0.2rem 0.4rem #000;font-family:"Open Sans";padding:1rem 2rem;justify-content:center;align-items:center;box-shadow:0.25rem 0.25rem 1rem rgba(0,0,0,0.3);font-size:1.6em}.element.plain:hover,.element.plain:focus{background-color:rgba(0,0,0,0.2);border-color:orange;outline:none}.element.plain.back{background-color:#5E716A}.element.plain.new{background-color:#193a16}.element.player{height:4.5em}.element.square{font-size:1rem;width:20em;height:20em;padding:2.5em 1.25em;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#214d1d;box-shadow:0.25em 0.25em 1em rgba(0,0,0,0.3);cursor:pointer}.element.square h2{color:white;font-weight:bold;padding:0.3em 0.5em;text-align:center;display:flex;align-items:flex-end;text-shadow:0.2rem 0.2rem 0.4rem #000;font-family:"Open Sans";font-size:2em;padding:0.6em 0 0 0}.element.square:hover,.element.square:focus{background-color:rgba(0,0,0,0.2);border-color:orange;outline:none}.element.square .icon{width:65%;height:auto}.element.square .icon svg{width:100%;aspect-ratio:1/1;object-fit:cover;fill:white;filter:drop-shadow(0.2rem 0.2rem 0.4rem #000)}.element.square .icon img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:top;filter:drop-shadow(0.2rem 0.2rem 0.4rem #000)}body.xoi main{display:flex;justify-content:center}body.xoi main .gamesetup{width:65%;margin:0 auto}body.xoi main .gamesetup h1{font-size:3em;text-align:center;margin-bottom:0.5em}body.xoi main .gamesetup .menu>*{margin-bottom:1.3em}body.xoi main .playerselect>h2{font-size:1.8em;margin-bottom:0.7em;text-align:center}body.xoi main .xoi{display:grid;height:100%;grid-template-columns:3fr 3fr 2fr 3fr 3fr;grid-template-rows:11.5rem 52rem 4rem;grid-template-areas:"player1 toGo1 score toGo2 player2" "player1 game game game player2" "navi navi navi navi navi";background-color:black}body.xoi main .xoi .bigToGo{margin:.2rem;background-color:white;border:0.7rem solid black;color:black;font-weight:bold;font-size:7.5em;display:flex;justify-content:center;align-items:center}body.xoi main .xoi .bigToGo.active{border-color:orange}body.xoi main .xoi .bigToGo.one{grid-area:toGo1}body.xoi main .xoi .bigToGo.two{grid-area:toGo2}body.xoi main .xoi .score{margin:.2rem 0;grid-area:score;color:white;text-shadow:0.1rem 0.1rem 0.2rem rgba(0,0,0,0.8);background-color:#2f6f2a;display:flex;flex-direction:column;justify-content:space-evenly}body.xoi main .xoi .score>div{display:flex;justify-content:space-evenly;align-items:center}body.xoi main .xoi .score>div h2,body.xoi main .xoi .score>div h3{margin:0;text-align:center;font-size:1.3rem}body.xoi main .xoi .score>div h3{font-size:1.1rem}body.xoi main .xoi .score>div>h2{font-size:3.2rem}body.xoi main .xoi .score>div h2:nth-child(2){order:10}body.xoi main .xoi .player{background-color:#2f6f2a;margin-bottom:.1rem}body.xoi main .xoi .player.player1{grid-area:player1}body.xoi main .xoi .player.player2{grid-area:player2}body.xoi main .xoi .player img{width:100%;aspect-ratio:35/45;object-fit:cover}body.xoi main .xoi .player h2,body.xoi main .xoi .player h3{text-align:center;margin:0.2em;text-shadow:0.1rem 0.1rem 0.2rem rgba(0,0,0,0.8)}body.xoi main .xoi .player h2{font-size:1.8em}body.xoi main .xoi .player h3{font-size:1.2em}body.xoi main .xoi .player .stats{display:grid;grid-template-columns:auto 1fr 1fr 1fr;grid-auto-rows:auto;margin:1em 0.6em;text-shadow:0.1rem 0.1rem 0.2rem rgba(0,0,0,0.8)}body.xoi main .xoi .player .stats .row{display:contents;font-size:1.4em}body.xoi main .xoi .player .stats .row.header{font-weight:bold}body.xoi main .xoi .player .stats .row :nth-child(2),body.xoi main .xoi .player .stats .row :nth-child(3),body.xoi main .xoi .player .stats .row :nth-child(4){text-align:center}body.xoi main .xoi .game{grid-area:game;display:grid;grid-template-columns:1fr;grid-template-rows:4.72727272rem 47.272727273rem}body.xoi main .xoi .game>div{display:grid;grid-template-columns:4fr 4fr 2fr 4fr 4fr;grid-auto-rows:4.72727272rem;overflow-y:scroll;grid-auto-flow:dense;height:100%}body.xoi main .xoi .game>div::-webkit-scrollbar{width:0}body.xoi main .xoi .game>div>div{font-size:2rem;text-align:center;background:white;color:black;margin:0 0 .2rem .2rem;width:calc(100% - $line);height:calc(100% - $line);border:0.15em transparent solid;display:flex;justify-content:center;align-items:center}body.xoi main .xoi .game>div>div.headding{background-color:#2f6f2a;color:white;text-shadow:0.1rem 0.1rem 0.2rem rgba(0,0,0,0.8)}body.xoi main .xoi .game>div>div.rounds{grid-column:3;background-color:#2f6f2a;color:white;text-shadow:0.1rem 0.1rem 0.2rem rgba(0,0,0,0.8)}body.xoi main .xoi .game>div>div.player1.points{grid-column:1}body.xoi main .xoi .game>div>div.player1.toGo{grid-column:2;font-size:1.6rem}body.xoi main .xoi .game>div>div.player2.points{grid-column:4}body.xoi main .xoi .game>div>div.player2.toGo{grid-column:5;margin-right:.2rem;font-size:1.6rem}body.xoi main .xoi .game>div>div.input{padding:0;border:0.15em orange solid}body.xoi main .xoi .game>div>div.input input{text-align:center;box-sizing:border-box;font-family:inherit;padding:0.1em;border:none;width:100%;height:100%;font-size:1em}body.xoi main .xoi .game>div>div.input input:focus{outline:none}body.xoi main .xoi .game>div>div.headding.rounds{font-size:1.4rem}body.xoi main .xoi .nav{grid-area:navi;background-color:#2f6f2a;margin-top:.1rem;display:flex;justify-content:space-evenly;align-items:center}body.xoi main .xoi .nav span{font-size:2em} +html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}@font-face{font-display:swap;font-family:"Open Sans";font-style:normal;font-weight:300;src:url("../fonts/opensans/open-sans-v40-latin-300.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Open Sans";font-style:italic;font-weight:300;src:url("../fonts/opensans/open-sans-v40-latin-300italic.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Open Sans";font-style:normal;font-weight:400;src:url("../fonts/opensans/open-sans-v40-latin-regular.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Open Sans";font-style:italic;font-weight:400;src:url("../fonts/opensans/open-sans-v40-latin-italic.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Open Sans";font-style:normal;font-weight:500;src:url("../fonts/opensans/open-sans-v40-latin-500.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Open Sans";font-style:italic;font-weight:500;src:url("../fonts/opensans/open-sans-v40-latin-500italic.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Open Sans";font-style:normal;font-weight:600;src:url("../fonts/opensans/open-sans-v40-latin-600.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Open Sans";font-style:italic;font-weight:600;src:url("../fonts/opensans/open-sans-v40-latin-600italic.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Open Sans";font-style:normal;font-weight:700;src:url("../fonts/opensans/open-sans-v40-latin-700.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Open Sans";font-style:italic;font-weight:700;src:url("../fonts/opensans/open-sans-v40-latin-700italic.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Open Sans";font-style:normal;font-weight:800;src:url("../fonts/opensans/open-sans-v40-latin-800.woff2") format("woff2")}@font-face{font-display:swap;font-family:"Open Sans";font-style:italic;font-weight:800;src:url("../fonts/opensans/open-sans-v40-latin-800italic.woff2") format("woff2")}*{box-sizing:border-box;margin:0;padding:0}:root{font-size:min(1.111111111vw,1.481481481vh)}body{margin:0;font-family:"Open Sans";background-color:#000;display:flex;justify-content:center;align-items:center;height:100vh;color:#fff;display:flex;flex-direction:column;overflow:hidden}input{font-family:"Open Sans"}main{border-left:.2rem solid #000;border-right:.2rem solid #000;height:67.5rem;width:90rem;background-color:#2f6f2a;display:flex;flex-direction:column}h1,h2,h3,h4,h5,h6{font-weight:bold}.game .body{height:48rem}.center{display:flex;justify-content:center}.hidden{display:none !important}.label{font-size:1.8em;padding:.3em 0;font-weight:bold;display:block}.overlay{border-radius:.5rem;border:.3rem #000 solid;position:absolute;top:50%;left:50%;z-index:1000;transform:translate(-50%, -50%);width:45rem;max-height:60rem;overflow-y:auto;background-color:#2f6f2a;padding:2em 1.7em}.overlay::-webkit-scrollbar{width:0}.dialog{flex-grow:1;display:flex;flex-direction:column;justify-content:center;align-items:center;width:auto}.dialog h2{font-size:2.4em;margin-bottom:.5em;text-shadow:.2rem .2rem .4rem #000}.dialog p{font-size:1.4em;margin-bottom:1em;text-shadow:.2rem .2rem .4rem #000}nav.list{display:flex;justify-content:center;flex-grow:1;width:100%}nav.list.horizontal{flex-direction:row;justify-content:space-evenly}nav.list.horizontal>*+*{margin-left:1em}nav.list.vertical{flex-direction:column}nav.list.vertical>*+*{margin-top:1em}.element{border-radius:.5rem;border:.3rem #000 solid;border-width:.3rem;background-color:#214d1d;cursor:pointer;box-shadow:.25rem .25rem 1rem rgba(0,0,0,.3)}.element:focus,.element:hover{outline:none;border-color:orange}.element.input{font-size:2em;padding:.3em;background-color:#fff;color:#000;display:block;width:100%}.element.player{display:flex;justify-content:flex-start;align-items:center;padding:.7em;height:4.5em}.element.player h2{font-size:1.3em}.element.player>*{margin-right:1em}.element.player img{height:3em;aspect-ratio:1/1;object-position:top;object-fit:cover}.element.scorer{color:#fff;font-weight:bold;padding:.3em .5em;text-align:center;display:flex;align-items:flex-end;text-shadow:.2rem .2rem .4rem #000;font-family:"Open Sans";display:flex;justify-content:flex-start;align-items:center;padding:.7em;height:4.5em}.element.scorer .player{display:flex;justify-content:flex-start;align-items:center;min-width:0;flex-basis:0;flex-grow:1;text-align:left}.element.scorer .player h2{font-size:1.3em}.element.scorer .player>*{margin-right:1em}.element.scorer .player img{height:3em;aspect-ratio:1/1;object-position:top;object-fit:cover}.element.plain{color:#fff;font-weight:bold;padding:.3em .5em;text-align:center;display:flex;align-items:flex-end;text-shadow:.2rem .2rem .4rem #000;font-family:"Open Sans";padding:1rem 2rem;justify-content:center;align-items:center;font-size:1.6em}.element.plain:hover,.element.plain:focus{background-color:rgba(0,0,0,.2);border-color:orange;outline:none}.element.plain.back{background-color:#5e716a}.element.plain.new{background-color:#193a16}.element.square{font-size:1rem;width:20em;height:20em;padding:2.5em 1.25em;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#214d1d;box-shadow:.25em .25em 1em rgba(0,0,0,.3);cursor:pointer}.element.square h2{color:#fff;font-weight:bold;padding:.3em .5em;text-align:center;display:flex;align-items:flex-end;text-shadow:.2rem .2rem .4rem #000;font-family:"Open Sans";font-size:2em;padding:.6em 0 0 0}.element.square:hover,.element.square:focus{background-color:rgba(0,0,0,.2);border-color:orange;outline:none}.element.square .icon{width:65%;height:auto}.element.square .icon svg{width:100%;aspect-ratio:1/1;object-fit:cover;fill:#fff;filter:drop-shadow(0.2rem 0.2rem 0.4rem #000)}.element.square .icon img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:top;filter:drop-shadow(0.2rem 0.2rem 0.4rem #000)}body.home header{display:flex;justify-content:center;align-items:center;height:42%}body.home header>img{display:block;width:50%;height:auto}body.home h1{text-align:center;color:#fff;font-size:2.6rem;text-shadow:.2rem .2rem .4rem #000}body.home .menu{flex-grow:1;display:flex;align-items:center;padding-bottom:7.5rem}body.home .menu .mainmenu{width:60%;margin:0 auto;display:flex;align-items:center;flex-direction:column;justify-content:center}body.home .menu .mainmenu h1{margin-bottom:1em}body.xoi main{display:flex;justify-content:center}body.xoi main .gamesetup{width:65%;margin:0 auto}body.xoi main .gamesetup h1{font-size:3em;text-align:center;margin-bottom:.5em}body.xoi main .gamesetup .menu>*{margin-bottom:1.3em}body.xoi main .playerselect>h2{font-size:1.8em;margin-bottom:.7em;text-align:center}body.xoi main .xoi{display:grid;height:100%;grid-template-columns:3fr 3fr 2fr 3fr 3fr;grid-template-rows:11.5rem 52rem 4rem;grid-template-areas:"scorer1 toGo1 score toGo2 scorer2" "scorer1 game game game scorer2" "navi navi navi navi navi";background-color:#000}body.xoi main .xoi .bigToGo{margin:.2rem;background-color:#fff;border:.7rem solid #000;color:#000;font-weight:bold;font-size:7.5em;display:flex;justify-content:center;align-items:center}body.xoi main .xoi .bigToGo.active{border-color:orange}body.xoi main .xoi .bigToGo.one{grid-area:toGo1}body.xoi main .xoi .bigToGo.two{grid-area:toGo2}body.xoi main .xoi .score{margin:.2rem 0;grid-area:score;color:#fff;text-shadow:.1rem .1rem .2rem rgba(0,0,0,.8);background-color:#2f6f2a;display:flex;flex-direction:column;justify-content:space-evenly}body.xoi main .xoi .score>div{display:flex;justify-content:space-evenly;align-items:center}body.xoi main .xoi .score>div h2,body.xoi main .xoi .score>div h3{margin:0;text-align:center;font-size:1.3rem}body.xoi main .xoi .score>div h3{font-size:1.1rem}body.xoi main .xoi .score>div>h2{font-size:3.2rem}body.xoi main .xoi .score>div h2:nth-child(2){order:10}body.xoi main .xoi .player{background-color:#2f6f2a;margin-bottom:.1rem}body.xoi main .xoi .player.team .images{position:relative;left:0;top:0;width:100%;padding-bottom:128.5714286%;background-color:#737373}body.xoi main .xoi .player.team .images img{transform:translate(24%, 0) scale(0.42);position:absolute;left:0;top:0;transition:transform .3s linear,box-shadow .3s linear,z-index .3s linear;z-index:10;box-shadow:.6rem .6rem .6rem rgba(0,0,0,.4)}body.xoi main .xoi .player.team .images img:nth-child(1){transform:translate(-24%, 0) scale(0.42)}body.xoi main .xoi .player.team .images img:nth-child(1).inactive{transform:translate(-25%, 25%) scale(0.35)}body.xoi main .xoi .player.team .images img.inactive{transform:translate(25%, 25%) scale(0.35)}body.xoi main .xoi .player.team .images img.active{box-shadow:0rem 0rem 0rem #000;transform:scale(1);z-index:1}body.xoi main .xoi .player.team .titles{display:grid}body.xoi main .xoi .player.team .titles>*{grid-column:1;grid-row:1}body.xoi main .xoi .player.team .titles .title{display:flex;flex-direction:column;justify-content:center}body.xoi main .xoi .player.team .titles .title h2,body.xoi main .xoi .player.team .titles .title h3{opacity:0}body.xoi main .xoi .player.team .titles .title.active h2,body.xoi main .xoi .player.team .titles .title.active h3{transition:opacity .3s linear;opacity:1}body.xoi main .xoi .player.scorer1{grid-area:scorer1}body.xoi main .xoi .player.scorer2{grid-area:scorer2}body.xoi main .xoi .player img{width:100%;aspect-ratio:35/45;object-fit:cover}body.xoi main .xoi .player h2,body.xoi main .xoi .player h3{text-align:center;margin:.2em;text-shadow:.1rem .1rem .2rem rgba(0,0,0,.8)}body.xoi main .xoi .player h2{font-size:1.8em}body.xoi main .xoi .player h3{font-size:1.2em}body.xoi main .xoi .player .stats{display:grid;grid-template-columns:auto 1fr 1fr 1fr;grid-auto-rows:auto;margin:1em .6em;text-shadow:.1rem .1rem .2rem rgba(0,0,0,.8)}body.xoi main .xoi .player .stats .row{display:contents;font-size:1.4em}body.xoi main .xoi .player .stats .row.header{font-weight:bold}body.xoi main .xoi .player .stats .row :nth-child(2),body.xoi main .xoi .player .stats .row :nth-child(3),body.xoi main .xoi .player .stats .row :nth-child(4){text-align:center}body.xoi main .xoi .game{grid-area:game;display:grid;grid-template-columns:1fr;grid-template-rows:4.72727272rem 47.272727273rem}body.xoi main .xoi .game>div{display:grid;grid-template-columns:4fr 4fr 2fr 4fr 4fr;grid-auto-rows:4.72727272rem;overflow-y:scroll;grid-auto-flow:dense;height:100%}body.xoi main .xoi .game>div::-webkit-scrollbar{width:0}body.xoi main .xoi .game>div>div{font-size:2rem;text-align:center;background:#fff;color:#000;margin:0 0 .2rem .2rem;border:.15em rgba(0,0,0,0) solid;display:flex;justify-content:center;align-items:center}body.xoi main .xoi .game>div>div.headding{background-color:#2f6f2a;color:#fff;text-shadow:.1rem .1rem .2rem rgba(0,0,0,.8)}body.xoi main .xoi .game>div>div.rounds{grid-column:3;background-color:#2f6f2a;color:#fff;text-shadow:.1rem .1rem .2rem rgba(0,0,0,.8)}body.xoi main .xoi .game>div>div.scorer1.points{grid-column:1}body.xoi main .xoi .game>div>div.scorer1.toGo{grid-column:2;font-size:1.6rem}body.xoi main .xoi .game>div>div.scorer2.points{grid-column:4}body.xoi main .xoi .game>div>div.scorer2.toGo{grid-column:5;margin-right:.2rem;font-size:1.6rem}body.xoi main .xoi .game>div>div.input{padding:0;border:.15em orange solid}body.xoi main .xoi .game>div>div.input input{text-align:center;box-sizing:border-box;font-family:inherit;padding:.1em;border:none;width:100%;height:100%;font-size:1em}body.xoi main .xoi .game>div>div.input input:focus{outline:none}body.xoi main .xoi .game>div>div.headding.rounds{font-size:1.4rem}body.xoi main .xoi .nav{grid-area:navi;background-color:#2f6f2a;margin-top:.1rem;display:flex;justify-content:space-evenly;align-items:center}body.xoi main .xoi .nav span{font-size:2em} \ No newline at end of file diff --git a/assets/js/components/init.js b/assets/js/components/init.js index e1d9041..45bb1f3 100644 --- a/assets/js/components/init.js +++ b/assets/js/components/init.js @@ -1,11 +1,11 @@ import list from "./list.js"; import playerElem from "./playerElem.js"; +import scorerElem from "./scorerElem.js"; import plainElem from "./plainElem.js"; import squareElem from "./squareElem.js"; import inputElem from "./inputElem.js"; -import playerSelect from "./playerSelect.js"; import select from "./select.js"; // import overlay from "./overlay.js"; import dialog from "./dialog.js"; @@ -14,11 +14,11 @@ export default (app) => { app.component("d-list", list); app.component("d-playerElem", playerElem); + app.component("d-scorerElem", scorerElem); app.component("d-plainElem", plainElem); app.component("d-squareElem", squareElem); app.component("d-inputElem", inputElem); app.component("d-select", select); - - app.component("d-playerSelect", playerSelect); + app.component("d-dialog", dialog); } diff --git a/assets/js/components/list.js b/assets/js/components/list.js index e5589ad..ae0cfda 100644 --- a/assets/js/components/list.js +++ b/assets/js/components/list.js @@ -4,11 +4,12 @@ import { getId } from "../handlers.js"; const html = (v) => { return v[0] }; export default { - props: ['elements', 'type', "withshortkey"], + props: ['elements', 'title', 'type', "withshortkey"], setup(props) { return { } }, template: html` +