Skip to content

Commit 570694a

Browse files
7PH7PH
committed
Initial commit
0 parents  commit 570694a

22 files changed

+3524
-0
lines changed

‎.gitignore

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
lib
2+
3+
# Logs
4+
*.log
5+
npm-debug.log*
6+
yarn-debug.log*
7+
yarn-error.log*
8+
pnpm-debug.log*
9+
lerna-debug.log*
10+
11+
node_modules
12+
dist
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎docs-src/README.md

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# Demo website
2+

‎docs-src/index.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>PowerGlitch</title>
7+
</head>
8+
<body>
9+
<div id="app"></div>
10+
<script type="module" src="/src/main.js"></script>
11+
</body>
12+
</html>

‎docs-src/src/App.vue

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<script setup>
2+
import OptionPanel from './components/OptionPanel.vue'
3+
import ImagePreview from './components/ImagePreview.vue'
4+
</script>
5+
6+
<template>
7+
<div class="app h-full grid grid-cols-12">
8+
<div class="col-span-4 border p-4 overflow-y-auto">
9+
<OptionPanel />
10+
</div>
11+
<div class="col-span-8 flex flex-col">
12+
<div class="grow flex flex-col justify-center">
13+
<ImagePreview class="mx-auto" />
14+
</div>
15+
</div>
16+
</div>
17+
</template>
18+
19+
<style scoped>
20+
</style>

‎docs-src/src/assets/default.gif

33.3 KB
Loading

‎docs-src/src/components/BooleanOption.vue

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<script setup>
2+
import { ref } from 'vue';
3+
import { useAppStore } from '@/stores/app';
4+
5+
const appStore = useAppStore();
6+
7+
defineProps({
8+
modelValue: {
9+
type: Boolean,
10+
required: true,
11+
},
12+
title: {
13+
type: String,
14+
required: true,
15+
},
16+
});
17+
18+
defineEmits(['update:modelValue']);
19+
</script>
20+
21+
<template>
22+
<div class="pl-4 text-sm grid grid-cols-12">
23+
<div class="col-span-4 flex flex-col justify-center whitespace-nowrap overflow-x-hidden text-ellipsis min-w-0">
24+
{{ title }}
25+
</div>
26+
<div class="col-span-8 flex gap-4 overflow-x-hidden">
27+
<select
28+
class="w-20"
29+
:value="modelValue"
30+
@input="$emit('update:modelValue', $event.target.value === 'true')"
31+
>
32+
<option value="true">Yes</option>
33+
<option value="false">No</option>
34+
</select>
35+
</div>
36+
</div>
37+
</template>

‎docs-src/src/components/ImagePreview.vue

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<script setup>
2+
import { ref, watch, onMounted } from 'vue';
3+
import { useAppStore } from '@/stores/app';
4+
import { PowerGlitch } from '../../../src/index';
5+
6+
const appStore = useAppStore();
7+
8+
const container = ref(null);
9+
10+
const rebuild = () => {
11+
if (! container.value) {
12+
return;
13+
}
14+
PowerGlitch.install(container.value, appStore.powerGlitchOptions);
15+
};
16+
17+
// Rebuild when mounted or options changed
18+
onMounted(rebuild);
19+
watch(rebuild);
20+
</script>
21+
22+
<template>
23+
<div>
24+
<div ref="container" class="glitch"></div>
25+
</div>
26+
</template>
27+
28+
<style scoped>
29+
.glitch {
30+
width: 200px;
31+
height: 200px;
32+
}
33+
</style>

‎docs-src/src/components/NumberOption.vue

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<script setup>
2+
import { ref } from 'vue';
3+
import { useAppStore } from '@/stores/app';
4+
5+
const appStore = useAppStore();
6+
7+
defineProps({
8+
modelValue: {
9+
type: Number,
10+
required: true,
11+
},
12+
title: {
13+
type: String,
14+
required: true,
15+
},
16+
min: {
17+
type: Number,
18+
required: true,
19+
},
20+
max: {
21+
type: Number,
22+
required: true,
23+
},
24+
step: {
25+
type: Number,
26+
required: true,
27+
},
28+
factor: {
29+
type: Number,
30+
default: 1,
31+
},
32+
});
33+
34+
defineEmits(['update:modelValue']);
35+
</script>
36+
37+
<template>
38+
<div class="pl-4 text-sm grid grid-cols-12">
39+
<div class="col-span-4 flex flex-col justify-center whitespace-nowrap overflow-x-hidden text-ellipsis min-w-0">
40+
{{ title }}
41+
</div>
42+
<div class="col-span-8 flex gap-4 overflow-x-hidden">
43+
<input
44+
class="w-20"
45+
:value="modelValue * factor"
46+
@change="$emit('update:modelValue', (parseInt($event.target.value) / factor))"
47+
type="number"
48+
:min="min * factor"
49+
:max="max * factor"
50+
/>
51+
<input
52+
:value="modelValue * factor"
53+
@input="$emit('update:modelValue', (parseInt($event.target.value) / factor))"
54+
type="range"
55+
:min="min * factor"
56+
:max="max * factor"
57+
:step="step * factor"
58+
/>
59+
</div>
60+
</div>
61+
</template>

‎docs-src/src/components/OptionPanel.vue

+178
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
<script setup>
2+
import { ref } from 'vue';
3+
import { useAppStore } from '@/stores/app';
4+
import { getDefaultOptions } from '../../../src/index.ts';
5+
import ToggleGroupOption from '@/components/ToggleGroupOption.vue';
6+
import StringOption from '@/components/StringOption.vue';
7+
import BooleanOption from '@/components/BooleanOption.vue';
8+
import NumberOption from '@/components/NumberOption.vue';
9+
10+
const appStore = useAppStore();
11+
</script>
12+
13+
<template>
14+
<div class="px-4">
15+
16+
<div class="font-bold text-xl mb-4 flex">
17+
<div class="grow">PowerGlitch</div>
18+
<div>
19+
<a
20+
title="Github"
21+
target="_blank"
22+
href="https://github.com/7PH/powerglitch"
23+
>
24+
<fa icon="fa-brands fa-github" />
25+
</a>
26+
</div>
27+
</div>
28+
29+
<div class="font-bold mt-6 mb-2 pl-2">Global</div>
30+
<StringOption
31+
class="mt-1"
32+
v-model="appStore.powerGlitchOptions.imageUrl"
33+
:title="'Image'"
34+
/>
35+
<StringOption
36+
class="mt-1"
37+
v-model="appStore.powerGlitchOptions.backgroundColor"
38+
:title="'Background color'"
39+
/>
40+
41+
<div class="font-bold mt-6 mb-2 pl-2">Timing</div>
42+
<NumberOption
43+
class="mt-1"
44+
v-model="appStore.powerGlitchOptions.timing.duration"
45+
:title="'Loop duration (ms)'"
46+
:min="100"
47+
:max="10000"
48+
:step="100"
49+
/>
50+
<ToggleGroupOption
51+
class="mt-1"
52+
v-model="appStore.powerGlitchOptions.timing.iterations"
53+
:title="'Loop'"
54+
:getDefaultValue="v => v ? Infinity : 1"
55+
/>
56+
<template v-if="appStore.powerGlitchOptions.timing.iterations < Infinity">
57+
<NumberOption
58+
class="mt-1"
59+
v-model="appStore.powerGlitchOptions.shake.velocity"
60+
:title="'Velocity (steps/s)'"
61+
:min="1"
62+
:max="60"
63+
:step="1"
64+
/>
65+
</template>
66+
67+
<div class="font-bold mt-6 mb-2 pl-2">Glitch Time Span</div>
68+
<ToggleGroupOption
69+
v-model="appStore.powerGlitchOptions.glitchTimeSpan"
70+
:title="'Enabled'"
71+
:getDefaultValue="v => v ? getDefaultOptions().glitchTimeSpan : false"
72+
/>
73+
<template v-if="appStore.powerGlitchOptions.glitchTimeSpan">
74+
<NumberOption
75+
class="mt-1"
76+
v-model="appStore.powerGlitchOptions.glitchTimeSpan.start"
77+
:title="'Start time (%)'"
78+
:min="0.00"
79+
:max="1.00"
80+
:step="0.01"
81+
:factor="100"
82+
/>
83+
<NumberOption
84+
class="mt-1"
85+
v-model="appStore.powerGlitchOptions.glitchTimeSpan.end"
86+
:title="'End time (%)'"
87+
:min="0.00"
88+
:max="1.00"
89+
:step="0.01"
90+
:factor="100"
91+
/>
92+
</template>
93+
94+
<div class="font-bold mt-6 mb-2 pl-2">Shake</div>
95+
<ToggleGroupOption
96+
v-model="appStore.powerGlitchOptions.shake"
97+
:title="'Enabled'"
98+
:getDefaultValue="v => v ? getDefaultOptions().shake : false"
99+
/>
100+
<template v-if="appStore.powerGlitchOptions.shake">
101+
<NumberOption
102+
class="mt-1"
103+
v-model="appStore.powerGlitchOptions.shake.velocity"
104+
:title="'Velocity (steps/s)'"
105+
:min="1"
106+
:max="60"
107+
:step="1"
108+
/>
109+
<NumberOption
110+
class="mt-1"
111+
v-model="appStore.powerGlitchOptions.shake.amplitudeX"
112+
:title="'X amplitude (%)'"
113+
:min="0.00"
114+
:max="2.00"
115+
:step="0.01"
116+
:factor="100"
117+
/>
118+
<NumberOption
119+
class="mt-1"
120+
v-model="appStore.powerGlitchOptions.shake.amplitudeY"
121+
:title="'Y amplitude (%)'"
122+
:min="0.00"
123+
:max="2.00"
124+
:step="0.01"
125+
:factor="100"
126+
/>
127+
</template>
128+
129+
<div class="font-bold mt-6 mb-2 pl-2">Slices</div>
130+
<ToggleGroupOption
131+
v-model="appStore.powerGlitchOptions.slices"
132+
:title="'Enabled'"
133+
:getDefaultValue="v => v ? getDefaultOptions().slices : false"
134+
/>
135+
<template v-if="appStore.powerGlitchOptions.slices">
136+
<NumberOption
137+
class="mt-1"
138+
v-model="appStore.powerGlitchOptions.slices.count"
139+
:title="'Count (slices/step)'"
140+
:min="1"
141+
:max="60"
142+
:step="1"
143+
/>
144+
<NumberOption
145+
class="mt-1"
146+
v-model="appStore.powerGlitchOptions.slices.velocity"
147+
:title="'Velocity (steps/s)'"
148+
:min="1"
149+
:max="60"
150+
:step="1"
151+
/>
152+
<NumberOption
153+
class="mt-1"
154+
v-model="appStore.powerGlitchOptions.slices.minHeight"
155+
:title="'Min slice height (%)'"
156+
:min="0.01"
157+
:max="1.00"
158+
:step="0.01"
159+
:factor="100"
160+
/>
161+
<NumberOption
162+
class="mt-1"
163+
v-model="appStore.powerGlitchOptions.slices.maxHeight"
164+
:title="'Max slice height (%)'"
165+
:min="0.01"
166+
:max="1.00"
167+
:step="0.01"
168+
:factor="100"
169+
/>
170+
<BooleanOption
171+
class="mt-1"
172+
v-model="appStore.powerGlitchOptions.slices.hueRotate"
173+
:title="'Hue rotate'"
174+
/>
175+
</template>
176+
177+
</div>
178+
</template>

0 commit comments

Comments
 (0)