From bf13c373018bbaa8e2f1c1e024895cfe38bcbb0b Mon Sep 17 00:00:00 2001
From: goynov <goynov@gmail.com>
Date: Sun, 25 Jan 2026 10:45:01 +0200
Subject: [PATCH] refactoring admin console #12

---
 src/components/AppHeader.vue                  |  14 +-
 src/pages/{ => admin}/game-objects/[[id]].vue | 234 +++++++++---------
 src/pages/{ => admin}/game-objects/list.vue   |  70 +++---
 src/pages/{ => admin}/games/[[id]].vue        | 156 ++++++------
 src/pages/{ => admin}/games/list.vue          |  96 +++----
 src/pages/{ => admin}/index.vue               |   0
 src/pages/{ => admin}/preview/[[id]].vue      |   0
 src/pages/{ => admin}/preview/list.vue        |   2 +-
 src/pages/{ => admin}/scenarios/[[id]].vue    | 148 +++++------
 src/pages/{ => admin}/scenarios/list.vue      |  96 +++----
 10 files changed, 408 insertions(+), 408 deletions(-)
 rename src/pages/{ => admin}/game-objects/[[id]].vue (97%)
 rename src/pages/{ => admin}/game-objects/list.vue (85%)
 rename src/pages/{ => admin}/games/[[id]].vue (97%)
 rename src/pages/{ => admin}/games/list.vue (89%)
 rename src/pages/{ => admin}/index.vue (100%)
 rename src/pages/{ => admin}/preview/[[id]].vue (100%)
 rename src/pages/{ => admin}/preview/list.vue (90%)
 rename src/pages/{ => admin}/scenarios/[[id]].vue (96%)
 rename src/pages/{ => admin}/scenarios/list.vue (89%)

diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index a73a430..d12b78e 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -7,9 +7,9 @@
                 <v-btn icon="mdi-plus" variant="text" v-bind="props"></v-btn>
             </template>
             <v-list>
-                <v-list-item to="/game-objects/add">{{ l.createGameObject }}</v-list-item>
-                <v-list-item to="/scenarios/add">{{ l.createScenario }}</v-list-item>
-                <v-list-item to="/games/add">{{ l.createGame }}</v-list-item>
+                <v-list-item to="/admin/game-objects/add">{{ l.createGameObject }}</v-list-item>
+                <v-list-item to="/admin/scenarios/add">{{ l.createScenario }}</v-list-item>
+                <v-list-item to="/admin/games/add">{{ l.createGame }}</v-list-item>
             </v-list>
         </v-menu>
     </v-app-bar>
@@ -20,12 +20,12 @@
         </v-list>
         <v-divider></v-divider>
         <v-list nav>
-            <v-list-item prepend-icon="mdi-database" to="/game-objects/list" :title="l.gameObjects"></v-list-item>
-            <v-list-item prepend-icon="mdi-receipt-text-edit-outline" to="/scenarios/list" :title="l.gameScenarios"></v-list-item>
+            <v-list-item prepend-icon="mdi-database" to="/admin/game-objects/list" :title="l.gameObjects"></v-list-item>
+            <v-list-item prepend-icon="mdi-receipt-text-edit-outline" to="/admin/scenarios/list" :title="l.gameScenarios"></v-list-item>
             <!-- <v-list-item prepend-icon="mdi-cogs" :title="l.gameRules"></v-list-item> -->
             <v-divider></v-divider>
-            <v-list-item prepend-icon="mdi-controller" :title="l.games" to="/games/list"></v-list-item>
-            <v-list-item prepend-icon="mdi-cog-play" :title="l.preview" to="/preview/list"></v-list-item>
+            <v-list-item prepend-icon="mdi-controller" :title="l.games" to="/admin/games/list"></v-list-item>
+            <v-list-item prepend-icon="mdi-cog-play" :title="l.preview" to="/admin/preview/list"></v-list-item>
             
         </v-list>
         <v-divider></v-divider>
diff --git a/src/pages/game-objects/[[id]].vue b/src/pages/admin/game-objects/[[id]].vue
similarity index 97%
rename from src/pages/game-objects/[[id]].vue
rename to src/pages/admin/game-objects/[[id]].vue
index a7a8acf..3372f32 100644
--- a/src/pages/game-objects/[[id]].vue
+++ b/src/pages/admin/game-objects/[[id]].vue
@@ -1,118 +1,118 @@
-<template>
-    <v-container max-width="1400">
-        <v-tabs v-model="panel">
-            <v-tab value="edit">
-                <v-icon icon="mdi-pencil"></v-icon> {{ id == 'add' ? l.createGameObject : l.editGameObject }}
-            </v-tab>
-            <v-tab value="preview" v-show="object.asset">
-                <v-icon icon="mdi-panorama-outline"></v-icon> {{ l.preview }}
-            </v-tab>
-        </v-tabs>
-        <v-tabs-window v-model="panel">
-            <v-tabs-window-item value="edit">
-                <v-card class="container my-3">
-                    <v-form class="pa-4" v-model="valid">
-                        <v-text-field :label="l.name" v-model="object.name" :rules="[rules.required]"></v-text-field>
-                        <v-textarea :label="l.description" v-model="object.description"></v-textarea>
-                        <v-select :label="l.objectType" v-model="object.type" :items="$p.objectTypes.map(ot=>({title:l[ot.value], value:ot.value}))" tit :rules="[rules.required]">
-                        </v-select>
-                        <v-file-input :label="l.objectFile" v-model="object.file" :rules="[rules.requiredFile]"></v-file-input>
-                        <div v-if="object.asset">{{ object.asset.name }} | {{ object.asset.ofn }}</div>
-                    </v-form>
-                    <v-card-actions>
-                        <v-btn @click="save" :loading="loading" prepend-icon="mdi-content-save" color="success"
-                            :disabled="!valid">
-                            {{ l.save }}
-                        </v-btn>
-                        <v-btn @click="save({preview: true})" :loading="loading" prepend-icon="mdi-content-save" color="primary"
-                            :disabled="!valid">
-                            {{ l.saveAndPreview }}
-                        </v-btn>
-                        <v-btn @click="publish" prepend-icon="mdi-publish" color="success" v-if="false && object.id">
-                            {{ l.publish }}</v-btn>
-                    </v-card-actions>
-                </v-card>
-            </v-tabs-window-item>
-            <v-tabs-window-item value="preview">
-                <v-card :title="l.preview" class="container my-3" v-if="object.asset">
-                    <AssetPreview :object="object" ref="assetPreview" ></AssetPreview>
-                    <v-card-actions>
-                        <v-btn @click="captureThumbnail" v-if="forRendering" prepend-icon="mdi-camera" color="secondary">
-                            {{ l.captureThumbnail }}
-                        </v-btn>
-                    </v-card-actions>
-                </v-card>
-            </v-tabs-window-item>
-        </v-tabs-window>
-    </v-container>
-</template>
-
-<script>
-
-export default {
-    data() {
-        return {
-            panel: this.$route.query?.tab || 'edit',
-            object: {},
-            valid: false,
-            rules: {
-                required: v => v ? true : this.l.fieldRequired,
-                requiredFile: v => (v?.size || this.id != 'add') ? true : this.l.fieldRequired
-            },
-            loading: false
-        }
-    },
-    async mounted() {
-        if (this.id && this.id != 'add') {
-            this.object = (await this.$api.gameObject.load(this.id)).data;
-        }
-    },
-    computed: {
-        fileToUpload() {
-            return this.object?.file instanceof File
-        },
-        id() {
-            return this.$route.params?.id;
-        },
-        forRendering() {
-            return this.$p.objectTypes.find(t=> t.value == this.object?.type)?.render
-        },
-    },
-    methods: {
-        async save(params) {
-            this.loading = true;
-            try {
-                let fd = new FormData();
-                let keys = ['name', 'type'];
-                if (this.fileToUpload) keys.push('file');
-                if (this.id != 'add') keys.push('id');
-                if (this.object.thumb) keys.push('thumb');
-
-                keys.forEach(e => fd.append(e, this.object[e]))
-                let result = await this.$api.gameObject.save(fd);
-                Object.assign(this.object, result.data.object);
-                if (this.id == 'add') {
-                    this.$router.replace({ params: { id: this.object.id }, query:{ tab:'preview' } });
-                }
-                // await this.$nextTick();
-                // this.panel = 'preview';
-                // if (!params?.thumbOnly) await this.$refs.assetPreview.loadAsset();
-            } catch (err) {
-                console.error(err);
-            }
-            this.loading = false;
-            // await this.$nextTick();
-            // this.panel = 'preview';
-        },
-        
-        async captureThumbnail() {
-            this.object.thumb = await this.$refs.assetPreview.gameEngine.captureScreenshot();
-            await this.save({ thumbOnly: true });
-        },
-
-        async publish() {
-
-        }
-    }
-}
+<template>
+    <v-container max-width="1400">
+        <v-tabs v-model="panel">
+            <v-tab value="edit">
+                <v-icon icon="mdi-pencil"></v-icon> {{ id == 'add' ? l.createGameObject : l.editGameObject }}
+            </v-tab>
+            <v-tab value="preview" v-show="object.asset">
+                <v-icon icon="mdi-panorama-outline"></v-icon> {{ l.preview }}
+            </v-tab>
+        </v-tabs>
+        <v-tabs-window v-model="panel">
+            <v-tabs-window-item value="edit">
+                <v-card class="container my-3">
+                    <v-form class="pa-4" v-model="valid">
+                        <v-text-field :label="l.name" v-model="object.name" :rules="[rules.required]"></v-text-field>
+                        <v-textarea :label="l.description" v-model="object.description"></v-textarea>
+                        <v-select :label="l.objectType" v-model="object.type" :items="$p.objectTypes.map(ot=>({title:l[ot.value], value:ot.value}))" tit :rules="[rules.required]">
+                        </v-select>
+                        <v-file-input :label="l.objectFile" v-model="object.file" :rules="[rules.requiredFile]"></v-file-input>
+                        <div v-if="object.asset">{{ object.asset.name }} | {{ object.asset.ofn }}</div>
+                    </v-form>
+                    <v-card-actions>
+                        <v-btn @click="save" :loading="loading" prepend-icon="mdi-content-save" color="success"
+                            :disabled="!valid">
+                            {{ l.save }}
+                        </v-btn>
+                        <v-btn @click="save({preview: true})" :loading="loading" prepend-icon="mdi-content-save" color="primary"
+                            :disabled="!valid">
+                            {{ l.saveAndPreview }}
+                        </v-btn>
+                        <v-btn @click="publish" prepend-icon="mdi-publish" color="success" v-if="false && object.id">
+                            {{ l.publish }}</v-btn>
+                    </v-card-actions>
+                </v-card>
+            </v-tabs-window-item>
+            <v-tabs-window-item value="preview">
+                <v-card :title="l.preview" class="container my-3" v-if="object.asset">
+                    <AssetPreview :object="object" ref="assetPreview" ></AssetPreview>
+                    <v-card-actions>
+                        <v-btn @click="captureThumbnail" v-if="forRendering" prepend-icon="mdi-camera" color="secondary">
+                            {{ l.captureThumbnail }}
+                        </v-btn>
+                    </v-card-actions>
+                </v-card>
+            </v-tabs-window-item>
+        </v-tabs-window>
+    </v-container>
+</template>
+
+<script>
+
+export default {
+    data() {
+        return {
+            panel: this.$route.query?.tab || 'edit',
+            object: {},
+            valid: false,
+            rules: {
+                required: v => v ? true : this.l.fieldRequired,
+                requiredFile: v => (v?.size || this.id != 'add') ? true : this.l.fieldRequired
+            },
+            loading: false
+        }
+    },
+    async mounted() {
+        if (this.id && this.id != 'add') {
+            this.object = (await this.$api.gameObject.load(this.id)).data;
+        }
+    },
+    computed: {
+        fileToUpload() {
+            return this.object?.file instanceof File
+        },
+        id() {
+            return this.$route.params?.id;
+        },
+        forRendering() {
+            return this.$p.objectTypes.find(t=> t.value == this.object?.type)?.render
+        },
+    },
+    methods: {
+        async save(params) {
+            this.loading = true;
+            try {
+                let fd = new FormData();
+                let keys = ['name', 'type'];
+                if (this.fileToUpload) keys.push('file');
+                if (this.id != 'add') keys.push('id');
+                if (this.object.thumb) keys.push('thumb');
+
+                keys.forEach(e => fd.append(e, this.object[e]))
+                let result = await this.$api.gameObject.save(fd);
+                Object.assign(this.object, result.data.object);
+                if (this.id == 'add') {
+                    this.$router.replace({ params: { id: this.object.id }, query:{ tab:'preview' } });
+                }
+                // await this.$nextTick();
+                // this.panel = 'preview';
+                // if (!params?.thumbOnly) await this.$refs.assetPreview.loadAsset();
+            } catch (err) {
+                console.error(err);
+            }
+            this.loading = false;
+            // await this.$nextTick();
+            // this.panel = 'preview';
+        },
+        
+        async captureThumbnail() {
+            this.object.thumb = await this.$refs.assetPreview.gameEngine.captureScreenshot();
+            await this.save({ thumbOnly: true });
+        },
+
+        async publish() {
+
+        }
+    }
+}
 </script>
\ No newline at end of file
diff --git a/src/pages/game-objects/list.vue b/src/pages/admin/game-objects/list.vue
similarity index 85%
rename from src/pages/game-objects/list.vue
rename to src/pages/admin/game-objects/list.vue
index 9272080..8685741 100644
--- a/src/pages/game-objects/list.vue
+++ b/src/pages/admin/game-objects/list.vue
@@ -1,36 +1,36 @@
-<template>
-    <AssetBrowser @select="$router.push(`/game-objects/${$event.id}`)" ref="browser">
-        <template v-slot:action-buttons="{ object }">
-            <v-btn variant="tonal" density="comfortable" size="small" class="browse-asset edit" icon="mdi-pencil-outline" :to="`/game-objects/${object.id}`" color="blue-lighten-3"></v-btn>
-            <v-btn variant="tonal" density="comfortable" size="small" class="browse-asset remove" icon="mdi-close" @click="confirmTarget = object; confirmDialog = true" color="red-lighten-2"></v-btn>
-        </template>
-    </AssetBrowser>
-    <v-dialog v-model="confirmDialog" width="auto">
-        <v-card :title="`${l.confirmDeletionOf} ${ confirmTarget.name }?`">
-            <template v-slot:actions>
-                <v-btn @click="confirmDialog = false">{{ l.no }}</v-btn>
-                <v-btn color="red-darken-4" @click="remove(confirmTarget)">{{ l.yes }}</v-btn>
-            </template>
-        </v-card>
-    </v-dialog>
-</template>
-
-<script>
-
-export default {
-    data(){
-        return {
-            confirmDialog: false,
-            confirmTarget: null
-        }
-    },
-
-    methods:{
-        async remove(item){
-            await this.$api.gameObject.remove(item.id);
-            this.confirmDialog = false;
-            this.$refs.browser.load();
-        }
-    }
-}
+<template>
+    <AssetBrowser @select="$router.push(`/admin/game-objects/${$event.id}`)" ref="browser">
+        <template v-slot:action-buttons="{ object }">
+            <v-btn variant="tonal" density="comfortable" size="small" class="browse-asset edit" icon="mdi-pencil-outline" :to="`/admin/game-objects/${object.id}`" color="blue-lighten-3"></v-btn>
+            <v-btn variant="tonal" density="comfortable" size="small" class="browse-asset remove" icon="mdi-close" @click="confirmTarget = object; confirmDialog = true" color="red-lighten-2"></v-btn>
+        </template>
+    </AssetBrowser>
+    <v-dialog v-model="confirmDialog" width="auto">
+        <v-card :title="`${l.confirmDeletionOf} ${ confirmTarget.name }?`">
+            <template v-slot:actions>
+                <v-btn @click="confirmDialog = false">{{ l.no }}</v-btn>
+                <v-btn color="red-darken-4" @click="remove(confirmTarget)">{{ l.yes }}</v-btn>
+            </template>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script>
+
+export default {
+    data(){
+        return {
+            confirmDialog: false,
+            confirmTarget: null
+        }
+    },
+
+    methods:{
+        async remove(item){
+            await this.$api.gameObject.remove(item.id);
+            this.confirmDialog = false;
+            this.$refs.browser.load();
+        }
+    }
+}
 </script>
\ No newline at end of file
diff --git a/src/pages/games/[[id]].vue b/src/pages/admin/games/[[id]].vue
similarity index 97%
rename from src/pages/games/[[id]].vue
rename to src/pages/admin/games/[[id]].vue
index 6cf50f6..678535a 100644
--- a/src/pages/games/[[id]].vue
+++ b/src/pages/admin/games/[[id]].vue
@@ -1,79 +1,79 @@
-<template>
-    <v-container max-width="1400">
-        <v-tabs v-model="panel" class="mb-2">
-            <v-tab value="game">
-                <v-icon icon="mdi-pencil"></v-icon> {{ id == 'add' ? l.createGame : l.editGame }}
-            </v-tab>
-            <v-tab value="gameDesigner" v-if="object.scenario">
-                <v-icon icon="mdi-movie-open-outline"></v-icon> {{ l.gameDesigner }}
-            </v-tab>
-        </v-tabs>
-        <v-tabs-window v-model="panel">
-            <v-tabs-window-item value="game">
-                <v-form class="pa-4" v-model="valid">
-                    <v-text-field :label="l.name" v-model="object.name" :rules="[rules.required]"></v-text-field>
-                    <v-textarea :label="l.description" v-model="object.description"></v-textarea>
-                    <v-select :label="l.scenario" :items="scenarios" v-model="object.scenario" item-title="name" item-value="id"></v-select>
-                </v-form>
-            </v-tabs-window-item>
-            <v-tabs-window-item value="gameDesigner">
-                <GameDesigner v-model="object" ref="gameDesigner" ></GameDesigner>
-            </v-tabs-window-item>
-        </v-tabs-window>
-        <v-btn @click="save" :loading="loading" prepend-icon="mdi-content-save" color="primary">{{ l.save }}</v-btn>
-    </v-container>
-</template>
-
-<script>
-
-export default {
-    data() {
-        return {
-            object: {},
-            valid: false,
-            rules: {
-                required: v => v ? true : this.l.fieldRequired,
-                requiredFile: v => (v?.length || this.id != 'add') ? true : this.l.fieldRequired
-            },
-            loading: false,
-            panel: [],
-            scenarios: []
-        }
-    },
-    async mounted(){
-        if (this.id && this.id != 'add') {
-            this.object = (await this.$api.game.load(this.id)).data;
-        }
-        this.scenarios = (await this.$api.scenario.search()).data.data;
-    },
-    watch:{
-        'object.scenario'(v){
-            if (v){
-                this.object.thumb = this.scenarios?.find(s=>s.id == v)?.sceneThumb?.[0];
-            }
-        }
-    },
-    computed: {
-        id() {
-            return this.$route.params?.id;
-        }
-    },
-    methods:{
-        async save(params) {
-            this.loading = true;
-            try {
-                console.log('saving', this.object)
-                let result = await this.$api.game.save(this.object);
-                //Object.assign(this.object, result.data.object);
-                this.object.id = result.data.object.id;
-                if (this.id == 'add') {
-                    this.$router.replace({ params: { id: this.object.id } });
-                }
-            } catch (err) {
-                console.error(err);
-            }
-            this.loading = false
-        },
-    }
-}
+<template>
+    <v-container max-width="1400">
+        <v-tabs v-model="panel" class="mb-2">
+            <v-tab value="game">
+                <v-icon icon="mdi-pencil"></v-icon> {{ id == 'add' ? l.createGame : l.editGame }}
+            </v-tab>
+            <v-tab value="gameDesigner" v-if="object.scenario">
+                <v-icon icon="mdi-movie-open-outline"></v-icon> {{ l.gameDesigner }}
+            </v-tab>
+        </v-tabs>
+        <v-tabs-window v-model="panel">
+            <v-tabs-window-item value="game">
+                <v-form class="pa-4" v-model="valid">
+                    <v-text-field :label="l.name" v-model="object.name" :rules="[rules.required]"></v-text-field>
+                    <v-textarea :label="l.description" v-model="object.description"></v-textarea>
+                    <v-select :label="l.scenario" :items="scenarios" v-model="object.scenario" item-title="name" item-value="id"></v-select>
+                </v-form>
+            </v-tabs-window-item>
+            <v-tabs-window-item value="gameDesigner">
+                <GameDesigner v-model="object" ref="gameDesigner" ></GameDesigner>
+            </v-tabs-window-item>
+        </v-tabs-window>
+        <v-btn @click="save" :loading="loading" prepend-icon="mdi-content-save" color="primary">{{ l.save }}</v-btn>
+    </v-container>
+</template>
+
+<script>
+
+export default {
+    data() {
+        return {
+            object: {},
+            valid: false,
+            rules: {
+                required: v => v ? true : this.l.fieldRequired,
+                requiredFile: v => (v?.length || this.id != 'add') ? true : this.l.fieldRequired
+            },
+            loading: false,
+            panel: [],
+            scenarios: []
+        }
+    },
+    async mounted(){
+        if (this.id && this.id != 'add') {
+            this.object = (await this.$api.game.load(this.id)).data;
+        }
+        this.scenarios = (await this.$api.scenario.search()).data.data;
+    },
+    watch:{
+        'object.scenario'(v){
+            if (v){
+                this.object.thumb = this.scenarios?.find(s=>s.id == v)?.sceneThumb?.[0];
+            }
+        }
+    },
+    computed: {
+        id() {
+            return this.$route.params?.id;
+        }
+    },
+    methods:{
+        async save(params) {
+            this.loading = true;
+            try {
+                console.log('saving', this.object)
+                let result = await this.$api.game.save(this.object);
+                //Object.assign(this.object, result.data.object);
+                this.object.id = result.data.object.id;
+                if (this.id == 'add') {
+                    this.$router.replace({ params: { id: this.object.id } });
+                }
+            } catch (err) {
+                console.error(err);
+            }
+            this.loading = false
+        },
+    }
+}
 </script>
\ No newline at end of file
diff --git a/src/pages/games/list.vue b/src/pages/admin/games/list.vue
similarity index 89%
rename from src/pages/games/list.vue
rename to src/pages/admin/games/list.vue
index 09fb16e..2209f53 100644
--- a/src/pages/games/list.vue
+++ b/src/pages/admin/games/list.vue
@@ -1,49 +1,49 @@
-<template>
-    <v-container>
-        <v-row>
-            <v-col v-for="(v, i) in items" :key="i" cols="12" xs="6" sm="4" md="3" xl="2" class="position-relative">
-                <router-link :to="`/games/${v.id}`">
-                    <v-img :src="`/asset/thumb/${v.thumb}.webp`"></v-img>
-                </router-link>
-                <div class="d-flex">
-                    <span class="flex-grow-1">{{ v.name }}</span>
-                    <v-btn density="compact" variant="text" icon="mdi-pencil-outline" :to="`/games/${v.id}`" color="primary"></v-btn>
-                    <v-btn density="compact" variant="text" icon="mdi-close" @click="confirmTarget = v; confirmDialog = true" color="red"></v-btn>
-                </div>
-            </v-col>
-        </v-row>
-    </v-container>
-    <v-dialog v-model="confirmDialog" width="auto">
-        <v-card  :title="`${l.confirmDeletionOf} ${ confirmTarget.name }?`">
-            <template v-slot:actions>
-                <v-btn @click="confirmDialog = false">{{ l.no }}</v-btn>
-                <v-btn color="red-darken-4" @click="remove(confirmTarget)">{{ l.yes }}</v-btn>
-            </template>
-        </v-card>
-    </v-dialog>
-</template>
-
-<script>
-
-export default {
-    data(){
-        return {
-            items: [],
-            confirmDialog: false,
-            confirmTarget: null
-        }
-    },
-    
-    async created(){
-        this.items = (await this.$api.game.search()).data.data
-    },
-
-    methods:{
-        async remove(item){
-            await this.$api.game.remove(item.id);
-            this.confirmDialog = false;
-            this.items.splice(this.items.indexOf(item), 1);
-        }
-    }
-}
+<template>
+    <v-container>
+        <v-row>
+            <v-col v-for="(v, i) in items" :key="i" cols="12" xs="6" sm="4" md="3" xl="2" class="position-relative">
+                <router-link :to="`/admin/games/${v.id}`">
+                    <v-img :src="`/asset/thumb/${v.thumb}.webp`"></v-img>
+                </router-link>
+                <div class="d-flex">
+                    <span class="flex-grow-1">{{ v.name }}</span>
+                    <v-btn density="compact" variant="text" icon="mdi-pencil-outline" :to="`/admin/games/${v.id}`" color="primary"></v-btn>
+                    <v-btn density="compact" variant="text" icon="mdi-close" @click="confirmTarget = v; confirmDialog = true" color="red"></v-btn>
+                </div>
+            </v-col>
+        </v-row>
+    </v-container>
+    <v-dialog v-model="confirmDialog" width="auto">
+        <v-card  :title="`${l.confirmDeletionOf} ${ confirmTarget.name }?`">
+            <template v-slot:actions>
+                <v-btn @click="confirmDialog = false">{{ l.no }}</v-btn>
+                <v-btn color="red-darken-4" @click="remove(confirmTarget)">{{ l.yes }}</v-btn>
+            </template>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script>
+
+export default {
+    data(){
+        return {
+            items: [],
+            confirmDialog: false,
+            confirmTarget: null
+        }
+    },
+    
+    async created(){
+        this.items = (await this.$api.game.search()).data.data
+    },
+
+    methods:{
+        async remove(item){
+            await this.$api.game.remove(item.id);
+            this.confirmDialog = false;
+            this.items.splice(this.items.indexOf(item), 1);
+        }
+    }
+}
 </script>
\ No newline at end of file
diff --git a/src/pages/index.vue b/src/pages/admin/index.vue
similarity index 100%
rename from src/pages/index.vue
rename to src/pages/admin/index.vue
diff --git a/src/pages/preview/[[id]].vue b/src/pages/admin/preview/[[id]].vue
similarity index 100%
rename from src/pages/preview/[[id]].vue
rename to src/pages/admin/preview/[[id]].vue
diff --git a/src/pages/preview/list.vue b/src/pages/admin/preview/list.vue
similarity index 90%
rename from src/pages/preview/list.vue
rename to src/pages/admin/preview/list.vue
index e3fa5aa..0018868 100644
--- a/src/pages/preview/list.vue
+++ b/src/pages/admin/preview/list.vue
@@ -2,7 +2,7 @@
     <v-container>
         <v-row>
             <v-col v-for="(v, i) in items" :key="i" cols="12" xs="6" sm="4" md="3" xl="2" class="position-relative">
-                <router-link :to="`/preview/${v.id}`">
+                <router-link :to="`/admin/preview/${v.id}`">
                     <v-img :src="`/asset/thumb/${v.thumb}.webp`"></v-img>
                 </router-link>
                 <div class="d-flex">
diff --git a/src/pages/scenarios/[[id]].vue b/src/pages/admin/scenarios/[[id]].vue
similarity index 96%
rename from src/pages/scenarios/[[id]].vue
rename to src/pages/admin/scenarios/[[id]].vue
index 2cc8af9..941f005 100644
--- a/src/pages/scenarios/[[id]].vue
+++ b/src/pages/admin/scenarios/[[id]].vue
@@ -1,75 +1,75 @@
-<template>
-    <v-container max-width="1400">
-        <v-tabs v-model="panel">
-            <v-tab value="scenario">
-                <v-icon icon="mdi-pencil"></v-icon> {{ id == 'add' ? l.createScenario : l.editScenario }}
-            </v-tab>
-            <v-tab value="scenes">
-                <v-icon icon="mdi-panorama-outline"></v-icon> {{ l.editScenes }}
-            </v-tab>
-        </v-tabs>
-        <v-tabs-window v-model="panel">
-            <v-tabs-window-item value="scenario">
-                <v-form class="pa-4" v-model="valid">
-                    <v-text-field :label="l.name" v-model="object.name" :rules="[rules.required]"></v-text-field>
-                    <v-textarea :label="l.description" v-model="object.description"></v-textarea>
-                </v-form>
-            </v-tabs-window-item>
-            <v-tabs-window-item value="scenes">
-                <SceneDesigner v-model="object" ref="sceneDesigner" ></SceneDesigner>
-            </v-tabs-window-item>
-        </v-tabs-window>
-        <v-btn @click="save" :loading="loading" prepend-icon="mdi-content-save" color="primary">{{ l.save }}</v-btn>
-    </v-container>
-</template>
-
-<script>
-
-export default {
-    data() {
-        return {
-            object: {},
-            valid: false,
-            rules: {
-                required: v => v ? true : this.l.fieldRequired,
-                requiredFile: v => (v?.length || this.id != 'add') ? true : this.l.fieldRequired
-            },
-            loading: false,
-            panel: []
-        }
-    },
-    async mounted(){
-        if (this.id && this.id != 'add') {
-            this.object = (await this.$api.scenario.load(this.id)).data;
-        }
-    },
-    computed: {
-        id() {
-            return this.$route.params?.id;
-        }
-    },
-    watch:{
-        async panel(n){
-            if ((n||[]).includes('scenes')){
-                await this.$nextTick();
-                this.$refs.sceneDesigner.resize();
-            }
-        }
-    },
-    methods:{
-        async save(params) {
-            this.loading = true;
-            try {
-                let result = await this.$api.scenario.save(this.object);
-                Object.assign(this.object, result.data.object);
-                if (this.id == 'add') {
-                    this.$router.replace({ params: { id: this.object.id } });
-                }
-            } catch (err) {
-                console.error(err);
-            }
-            this.loading = false
-        },
-    }
-}
+<template>
+    <v-container max-width="1400">
+        <v-tabs v-model="panel">
+            <v-tab value="scenario">
+                <v-icon icon="mdi-pencil"></v-icon> {{ id == 'add' ? l.createScenario : l.editScenario }}
+            </v-tab>
+            <v-tab value="scenes">
+                <v-icon icon="mdi-panorama-outline"></v-icon> {{ l.editScenes }}
+            </v-tab>
+        </v-tabs>
+        <v-tabs-window v-model="panel">
+            <v-tabs-window-item value="scenario">
+                <v-form class="pa-4" v-model="valid">
+                    <v-text-field :label="l.name" v-model="object.name" :rules="[rules.required]"></v-text-field>
+                    <v-textarea :label="l.description" v-model="object.description"></v-textarea>
+                </v-form>
+            </v-tabs-window-item>
+            <v-tabs-window-item value="scenes">
+                <SceneDesigner v-model="object" ref="sceneDesigner" ></SceneDesigner>
+            </v-tabs-window-item>
+        </v-tabs-window>
+        <v-btn @click="save" :loading="loading" prepend-icon="mdi-content-save" color="primary">{{ l.save }}</v-btn>
+    </v-container>
+</template>
+
+<script>
+
+export default {
+    data() {
+        return {
+            object: {},
+            valid: false,
+            rules: {
+                required: v => v ? true : this.l.fieldRequired,
+                requiredFile: v => (v?.length || this.id != 'add') ? true : this.l.fieldRequired
+            },
+            loading: false,
+            panel: []
+        }
+    },
+    async mounted(){
+        if (this.id && this.id != 'add') {
+            this.object = (await this.$api.scenario.load(this.id)).data;
+        }
+    },
+    computed: {
+        id() {
+            return this.$route.params?.id;
+        }
+    },
+    watch:{
+        async panel(n){
+            if ((n||[]).includes('scenes')){
+                await this.$nextTick();
+                this.$refs.sceneDesigner.resize();
+            }
+        }
+    },
+    methods:{
+        async save(params) {
+            this.loading = true;
+            try {
+                let result = await this.$api.scenario.save(this.object);
+                Object.assign(this.object, result.data.object);
+                if (this.id == 'add') {
+                    this.$router.replace({ params: { id: this.object.id } });
+                }
+            } catch (err) {
+                console.error(err);
+            }
+            this.loading = false
+        },
+    }
+}
 </script>
\ No newline at end of file
diff --git a/src/pages/scenarios/list.vue b/src/pages/admin/scenarios/list.vue
similarity index 89%
rename from src/pages/scenarios/list.vue
rename to src/pages/admin/scenarios/list.vue
index 1c4be6d..5b703aa 100644
--- a/src/pages/scenarios/list.vue
+++ b/src/pages/admin/scenarios/list.vue
@@ -1,49 +1,49 @@
-<template>
-    <v-container>
-        <v-row>
-            <v-col v-for="(v, i) in items" :key="i" cols="12" xs="6" sm="4" md="3" xl="2" class="position-relative">
-                <router-link :to="`/scenarios/${v.id}`">
-                    <v-img :src="`/asset/thumb/${v.sceneThumb?.[0]}.webp`"></v-img>
-                </router-link>
-                <div class="d-flex">
-                    <span class="flex-grow-1">{{ v.name }}</span>
-                    <v-btn density="compact" variant="text" icon="mdi-pencil-outline" :to="`/scenarios/${v.id}`" color="primary"></v-btn>
-                    <v-btn density="compact" variant="text" icon="mdi-close" @click="confirmTarget = v; confirmDialog = true" color="red"></v-btn>
-                </div>
-            </v-col>
-        </v-row>
-    </v-container>
-    <v-dialog v-model="confirmDialog" width="auto">
-        <v-card  :title="`${l.confirmDeletionOf} ${ confirmTarget.name }?`">
-            <template v-slot:actions>
-                <v-btn @click="confirmDialog = false">{{ l.no }}</v-btn>
-                <v-btn color="red-darken-4" @click="remove(confirmTarget)">{{ l.yes }}</v-btn>
-            </template>
-        </v-card>
-    </v-dialog>
-</template>
-
-<script>
-
-export default {
-    data(){
-        return {
-            items: [],
-            confirmDialog: false,
-            confirmTarget: null
-        }
-    },
-    
-    async created(){
-        this.items = (await this.$api.scenario.search()).data.data
-    },
-
-    methods:{
-        async remove(item){
-            await this.$api.scenario.remove(item.id);
-            this.confirmDialog = false;
-            this.items.splice(this.items.indexOf(item), 1);
-        }
-    }
-}
+<template>
+    <v-container>
+        <v-row>
+            <v-col v-for="(v, i) in items" :key="i" cols="12" xs="6" sm="4" md="3" xl="2" class="position-relative">
+                <router-link :to="`/admin/scenarios/${v.id}`">
+                    <v-img :src="`/asset/thumb/${v.sceneThumb?.[0]}.webp`"></v-img>
+                </router-link>
+                <div class="d-flex">
+                    <span class="flex-grow-1">{{ v.name }}</span>
+                    <v-btn density="compact" variant="text" icon="mdi-pencil-outline" :to="`/admin/scenarios/${v.id}`" color="primary"></v-btn>
+                    <v-btn density="compact" variant="text" icon="mdi-close" @click="confirmTarget = v; confirmDialog = true" color="red"></v-btn>
+                </div>
+            </v-col>
+        </v-row>
+    </v-container>
+    <v-dialog v-model="confirmDialog" width="auto">
+        <v-card  :title="`${l.confirmDeletionOf} ${ confirmTarget.name }?`">
+            <template v-slot:actions>
+                <v-btn @click="confirmDialog = false">{{ l.no }}</v-btn>
+                <v-btn color="red-darken-4" @click="remove(confirmTarget)">{{ l.yes }}</v-btn>
+            </template>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script>
+
+export default {
+    data(){
+        return {
+            items: [],
+            confirmDialog: false,
+            confirmTarget: null
+        }
+    },
+    
+    async created(){
+        this.items = (await this.$api.scenario.search()).data.data
+    },
+
+    methods:{
+        async remove(item){
+            await this.$api.scenario.remove(item.id);
+            this.confirmDialog = false;
+            this.items.splice(this.items.indexOf(item), 1);
+        }
+    }
+}
 </script>
\ No newline at end of file