-
-
-
Play Song
+
-
-
diff --git a/src/main.ts b/src/main.ts
index c673f53..0e6b79f 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,6 +1,9 @@
+import './assets/base.css';
+
import { createApp } from 'vue';
+import { createPinia } from 'pinia';
+
import App from './App.vue';
import router from './router';
-import store from './store';
-createApp(App).use(store).use(router).mount('#app');
+createApp(App).use(createPinia()).use(router).mount('#app');
diff --git a/src/plugins/vue-youtube.ts b/src/plugins/vue-youtube.ts
index a6b6dc2..efc2595 100644
--- a/src/plugins/vue-youtube.ts
+++ b/src/plugins/vue-youtube.ts
@@ -1,14 +1,14 @@
/* tslint:disable */
// @ts-nocheck
-import { h } from 'vue'
+import { h } from 'vue';
import player from 'youtube-player';
-const UNSTARTED = -1
-const ENDED = 0
-const PLAYING = 1
-const PAUSED = 2
-const BUFFERING = 3
-const CUED = 5
+const UNSTARTED = -1;
+const ENDED = 0;
+const PLAYING = 1;
+const PAUSED = 2;
+const BUFFERING = 3;
+const CUED = 5;
export default {
name: 'Youtube',
@@ -43,7 +43,7 @@ export default {
default: false
}
},
- data () {
+ data() {
return {
player: {},
events: {
@@ -55,99 +55,94 @@ export default {
[CUED]: 'cued'
},
resizeTimeout: null
- }
+ };
},
computed: {
- aspectRatio () {
- return this.width / this.height
+ aspectRatio() {
+ return this.width / this.height;
}
},
methods: {
- playerReady (e) {
- this.$emit('ready', e.target)
+ playerReady(e) {
+ this.$emit('ready', e.target);
},
- playerStateChange (e) {
+ playerStateChange(e) {
if (e.data !== null && e.data !== UNSTARTED) {
- this.$emit(this.events[e.data], e.target)
+ this.$emit(this.events[e.data], e.target);
}
},
- playerError (e) {
- this.$emit('error', e.target)
+ playerError(e) {
+ this.$emit('error', e.target);
},
- updatePlayer (videoId) {
+ updatePlayer(videoId) {
if (!videoId) {
- this.player.stopVideo()
- return
+ this.player.stopVideo();
+ return;
}
- const params = { videoId: videoId }
+ const params = { videoId: videoId };
if (typeof this.playerVars.start === 'number') {
- params.startSeconds = this.playerVars.start
+ params.startSeconds = this.playerVars.start;
}
if (typeof this.playerVars.end === 'number') {
- params.endSeconds = this.playerVars.end
+ params.endSeconds = this.playerVars.end;
}
if (this.playerVars.autoplay === 1) {
- this.player.loadVideoById(params)
- return
+ this.player.loadVideoById(params);
+ return;
}
- this.player.cueVideoById(params)
+ this.player.cueVideoById(params);
},
- resizeProportionally () {
- this.player.getIframe().then(iframe => {
- const width = this.fitParent
- ? iframe.parentElement.offsetWidth
- : iframe.offsetWidth
- const height = width / this.aspectRatio
- this.player.setSize(width, height)
- })
+ resizeProportionally() {
+ this.player.getIframe().then((iframe) => {
+ const width = this.fitParent ? iframe.parentElement.offsetWidth : iframe.offsetWidth;
+ const height = width / this.aspectRatio;
+ this.player.setSize(width, height);
+ });
},
- onResize () {
- clearTimeout(this.resizeTimeout)
- this.resizeTimeout = setTimeout(
- this.resizeProportionally,
- this.resizeDelay
- )
+ onResize() {
+ clearTimeout(this.resizeTimeout);
+ this.resizeTimeout = setTimeout(this.resizeProportionally, this.resizeDelay);
}
},
watch: {
videoId: 'updatePlayer',
- resize (val) {
+ resize(val) {
if (val) {
- window.addEventListener('resize', this.onResize)
- this.resizeProportionally()
+ window.addEventListener('resize', this.onResize);
+ this.resizeProportionally();
} else {
- window.removeEventListener('resize', this.onResize)
- this.player.setSize(this.width, this.height)
+ window.removeEventListener('resize', this.onResize);
+ this.player.setSize(this.width, this.height);
}
},
- width (val) {
- this.player.setSize(val, this.height)
+ width(val) {
+ this.player.setSize(val, this.height);
},
- height (val) {
- this.player.setSize(this.width, val)
+ height(val) {
+ this.player.setSize(this.width, val);
}
},
- beforeUnmount () {
+ beforeUnmount() {
if (this.player !== null && this.player.destroy) {
- this.player.destroy()
- delete this.player
+ this.player.destroy();
+ delete this.player;
}
if (this.resize) {
- window.removeEventListener('resize', this.onResize)
+ window.removeEventListener('resize', this.onResize);
}
},
- mounted () {
+ mounted() {
window.YTConfig = {
host: 'https://www.youtube.com/iframe_api'
- }
+ };
- const host = this.nocookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com'
+ const host = this.nocookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com';
this.player = player(this.$el, {
host,
@@ -155,23 +150,23 @@ export default {
height: this.height,
videoId: this.videoId,
playerVars: this.playerVars
- })
+ });
- this.player.on('ready', this.playerReady)
- this.player.on('stateChange', this.playerStateChange)
- this.player.on('error', this.playerError)
+ this.player.on('ready', this.playerReady);
+ this.player.on('stateChange', this.playerStateChange);
+ this.player.on('error', this.playerError);
if (this.resize) {
- window.addEventListener('resize', this.onResize)
+ window.addEventListener('resize', this.onResize);
}
- //@ts-ignore
+ //@ts-ignore
if (this.fitParent) {
//@ts-ignore
- this.resizeProportionally()
+ this.resizeProportionally();
}
},
render() {
- return h('div')
+ return h('div');
}
-}
+};
diff --git a/src/router/index.ts b/src/router/index.ts
index 67ef9ac..53f1a36 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,11 +1,12 @@
-import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
+import { createRouter, createWebHistory } from 'vue-router';
+import type { RouteRecordRaw } from 'vue-router';
import Home from '../views/Home.vue';
const routes: Array
= [
{
path: '/',
name: 'Home',
- component: Home,
+ component: Home
},
{
path: '/about',
@@ -13,23 +14,23 @@ const routes: Array = [
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
- component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
+ component: () => import('../views/About.vue')
},
{
path: '/gamescreen',
name: 'Game',
- component: () => import(/* webpackChunkName: "game" */ '../views/Game.vue'),
+ component: () => import('../views/Game.vue')
},
{
path: '/maintenance',
name: 'Maintenance',
- component: () => import(/* webpackChunkName: "maintenance" */ '../views/Maintenance.vue'),
- },
+ component: () => import('../views/Maintenance.vue')
+ }
];
const router = createRouter({
- history: createWebHistory(process.env.BASE_URL),
- routes,
+ history: createWebHistory(import.meta.env.BASE_URL),
+ routes
});
export default router;
diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts
index 3804a43..cf860da 100644
--- a/src/shims-vue.d.ts
+++ b/src/shims-vue.d.ts
@@ -1,6 +1,7 @@
/* eslint-disable */
declare module '*.vue' {
- import type { DefineComponent } from 'vue'
- const component: DefineComponent<{}, {}, any>
- export default component
+ import type { DefineComponent } from 'vue';
+ import 'vite/client';
+ const component: DefineComponent<{}, {}, any>;
+ export default component;
}
diff --git a/src/shims-vuex.d.ts b/src/shims-vuex.d.ts
index 33708c2..4a21914 100644
--- a/src/shims-vuex.d.ts
+++ b/src/shims-vuex.d.ts
@@ -1,4 +1,4 @@
-import { Store } from '@/store';// path to store file
+import { Store } from '@/store'; // path to store file
import { State } from './store/index';
declare module '@vue/runtime-core' {
diff --git a/src/store/fetch.ts b/src/store/fetch.ts
index e0632d4..3674443 100644
--- a/src/store/fetch.ts
+++ b/src/store/fetch.ts
@@ -1,7 +1,5 @@
-// eslint-disable-next-line
-const API_URL = process.env.VUE_APP_API_URL;
+const API_URL = import.meta.env.VITE_API_URL;
-// eslint-disable-next-line
export function fetchApi(url: string, config?: object) {
return fetch(`${API_URL}${url}`, config);
}
diff --git a/src/store/index.ts b/src/store/index.ts
index da94d74..d93014b 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,32 +1,51 @@
-import { createStore } from 'vuex';
-import { QuestionPackage, Choice, CorrectAnswer } from './types';
+// import { QuestionPackage, Choice, CorrectAnswer } from './types.ts';
import { fetchApi } from './fetch';
-// In which I question whether typescript is really worth the headache
-// ts-ignore
-function getYoutubeIdFromUrl(url: any) {
- // eslint-disable-next-line
- // ts-ignore
- const blah = url.split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/);
- // ts-ignore
- // eslint-disable-next-line
- return (blah[2] !== undefined) ? blah[2].split(/[^0-9a-z_\-]/i)[0] : blah[0];
+import { defineStore } from 'pinia';
+export interface CorrectAnswer {
+ origin_game: string;
+ remix_artist: string;
+ ocremix_remix_url: string;
+ original_song_title: string;
}
-export class State {
- questionPackage: QuestionPackage | null = null;
+export interface Choice {
+ origin_game: string;
+ public_id: number;
+}
- selectedAnswer: number | null = null;
+export interface Question {
+ remix_youtube_url: string;
+ secret_id: number;
+}
- correctAnswer: CorrectAnswer | null = null;
+export interface QuestionPackage {
+ choices: Choice[];
+ question: Question;
+}
- hasCheckedAnswer = false;
+// In which I question whether typescript is really worth the headache
+function getYoutubeIdFromUrl(url: string) {
+ const blah = url.split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/);
+ return blah[2] !== undefined ? blah[2].split(/[^0-9a-z_\-]/i)[0] : blah[0];
}
-// export interface StateInterface extends State {};
+export interface State {
+ questionPackage: QuestionPackage | null;
+ selectedAnswer: number | null;
+ correctAnswer: CorrectAnswer | null;
+ hasCheckedAnswer: boolean;
+}
-export default createStore({
- state: new State(),
+export const useStore = defineStore('store', {
+ state: (): State => {
+ return {
+ questionPackage: null,
+ selectedAnswer: null,
+ correctAnswer: null,
+ hasCheckedAnswer: false
+ };
+ },
getters: {
currentQuestionYoutubeId: (state: State): string | null => {
if (state.questionPackage?.question?.remix_youtube_url) {
@@ -39,75 +58,40 @@ export default createStore({
return state.questionPackage.choices;
}
return null;
- },
- correctAnswer: (state: State): CorrectAnswer | null => state.correctAnswer,
- hasCheckedAnswer: (state: State): boolean => state.hasCheckedAnswer,
- },
- mutations: {
- setQuestionPackage(state: State, payload) {
- state.questionPackage = payload;
- },
- setSelectedChoice(state: State, choice: number) {
- state.selectedAnswer = choice;
- },
- clearGameState(state: State) {
- state.selectedAnswer = null;
- state.correctAnswer = null;
- state.questionPackage = null;
- state.hasCheckedAnswer = false;
- },
- setCorrectAnswer(state: State, answer: CorrectAnswer) {
- state.correctAnswer = answer;
- },
- setHasCheckedAnswer(state: State, hasChecked: boolean) {
- state.hasCheckedAnswer = hasChecked;
- },
+ }
},
actions: {
- async getRemixes() {
- const response = await fetchApi('/remixes/');
- const responseJson = await response.json();
- console.log(responseJson);
- },
- // Lol how do you do no first argument to an action in vuex
- // without angering the linter or typescript?
- // eslint-disable-next-line
- async submitRemixForParsing({}, id: string) {
- const response = await fetchApi(`/parse/${id}`);
- const responseJson = await response.json();
- console.log(responseJson);
- },
- async getSong({ commit }) {
- commit('clearGameState');
+ async getSong() {
+ this.selectedAnswer = null;
+ this.correctAnswer = null;
+ this.questionPackage = null;
+ this.hasCheckedAnswer = false;
+
const response = await fetchApi('/game/', {});
const responseJson = await response.json();
- commit('setQuestionPackage', responseJson);
- },
- async seedDB() {
- const response = await fetchApi('/seed/');
- const responseJson = await response.json();
- console.log(responseJson);
+ this.questionPackage = responseJson;
},
- async submitAnswer({ state, commit }) {
- commit('setHasCheckedAnswer', false);
- const secret_id = state.questionPackage?.question.secret_id;
- const public_id = state.selectedAnswer;
+ async submitAnswer() {
+ this.correctAnswer = null;
+
+ const secret_id = this.questionPackage?.question.secret_id;
+ const public_id = this.selectedAnswer;
+
const response = await fetchApi('/game/', {
method: 'POST',
mode: 'cors',
headers: {
- 'Content-Type': 'application/json',
+ 'Content-Type': 'application/json'
},
body: JSON.stringify({
public_id,
- secret_id,
- }),
+ secret_id
+ })
});
+
const responseJson = await response.json();
- commit('setCorrectAnswer', responseJson);
- commit('setHasCheckedAnswer', true);
- },
- },
- modules: {
- },
+ this.correctAnswer = responseJson;
+ this.hasCheckedAnswer = true;
+ }
+ }
});
diff --git a/src/store/types.ts b/src/store/types.ts
index beef07b..9029465 100644
--- a/src/store/types.ts
+++ b/src/store/types.ts
@@ -1,21 +1,21 @@
export interface CorrectAnswer {
- origin_game: string,
- remix_artist: string,
- ocremix_remix_url: string,
- original_song_title: string,
+ origin_game: string;
+ remix_artist: string;
+ ocremix_remix_url: string;
+ original_song_title: string;
}
export interface Choice {
- origin_game: string,
- public_id: number,
+ origin_game: string;
+ public_id: number;
}
export interface Question {
- remix_youtube_url: string,
- secret_id: number,
+ remix_youtube_url: string;
+ secret_id: number;
}
export interface QuestionPackage {
- choices: Choice[],
- question: Question,
+ choices: Choice[];
+ question: Question;
}
diff --git a/src/views/About.vue b/src/views/About.vue
index 1b79192..9d71819 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -1,29 +1,22 @@
+ This game is a personal project made by Caleb.
- This game is a personal project made by Caleb.
-
-
- He made it after having a really fun night hanging
- out with his girlfriend. One of them would play a videogame
- song on youtube, and the other would try to guess
- what game the song was from.
-
-
- Caleb has a blog .
+ He made it after having a really fun night hanging out with his girlfriend. One of them
+ would play a videogame song on youtube, and the other would try to guess what game the song
+ was from.
+ Caleb has a blog .
He also has a
-
- youtube .
+ youtube .
-
-
diff --git a/src/views/Game.vue b/src/views/Game.vue
index 6087759..301ee42 100644
--- a/src/views/Game.vue
+++ b/src/views/Game.vue
@@ -5,48 +5,33 @@