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

Compare commits

base: 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
..
compare: 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

No commits in common. "450319ba35b0fc11790b978d8b86af1124d43239" and "9e63e101cc631fce4a5d286aae2d43591d2ebae0" have entirely different histories.
450319ba35 ... 9e63e101cc

38 changed files with 5243 additions and 7135 deletions
Show Stats Expand all files Collapse all files

1
.nvmrc
View File

@ -1 +0,0 @@
22.14

1
Makefile
View File

@ -83,7 +83,6 @@ 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,10 +7,6 @@ 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.86",
"@types/node": "^18.19.17",
"http-proxy": "^1.18.1",
"nuxt": "^3.16.2",
"sass": "^1.86.3",
"sass-loader": "^16.0.5",
"typescript-strict-plugin": "^2.4.4",
"webpack": "^5.99.5"
"nuxt": "^3.10.2",
"sass": "^1.71.0",
"sass-loader": "^13.3.3",
"typescript-strict-plugin": "^2.3.0",
"webpack": "^5.90.2"
},
"dependencies": {
"@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",
"@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",
"nuxt-icons": "^3.2.1",
"ofetch": "^1.4.1",
"ofetch": "^1.3.3",
"query-string": "^8.2.0",
"typescript": "^5.8.3",
"vue": "^3.5.13",
"typescript": "^5.3.3",
"vue": "^3.4.19",
"vue-contenteditable": "^4.1.0",
"vue-router": "^4.5.0"
"vue-router": "^4.2.5"
}
}

11923
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: #666666;
$box-primary-disabled-text-color: darken($box-primary-text-color, 60%);
$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: #3d3d56;
$quote-new-hover-background-color: lighten($background-primary-color, 10%);
$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: #3d3d56;
$debug-background-color: lighten($background-primary-color, 10%);
$debug-border: none;
$debug-text-color: $text-primary-color;

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

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

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

@ -1,26 +0,0 @@
@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,2 +1,26 @@
$font-primary: 'Wendy One';
$font-secondary: 'Dosis';
@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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -25,20 +25,19 @@ defineProps<{
</script>
<style lang="scss">
@use '~/assets/css/fonts';
@use '~/assets/css/colors';
@import '~/assets/css/components';
.player {
&__row {
display: flex;
background-color: colors.$box-primary-background-color;
color: colors.$box-primary-text-color;
font-family: fonts.$font-secondary;
background-color: $box-primary-background-color;
color: $box-primary-text-color;
font-family: $font-secondary;
font-size: 18px;
&__idle {
background-color: colors.$box-primary-disabled-background-color;
color: colors.$box-primary-disabled-text-color;
background-color: $box-primary-disabled-background-color;
color: $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">
@use '~/assets/css/colors';
@import '~/assets/css/components';
.player-list {
padding: 8px;
border: colors.$box-primary-border;
border: $box-primary-border;
border-radius: 10px;
background-color: colors.$box-primary-background-color;
background-color: $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">
@use '~/assets/css/media';
@import '~/assets/css/components';
.playground {
&__container {
@ -95,7 +95,7 @@ sources.forEach((source, index) => {
flex-grow: 1;
margin: 40px;
@media (max-width: media.$phone-max-width) {
@media (max-width: $phone-max-width) {
margin: 0;
}
}
@ -106,7 +106,7 @@ sources.forEach((source, index) => {
justify-content: space-around;
gap: 24px 36px;
@media (max-width: media.$phone-max-width) {
@media (max-width: $phone-max-width) {
order: 2;
}
}
@ -114,7 +114,7 @@ sources.forEach((source, index) => {
&__spacer {
flex-grow: 3;
@media (max-width: media.$phone-max-width) {
@media (max-width: $phone-max-width) {
flex-grow: 1;
}
}
@ -130,7 +130,7 @@ sources.forEach((source, index) => {
opacity: 100%;
}
@media (max-width: media.$phone-max-width) {
@media (max-width: $phone-max-width) {
flex-grow: 1;
}
}
@ -146,7 +146,7 @@ sources.forEach((source, index) => {
animation-fill-mode: forwards;
}
@media (max-width: media.$phone-max-width) {
@media (max-width: $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: media.$phone-max-width) {
@media (max-width: $phone-max-width) {
display: none;
}
@media (max-width: calc(media.$desktop-min-width - 1px)) {
@media (max-width: calc($desktop-min-width - 1px)) {
margin-left: 16px;
}
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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