djledda/arne-drums
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update

Browse Source
This commit is contained in:
Daniel Ledda
2023-05-07 11:17:14 +02:00
parent f20106207c
commit a1bc636c11
6 changed files with 911 additions and 575 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.nvmrc
View File

@@ -1 +1 @@
16 18

1236
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

7
package.json
View File

@@ -27,8 +27,9 @@
"@typescript-eslint/eslint-plugin": "^5.26.0", "@typescript-eslint/eslint-plugin": "^5.26.0",
"@typescript-eslint/parser": "^5.26.0", "@typescript-eslint/parser": "^5.26.0",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"eslint": "^8.16.0", "eslint": "^8.40.0",
"typescript": "^4.9.4", "eslint-plugin-vue": "^9.11.0",
"vite": "^4.1.4" "typescript": "^5.0.4",
"vite": "^4.3.0"
} }
} }

8
src/main.ts
View File

@@ -1,9 +1,7 @@
import { createApp } from 'vue' import { createApp } from "vue";
import { createPinia } from 'pinia' import Root from "@/ui/Root/Root.vue";
import Root from '@/ui/Root/Root.vue'
import "@/ui/global.css"; import "@/ui/global.css";
const app = createApp(Root, { title: "Drum Slayer" }); const app = createApp(Root, { title: "Drum Slayer" });
app.use(createPinia()); app.mount("#app");
app.mount('#app');

113
src/ui/Root/Root.vue
View File

@@ -22,42 +22,44 @@
<beat-settings :beat-index="activeBeatIndex" /> <beat-settings :beat-index="activeBeatIndex" />
</div> </div>
<div class="sidebar-toggle"> <div class="sidebar-toggle">
<div <div class="buttons">
class="quick-access-button" <div
:title="`${ sidebarActive ? 'Hide' : 'Show' } sidebar`" class="quick-access-button"
@click="sidebarActive = !sidebarActive"> :title="`${ sidebarActive ? 'Hide' : 'Show' } sidebar`"
<icon icon-name="list" color="var(--color-ui-neutral-dark)" /> @click="sidebarActive = !sidebarActive">
</div> <icon icon-name="list" color="var(--color-ui-neutral-dark)" />
<div </div>
class="quick-access-button" <div
title="Change orientation" class="quick-access-button"
@click="toggleOrientation"> title="Change orientation"
<icon icon-name="arrowClockwise" color="var(--color-ui-neutral-dark)" /> @click="toggleOrientation">
</div> <icon icon-name="arrowClockwise" color="var(--color-ui-neutral-dark)" />
<div </div>
class="quick-access-button" <div
title="Bake all tracks" class="quick-access-button"
@click="bakeAll"> title="Bake all tracks"
<icon icon-name="snowflake" color="var(--color-ui-neutral-dark)" /> @click="bakeAll">
</div> <icon icon-name="snowflake" color="var(--color-ui-neutral-dark)" />
<div </div>
class="quick-access-button" <div
title="Reset all" class="quick-access-button"
@click="resetActiveBeat"> title="Reset all"
<icon icon-name="trash" color="var(--color-ui-neutral-dark)" /> @click="resetActiveBeat">
</div> <icon icon-name="trash" color="var(--color-ui-neutral-dark)" />
<div </div>
class="quick-access-button" <div
:class="{ 'unclickable': !saveDirty }" class="quick-access-button"
:title="saveDirty ? 'Save changes' : 'No unsaved changes'" :class="{ 'unclickable': !saveDirty }"
@click="save('localStorage')"> :title="saveDirty ? 'Save changes' : 'No unsaved changes'"
<icon icon-name="download" color="var(--color-ui-neutral-dark)" /> @click="save('localStorage')">
<icon icon-name="download" color="var(--color-ui-neutral-dark)" />
</div>
</div> </div>
<toolbox class="toolbox" />
</div> </div>
</div> </div>
<div class="beat-stage-container"> <div class="beat-stage-container">
<toolbox />
<div class="beat-stage"> <div class="beat-stage">
<beat-view <beat-view
:beat-index="activeBeatIndex" :beat-index="activeBeatIndex"
@@ -76,6 +78,8 @@
import { BeatStoreKey, createBeatStore } from "@/BeatStore"; import { BeatStoreKey, createBeatStore } from "@/BeatStore";
import { AppStateStoreKey, createAppStateStore } from "@/AppState"; import { AppStateStoreKey, createAppStateStore } from "@/AppState";
const TITLE = 'Drum Slayer';
defineProps<{ defineProps<{
title: string, title: string,
}>(); }>();
@@ -99,8 +103,6 @@
saveDirty, saveDirty,
} = beatStore; } = beatStore;
const TITLE = 'Drum Slayer';
watch(saveDirty, (dirty) => { watch(saveDirty, (dirty) => {
if (dirty) { if (dirty) {
document.title = `${ TITLE } (unsaved changes)`; document.title = `${ TITLE } (unsaved changes)`;
@@ -110,9 +112,9 @@
}); });
const mediaQueryList = window.matchMedia("screen and (max-width: 900px)"); const mediaQueryList = window.matchMedia("screen and (max-width: 900px)");
const onMediaChange = (event: MediaQueryListEvent | MediaQueryList) => { function onMediaChange(event: MediaQueryListEvent | MediaQueryList) {
sidebarActive.value = event.matches; sidebarActive.value = event.matches;
}; }
mediaQueryList.addEventListener('change', onMediaChange); mediaQueryList.addEventListener('change', onMediaChange);
onMediaChange(mediaQueryList); onMediaChange(mediaQueryList);
@@ -178,11 +180,11 @@
background-color: var(--color-bg-light); background-color: var(--color-bg-light);
overflow: scroll; overflow: scroll;
display: inline-block; display: inline-block;
}
.settings .title { .title {
color: var(--color-title-light); color: var(--color-title-light);
text-align: center; text-align: center;
}
} }
.sidebar-toggle { .sidebar-toggle {
@@ -191,18 +193,31 @@
min-width: 2em; min-width: 2em;
background-color: var(--color-bg-light); background-color: var(--color-bg-light);
left: 0; left: 0;
} display: flex;
flex-direction: column;
.quick-access-button {
right: 0;
width: 2em;
height: 2em;
cursor: pointer;
margin-bottom: 0.5em;
&.unclickable { .buttons {
opacity: 50%; flex: 1;
cursor: auto;
.quick-access-button {
flex: 1;
right: 0;
width: 2em;
height: 2em;
cursor: pointer;
margin-bottom: 0.5em;
&.unclickable {
opacity: 50%;
cursor: auto;
}
}
}
.toolbox {
flex: 1;
width: 2em;
} }
} }

120
src/ui/Root/Toolbox.vue
View File

@@ -1,24 +1,20 @@
<template> <template>
<div class="root-toolbox"> <div class="toolbox">
<div class="main-row"> <div class="main-row">
<div <icon
class="toolbox-button" class="toolbox-button"
icon-name="lh"
:class="{ active: selectedTool === 'track-unit-type' }" :class="{ active: selectedTool === 'track-unit-type' }"
@click="selectedTool = 'track-unit-type'"> @click="selectedTool = 'track-unit-type'" />
Track Type <icon
</div>
<div
class="toolbox-button" class="toolbox-button"
icon-name="lf"
:class="{ active: selectedTool === 'sticking' }" :class="{ active: selectedTool === 'sticking' }"
@click="selectedTool = 'sticking'"> @click="selectedTool = 'sticking'" />
Sticking <icon
</div>
<div
class="toolbox-button" class="toolbox-button"
:class="{ active: selectedTool === 'eraser' }" :class="{ active: selectedTool === 'eraser' }"
@click="selectedTool = 'eraser'"> @click="selectedTool = 'eraser'" />
Eraser
</div>
</div> </div>
<div v-if="selectedTool === 'track-unit-type'" class="details"> <div v-if="selectedTool === 'track-unit-type'" class="details">
<div v-for="(type, i) in TrackUnitTypeList" <div v-for="(type, i) in TrackUnitTypeList"
@@ -57,58 +53,64 @@
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.root-toolbox { } .toolbox {
.main-row {
margin: auto;
display: flex;
background-color: var(--color-ui-neutral-dark);
justify-content: center;
width: 100%;
flex-direction: column;
}
.root-toolbox .main-row { .details {
height: 2.5em; margin: auto;
margin: auto; height: 4em;
display: flex; width: min-content;
background-color: var(--color-ui-neutral-dark); border-radius: 0 0 1em 1em;
justify-content: center; padding: 0.5em;
width: 100%; background-color: var(--color-ui-neutral-dark-active);
} display: flex;
justify-content: center;
.root-toolbox .details { &.hidden {
margin: auto; visibility: hidden;
height: 4em; }
width: min-content; }
border-radius: 0 0 1em 1em;
padding: 0.5em;
background-color: var(--color-ui-neutral-dark-active);
display: flex;
justify-content: center;
}
.root-toolbox .details.hidden { .track-unit {
visibility: hidden; margin: 0;
} padding: 0;
}
.root-toolbox .track-unit { .toolbox-button {
margin: 0; padding: 0.5em;
padding: 0; cursor: pointer;
} color: black;
background-color: var(--color-ui-neutral-dark);
.root-toolbox .toolbox-button { &:hover {
padding: 0.5em; background-color: var(--color-ui-neutral-dark-hover);
cursor: pointer; }
color: black;
background-color: var(--color-ui-neutral-dark);
}
.root-toolbox .toolbox-button:hover {
background-color: var(--color-ui-neutral-dark-hover);
}
.root-toolbox .toolbox-button.active {
background-color: var(--color-ui-neutral-dark-active);
}
.root-toolbox .details .toolbox-button.active { &.active {
background-color: var(--color-ui-neutral-dark); background-color: var(--color-ui-neutral-dark-active);
} }
.root-toolbox .details .toolbox-button:hover { }
background-color: var(--color-ui-neutral-dark-hover);
} .details {
.root-toolbox .details .toolbox-button { .toolbox-button {
background-color: var(--color-ui-neutral-dark-active); background-color: var(--color-ui-neutral-dark-active);
&.active {
background-color: var(--color-ui-neutral-dark);
}
&:hover {
background-color: var(--color-ui-neutral-dark-hover);
}
}
}
} }
</style> </style>