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/parser": "^5.26.0",
"cross-env": "^7.0.3",
"eslint": "^8.16.0",
"typescript": "^4.9.4",
"vite": "^4.1.4"
"eslint": "^8.40.0",
"eslint-plugin-vue": "^9.11.0",
"typescript": "^5.0.4",
"vite": "^4.3.0"
}
}

8
src/main.ts
View File

@@ -1,9 +1,7 @@
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import Root from '@/ui/Root/Root.vue'
import { createApp } from "vue";
import Root from "@/ui/Root/Root.vue";
import "@/ui/global.css";
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" />
</div>
<div class="sidebar-toggle">
<div
class="quick-access-button"
:title="`${ sidebarActive ? 'Hide' : 'Show' } sidebar`"
@click="sidebarActive = !sidebarActive">
<icon icon-name="list" color="var(--color-ui-neutral-dark)" />
</div>
<div
class="quick-access-button"
title="Change orientation"
@click="toggleOrientation">
<icon icon-name="arrowClockwise" color="var(--color-ui-neutral-dark)" />
</div>
<div
class="quick-access-button"
title="Bake all tracks"
@click="bakeAll">
<icon icon-name="snowflake" color="var(--color-ui-neutral-dark)" />
</div>
<div
class="quick-access-button"
title="Reset all"
@click="resetActiveBeat">
<icon icon-name="trash" color="var(--color-ui-neutral-dark)" />
</div>
<div
class="quick-access-button"
:class="{ 'unclickable': !saveDirty }"
:title="saveDirty ? 'Save changes' : 'No unsaved changes'"
@click="save('localStorage')">
<icon icon-name="download" color="var(--color-ui-neutral-dark)" />
<div class="buttons">
<div
class="quick-access-button"
:title="`${ sidebarActive ? 'Hide' : 'Show' } sidebar`"
@click="sidebarActive = !sidebarActive">
<icon icon-name="list" color="var(--color-ui-neutral-dark)" />
</div>
<div
class="quick-access-button"
title="Change orientation"
@click="toggleOrientation">
<icon icon-name="arrowClockwise" color="var(--color-ui-neutral-dark)" />
</div>
<div
class="quick-access-button"
title="Bake all tracks"
@click="bakeAll">
<icon icon-name="snowflake" color="var(--color-ui-neutral-dark)" />
</div>
<div
class="quick-access-button"
title="Reset all"
@click="resetActiveBeat">
<icon icon-name="trash" color="var(--color-ui-neutral-dark)" />
</div>
<div
class="quick-access-button"
:class="{ 'unclickable': !saveDirty }"
:title="saveDirty ? 'Save changes' : 'No unsaved changes'"
@click="save('localStorage')">
<icon icon-name="download" color="var(--color-ui-neutral-dark)" />
</div>
</div>
<toolbox class="toolbox" />
</div>
</div>
<div class="beat-stage-container">
<toolbox />
<div class="beat-stage">
<beat-view
:beat-index="activeBeatIndex"
@@ -76,6 +78,8 @@
import { BeatStoreKey, createBeatStore } from "@/BeatStore";
import { AppStateStoreKey, createAppStateStore } from "@/AppState";
const TITLE = 'Drum Slayer';
defineProps<{
title: string,
}>();
@@ -99,8 +103,6 @@
saveDirty,
} = beatStore;
const TITLE = 'Drum Slayer';
watch(saveDirty, (dirty) => {
if (dirty) {
document.title = `${ TITLE } (unsaved changes)`;
@@ -110,9 +112,9 @@
});
const mediaQueryList = window.matchMedia("screen and (max-width: 900px)");
const onMediaChange = (event: MediaQueryListEvent | MediaQueryList) => {
function onMediaChange(event: MediaQueryListEvent | MediaQueryList) {
sidebarActive.value = event.matches;
};
}
mediaQueryList.addEventListener('change', onMediaChange);
onMediaChange(mediaQueryList);
@@ -178,11 +180,11 @@
background-color: var(--color-bg-light);
overflow: scroll;
display: inline-block;
}
.settings .title {
color: var(--color-title-light);
text-align: center;
.title {
color: var(--color-title-light);
text-align: center;
}
}
.sidebar-toggle {
@@ -191,18 +193,31 @@
min-width: 2em;
background-color: var(--color-bg-light);
left: 0;
}
display: flex;
flex-direction: column;
.quick-access-button {
right: 0;
width: 2em;
height: 2em;
cursor: pointer;
margin-bottom: 0.5em;
&.unclickable {
opacity: 50%;
cursor: auto;
.buttons {
flex: 1;
.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>
<div class="root-toolbox">
<div class="toolbox">
<div class="main-row">
<div
<icon
class="toolbox-button"
icon-name="lh"
:class="{ active: selectedTool === 'track-unit-type' }"
@click="selectedTool = 'track-unit-type'">
Track Type
</div>
<div
@click="selectedTool = 'track-unit-type'" />
<icon
class="toolbox-button"
icon-name="lf"
:class="{ active: selectedTool === 'sticking' }"
@click="selectedTool = 'sticking'">
Sticking
</div>
<div
@click="selectedTool = 'sticking'" />
<icon
class="toolbox-button"
:class="{ active: selectedTool === 'eraser' }"
@click="selectedTool = 'eraser'">
Eraser
</div>
@click="selectedTool = 'eraser'" />
</div>
<div v-if="selectedTool === 'track-unit-type'" class="details">
<div v-for="(type, i) in TrackUnitTypeList"
@@ -57,58 +53,64 @@
</script>
<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 {
height: 2.5em;
margin: auto;
display: flex;
background-color: var(--color-ui-neutral-dark);
justify-content: center;
width: 100%;
}
.details {
margin: auto;
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 {
margin: auto;
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;
}
&.hidden {
visibility: hidden;
}
}
.root-toolbox .details.hidden {
visibility: hidden;
}
.track-unit {
margin: 0;
padding: 0;
}
.root-toolbox .track-unit {
margin: 0;
padding: 0;
}
.toolbox-button {
padding: 0.5em;
cursor: pointer;
color: black;
background-color: var(--color-ui-neutral-dark);
.root-toolbox .toolbox-button {
padding: 0.5em;
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);
}
&:hover {
background-color: var(--color-ui-neutral-dark-hover);
}
.root-toolbox .details .toolbox-button.active {
background-color: var(--color-ui-neutral-dark);
}
.root-toolbox .details .toolbox-button:hover {
background-color: var(--color-ui-neutral-dark-hover);
}
.root-toolbox .details .toolbox-button {
background-color: var(--color-ui-neutral-dark-active);
&.active {
background-color: var(--color-ui-neutral-dark-active);
}
}
.details {
.toolbox-button {
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>