Merge remote-tracking branch 'old/develop' into develop
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful

This commit is contained in:
Settel 2022-11-06 16:01:57 +01:00
commit 9502e70d3a
13 changed files with 194 additions and 8 deletions

View File

@ -1,6 +1,6 @@
{
"name": "knowyt",
"version": "2.7",
"version": "2.8",
"private": true,
"scripts": {
"lint": "tsc-strict",

View File

@ -1,4 +1,5 @@
@import './colors.scss';
@import './media.scss';
$font-primary: 'Wendy One';
$font-secondary: 'Dosis';

View File

@ -0,0 +1,4 @@
$phone-width: 560px;
$phone-max-width: 767px;
$tablet-width: 768px;
$desktop-min-width: 880px;

View File

@ -38,9 +38,15 @@ const editEnd = () => {
</script>
<style lang="scss">
@import '~/assets/css/components';
.collect-quotes {
&__explaination-box {
margin: 16px;
@media (max-width: $phone-width) {
display: none;
}
}
&__quotes {

View File

@ -50,6 +50,10 @@ const players = computed(() => {
margin: 64px 0;
width: 600px;
min-height: 600px;
@media (max-width: $phone-max-width) {
width: 300px;
}
}
&__table-outer-border {
@ -93,6 +97,12 @@ const players = computed(() => {
&__title {
font-family: $font-primary;
font-size: 48px;
@media (max-width: $phone-max-width) {
font-size: 32px;
padding: 20px;
text-align: center;
}
}
&__table-body {
@ -103,6 +113,9 @@ const players = computed(() => {
font-family: $font-secondary;
font-size: 32px;
@media (max-width: $phone-max-width) {
font-size: 24px;
}
}
&__table {

View File

@ -29,16 +29,24 @@ const { $t } = useI18n({
&__message {
flex-grow: 1;
margin: 60px 0 0 200px;
margin: 60px 48px 0 200px;
font-family: $font-secondary;
font-size: 24px;
text-align: center;
color: $text-primary-color;
@media (max-width: $phone-max-width) {
margin: 60px 48px;
}
}
&__players-list {
width: 200px;
margin: 16px 16px 0 0;
@media (max-width: $phone-width) {
display: none;
}
}
}
</style>

View File

@ -51,7 +51,7 @@ const showQuote = ref(false)
window.setTimeout(() => { showQuote.value = true }, 100)
const showSkipButton = computed(() => game.phase === 'select-quote')
const badgeMap = computed(() => {
const badgeMap = {} as { [key: string]: number}
const badgeMap = {} as { [key: string]: number }
if (game.phase === 'reveal-show-count') {
for (const id in round.revelation.votes) {
badgeMap[id] = round.revelation.votes[id].length
@ -61,7 +61,7 @@ const badgeMap = computed(() => {
})
const disabledMap = computed(() => {
const disabledMap = {} as { [key: string]: boolean}
const disabledMap = {} as { [key: string]: boolean }
if (game.phase === 'reveal-source') {
for (const id in round.revelation.sources) {
disabledMap[id] = !round.revelation.sources[id]
@ -71,7 +71,7 @@ const disabledMap = computed(() => {
return disabledMap
})
const showMap = ref({} as { [key: string]: boolean})
const showMap = ref({} as { [key: string]: boolean })
sources.forEach((source, index) => {
window.setTimeout(() => {
showMap.value[source.id] = true
@ -80,6 +80,8 @@ sources.forEach((source, index) => {
</script>
<style lang="scss">
@import '~/assets/css/components';
.playground {
&__container {
display: flex;
@ -92,6 +94,10 @@ sources.forEach((source, index) => {
flex-direction: column;
flex-grow: 1;
margin: 40px;
@media (max-width: $phone-max-width) {
margin: 0;
}
}
&__sources {
@ -99,10 +105,18 @@ sources.forEach((source, index) => {
flex-wrap: wrap;
justify-content: space-around;
gap: 24px 36px;
@media (max-width: $phone-max-width) {
order: 2;
}
}
&__spacer {
flex-grow: 3;
@media (max-width: $phone-max-width) {
flex-grow: 1;
}
}
&__quote {
@ -115,6 +129,10 @@ sources.forEach((source, index) => {
&__show {
opacity: 100%;
}
@media (max-width: $phone-max-width) {
flex-grow: 1;
}
}
&__skip {
@ -127,11 +145,24 @@ sources.forEach((source, index) => {
animation: quote-show 0.5s linear 5s;
animation-fill-mode: forwards;
}
@media (max-width: $phone-max-width) {
order: 3;
margin: 64px 32px;
}
}
&__players-list {
width: 200px;
margin: 16px 16px 0 64px;
@media (max-width: $phone-max-width) {
display: none;
}
@media (max-width: calc($desktop-min-width - 1px)) {
margin-left: 16px;
}
}
}
@ -139,6 +170,7 @@ sources.forEach((source, index) => {
from {
opacity: 0%;
}
to {
opacity: 100%;
}

View File

@ -110,6 +110,12 @@ const keydown = async (ev: KeyboardEvent) => {
border-radius: 0 16px 0 0;
color: $quote-text-color;
@media (max-width: $phone-width) {
width: 240px;
height: 120px;
padding: 16px;
}
&__editable {
cursor: text;
@ -124,14 +130,26 @@ const keydown = async (ev: KeyboardEvent) => {
&__text-short {
font-size: 24px;
@media (max-width: $phone-width) {
font-size: 20px;
}
}
&__text-medium {
font-size: 20px;
@media (max-width: $phone-width) {
font-size: 18px;
}
}
&__text-long {
font-size: 18px;
@media (max-width: $phone-width) {
font-size: 14px;
}
}
}

View File

@ -15,7 +15,7 @@
width: 300px;
height: 150px;
margin: 32px;
padding: 32px;
padding: 28px;
background-color: $quote-new-background-color;
border: $quote-new-border;
border-radius: 0 16px 0 0;
@ -26,6 +26,12 @@
border: $quote-new-hover-border;
color: $quote-new-hover-text-color;
}
@media (max-width: $phone-width) {
width: 240px;
height: 120px;
padding: 12px;
}
}
&__new {

View File

@ -52,6 +52,11 @@ const textSize = computed((): string => {
animation: fade-out 0.3s linear;
animation-fill-mode: forwards;
}
@media (max-width: $phone-max-width) {
width: 360px;
height: 360px;
}
}
&__box1 {
@ -65,6 +70,14 @@ const textSize = computed((): string => {
border: $animationbox-border;
border-radius: 50px;
z-index: 5;
@media (max-width: $phone-max-width) {
left: 54px;
top: 54px;
width: 240px;
height: 240px;
border-width: 6px;
}
}
&__box2 {
@ -77,6 +90,14 @@ const textSize = computed((): string => {
background-color: $animationbox-animation-color;
animation: spin-rev 5s linear infinite;
z-index: 4;
@media (max-width: $phone-max-width) {
left: 50px;
top: 50px;
width: 260px;
height: 260px;
border-radius: 100px;
}
}
&__box3 {
@ -89,6 +110,14 @@ const textSize = computed((): string => {
background-color: $animationbox-animation-color;
z-index: 3;
animation: spin 6s linear infinite;
@media (max-width: $phone-max-width) {
left: 50px;
top: 50px;
width: 260px;
height: 260px;
border-radius: 100px;
}
}
&__text {
@ -117,6 +146,12 @@ const textSize = computed((): string => {
&__popup {
animation: pop 0.5s ease-in-out;
}
@media (max-width: $phone-max-width) {
width: 360px;
height: 360px;
line-height: 360px;
}
}
}

View File

@ -19,6 +19,10 @@
padding: 80px 0;
display: flex;
justify-content: center;
@media (max-width: $phone-max-width) {
padding: 40px 0;
}
}
&__titleborderbox1,
@ -36,6 +40,11 @@
justify-content: center;
align-items: center;
z-index: 3;
@media (max-width: $phone-max-width) {
width: 260px;
height: 140px;
}
}
&__titleborderbox2 {
@ -44,6 +53,12 @@
width: 720px;
height: 120px;
z-index: 2;
@media (max-width: $phone-max-width) {
top: 75px;
width: 300px;
height: 80px;
}
}
&__titleborderbox3 {
@ -52,6 +67,11 @@
width: 760px;
height: 40px;
z-index: 1;
@media (max-width: $phone-max-width) {
top: 95px;
width: 340px;
}
}
&__title {
@ -59,6 +79,11 @@
font-family: $font-primary;
color: $box-primary-text-color;
text-align: center;
@media (max-width: $phone-max-width) {
font-size: 32px;
}
}
}
</style>

View File

@ -76,7 +76,13 @@ const actionLogout = async () => {
padding: 0 16px;
text-align: center;
color: $text-primary-color;
}
&__username {
@media (max-width: $phone-width) {
display: none;
}
}
&__actionbar {
flex-grow: 1;
@ -86,6 +92,12 @@ const actionLogout = async () => {
color: $text-primary-color;
font-size: 24px;
text-align: center;
@media (max-width: $phone-width) {
margin-left: 24px;
text-align: left;
font-size: 20px;
}
}
}
@ -94,6 +106,10 @@ const actionLogout = async () => {
height: calc(64px - 2 * 16px);
margin: 16px 0;
background-color: $topbar-separator-color;
@media (max-width: $phone-width) {
display: none;
}
}
&__logout-button {
@ -104,6 +120,10 @@ const actionLogout = async () => {
&:hover {
color: $text-primary-hover-color;
}
@media (max-width: $phone-width) {
padding-right: 0;
}
}
}
</style>

View File

@ -57,18 +57,36 @@ body {
display: flex;
width: 100%;
height: 120px;
@media (max-width: $phone-max-width) {
margin: 32px 0 0 0;
}
}
&__login,
&__create-team {
width: 320px;
align-self: center;
@media (max-width: $phone-max-width) {
width: auto;
}
}
&__create-team {
@media (max-width: $phone-max-width) {
display: none;
}
}
&__separator {
width: 1px;
margin: 0 48px;
border-left: $box-primary-border;
@media (max-width: $phone-max-width) {
display: none;
}
}
&__space {