settel/knowyt
1
0
Fork 0
Code Issues Pull Requests Packages Releases Activity

Compare commits

base: settel:9e63e101cc631fce4a5d286aae2d43591d2ebae0
Branches Tags
settel:develop
settel:prod
settel:3.4
settel:3.3
settel:2.20
settel:2.19
settel:2.18
settel:2.17
settel:2.16
settel:2.14
...
compare: settel:450319ba35b0fc11790b978d8b86af1124d43239
Branches Tags
settel:develop
settel:prod
settel:3.4
settel:3.3
settel:2.20
settel:2.19
settel:2.18
settel:2.17
settel:2.16
settel:2.14

2 Commits
9e63e101cc ... 450319ba35

Author SHA1 Message Date
Settel
450319ba35 bugfix: fix errors and warnings after library updates
All checks were successful
ci/woodpecker/manual/woodpecker Pipeline was successful
Details
2025-04-17 11:56:47 +02:00
Settel
8a374b7d86 refactor: update to Node 22, update libraries 2025-04-16 22:35:42 +02:00
38 changed files with 7191 additions and 5299 deletions
Show Stats Expand all files Collapse all files

1
.nvmrc Normal file
View File

@ -0,0 +1 @@
22.14

1
Makefile
View File

@ -83,6 +83,7 @@ container-publish:
clean:
rm -rf client/.output/
rm -rf client/.nuxt/
rm -rf client/node_modules/
$(MAKE) -C server clean
rm -f build/files/knowyt build/knowyt-*.tar

4
client/nuxt.config.ts
View File

@ -7,6 +7,10 @@ export default defineNuxtConfig({
srcDir: 'src/',
ssr: false,
telemetry: false,
compatibilityDate: '2025-04-17',
devtools: {
enabled: false,
},
modules: [
'@pinia/nuxt',
'nuxt-icons',

30
client/package.json
View File

@ -10,26 +10,26 @@
"setup": "pnpm install"
},
"devDependencies": {
"@types/node": "^18.19.17",
"@types/node": "^18.19.86",
"http-proxy": "^1.18.1",
"nuxt": "^3.10.2",
"sass": "^1.71.0",
"sass-loader": "^13.3.3",
"typescript-strict-plugin": "^2.3.0",
"webpack": "^5.90.2"
"nuxt": "^3.16.2",
"sass": "^1.86.3",
"sass-loader": "^16.0.5",
"typescript-strict-plugin": "^2.4.4",
"webpack": "^5.99.5"
},
"dependencies": {
"@pinia/nuxt": "^0.4.11",
"@vue/reactivity": "^3.4.19",
"@vue/runtime-core": "^3.4.19",
"@vue/runtime-dom": "^3.4.19",
"@vue/shared": "^3.4.19",
"@pinia/nuxt": "^0.11.0",
"@vue/reactivity": "^3.5.13",
"@vue/runtime-core": "^3.5.13",
"@vue/runtime-dom": "^3.5.13",
"@vue/shared": "^3.5.13",
"nuxt-icons": "^3.2.1",
"ofetch": "^1.3.3",
"ofetch": "^1.4.1",
"query-string": "^8.2.0",
"typescript": "^5.3.3",
"vue": "^3.4.19",
"typescript": "^5.8.3",
"vue": "^3.5.13",
"vue-contenteditable": "^4.1.0",
"vue-router": "^4.2.5"
"vue-router": "^4.5.0"
}
}

11901
client/pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

6
client/src/assets/css/colors.scss
View File

@ -16,7 +16,7 @@ $box-primary-text-color: $text-primary-color;
$box-primary-border: 1px solid #e0e0e0;
$box-primary-disabled-background-color: $box-primary-background-color;
$box-primary-disabled-text-color: darken($box-primary-text-color, 60%);
$box-primary-disabled-text-color: #666666;
$box-primary-disabled-border: $box-primary-border;
// Animation Box
@ -64,7 +64,7 @@ $quote-editmode-background-color: #ffcc88;
$quote-new-background-color: none;
$quote-new-border: 5px dashed #ffffff;
$quote-new-text-color: #ffffff;
$quote-new-hover-background-color: lighten($background-primary-color, 10%);
$quote-new-hover-background-color: #3d3d56;
$quote-new-hover-border: $quote-new-border;
$quote-new-hover-text-color: $quote-new-text-color;
@ -116,6 +116,6 @@ $dialog-box-border: none;
$dialog-box-text-color: #ffffff;
// Engine Debug
$debug-background-color: lighten($background-primary-color, 10%);
$debug-background-color: #3d3d56;
$debug-border: none;
$debug-text-color: $text-primary-color;

5
client/src/assets/css/components.scss
View File

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

26
client/src/assets/css/fonts-definition.scss Normal file
View File

@ -0,0 +1,26 @@
@font-face {
font-family: 'Wendy One';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/wendy-one/WendyOne-Regular.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Dosis';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(/fonts/dosis/dosis-300.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Dosis';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(/fonts/dosis/dosis-800.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

28
client/src/assets/css/fonts.scss
View File

@ -1,26 +1,2 @@
@font-face {
font-family: 'Wendy One';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/wendy-one/WendyOne-Regular.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Dosis';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(/fonts/dosis/dosis-300.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Dosis';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(/fonts/dosis/dosis-800.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
$font-primary: 'Wendy One';
$font-secondary: 'Dosis';

8
client/src/components/AlertBox.vue
View File

@ -7,7 +7,7 @@
</template>
<style lang="scss">
@import '~/assets/css/components';
@use '~/assets/css/colors';
.alert {
&__container {
@ -24,11 +24,11 @@
width: auto;
margin: 2em auto auto auto;
padding: 2em;
border: $alert-border;
border: colors.$alert-border;
border-radius: 10px;
background-color: $alert-background-color;
background-color: colors.$alert-background-color;
font-size: 24px;
color: $text-primary-color;
color: colors.$text-primary-color;
}
}
</style>

39
client/src/components/Button.vue
View File

@ -27,16 +27,17 @@ defineProps({
</script>
<style lang="scss">
@import '~/assets/css/components';
@use '~/assets/css/colors';
@use '~/assets/css/fonts';
.button {
&__button {
display: inline-block;
padding: 4px 24px;
background-color: inherit;
color: $text-secondary-color;
color: colors.$text-secondary-color;
text-align: center;
font-family: $font-secondary;
font-family: fonts.$font-secondary;
font-weight: bold;
font-size: 24px;
border: none;
@ -44,44 +45,44 @@ defineProps({
cursor: pointer;
&:hover {
color: $text-secondary-hover-color;
color: colors.$text-secondary-hover-color;
}
&__border {
background-color: $button-background-color;
color: $button-text-color;
border: $button-border;
background-color: colors.$button-background-color;
color: colors.$button-text-color;
border: colors.$button-border;
border-radius: 8px;
&:hover {
border: $button-hover-border;
background-color: $button-hover-background-color;
color: $button-hover-text-color;
border: colors.$button-hover-border;
background-color: colors.$button-hover-background-color;
color: colors.$button-hover-text-color;
}
}
&__disabled,
&__disabled:hover {
cursor: default;
background-color: $button-disabled-background-color;
background-color: colors.$button-disabled-background-color;
margin: 4px;
color: $button-disabled-text-color;
color: colors.$button-disabled-text-color;
&.button__button__border {
margin: 0;
border: $button-disabled-border-border;
border: colors.$button-disabled-border-border;
}
}
&__caution {
background-color: $button-caution-background-color;
border: $button-caution-border;
color: $button-caution-text-color;
background-color: colors.$button-caution-background-color;
border: colors.$button-caution-border;
color: colors.$button-caution-text-color;
&:hover {
background-color: $button-caution-hover-background-color;
border: $button-caution-hover-border;
color: $button-caution-hover-text-color;
background-color: colors.$button-caution-hover-background-color;
border: colors.$button-caution-hover-border;
color: colors.$button-caution-hover-text-color;
}
}

4
client/src/components/CollectQuotes.vue
View File

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

13
client/src/components/CreateTeamDialog.vue
View File

@ -86,11 +86,12 @@ onMounted(() => {
</script>
<style lang="scss">
@import '~/assets/css/components';
@use '~/assets/css/fonts';
@use '~/assets/css/colors';
.create-team-dialog {
&__description {
font-family: $font-secondary;
font-family: fonts.$font-secondary;
font-size: 18px;
}
@ -107,8 +108,8 @@ onMounted(() => {
&__input {
border: 1px solid white;
background-color: $dialog-box-background-color;
color: $dialog-box-text-color;
background-color: colors.$dialog-box-background-color;
color: colors.$dialog-box-text-color;
border-radius: 4px;
}
@ -121,14 +122,14 @@ onMounted(() => {
}
&__auth-message {
font-family: $font-secondary;
font-family: fonts.$font-secondary;
font-size: 24px;
text-align: center;
margin: 32px;
}
&__pin {
font-family: $font-secondary;
font-family: fonts.$font-secondary;
font-size: 32px;
font-weight: 800;
text-align: center;

16
client/src/components/DialogBox.vue
View File

@ -23,7 +23,9 @@ const emit = defineEmits(['close'])
</script>
<style lang="scss">
@import '~/assets/css/components';
@use '~/assets/css/media';
@use '~/assets/css/fonts';
@use '~/assets/css/colors';
.dialog-box {
&__container {
@ -32,13 +34,13 @@ const emit = defineEmits(['close'])
min-width: 400px;
min-height: 280px;
margin: auto;
background-color: $dialog-box-background-color;
border: $dialog-box-border;
background-color: colors.$dialog-box-background-color;
border: colors.$dialog-box-border;
border-radius: 8px;
color: $dialog-box-text-color;
color: colors.$dialog-box-text-color;
z-index: 12;
@media (max-width: $phone-max-width) {
@media (max-width: media.$phone-max-width) {
min-width: unset;
}
}
@ -51,14 +53,14 @@ const emit = defineEmits(['close'])
&__title {
flex-grow: 1;
margin: 36px 36px 8px 36px;
font-family: $font-primary;
font-family: fonts.$font-primary;
font-size: 24px;
}
&__body {
flex-grow: 1;
margin: 36px;
font-family: $font-secondary;
font-family: fonts.$font-secondary;
}
&__footer {

8
client/src/components/EngineDebug.vue
View File

@ -17,20 +17,20 @@ const engineJson = computed(() => JSON.stringify(engine.json, null, 2))
</script>
<style lang="scss">
@import '~/assets/css/components';
@use '~/assets/css/colors';
.enginedebug {
&__container {
width: 100%;
max-height: 100%;
border: $debug-border;
background-color: $debug-background-color;
border: colors.$debug-border;
background-color: colors.$debug-background-color;
overflow: auto;
}
&__json {
padding: 0 0 0 1em;
color: $debug-text-color;
color: colors.$debug-text-color;
font-size: 10px;
}
}

9
client/src/components/GameControls.vue
View File

@ -57,7 +57,8 @@ const backToPlay = () => { useRouter().push('/play') }
</script>
<style lang="scss">
@import '~/assets/css/components';
@use '~/assets/css/fonts';
@use '~/assets/css/colors';
.game-controls {
&__container {
@ -70,12 +71,12 @@ const backToPlay = () => { useRouter().push('/play') }
&__end {
margin-left: auto;
color: $text-primary-color;
color: colors.$text-primary-color;
font-size: 16px;
font-family: $font-primary;
font-family: fonts.$font-primary;
&:hover {
color: $text-primary-hover-color;
color: colors.$text-primary-hover-color;
}
}
}

24
client/src/components/Highscores.vue
View File

@ -35,7 +35,9 @@ const players = computed(() => {
</script>
<style lang="scss">
@import '~/assets/css/components';
@use '~/assets/css/media';
@use '~/assets/css/fonts';
@use '~/assets/css/colors';
.highscores {
&__container-outer {
@ -51,7 +53,7 @@ const players = computed(() => {
width: 600px;
min-height: 600px;
@media (max-width: $phone-max-width) {
@media (max-width: media.$phone-max-width) {
width: 300px;
}
}
@ -64,10 +66,10 @@ const players = computed(() => {
height: 100%;
padding: 2px;
border-radius: 32px;
background: linear-gradient(45deg, $highscores-border-color 0, $highscores-border-color 68%, #ffffff 70%, $highscores-border-color 72%, $highscores-border-color 100%);
background: linear-gradient(45deg, colors.$highscores-border-color 0, colors.$highscores-border-color 68%, #ffffff 70%, colors.$highscores-border-color 72%, colors.$highscores-border-color 100%);
background-size: 1000% 1000%;
animation: highscores-gradient 10s linear infinite 5s;
color: $highscores-text-color;
color: colors.$highscores-text-color;
&::after {
content: '';
@ -77,7 +79,7 @@ const players = computed(() => {
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, rgba(128, 96, 192, 0) 50%, $highscores-background-color 60%);
background: linear-gradient(45deg, rgba(128, 96, 192, 0) 50%, colors.$highscores-background-color 60%);
background-size: 1000% 1000%;
animation: highscores-gradient__fade-in 10s ease forwards;
}
@ -89,16 +91,16 @@ const players = computed(() => {
height: 100px;
align-items: center;
justify-content: center;
background-color: $highscores-background-color;
background-color: colors.$highscores-background-color;
border-radius: 32px 32px 0 0;
margin-bottom: 2px;
}
&__title {
font-family: $font-primary;
font-family: fonts.$font-primary;
font-size: 48px;
@media (max-width: $phone-max-width) {
@media (max-width: media.$phone-max-width) {
font-size: 32px;
padding: 20px;
text-align: center;
@ -108,12 +110,12 @@ const players = computed(() => {
&__table-body {
width: 100%;
height: 100%;
background-color: $highscores-background-color;
background-color: colors.$highscores-background-color;
border-radius: 0 0 32px 32px;
font-family: $font-secondary;
font-family: fonts.$font-secondary;
font-size: 32px;
@media (max-width: $phone-max-width) {
@media (max-width: media.$phone-max-width) {
font-size: 24px;
}
}

13
client/src/components/InfoModal.vue
View File

@ -51,14 +51,15 @@ const close = () => { window.location.href = '/' }
</script>
<style lang="scss">
@import '~/assets/css/components';
@use '~/assets/css/fonts';
@use '~/assets/css/colors';
.info {
&__container {
display: flex;
width: 100%;
height: 100%;
color: $text-primary-color;
color: colors.$text-primary-color;
}
&__box {
@ -67,12 +68,12 @@ const close = () => { window.location.href = '/' }
min-width: 600px;
margin: auto;
padding: 32px;
border: 1px solid white;
border: 1px solid #ffffff;
border-radius: 16px;
}
&__title {
font-family: $font-primary;
font-family: fonts.$font-primary;
margin: 0 32px 32px 0;
font-size: 48px;
}
@ -80,11 +81,11 @@ const close = () => { window.location.href = '/' }
&__subtitle {
margin: 32px 0 8px 0;
font-size: 24px;
font-family: $font-secondary;
font-family: fonts.$font-secondary;
}
&__table {
font-family: $font-secondary;
font-family: fonts.$font-secondary;
&-key {
width: 6em;

12
client/src/components/Lobby.vue
View File

@ -18,7 +18,9 @@ const { $t } = useI18n({
</script>
<style lang="scss">
@import '~/assets/css/components';
@use '~/assets/css/media';
@use '~/assets/css/fonts';
@use '~/assets/css/colors';
.lobby {
&__container {
@ -30,12 +32,12 @@ const { $t } = useI18n({
&__message {
flex-grow: 1;
margin: 60px 48px 0 200px;
font-family: $font-secondary;
font-family: fonts.$font-secondary;
font-size: 24px;
text-align: center;
color: $text-primary-color;
color: colors.$text-primary-color;
@media (max-width: $phone-max-width) {
@media (max-width: media.$phone-max-width) {
margin: 60px 48px;
}
}
@ -44,7 +46,7 @@ const { $t } = useI18n({
width: 200px;
margin: 16px 16px 0 0;
@media (max-width: $phone-width) {
@media (max-width: media.$phone-width) {
display: none;
}
}

11
client/src/components/LoginBox.vue
View File

@ -37,7 +37,8 @@ const login = (): void => {
</script>
<style lang="scss">
@import '~/assets/css/components';
@use '~/assets/css/colors';
@use '~/assets/css/fonts';
.login-box {
&__container-outer {
@ -55,9 +56,9 @@ const login = (): void => {
margin: 0 16px;
background: transparent;
border: none;
border-bottom: $box-primary-border;
color: $text-primary-color;
font-family: $font-secondary;
border-bottom: colors.$box-primary-border;
color: colors.$text-primary-color;
font-family: fonts.$font-secondary;
font-weight: 800;
font-size: 24px;
outline: none;
@ -68,7 +69,7 @@ const login = (): void => {
width: 240px;
text-align: center;
margin: 8px;
color: $text-error-color;
color: colors.$text-error-color;
}
}
</style>

4
client/src/components/ModalDialog.vue
View File

@ -20,7 +20,7 @@ const emit = defineEmits(['close'])
</script>
<style lang="scss">
@import '~/assets/css/components';
@use '~/assets/css/colors';
.modal-dialog {
&__container {
@ -36,7 +36,7 @@ const emit = defineEmits(['close'])
position: absolute;
width: 100%;
height: 100%;
background-color: $modal-dialog-backdrop-background-color;
background-color: colors.$modal-dialog-backdrop-background-color;
z-index: 10;
}
}

13
client/src/components/Player.vue
View File

@ -25,19 +25,20 @@ defineProps<{
</script>
<style lang="scss">
@import '~/assets/css/components';
@use '~/assets/css/fonts';
@use '~/assets/css/colors';
.player {
&__row {
display: flex;
background-color: $box-primary-background-color;
color: $box-primary-text-color;
font-family: $font-secondary;
background-color: colors.$box-primary-background-color;
color: colors.$box-primary-text-color;
font-family: fonts.$font-secondary;
font-size: 18px;
&__idle {
background-color: $box-primary-disabled-background-color;
color: $box-primary-disabled-text-color;
background-color: colors.$box-primary-disabled-background-color;
color: colors.$box-primary-disabled-text-color;
}
}

6
client/src/components/PlayerList.vue
View File

@ -20,12 +20,12 @@ const round = useRoundStore().round
</script>
<style lang="scss">
@import '~/assets/css/components';
@use '~/assets/css/colors';
.player-list {
padding: 8px;
border: $box-primary-border;
border: colors.$box-primary-border;
border-radius: 10px;
background-color: $box-primary-background-color;
background-color: colors.$box-primary-background-color;
}
</style>

16
client/src/components/Playground.vue
View File

@ -80,7 +80,7 @@ sources.forEach((source, index) => {
</script>
<style lang="scss">
@import '~/assets/css/components';
@use '~/assets/css/media';
.playground {
&__container {
@ -95,7 +95,7 @@ sources.forEach((source, index) => {
flex-grow: 1;
margin: 40px;
@media (max-width: $phone-max-width) {
@media (max-width: media.$phone-max-width) {
margin: 0;
}
}
@ -106,7 +106,7 @@ sources.forEach((source, index) => {
justify-content: space-around;
gap: 24px 36px;
@media (max-width: $phone-max-width) {
@media (max-width: media.$phone-max-width) {
order: 2;
}
}
@ -114,7 +114,7 @@ sources.forEach((source, index) => {
&__spacer {
flex-grow: 3;
@media (max-width: $phone-max-width) {
@media (max-width: media.$phone-max-width) {
flex-grow: 1;
}
}
@ -130,7 +130,7 @@ sources.forEach((source, index) => {
opacity: 100%;
}
@media (max-width: $phone-max-width) {
@media (max-width: media.$phone-max-width) {
flex-grow: 1;
}
}
@ -146,7 +146,7 @@ sources.forEach((source, index) => {
animation-fill-mode: forwards;
}
@media (max-width: $phone-max-width) {
@media (max-width: media.$phone-max-width) {
order: 3;
margin: 64px 32px;
}
@ -156,11 +156,11 @@ sources.forEach((source, index) => {
width: 200px;
margin: 16px 16px 0 64px;
@media (max-width: $phone-max-width) {
@media (max-width: media.$phone-max-width) {
display: none;
}
@media (max-width: calc($desktop-min-width - 1px)) {
@media (max-width: calc(media.$desktop-min-width - 1px)) {
margin-left: 16px;
}
}

22
client/src/components/QuoteCard.vue
View File

@ -99,7 +99,9 @@ const keydown = async (ev: KeyboardEvent) => {
</script>
<style lang="scss">
@import '~/assets/css/components';
@use '~/assets/css/media';
@use '~/assets/css/fonts';
@use '~/assets/css/colors';
.quote-card {
&__container {
@ -108,12 +110,12 @@ const keydown = async (ev: KeyboardEvent) => {
height: 150px;
margin: 32px;
padding: 32px;
background-color: $quote-background-color;
border: $quote-border;
background-color: colors.$quote-background-color;
border: colors.$quote-border;
border-radius: 0 16px 0 0;
color: $quote-text-color;
color: colors.$quote-text-color;
@media (max-width: $phone-width) {
@media (max-width: media.$phone-width) {
width: 240px;
height: 120px;
padding: 16px;
@ -123,7 +125,7 @@ const keydown = async (ev: KeyboardEvent) => {
cursor: text;
&__edit-mode {
background-color: $quote-editmode-background-color;
background-color: colors.$quote-editmode-background-color;
}
& .quote-card__quote {
@ -134,7 +136,7 @@ const keydown = async (ev: KeyboardEvent) => {
&__text-short {
font-size: 24px;
@media (max-width: $phone-width) {
@media (max-width: media.$phone-width) {
font-size: 20px;
}
}
@ -142,7 +144,7 @@ const keydown = async (ev: KeyboardEvent) => {
&__text-medium {
font-size: 20px;
@media (max-width: $phone-width) {
@media (max-width: media.$phone-width) {
font-size: 18px;
}
}
@ -150,7 +152,7 @@ const keydown = async (ev: KeyboardEvent) => {
&__text-long {
font-size: 18px;
@media (max-width: $phone-width) {
@media (max-width: media.$phone-width) {
font-size: 14px;
}
}
@ -166,7 +168,7 @@ const keydown = async (ev: KeyboardEvent) => {
&__quote {
margin: 2px;
font-family: $font-secondary;
font-family: fonts.$font-secondary;
font-weight: bold;
text-align: center;
cursor: default;

17
client/src/components/QuoteCardActionButton.vue
View File

@ -11,25 +11,26 @@ defineProps<{
</script>
<style lang="scss">
@import '~/assets/css/components';
@use '~/assets/css/fonts';
@use '~/assets/css/colors';
.quote-card-action-button {
&__button {
margin: 0 4px;
width: 48px;
height: 48px;
border: $quote-button-border;
border: colors.$quote-button-border;
border-radius: 48px;
background-color: $quote-button-background-color;
color: $quote-button-text-color;
font-family: $font-secondary;
background-color: colors.$quote-button-background-color;
color: colors.$quote-button-text-color;
font-family: fonts.$font-secondary;
font-size: 24px;
cursor: pointer;
&:hover {
border: $quote-button-hover-border;
background-color: $quote-button-hover-background-color;
color: $quote-button-hover-text-color;
border: colors.$quote-button-hover-border;
background-color: colors.$quote-button-hover-background-color;
color: colors.$quote-button-hover-text-color;
}
}
}

17
client/src/components/QuoteCardNew.vue
View File

@ -5,7 +5,8 @@
</template>
<style lang="scss">
@import '~/assets/css/components';
@use '~/assets/css/media';
@use '~/assets/css/colors';
.quote-card-new {
&__container {
@ -16,18 +17,18 @@
height: 150px;
margin: 32px;
padding: 28px;
background-color: $quote-new-background-color;
border: $quote-new-border;
background-color: colors.$quote-new-background-color;
border: colors.$quote-new-border;
border-radius: 0 16px 0 0;
cursor: pointer;
&:hover {
background-color: $quote-new-hover-background-color;
border: $quote-new-hover-border;
color: $quote-new-hover-text-color;
background-color: colors.$quote-new-hover-background-color;
border: colors.$quote-new-hover-border;
color: colors.$quote-new-hover-text-color;
}
@media (max-width: $phone-width) {
@media (max-width: media.$phone-width) {
width: 240px;
height: 120px;
padding: 12px;
@ -37,7 +38,7 @@
&__new {
width: 100%;
font-size: 72px;
color: $quote-new-text-color;
color: colors.$quote-new-text-color;
text-align: center;
}
}

10
client/src/components/QuoteExplainationBox.vue
View File

@ -93,12 +93,14 @@ onBeforeUnmount(() => { window.clearInterval(timer) })
</script>
<style lang="scss">
@import '~/assets/css/components';
@use 'sass:color';
@use '~/assets/css/fonts';
@use '~/assets/css/colors';
.quote-explaination-box {
&__container {
padding: 16px;
font-family: $font-secondary;
font-family: fonts.$font-secondary;
font-size: 24px;
}
@ -134,11 +136,11 @@ onBeforeUnmount(() => { window.clearInterval(timer) })
}
&__container-small {
color: darken($text-primary-color, 20%);
color: color.adjust(colors.$text-primary-color, $lightness: -20%);
cursor: pointer;
&:hover {
color: $text-primary-color;
color: colors.$text-primary-color;
}
}

26
client/src/components/ReadySet.vue
View File

@ -30,7 +30,9 @@ const textSize = computed((): string => {
</script>
<style lang="scss">
@import '~/assets/css/components';
@use '~/assets/css/media';
@use '~/assets/css/fonts';
@use '~/assets/css/colors';
.ready-set {
&__container-outer {
@ -53,7 +55,7 @@ const textSize = computed((): string => {
animation-fill-mode: forwards;
}
@media (max-width: $phone-max-width) {
@media (max-width: media.$phone-max-width) {
width: 360px;
height: 360px;
}
@ -66,12 +68,12 @@ const textSize = computed((): string => {
transform: rotate(45deg);
width: 370px;
height: 370px;
background-color: $animationbox-background-color;
border: $animationbox-border;
background-color: colors.$animationbox-background-color;
border: colors.$animationbox-border;
border-radius: 50px;
z-index: 5;
@media (max-width: $phone-max-width) {
@media (max-width: media.$phone-max-width) {
left: 54px;
top: 54px;
width: 240px;
@ -87,11 +89,11 @@ const textSize = computed((): string => {
width: 420px;
height: 420px;
border-radius: 150px;
background-color: $animationbox-animation-color;
background-color: colors.$animationbox-animation-color;
animation: spin-rev 5s linear infinite;
z-index: 4;
@media (max-width: $phone-max-width) {
@media (max-width: media.$phone-max-width) {
left: 50px;
top: 50px;
width: 260px;
@ -107,11 +109,11 @@ const textSize = computed((): string => {
width: 420px;
height: 420px;
border-radius: 150px;
background-color: $animationbox-animation-color;
background-color: colors.$animationbox-animation-color;
z-index: 3;
animation: spin 6s linear infinite;
@media (max-width: $phone-max-width) {
@media (max-width: media.$phone-max-width) {
left: 50px;
top: 50px;
width: 260px;
@ -126,8 +128,8 @@ const textSize = computed((): string => {
height: 600px;
line-height: 600px;
font-size: 100px;
font-family: $font-primary;
color: $animationbox-text-color;
font-family: fonts.$font-primary;
color: colors.$animationbox-text-color;
text-align: center;
z-index: 10;
@ -147,7 +149,7 @@ const textSize = computed((): string => {
animation: pop 0.5s ease-in-out;
}
@media (max-width: $phone-max-width) {
@media (max-width: media.$phone-max-width) {
width: 360px;
height: 360px;
line-height: 360px;

31
client/src/components/SourceCard.vue
View File

@ -38,7 +38,8 @@ const containerClasses = computed(() => {
</script>
<style lang="scss">
@import '~/assets/css/components';
@use '~/assets/css/fonts';
@use '~/assets/css/colors';
.source-card {
&__container {
@ -46,12 +47,12 @@ const containerClasses = computed(() => {
position: relative;
width: 180px;
height: 40px;
border: $sourcecard-border;
border: colors.$sourcecard-border;
border-radius: 8px;
justify-content: center;
align-items: center;
background-color: $sourcecard-background-color;
color: $sourcecard-text-color;
background-color: colors.$sourcecard-background-color;
color: colors.$sourcecard-text-color;
cursor: not-allowed;
opacity: 0;
@ -69,17 +70,17 @@ const containerClasses = computed(() => {
cursor: pointer;
&:hover {
background-color: $sourcecard-hover-background-color;
border: $sourcecard-hover-border;
color: $sourcecard-hover-text-color;
background-color: colors.$sourcecard-hover-background-color;
border: colors.$sourcecard-hover-border;
color: colors.$sourcecard-hover-text-color;
}
}
&__selected {
background-color: $sourcecard-selected-background-color;
border: $sourcecard-selected-border;
color: $sourcecard-selected-text-color;
box-shadow: $sourcecard-selected-box-shadow;
background-color: colors.$sourcecard-selected-background-color;
border: colors.$sourcecard-selected-border;
color: colors.$sourcecard-selected-text-color;
box-shadow: colors.$sourcecard-selected-box-shadow;
cursor: not-allowed;
}
@ -96,11 +97,11 @@ const containerClasses = computed(() => {
width: 32px;
height: 32px;
align-items: center;
background-color: $sourcecardbadge-background-color;
border: $sourcecardbadge-border;
background-color: colors.$sourcecardbadge-background-color;
border: colors.$sourcecardbadge-border;
border-radius: 32px;
color: $sourcecardbadge-text-color;
font-family: $font-primary;
color: colors.$sourcecardbadge-text-color;
font-family: fonts.$font-primary;
font-size: 16px;
}

22
client/src/components/TitleBox.vue
View File

@ -11,7 +11,9 @@
</template>
<style lang="scss">
@import '~/assets/css/components';
@use '~/assets/css/media';
@use '~/assets/css/fonts';
@use '~/assets/css/colors';
.titlebox {
&__container {
@ -20,7 +22,7 @@
display: flex;
justify-content: center;
@media (max-width: $phone-max-width) {
@media (max-width: media.$phone-max-width) {
padding: 40px 0;
}
}
@ -28,9 +30,9 @@
&__titleborderbox1,
&__titleborderbox2,
&__titleborderbox3 {
border: $box-primary-border;
border: colors.$box-primary-border;
border-radius: 16px;
background-color: $box-primary-background-color;
background-color: colors.$box-primary-background-color;
}
&__titleborderbox1 {
@ -41,7 +43,7 @@
align-items: center;
z-index: 3;
@media (max-width: $phone-max-width) {
@media (max-width: media.$phone-max-width) {
width: 260px;
height: 140px;
}
@ -54,7 +56,7 @@
height: 120px;
z-index: 2;
@media (max-width: $phone-max-width) {
@media (max-width: media.$phone-max-width) {
top: 75px;
width: 300px;
height: 80px;
@ -68,7 +70,7 @@
height: 40px;
z-index: 1;
@media (max-width: $phone-max-width) {
@media (max-width: media.$phone-max-width) {
top: 95px;
width: 340px;
}
@ -76,11 +78,11 @@
&__title {
font-size: 64px;
font-family: $font-primary;
color: $box-primary-text-color;
font-family: fonts.$font-primary;
color: colors.$box-primary-text-color;
text-align: center;
@media (max-width: $phone-max-width) {
@media (max-width: media.$phone-max-width) {
font-size: 32px;
}
}

30
client/src/components/TopBar.vue
View File

@ -51,7 +51,9 @@ const actionLogout = async () => {
</script>
<style lang="scss">
@import '~/assets/css/components';
@use '~/assets/css/media';
@use '~/assets/css/fonts';
@use '~/assets/css/colors';
.topbar {
&__container {
@ -59,14 +61,14 @@ const actionLogout = async () => {
width: 100%;
height: 64px;
align-items: center;
background-color: $topbar-background-color;
background-color: colors.$topbar-background-color;
font-size: 16px;
font-family: $font-primary;
font-family: fonts.$font-primary;
font-weight: bold;
cursor: default;
&__cameo {
background-color: $topbar-cameo-background-color;
background-color: colors.$topbar-cameo-background-color;
}
}
@ -75,11 +77,11 @@ const actionLogout = async () => {
width: 128px;
padding: 0 16px;
text-align: center;
color: $text-primary-color;
color: colors.$text-primary-color;
}
&__username {
@media (max-width: $phone-width) {
@media (max-width: media.$phone-width) {
display: none;
}
}
@ -89,11 +91,11 @@ const actionLogout = async () => {
&__player,
&__admin {
color: $text-primary-color;
color: colors.$text-primary-color;
font-size: 24px;
text-align: center;
@media (max-width: $phone-width) {
@media (max-width: media.$phone-width) {
margin-left: 24px;
text-align: left;
font-size: 20px;
@ -105,23 +107,23 @@ const actionLogout = async () => {
width: 1px;
height: calc(64px - 2 * 16px);
margin: 16px 0;
background-color: $topbar-separator-color;
background-color: colors.$topbar-separator-color;
@media (max-width: $phone-width) {
@media (max-width: media.$phone-width) {
display: none;
}
}
&__logout-button {
color: $text-primary-color;
color: colors.$text-primary-color;
font-size: 16px;
font-family: $font-primary;
font-family: fonts.$font-primary;
&:hover {
color: $text-primary-hover-color;
color: colors.$text-primary-hover-color;
}
@media (max-width: $phone-width) {
@media (max-width: media.$phone-width) {
padding-right: 0;
}
}

23
client/src/components/admin/InfoTile.vue
View File

@ -24,7 +24,8 @@ const emit = defineEmits(['icon-top-click', 'icon-bottom-click'])
</script>
<style lang="scss">
@import '~/assets/css/components';
@use '~/assets/css/fonts';
@use '~/assets/css/colors';
.admin-tile {
&__container {
@ -32,15 +33,15 @@ const emit = defineEmits(['icon-top-click', 'icon-bottom-click'])
min-width: 300px;
margin: 16px;
padding: 16px 30px;
background-color: $admin-tile-background-color;
border: $admin-tile-border;
color: $admin-tile-text-color;
background-color: colors.$admin-tile-background-color;
border: colors.$admin-tile-border;
color: colors.$admin-tile-text-color;
}
&__title {
margin-bottom: 16px;
font-size: 24px;
font-family: $font-primary;
font-family: fonts.$font-primary;
}
&__action-button {
@ -49,7 +50,7 @@ const emit = defineEmits(['icon-top-click', 'icon-bottom-click'])
&__body {
font-size: 16px;
font-family: $font-secondary;
font-family: fonts.$font-secondary;
}
&__icon-bottom-container {
@ -72,21 +73,21 @@ const emit = defineEmits(['icon-top-click', 'icon-bottom-click'])
cursor: pointer;
&:hover {
background-color: $admin-tile-bottom-icon-hover-background-color;
background-color: colors.$admin-tile-bottom-icon-hover-background-color;
}
}
&__icon-bottom {
margin: 0 auto;
padding: 20px;
background-color: $admin-tile-bottom-icon-background-color;
border-bottom: $admin-tile-bottom-icon-border;
background-color: colors.$admin-tile-bottom-icon-background-color;
border-bottom: colors.$admin-tile-bottom-icon-border;
border-radius: 64px;
cursor: pointer;
&:hover {
background-color: $admin-tile-bottom-icon-hover-background-color;
border-bottom: $admin-tile-bottom-icon-hover-border;
background-color: colors.$admin-tile-bottom-icon-hover-background-color;
border-bottom: colors.$admin-tile-bottom-icon-hover-border;
}
}
}

6
client/src/components/admin/PlayerDialog.vue
View File

@ -49,7 +49,7 @@ const generate = () => {
</script>
<style lang="scss">
@import '~/assets/css/components';
@use '~/assets/css/colors';
.player-dialog {
&__label {
@ -59,8 +59,8 @@ const generate = () => {
&__input {
border: 1px solid white;
background-color: $dialog-box-background-color;
color: $dialog-box-text-color;
background-color: colors.$dialog-box-background-color;
color: colors.$dialog-box-text-color;
border-radius: 4px;
}

10
client/src/layouts/default.vue
View File

@ -20,9 +20,9 @@ const alertMessages = useAlert().getAlertMessagesRef()
</script>
<style lang="scss">
@import '@/assets/css/colors.scss';
@import '@/assets/css/fonts.scss';
@import '@/assets/css/components.scss';
@use '~/assets/css/colors';
@use '~/assets/css/fonts-definition';
@use '~/assets/css/fonts';
html,
body,
@ -35,8 +35,8 @@ body,
}
body {
background-color: $background-primary-color;
font-family: $font-primary;
background-color: colors.$background-primary-color;
font-family: fonts.$font-primary;
// override Firefox DownloadStatusBar's setting
margin-bottom: 0 !important;

4
client/src/pages/admin.vue
View File

@ -15,11 +15,11 @@ await useAuth().authenticateAndLoadUserInfo(['admin'])
</script>
<style lang="scss">
@import '~/assets/css/components';
@use '~/assets/css/colors';
.admin {
&__container {
color: $text-primary-color;
color: colors.$text-primary-color;
}
&__tiles {

17
client/src/pages/index.vue
View File

@ -47,11 +47,12 @@ const closeCreateTeamDialog = () => { showCreateTeamDialog.value = false }
</script>
<style lang="scss">
@import '~/assets/css/components';
@use '~/assets/css/colors';
@use '~/assets/css/media';
body {
background-color: $background-primary-color;
color: $text-primary-color;
background-color: colors.$background-primary-color;
color: colors.$text-primary-color;
margin: 0;
}
@ -67,7 +68,7 @@ body {
width: 100%;
height: 120px;
@media (max-width: $phone-max-width) {
@media (max-width: media.$phone-max-width) {
margin: 32px 0 0 0;
}
}
@ -77,13 +78,13 @@ body {
width: 320px;
align-self: center;
@media (max-width: $phone-max-width) {
@media (max-width: media.$phone-max-width) {
width: auto;
}
}
&__create-team {
@media (max-width: $phone-max-width) {
@media (max-width: media.$phone-max-width) {
display: none;
}
}
@ -91,9 +92,9 @@ body {
&__separator {
width: 1px;
margin: 0 48px;
border-left: $box-primary-border;
border-left: colors.$box-primary-border;
@media (max-width: $phone-max-width) {
@media (max-width: media.$phone-max-width) {
display: none;
}
}

9
client/src/pages/setup.vue
View File

@ -64,7 +64,8 @@ const createAdminAccount = async () => {
</script>
<style lang="scss">
@import '~/assets/css/components';
@use '~/assets/css/media';
@use '~/assets/css/fonts';
.page-setup {
&__action-box {
@ -73,7 +74,7 @@ const createAdminAccount = async () => {
width: 340px;
margin: 0 auto;
@media (max-width: $phone-max-width) {
@media (max-width: media.$phone-max-width) {
margin: 32px 0 0 0;
width: 100%;
}
@ -86,14 +87,14 @@ const createAdminAccount = async () => {
}
&__auth-message {
font-family: $font-secondary;
font-family: fonts.$font-secondary;
font-size: 24px;
text-align: center;
margin: 32px;
}
&__pin {
font-family: $font-secondary;
font-family: fonts.$font-secondary;
font-size: 32px;
font-weight: 800;
text-align: center;