commit e74d1a61271fad084838d1dceaab5b739d4c18e1 Author: grey-cat-1908 Date: Sat Mar 16 15:20:31 2024 +0300 base diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..b398d22 --- /dev/null +++ b/.gitignore @@ -0,0 +1,26 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? + +package-lock.json diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..c0a6e5a --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,3 @@ +{ + "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] +} diff --git a/README.md b/README.md new file mode 100644 index 0000000..ef72fd5 --- /dev/null +++ b/README.md @@ -0,0 +1,18 @@ +# Vue 3 + TypeScript + Vite + +This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 ` + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..08b7d47 --- /dev/null +++ b/package.json @@ -0,0 +1,22 @@ +{ + "name": "metro", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vue-tsc && vite build", + "preview": "vite preview" + }, + "dependencies": { + "@svgdotjs/svg.js": "^3.2.0", + "vue": "^3.3.11", + "vuetify": "^3.5.9" + }, + "devDependencies": { + "@vitejs/plugin-vue": "^4.5.2", + "typescript": "^5.2.2", + "vite": "^5.0.8", + "vue-tsc": "^1.8.25" + } +} diff --git a/public/vite.svg b/public/vite.svg new file mode 100644 index 0000000..e7b8dfb --- /dev/null +++ b/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/App.vue b/src/App.vue new file mode 100644 index 0000000..a3d1b7d --- /dev/null +++ b/src/App.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/src/assets/vue.svg b/src/assets/vue.svg new file mode 100644 index 0000000..770e9d3 --- /dev/null +++ b/src/assets/vue.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/main.ts b/src/main.ts new file mode 100644 index 0000000..7859768 --- /dev/null +++ b/src/main.ts @@ -0,0 +1,18 @@ +import { createApp } from 'vue' +import './style.css' + +// @ts-ignore +import App from './App.vue' + +// Vuetify +import 'vuetify/styles' +import { createVuetify } from 'vuetify' +import * as components from 'vuetify/components' +import * as directives from 'vuetify/directives' + +const vuetify = createVuetify({ + components, + directives, +}) + +createApp(App).use(vuetify).mount('#app') diff --git a/src/models/branch.ts b/src/models/branch.ts new file mode 100644 index 0000000..72064fc --- /dev/null +++ b/src/models/branch.ts @@ -0,0 +1,22 @@ +import {Station} from "./station.ts"; + +export interface BranchInterface { + name: string; + color: string; + number: number; + stations: Array +} + +export class Branch implements BranchInterface { + name: string; + color: string; + number: number; + stations: Array; + + constructor(name: string, color: string, number: number, stations: Array) { + this.name = name; + this.color = color; + this.number = number; + this.stations = stations; + } +} \ No newline at end of file diff --git a/src/models/connectedStation.ts b/src/models/connectedStation.ts new file mode 100644 index 0000000..cdf9bf5 --- /dev/null +++ b/src/models/connectedStation.ts @@ -0,0 +1,16 @@ +import {ExtraBranch} from "./extraBranch.ts"; + +interface ConnectedStationInterface { + name: string; + branch: ExtraBranch; +} + +export class ConnectedStation implements ConnectedStationInterface { + name: string; + branch: ExtraBranch; + + constructor(name: string, branch: ExtraBranch) { + this.name = name; + this.branch = branch; + } +} \ No newline at end of file diff --git a/src/models/extraBranch.ts b/src/models/extraBranch.ts new file mode 100644 index 0000000..2640ebd --- /dev/null +++ b/src/models/extraBranch.ts @@ -0,0 +1,17 @@ +interface ExtraBranchInterface { + name: string; + color: string; + number: number; +} + +export class ExtraBranch implements ExtraBranchInterface { + name: string; + color: string; + number: number; + + constructor(name: string, color: string, number: number) { + this.name = name; + this.color = color; + this.number = number; + } +} \ No newline at end of file diff --git a/src/models/map.ts b/src/models/map.ts new file mode 100644 index 0000000..03dc04a --- /dev/null +++ b/src/models/map.ts @@ -0,0 +1,66 @@ +// @ts-ignore +import { SVG } from '@svgdotjs/svg.js' + +import {Branch} from "./branch.ts"; +import {Station} from "./station.ts"; + +export interface MetroMap { + branch: Branch; +} + +export class Map implements MetroMap { + branch: Branch; + + private draw; + + public constructor(branch: Branch) { + this.draw = SVG().addTo('#map') + this.branch = branch + } + + public setBranch(branch: Branch) { + this.branch = branch + } + + private drawStations(stations: Array) { + const yMax = (window.innerHeight-50) / 4; + + let last = 200; + + for (let i = 0; i < stations.length; i++) { + if (stations[i].connectedStations.length > 0) { + this.draw.circle(50).fill('#f06').cx(last + stations[i].step).cy(yMax) + this.draw.circle(25).fill('white').cx(last + stations[i].step).cy(yMax) + } else { + this.draw.rect(15, 50).fill('#f06').cx(last + stations[i].step).cy(yMax) + } + + let y; + + if (stations[i].up) { + y = yMax - 60; + } else { + y = yMax + 60; + } + + let text = this.draw.text(stations[i].name).font({ size: 35}).cx(last + stations[i].step).cy(y); + text.font({ + family: 'Onest', + weight: '750', + }) + } + } + + public build() { + this.draw = this.draw.size(window.innerWidth, (window.innerHeight-50) / 2); + this.draw.clear(); + + const lineMax = window.innerWidth - 200; + const yMax = (window.innerHeight-50) / 4; + + let line = this.draw.line(200, yMax, lineMax, yMax) + line.stroke({ color: '#f06', width: 16}) + + this.drawStations(this.branch.stations) + } +} \ No newline at end of file diff --git a/src/models/station.ts b/src/models/station.ts new file mode 100644 index 0000000..7149d37 --- /dev/null +++ b/src/models/station.ts @@ -0,0 +1,22 @@ +import {ConnectedStation} from './connectedStation.ts' + +export interface StationInterface { + name: string; + up: boolean; + connectedStations: Array; + step: number; +} + +export class Station implements StationInterface { + name: string; + up: boolean; + connectedStations: Array + step: number; + + constructor(name: string, up: boolean, connectedStations: Array, step: number) { + this.name = name; + this.up = up; + this.connectedStations = connectedStations; + this.step = step; + } +} \ No newline at end of file diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..a9c7261 --- /dev/null +++ b/src/style.css @@ -0,0 +1 @@ +@import url('https://fonts.googleapis.com/css2?family=Onest:wght@100..900&display=swap'); \ No newline at end of file diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts new file mode 100644 index 0000000..11f02fe --- /dev/null +++ b/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..9e03e60 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,25 @@ +{ + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "module": "ESNext", + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "preserve", + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"], + "references": [{ "path": "./tsconfig.node.json" }] +} diff --git a/tsconfig.node.json b/tsconfig.node.json new file mode 100644 index 0000000..42872c5 --- /dev/null +++ b/tsconfig.node.json @@ -0,0 +1,10 @@ +{ + "compilerOptions": { + "composite": true, + "skipLibCheck": true, + "module": "ESNext", + "moduleResolution": "bundler", + "allowSyntheticDefaultImports": true + }, + "include": ["vite.config.ts"] +} diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 0000000..05c1740 --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [vue()], +})