Skip to content
This repository has been archived by the owner on Nov 29, 2020. It is now read-only.

Commit

Permalink
Browse files Browse the repository at this point in the history
Updated Splits editing
  • Loading branch information
prefixaut committed Jul 18, 2019
1 parent 23b0003 commit 8747c53
Show file tree
Hide file tree
Showing 6 changed files with 453 additions and 316 deletions.
136 changes: 101 additions & 35 deletions src/components/game-info-editor.vue
@@ -1,33 +1,64 @@
<template>
<div class="game-info-editor">
<div class="row">
<spl-text-input v-model="name" label="Name" class="size-6" />
<spl-text-input v-model="category" label="Category" class="size-6" />
<spl-text-input
label="Name"
class="size-6"
:value="name"
@change="updateName($event)"
/>
<spl-text-input
label="Category"
class="size-6"
:value="category"
@change="updateCategory($event)"
/>
</div>

<div class="row">
<div class="size-4">
<span>Language</span>
<vue-select v-model="language" :options="allLanguages" label="name" class="outline" />
<vue-select
label="name"
class="outline"
:value="language"
:options="allLanguages"
@change="updateLanguage($event)"
/>
</div>
<spl-text-input v-model="platform" label="Platform" class="size-4" />
<spl-text-input
label="Platform"
class="size-4"
:value="platform"
@change="updatePlatform($event)"
/>
<div class="size-4">
<span>Region</span>
<vue-select v-model="region" :options="allRegions" label="name" class="outline" />
<vue-select
label="name"
class="outline"
:value="region"
:options="allRegions"
@change="updateRegion($event)"
/>
</div>
</div>

<spl-button theme="info" outline @click="saveContent()">Save Infos</spl-button>
</div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
import ISO6391 from 'iso-639-1';
import { RootState } from '../store/states/root.state';
import { Region } from '../store/states/game-info.state';
import { ACTION_SET_GAME_NAME, ACTION_SET_CATEGORY, ACTION_SET_LANGUAGE, ACTION_SET_PLATFORM, ACTION_SET_REGION } from '../store/modules/game-info.module';
import { Region, GameInfoState } from '../store/states/game-info.state';
import {
ACTION_SET_GAME_NAME,
ACTION_SET_CATEGORY,
ACTION_SET_LANGUAGE,
ACTION_SET_PLATFORM,
ACTION_SET_REGION
} from '../store/modules/game-info.module';
interface SingleLanguage {
code: string;
Expand All @@ -37,40 +68,72 @@ interface SingleLanguage {
@Component({ name: 'spl-game-info-editor' })
export default class GameInfoEditorComponent extends Vue {
@Prop()
public value: GameInfoState;
public name: string = null;
public category: string = null;
public language: SingleLanguage = null;
public platform: string = null;
public region: Region = null;
public region: { name: string; id: Region } = null;
public allLanguages: SingleLanguage[];
public allRegions: { name: string; id: Region }[];
public allRegions: { name: string; id: Region }[] = [
{ id: Region.PAL_EUR, name: 'PAL Europe' },
{ id: Region.PAL_CHN, name: 'PAL China' },
{ id: Region.PAL_BRA, name: 'PAL Brazil' },
{ id: Region.NTSC_USA, name: 'NTSC North America' },
{ id: Region.NTSC_JPN, name: 'NTSC Japan' },
];
created() {
const state = (this.$store.state as RootState).splitterino.gameInfo;
this.allLanguages = ISO6391.getLanguages(ISO6391.getAllCodes());
}
public updateName(name: string) {
this.name = name;
this.sendChange();
}
public updateCategory(category: string) {
this.category = category;
this.sendChange();
}
public updateLanguage(language) {
this.language = language;
this.sendChange();
}
public updatePlatform(platform: string) {
this.platform = platform;
this.sendChange();
}
public updateRegion(region) {
this.region = region;
this.sendChange();
}
public sendChange() {
this.$emit('change', {
name: this.name,
category: this.category,
language: this.language != null ? this.language.code : null,
platform: this.platform,
region: this.region != null ? this.region.id : null,
});
}
@Watch('value', { immediate: true, deep: true })
public onValuePropChange(state: GameInfoState) {
this.name = state.name;
this.category = state.category;
const tmp = ISO6391.getLanguages([state.language])[0];
this.language = tmp != null ? tmp : null;
this.platform = state.platform;
this.region = state.region;
this.allLanguages = ISO6391.getLanguages(ISO6391.getAllCodes());
this.allRegions = [
{ id: Region.PAL_EUR, name: 'PAL Europe' },
{ id: Region.PAL_CHN, name: 'PAL China' },
{ id: Region.PAL_BRA, name: 'PAL Brazil' },
{ id: Region.NTSC_USA, name: 'NTSC North America' },
{ id: Region.NTSC_JPN, name: 'NTSC Japan' },
];
}
saveContent() {
this.$store.dispatch(ACTION_SET_GAME_NAME, this.name);
this.$store.dispatch(ACTION_SET_CATEGORY, this.category);
this.$store.dispatch(ACTION_SET_LANGUAGE, this.language != null ? this.language.code : null);
this.$store.dispatch(ACTION_SET_PLATFORM, this.platform);
this.$store.dispatch(ACTION_SET_REGION, this.region);
this.region = this.allRegions.find(region => region.id === state.region);
}
}
</script>
Expand All @@ -79,21 +142,24 @@ export default class GameInfoEditorComponent extends Vue {
.game-info-editor {
.row {
display: flex;
margin: 10px 0;
flex-wrap: wrap;
margin: 0 10px;
}
.size-6 {
flex: 0 1 50%;
min-width: 50%;
max-width: 50%;
padding: 0 10px;
margin-top: 10px;
}
.size-4 {
flex: 0 1 33%;
min-width: 33%;
max-width: 33%;
flex: 1 1 auto;
min-width: auto;
max-width: auto;
padding: 0 10px;
margin-top: 10px;
}
}
</style>
Expand Down

0 comments on commit 8747c53

Please sign in to comment.