diff options
| -rw-r--r-- | .gitignore | 3 | ||||
| -rw-r--r-- | assets/base.css | 95 | ||||
| -rw-r--r-- | components/base/Button.vue | 21 | ||||
| -rw-r--r-- | components/editor/quest/OptionsPanel.vue | 2 | ||||
| -rw-r--r-- | components/editor/task/Configuration.vue | 15 | ||||
| -rw-r--r-- | components/editor/task/ConfigurationRow.vue | 4 | ||||
| -rw-r--r-- | data/taskDefinitions.json | 12 | ||||
| -rw-r--r-- | layouts/default.vue | 1 | ||||
| -rw-r--r-- | stores/session.ts | 8 |
9 files changed, 86 insertions, 75 deletions
@@ -27,4 +27,5 @@ coverage *.sw? *.tsbuildinfo -.nuxt
\ No newline at end of file +.nuxt +.output
\ No newline at end of file diff --git a/assets/base.css b/assets/base.css index 9dc14ce..7d525a2 100644 --- a/assets/base.css +++ b/assets/base.css @@ -10,8 +10,8 @@ --c-indigo: #2c3e50; - --c-divider-light-1: rgba(60, 60, 60, 0.2); - --c-divider-light-2: rgba(60, 60, 60, 0.4); + --c-divider-light-1: rgba(60, 60, 60, 0.1); + --c-divider-light-2: rgba(60, 60, 60, 0.2); --c-divider-dark-1: rgba(84, 84, 84, 0.2); --c-divider-dark-2: rgba(84, 84, 84, 0.4); @@ -43,6 +43,7 @@ --color-text: var(--c-text-dark-1); --color-text-mute: var(--c-text-dark-2); --color-text-primary: var(--c-brand-dark); + --color-text-on-primary: var(--c-text-light-1); --color-primary: var(--c-brand); --color-primary-light: var(--c-brand-light); @@ -55,6 +56,9 @@ --color-false: var(--c-false); --section-gap: 160px; + + --ff-sans-serif: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + --ff-monospace: monospace; } @media (prefers-color-scheme: dark) { @@ -69,7 +73,7 @@ --color-heading: var(--c-text-light-1); --color-text: var(--c-text-light-1); --color-text-mute: var(--c-text-light-2); - --color-text-primary: var(--c-brand-light); + --color-text-primary: var(--c-brand-light); } } @@ -89,19 +93,7 @@ body { color 0.5s, background-color 0.5s; line-height: 1.6; - font-family: - Inter, - -apple-system, - BlinkMacSystemFont, - 'Segoe UI', - Roboto, - Oxygen, - Ubuntu, - Cantarell, - 'Fira Sans', - 'Droid Sans', - 'Helvetica Neue', - sans-serif; + font-family: var(--ff-sans-serif); font-size: 15px; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; @@ -109,11 +101,11 @@ body { } code { - font-family: 'Fira Code', monospace; + font-family: var(--ff-monospace); } input, textarea { - font-family: inherit; + font-family: monospace; font-size: inherit; color: inherit; background: var(--color-background-soft); @@ -123,6 +115,10 @@ input, textarea { transition: border-color 0.5s; } +input::placeholder, textarea::placeholder { + font-family: var(--ff-sans-serif); +} + input:focus, textarea:focus { outline: none; border-color: var(--color-primary); @@ -152,12 +148,13 @@ input[type="radio"] { } .multiselect__input { - background: var(--color-background-soft) !important ; - color: inherit !important; + background: var(--color-background-soft) !important; + color: var(--color-text) !important; + font-family: monospace !important; +} - &::placeholder { - color: rgba(255, 255, 255, .2) !important; - } +.multiselect__input::placeholder { + color: var(--color-text) !important; } .multiselect__tags { @@ -167,6 +164,10 @@ input[type="radio"] { overflow-y: auto !important; } +.multiselect__tag-icon::after { + color: var(--color-text) !important; +} + .multiselect__single { font-family: monospace !important; background: var(--color-background-soft) !important; @@ -176,40 +177,34 @@ input[type="radio"] { .multiselect__content { font-family: monospace; - - &-wrapper { - background: var(--color-background); - border: 0; - border-top-left-radius: 2px; - border-top-right-radius: 2px; - box-shadow: 0 -1rem 2rem rgba(0, 0, 0, .1); - } + font-size: 0.8rem; } -.multiselect__element { - &:not(:first-child) { - border-top: 1px solid rgba(0, 0, 0, .2); - } +.multiselect__content-wrapper { + background: var(--color-background) !important; + color: var(--color-text) !important; + border: 1px solid var(--color-border); + border-top-left-radius: 2px; + border-top-right-radius: 2px; + box-shadow: 0 -1rem 2rem rgba(0, 0, 0, .1); } -.multiselect__option { - &--highlight { - background: rgba(255, 255, 255, .2); - - &:after { - background: rgba(0, 0, 0, .2); - } - } +.multiselect__element:not(:first-child) { + border-top: 1px solid var(--color-border); +} - &--selected { - background: var(--color-primary); - color: white; +.multiselect__option--highlight, .multiselect__option--highlight:after { + background: var(--color-hover) !important; +} - &:after { - color: rgba(0, 0, 0, .5); - } +.multiselect__option--selected, .multiselect__option--selected:after { + background: var(--color-primary-dark) !important; + color: var(--color-text) !important; +} - } +.multiselect__tag { + font-family: monospace; + background: var(--color-primary-dark) !important; } .control-group { diff --git a/components/base/Button.vue b/components/base/Button.vue index efd91c2..c7f7c50 100644 --- a/components/base/Button.vue +++ b/components/base/Button.vue @@ -2,7 +2,7 @@ const props = defineProps({ type: { type: String, - required: false, + required: false, default: 'text', }, label: String, @@ -20,7 +20,7 @@ const onClick = (event: MouseEvent) => { </script> <template> - <a id="button" :class="{text: type === 'text', solid: type === 'solid', disabled: disabled}" @click.stop="onClick"> + <a id="button" :class="{ text: type === 'text', solid: type === 'solid', disabled: disabled }" @click.stop="onClick"> <font-awesome-icon :icon="icon" /> {{ label }} </a> @@ -33,23 +33,23 @@ const onClick = (event: MouseEvent) => { gap: 0.25rem; user-select: none; } - + .text { background-color: transparent; color: var(--color-text-primary); transition: color 0.3s; font-weight: 700; cursor: pointer; - + &.disabled { color: var(--color-text-mute); cursor: not-allowed; } - + &:hover { color: var(--color-primary-dark); } - + &.disabled:hover { color: var(--color-text-mute); } @@ -58,25 +58,24 @@ const onClick = (event: MouseEvent) => { .solid { background-color: var(--color-primary); transition: background-color 0.3s; - color: var(--color-text); + color: var(--color-text-on-primary); padding: 0.25rem 0.5rem; border-radius: 4px; font-weight: 700; cursor: pointer; - + &.disabled { background-color: var(--color-border); color: var(--color-text-mute); cursor: not-allowed; } - + &:hover { background-color: var(--color-primary-dark); } - + &.disabled:hover { background-color: var(--color-border); } } - </style>
\ No newline at end of file diff --git a/components/editor/quest/OptionsPanel.vue b/components/editor/quest/OptionsPanel.vue index de32abb..5aaff23 100644 --- a/components/editor/quest/OptionsPanel.vue +++ b/components/editor/quest/OptionsPanel.vue @@ -112,8 +112,6 @@ const knownQuests = computed(() => { </EditorOptionsPanel> </template> -<style src="vue-multiselect/dist/vue-multiselect.css" /> - <style> #options { display: flex; diff --git a/components/editor/task/Configuration.vue b/components/editor/task/Configuration.vue index 0355383..a209b58 100644 --- a/components/editor/task/Configuration.vue +++ b/components/editor/task/Configuration.vue @@ -82,7 +82,7 @@ const deleteTaskType = (taskId: string) => { {{ props.taskId }} </span> <code> - ({{ taskType }}) + (<font-awesome-icon v-if="taskDefintion" id="task-icon" :icon="[taskDefintion.icon.style, taskDefintion.icon.name]" />{{ taskType }}) </code> </p> <div id="task-controls" class="control-group"> @@ -155,6 +155,10 @@ const deleteTaskType = (taskId: string) => { font-weight: 700; } + #task-icon { + padding-right: 0.3rem; + } + code { font-size: 0.8em; color: var(--color-text-mute); @@ -169,13 +173,12 @@ const deleteTaskType = (taskId: string) => { border-top: 1px solid var(--color-border); } -.multiselect::v-deep .multiselect__tags { - border: none !important; +:deep(.multiselect) .multiselect__tags { + border: unset !important; border-radius: 0px !important; - background: transparent !important; } -.multiselect::v-deep .multiselect__select { - background: transparent !important; +:deep(.multiselect) .multiselect__select { + background: unset !important; } </style> diff --git a/components/editor/task/ConfigurationRow.vue b/components/editor/task/ConfigurationRow.vue index 8194dcd..98a644c 100644 --- a/components/editor/task/ConfigurationRow.vue +++ b/components/editor/task/ConfigurationRow.vue @@ -182,12 +182,12 @@ input { color: var(--color-false); } -.multiselect::v-deep .multiselect__tags { +:deep(.multiselect) .multiselect__tags { border: unset !important; border-radius: 0px !important; } -.multiselect::v-deep .multiselect__select { +:deep(.multiselect) .multiselect__select { background: unset !important; } </style>
\ No newline at end of file diff --git a/data/taskDefinitions.json b/data/taskDefinitions.json index 443493c..92b728f 100644 --- a/data/taskDefinitions.json +++ b/data/taskDefinitions.json @@ -2,6 +2,10 @@ "taskTypes": { "blockbreak": { "description": "Break a set amount of blocks.", + "icon": { + "style": "fas", + "name": "trowel" + }, "configuration": { "amount": { "type": "number", @@ -61,6 +65,10 @@ }, "blockplace": { "description": "Place a set amount of blocks.", + "icon": { + "style": "fas", + "name": "building-columns" + }, "configuration": { "amount": { "type": "number", @@ -92,6 +100,10 @@ }, "inventory": { "description": "Obtain a set amount of items.", + "icon": { + "style": "fas", + "name": "boxes-stacked" + }, "configuration": { "amount": { "type": "number", diff --git a/layouts/default.vue b/layouts/default.vue index c991ce9..80bf29e 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -1,5 +1,4 @@ <script setup lang="ts"> -import SiteHeader from '@/components/Header/SiteHeader.vue'; </script> <template> diff --git a/stores/session.ts b/stores/session.ts index 1938b63..acd2c66 100644 --- a/stores/session.ts +++ b/stores/session.ts @@ -14,7 +14,7 @@ export interface EditorQuest { rewards: string[]; startCommands?: string[]; startString?: string[]; - rewardString?: string[]; + rewardString?: string[]; placeholders?: { [key: string]: string }; options: { category: string; @@ -60,6 +60,10 @@ export interface EditorCategory { export interface TaskDefinition { description: string; + icon: { + style: string; + name: string; + } configuration: { [key: string]: { type: string | string[]; @@ -141,7 +145,7 @@ export const useSessionStore = defineStore('session', { changeQuestId(oldId: string, newId: string) { const quest = this.getQuestById(oldId); if (!quest) return; - + quest.id = newId }, deleteQuest(id: string) { |