Коммит e13b6ada создал по автору Anton Medvedev's avatar Anton Medvedev
Просмотр файлов

Merge branch 'phaser' into 'main' 

Изменения касаются задач #36, #22, #25

See merge request LaVey/universo-monorepo!2
владельцы a6214de1 3e16fde8
Скрыть пробелы
Построчно Рядом
universo-frontend/quasar.config.js
Просмотр файла @ e13b6ada
...@@ -30,8 +30,8 @@ module.exports = configure(function (/* ctx */) { ...@@ -30,8 +30,8 @@ module.exports = configure(function (/* ctx */) {
// --> boot files are part of "main.js" // --> boot files are part of "main.js"
// https://v2.quasar.dev/quasar-cli-vite/boot-files // https://v2.quasar.dev/quasar-cli-vite/boot-files
boot: [ boot: [
], ],
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
...@@ -60,7 +60,7 @@ module.exports = configure(function (/* ctx */) { ...@@ -60,7 +60,7 @@ module.exports = configure(function (/* ctx */) {
node: 'node16' node: 'node16'
}, },
vueRouterMode: 'hash', // available values: 'hash', 'history' vueRouterMode: 'history', // available values: 'hash', 'history'
// vueRouterBase, // vueRouterBase,
// vueDevtools, // vueDevtools,
// vueOptionsAPI: false, // vueOptionsAPI: false,
...@@ -79,7 +79,7 @@ module.exports = configure(function (/* ctx */) { ...@@ -79,7 +79,7 @@ module.exports = configure(function (/* ctx */) {
// extendViteConf (viteConf) {}, // extendViteConf (viteConf) {},
// viteVuePluginOptions: {}, // viteVuePluginOptions: {},
// vitePlugins: [ // vitePlugins: [
// [ 'package-name', { ..options.. } ] // [ 'package-name', { ..options.. } ]
// ] // ]
......
universo-frontend/src/components/ExampleComponent.vue удалено 100644 → 0
Просмотр файла @ a6214de1
<template>
<div ref="gameRef"></div>
</template>
<script lang="ts">
import { ref, onMounted } from 'vue';
import * as Phaser from 'phaser';
export default {
setup() {
const gameRef = ref<HTMLDivElement | null>(null);
onMounted(() => {
const config: Phaser.Types.Core.GameConfig = {
type: Phaser.AUTO,
width: 800,
height: 600,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 200 }
}
},
scene: {
preload: preload,
create: create
}
};
new Phaser.Game(config);
function preload(this: Phaser.Scene) {
this.load.setBaseURL('https://labs.phaser.io');
this.load.image('sky', 'assets/skies/space3.png');
this.load.image('logo', 'assets/sprites/phaser3-logo.png');
}
function create(this: Phaser.Scene) {
this.add.image(400, 300, 'sky');
const logo = this.physics.add.image(400, 100, 'logo');
logo.setVelocity(100, 200);
logo.setBounce(1, 1);
logo.setCollideWorldBounds(true);
}
});
return { gameRef };
}
};
</script>
universo-frontend/src/layouts/MainLayout.vue
Просмотр файла @ e13b6ada
<template> <template>
<q-layout view="lHh Lpr lFf"> <q-layout view="hHh lpR fFf">
<q-header elevated> <q-header elevated class="bg-primary text-white">
<q-toolbar> <q-toolbar>
<q-btn <q-btn
flat dense flat round icon="menu" @click="toggleLeftDrawer" />
dense
round
icon="menu"
aria-label="Menu"
@click="toggleLeftDrawer"
/>
<q-toolbar-title> <q-toolbar-title>
Quasar App Universo
</q-toolbar-title> </q-toolbar-title>
<div>Quasar v{{ $q.version }}</div>
</q-toolbar> </q-toolbar>
</q-header> </q-header>
<q-drawer <q-drawer
v-model="leftDrawerOpen" v-model="leftDrawerOpen"
show-if-above show-if-above
bordered side="left"
> >
<q-list> <q-list>
<q-item-label
header
>
Essential Links
</q-item-label>
<EssentialLink <EssentialLink
v-for="link in essentialLinks" v-for="link in essentialLinks"
...@@ -51,47 +42,67 @@ import EssentialLink from 'components/EssentialLink.vue'; ...@@ -51,47 +42,67 @@ import EssentialLink from 'components/EssentialLink.vue';
const linksList = [ const linksList = [
{ {
title: 'Docs', title: 'Бесконечный холст',
caption: 'quasar.dev', caption: 'phaser',
icon: 'school', icon: 'school',
link: 'https://quasar.dev' link: 'http://localhost:9000/phaser'
}, },
{ {
title: 'Github', title: 'Страница для неавторизованных',
caption: 'github.com/quasarframework', caption: 'Страница',
icon: 'code', icon: 'school',
link: 'https://github.com/quasarframework' link: ''
}, },
{ {
title: 'Discord Chat Channel', title: 'Страница для авторизованных',
caption: 'chat.quasar.dev', caption: 'Страница',
icon: 'chat', icon: 'school',
link: 'https://chat.quasar.dev' link: ''
}, },
{ {
title: 'Forum', title: 'Страница авторизации',
caption: 'forum.quasar.dev', caption: 'Страница',
icon: 'record_voice_over', icon: 'school',
link: 'https://forum.quasar.dev' link: ''
}, },
{ {
title: 'Twitter', title: 'Страница регистрации',
caption: '@quasarframework', caption: 'Страница',
icon: 'rss_feed', icon: 'school',
link: 'https://twitter.quasar.dev' link: ''
}, },
{ {
title: 'Facebook', title: 'Страница с политикой в отношении обработки персональных данных',
caption: '@QuasarFramework', caption: 'Страница',
icon: 'public', icon: 'school',
link: 'https://facebook.quasar.dev' link: ''
}, },
{ {
title: 'Quasar Awesome', title: 'Страница восстановления учётных данных',
caption: 'Community Quasar projects', caption: 'Страница',
icon: 'favorite', icon: 'school',
link: 'https://awesome.quasar.dev' link: ''
} },
{
title: 'Страница профиля пользователя',
caption: 'Профиль',
icon: 'school',
link: 'http://localhost:9000/user'
},
{
title: 'Страница метавселенных пользователя',
caption: 'Страница',
icon: 'school',
link: ''
},
{
title: 'Страница проектов пользователя',
caption: 'Страница',
icon: 'school',
link: ''
},
]; ];
export default defineComponent({ export default defineComponent({
......
universo-frontend/src/pages/IndexPage.vue
Просмотр файла @ e13b6ada
<template> <template>
<q-page class="row items-center justify-evenly"> "HomePage"
<example-component
title="Example component"
active
:todos="todos"
:meta="meta"
></example-component>
</q-page>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Todo, Meta } from 'components/models'; import { defineComponent } from 'vue';
import ExampleComponent from 'components/ExampleComponent.vue';
import { defineComponent, ref } from 'vue';
export default defineComponent({ export default defineComponent({
name: 'IndexPage', name: 'IndexPage',
components: { ExampleComponent },
setup () {
const todos = ref<Todo[]>([
{
id: 1,
content: 'ct1'
},
{
id: 2,
content: 'ct2'
},
{
id: 3,
content: 'ct3'
},
{
id: 4,
content: 'ct4'
},
{
id: 5,
content: 'ct5'
}
]);
const meta = ref<Meta>({
totalCount: 1200
});
return { todos, meta };
}
}); });
</script> </script>
universo-frontend/src/pages/PhaserTest.vue 0 → 100644
Просмотр файла @ e13b6ada
<template>
<q-layout view="hHh lpR fFf">
<q-header elevated>
<q-toolbar>
<q-btn
dense
flat
round
@click="drawer = !drawer"
icon="menu"
/>
<q-toolbar-title>
Бесконечный холст
</q-toolbar-title>
</q-toolbar>
</q-header>
<q-drawer
v-model="drawer"
show-if-above
>
<q-btn
color="primary"
@click="addRectangle"
label="Добавить доску"
/>
</q-drawer>
<q-page-container class="grid-center">
<div ref="gameRef"></div>
</q-page-container>
</q-layout>
</template>
<script lang="ts">
import { ref, onMounted } from 'vue';
import * as Phaser from 'phaser';
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const gameRef = ref(null);
const drawer = ref(false);
let game: Phaser.Game;
let rectangles: Phaser.GameObjects.Rectangle[] = [];
let selectedRectangle: Phaser.GameObjects.Rectangle | null = null;
const addRectangle = () => {
const rect = game.scene.scenes[0].add.rectangle(200, 200, 100, 100, 0xff0000).setInteractive();
rectangles.push(rect);
};
onMounted(() => {
const config: Phaser.Types.Core.GameConfig = {
type: Phaser.AUTO,
backgroundColor: '#ffffff',
parent: gameRef.value,
scene: {
create: function () {
this.input.on('pointerdown', function (pointer) {
rectangles.forEach(rect => {
if (rect.getBounds().contains(pointer.x, pointer.y)) {
selectedRectangle = rect;
}
});
});
this.input.on('pointerup', function () {
selectedRectangle = null;
});
this.input.on('pointermove', function (pointer) {
if (selectedRectangle) {
selectedRectangle.x = pointer.x;
selectedRectangle.y = pointer.y;
}
});
}
}
};
game = new Phaser.Game(config);
});
return {
gameRef,
drawer,
addRectangle
};
}
});
</script>
universo-frontend/src/pages/UserProfile.vue 0 → 100644
Просмотр файла @ e13b6ada
<template>
<q-page class="q-pa-sm">
<div class="row q-col-gutter-sm">
<div class="col-lg-8 col-md-8 col-xs-12 col-sm-12">
<q-card class="card-bg text-white no-shadow" bordered>
<q-card-section class="text-h6 ">
<div class="text-h6">Редактировать профиль</div>
<div class="text-subtitle2">Заполните свой профиль</div>
</q-card-section>
<q-card-section class="q-pa-sm">
<q-list class="row">
<q-item class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<q-item-section side>
<q-avatar size="100px">
<img src="https://i.ytimg.com/vi/IS7zaNHT-58/maxresdefault.jpg">
</q-avatar>
</q-item-section>
<q-item-section>
<q-btn label="Добавить фото" class="text-capitalize" rounded color="info"
style="max-width: 120px"></q-btn>
</q-item-section>
</q-item>
<q-item class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<q-item-section>
<q-input dark color="white" dense v-model="user_details.user_name" label="Имя пользователя"/>
</q-item-section>
</q-item>
<q-item class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<q-item-section>
<q-input dark color="white" dense v-model="user_details.email" label="Адрес электронной почты"/>
</q-item-section>
</q-item>
<q-item class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<q-item-section>
<q-input dark color="white" dense v-model="user_details.first_name" label="Имя"/>
</q-item-section>
</q-item>
<q-item class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<q-item-section>
<q-input dark color="white" dense v-model="user_details.last_name" label="Фамилия"/>
</q-item-section>
</q-item>
<q-item class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<q-item-section>
<q-input dark color="white" autogrow dense v-model="user_details.address" label="Адрес"/>
</q-item-section>
</q-item>
<q-item class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<q-item-section>
<q-input dark color="white" dense v-model="user_details.city" label="Город"/>
</q-item-section>
</q-item>
<q-item class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<q-item-section>
<q-input dark color="white" dense v-model="user_details.post_code" label="Почтовый индекс"/>
</q-item-section>
</q-item>
<q-item class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<q-item-section>
<q-input dark color="white" type="textarea" dense v-model="user_details.about" label="обо мне"/>
</q-item-section>
</q-item>
</q-list>
</q-card-section>
<q-card-actions align="right">
<q-btn class="text-capitalize bg-info text-white">Обновить информацию пользователя</q-btn>
</q-card-actions>
</q-card>
</div>
<div class="col-lg-8 col-md-8 col-xs-12 col-sm-12">
<q-card class="card-bg text-white no-shadow" bordered>
<q-card-section class="text-h6 q-pa-sm">
<div class="text-h6">Изменить пароль</div>
</q-card-section>
<q-card-section class="q-pa-sm row">
<q-item class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<q-item-section>
Текущий пароль
</q-item-section>
</q-item>
<q-item class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
<q-item-section>
<q-input type="password" dark dense outlined color="white" round
v-model="password_dict.current_password"
label="Текущий пароль"/>
</q-item-section>
</q-item>
<q-item class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<q-item-section>
Новый пароль
</q-item-section>
</q-item>
<q-item class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
<q-item-section>
<q-input type="password" dark dense outlined color="white" round v-model="password_dict.new_password"
label="Новый пароль"/>
</q-item-section>
</q-item>
<q-item class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<q-item-section>
Подтвердить новый пароль
</q-item-section>
</q-item>
<q-item class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
<q-item-section>
<q-input type="password" dark dense outlined round color="white"
v-model="password_dict.confirm_new_password"
label="Подтвердить новый пароль"/>
</q-item-section>
</q-item>
</q-card-section>
<q-card-actions align="right">
<q-btn class="text-capitalize bg-info text-white">Изменить пароль</q-btn>
</q-card-actions>
</q-card>
</div>
</div>
</q-page>
</template>
<script >
import { defineComponent } from 'vue';
export default defineComponent({
name: 'UserProfile',
setup() {
return {
user_details: {},
password_dict: {}
}
}
})
</script>
<style scoped>
.card-bg {
background-color: #162b4d;
}
</style>
universo-frontend/src/router/index.ts
Просмотр файла @ e13b6ada
...@@ -8,15 +8,6 @@ import { ...@@ -8,15 +8,6 @@ import {
import routes from './routes'; import routes from './routes';
/*
* If not building with SSR mode, you can
* directly export the Router instantiation;
*
* The function below can be async too; either use
* async/await or return a Promise which resolves
* with the Router instance.
*/
export default route(function (/* { store, ssrContext } */) { export default route(function (/* { store, ssrContext } */) {
const createHistory = process.env.SERVER const createHistory = process.env.SERVER
? createMemoryHistory ? createMemoryHistory
......
universo-frontend/src/router/routes.ts
Просмотр файла @ e13b6ada
...@@ -4,11 +4,14 @@ const routes: RouteRecordRaw[] = [ ...@@ -4,11 +4,14 @@ const routes: RouteRecordRaw[] = [
{ {
path: '/', path: '/',
component: () => import('layouts/MainLayout.vue'), component: () => import('layouts/MainLayout.vue'),
children: [{ path: '', component: () => import('pages/IndexPage.vue') }], children: [
{ path: '', component: () => import('pages/IndexPage.vue') },
{path: '/user', component: () => import('pages/UserProfile.vue')},
{path: '/phaser', component: () => import('pages/PhaserTest.vue')},
],
}, },
// Always leave this as last one,
// but you can also remove it
{ {
path: '/:catchAll(.*)*', path: '/:catchAll(.*)*',
component: () => import('pages/ErrorNotFound.vue'), component: () => import('pages/ErrorNotFound.vue'),
......
Поддерживает Markdown
0% или .
You are about to add 0 people to the discussion. Proceed with caution.
Сначала завершите редактирование этого сообщения!
Пожалуйста, зарегистрируйтесь или чтобы прокомментировать