start of complete rewrite on top of vue3
This introduces a new build structure and a new notification system.vue3
koehr
4 years ago
parent
f4e603b98e
commit
68789d48f8
@ -1,5 +0,0 @@
|
||||
[*.{js,jsx,ts,tsx,vue}]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
@ -1,5 +0,0 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
@ -1,19 +0,0 @@
|
||||
# Feature parity with RPG-Cards by Crobi
|
||||
|
||||
RPG-Cards by Crobi was the original inspiration to create this program.
|
||||
|
||||
see https://crobi.github.io/rpg-cards
|
||||
|
||||
## Card generation
|
||||
|
||||
[x] subtitle
|
||||
[x] rule
|
||||
[x] property
|
||||
[x] description
|
||||
[x] text
|
||||
[x] subsection
|
||||
[x] boxes
|
||||
[x] dndstats
|
||||
[x] fill
|
||||
[x] bullet
|
||||
[ ] picture: not supported and for now not planned
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 165 KiB |
@ -0,0 +1,21 @@
|
||||
{
|
||||
"title": "vue3-app-starter",
|
||||
"meta": {
|
||||
"viewport": "width=device-width,initial-scale=1.0",
|
||||
"description": "vue3 app starter with typescript support"
|
||||
},
|
||||
"logo": "./src/assets/logo.svg",
|
||||
"favicons": {
|
||||
"icons": {
|
||||
"favicons": true,
|
||||
"android": true,
|
||||
"appleIcon": true,
|
||||
"appleStartup": false,
|
||||
"coast": false,
|
||||
"firefox": false,
|
||||
"yandex": false,
|
||||
"windows": false
|
||||
}
|
||||
},
|
||||
"template": "./public/index.html"
|
||||
}
|
||||
@ -1,67 +1,36 @@
|
||||
{
|
||||
"name": "rpg-cards-ng",
|
||||
"version": "0.1.0",
|
||||
"description": "next gen rpg card app",
|
||||
"main": "src/main.ts",
|
||||
"author": "koehr <n@koehr.in>",
|
||||
"license": "MIT",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
"dev": "webpack-dev-server",
|
||||
"build": "webpack --env.prod --progress"
|
||||
},
|
||||
"dependencies": {
|
||||
"core-js": "^3.6.4",
|
||||
"register-service-worker": "^1.6.2",
|
||||
"vue": "^2.6.11",
|
||||
"vue-router": "^3.1.5"
|
||||
"vue": "3.0.0-beta.15",
|
||||
"vue-router": "4.0.0-alpha.12"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@editorjs/editorjs": "^2.18.0",
|
||||
"@editorjs/list": "^1.5.0",
|
||||
"@typescript-eslint/eslint-plugin": "^3.2.0",
|
||||
"@typescript-eslint/parser": "^3.2.0",
|
||||
"@vue/cli-plugin-babel": "^4.2.0",
|
||||
"@vue/cli-plugin-eslint": "^4.2.0",
|
||||
"@vue/cli-plugin-pwa": "^4.2.0",
|
||||
"@vue/cli-plugin-typescript": "^4.2.0",
|
||||
"@vue/cli-service": "^4.2.0",
|
||||
"@vue/eslint-config-standard": "^5.1.2",
|
||||
"@vue/eslint-config-typescript": "^5.0.2",
|
||||
"eslint": "^7.2.0",
|
||||
"eslint-plugin-import": "^2.21.2",
|
||||
"eslint-plugin-node": "^11.1.0",
|
||||
"eslint-plugin-promise": "^4.2.1",
|
||||
"eslint-plugin-standard": "^4.0.1",
|
||||
"eslint-plugin-vue": "^6.2.2",
|
||||
"lint-staged": "^9.5.0",
|
||||
"raw-loader": "^4.0.0",
|
||||
"typescript": "~3.9.5",
|
||||
"vue-property-decorator": "^8.5.0",
|
||||
"vue-template-compiler": "^2.6.11"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
"env": {
|
||||
"node": true
|
||||
},
|
||||
"extends": [
|
||||
"plugin:vue/essential",
|
||||
"@vue/standard",
|
||||
"@vue/typescript/recommended"
|
||||
],
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 2020
|
||||
}
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"IE > 11"
|
||||
],
|
||||
"gitHooks": {
|
||||
"pre-commit": "lint-staged"
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{js,jsx,vue,ts,tsx}": [
|
||||
"vue-cli-service lint",
|
||||
"git add"
|
||||
]
|
||||
"@vue/compiler-sfc": "3.0.0-beta.15",
|
||||
"copy-webpack-plugin": "^6.0.2",
|
||||
"css-loader": "^3.6.0",
|
||||
"favicons-webpack-plugin": "^3.0.1",
|
||||
"file-loader": "^6.0.0",
|
||||
"html-webpack-plugin": "^4.3.0",
|
||||
"raw-loader": "^4.0.1",
|
||||
"style-loader": "^1.2.0",
|
||||
"ts-loader": "^7.0.5",
|
||||
"typescript": "^3.9.5",
|
||||
"url-loader": "^4.1.0",
|
||||
"vue-loader": "16.0.0-beta.3",
|
||||
"webpack": "^4.43.0",
|
||||
"webpack-cli": "^3.3.11",
|
||||
"webpack-dev-server": "^3.11.0",
|
||||
"webpack-subresource-integrity": "^1.4.1",
|
||||
"yarn": "^1.22.4"
|
||||
}
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 799 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
@ -1,149 +0,0 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||
width="16.000000pt" height="16.000000pt" viewBox="0 0 16.000000 16.000000"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
<metadata>
|
||||
Created by potrace 1.11, written by Peter Selinger 2001-2013
|
||||
</metadata>
|
||||
<g transform="translate(0.000000,16.000000) scale(0.000320,-0.000320)"
|
||||
fill="#000000" stroke="none">
|
||||
<path d="M18 46618 c45 -75 122 -207 122 -211 0 -2 25 -45 55 -95 30 -50 55
|
||||
-96 55 -102 0 -5 5 -10 10 -10 6 0 10 -4 10 -9 0 -5 73 -135 161 -288 89 -153
|
||||
173 -298 187 -323 14 -25 32 -57 41 -72 88 -149 187 -324 189 -335 2 -7 8 -13
|
||||
13 -13 5 0 9 -4 9 -10 0 -5 46 -89 103 -187 175 -302 490 -846 507 -876 8 -16
|
||||
20 -36 25 -45 28 -46 290 -498 339 -585 13 -23 74 -129 136 -236 61 -107 123
|
||||
-215 137 -240 14 -25 29 -50 33 -56 5 -5 23 -37 40 -70 18 -33 38 -67 44 -75
|
||||
11 -16 21 -33 63 -109 14 -25 29 -50 33 -56 4 -5 21 -35 38 -65 55 -100 261
|
||||
-455 269 -465 4 -5 14 -21 20 -35 15 -29 41 -75 103 -180 24 -41 52 -88 60
|
||||
-105 9 -16 57 -100 107 -185 112 -193 362 -626 380 -660 8 -14 23 -38 33 -55
|
||||
11 -16 23 -37 27 -45 4 -8 26 -46 48 -85 23 -38 53 -90 67 -115 46 -81 64
|
||||
-113 178 -310 62 -107 121 -210 132 -227 37 -67 56 -99 85 -148 16 -27 32 -57
|
||||
36 -65 4 -8 15 -27 25 -42 9 -15 53 -89 96 -165 44 -76 177 -307 296 -513 120
|
||||
-206 268 -463 330 -570 131 -227 117 -203 200 -348 36 -62 73 -125 82 -140 10
|
||||
-15 21 -34 25 -42 4 -8 20 -37 36 -65 17 -27 38 -65 48 -82 49 -85 64 -111 87
|
||||
-153 13 -25 28 -49 32 -55 4 -5 78 -134 165 -285 87 -151 166 -288 176 -305
|
||||
10 -16 26 -43 35 -59 9 -17 125 -217 257 -445 132 -229 253 -441 270 -471 17
|
||||
-30 45 -79 64 -108 18 -29 33 -54 33 -57 0 -2 20 -37 44 -77 24 -40 123 -212
|
||||
221 -383 97 -170 190 -330 205 -355 16 -25 39 -65 53 -90 13 -25 81 -144 152
|
||||
-265 70 -121 137 -238 150 -260 12 -22 37 -65 55 -95 18 -30 43 -73 55 -95 12
|
||||
-22 48 -85 80 -140 77 -132 163 -280 190 -330 13 -22 71 -123 130 -225 59
|
||||
-102 116 -199 126 -217 10 -17 29 -50 43 -72 15 -22 26 -43 26 -45 0 -2 27
|
||||
-50 60 -106 33 -56 60 -103 60 -105 0 -2 55 -98 90 -155 8 -14 182 -316 239
|
||||
-414 13 -22 45 -79 72 -124 27 -46 49 -86 49 -89 0 -2 14 -24 30 -48 16 -24
|
||||
30 -46 30 -49 0 -5 74 -135 100 -176 5 -8 24 -42 43 -75 50 -88 58 -101 262
|
||||
-455 104 -179 199 -345 213 -370 14 -25 28 -49 32 -55 4 -5 17 -26 28 -45 10
|
||||
-19 62 -109 114 -200 114 -197 133 -230 170 -295 16 -27 33 -57 38 -65 17 -28
|
||||
96 -165 103 -180 4 -8 16 -28 26 -45 10 -16 77 -131 148 -255 72 -124 181
|
||||
-313 243 -420 62 -107 121 -209 131 -227 35 -62 323 -560 392 -678 38 -66 83
|
||||
-145 100 -175 16 -30 33 -59 37 -65 4 -5 17 -27 29 -47 34 -61 56 -100 90
|
||||
-156 17 -29 31 -55 31 -57 0 -2 17 -32 39 -67 21 -35 134 -229 251 -433 117
|
||||
-203 235 -407 261 -451 27 -45 49 -85 49 -88 0 -4 8 -19 19 -34 15 -21 200
|
||||
-341 309 -533 10 -19 33 -58 51 -87 17 -29 31 -54 31 -56 0 -2 25 -44 55 -94
|
||||
30 -50 55 -95 55 -98 0 -4 6 -15 14 -23 7 -9 27 -41 43 -71 17 -30 170 -297
|
||||
342 -594 171 -296 311 -542 311 -547 0 -5 5 -9 10 -9 6 0 10 -4 10 -10 0 -5
|
||||
22 -47 49 -92 27 -46 58 -99 68 -118 24 -43 81 -140 93 -160 5 -8 66 -114 135
|
||||
-235 69 -121 130 -227 135 -235 12 -21 259 -447 283 -490 10 -19 28 -47 38
|
||||
-62 11 -14 19 -29 19 -32 0 -3 37 -69 83 -148 99 -170 305 -526 337 -583 13
|
||||
-22 31 -53 41 -70 11 -16 22 -37 26 -45 7 -14 82 -146 103 -180 14 -24 181
|
||||
-311 205 -355 13 -22 46 -80 75 -130 29 -49 64 -110 78 -135 14 -25 51 -88 82
|
||||
-140 31 -52 59 -102 63 -110 4 -8 18 -33 31 -55 205 -353 284 -489 309 -535
|
||||
17 -30 45 -78 62 -106 18 -28 36 -60 39 -72 4 -12 12 -22 17 -22 5 0 9 -4 9
|
||||
-10 0 -5 109 -197 241 -427 133 -230 250 -431 259 -448 51 -90 222 -385 280
|
||||
-485 37 -63 78 -135 92 -160 14 -25 67 -117 118 -205 51 -88 101 -175 111
|
||||
-193 34 -58 55 -95 149 -257 51 -88 101 -173 110 -190 9 -16 76 -131 147 -255
|
||||
72 -124 140 -241 151 -260 61 -108 281 -489 355 -615 38 -66 77 -133 87 -150
|
||||
35 -63 91 -161 100 -175 14 -23 99 -169 128 -220 54 -97 135 -235 142 -245 4
|
||||
-5 20 -32 35 -60 26 -48 238 -416 276 -480 10 -16 26 -46 37 -65 30 -53 382
|
||||
-661 403 -695 10 -16 22 -37 26 -45 4 -8 26 -48 50 -88 24 -41 43 -75 43 -77
|
||||
0 -2 22 -40 50 -85 27 -45 50 -84 50 -86 0 -3 38 -69 83 -147 84 -142 302
|
||||
-520 340 -587 10 -19 34 -60 52 -90 18 -30 44 -75 57 -100 14 -25 45 -79 70
|
||||
-120 25 -41 56 -96 70 -121 14 -25 77 -133 138 -240 62 -107 122 -210 132
|
||||
-229 25 -43 310 -535 337 -581 11 -19 26 -45 34 -59 17 -32 238 -414 266 -460
|
||||
11 -19 24 -41 28 -49 3 -7 75 -133 160 -278 84 -146 153 -269 153 -274 0 -5 5
|
||||
-9 10 -9 6 0 10 -4 10 -10 0 -5 82 -150 181 -322 182 -314 201 -346 240 -415
|
||||
12 -21 80 -139 152 -263 71 -124 141 -245 155 -270 14 -25 28 -49 32 -55 6 -8
|
||||
145 -248 220 -380 37 -66 209 -362 229 -395 11 -19 24 -42 28 -49 4 -8 67
|
||||
-118 140 -243 73 -125 133 -230 133 -233 0 -2 15 -28 33 -57 19 -29 47 -78 64
|
||||
-108 17 -30 53 -93 79 -139 53 -90 82 -141 157 -272 82 -142 115 -199 381
|
||||
-659 142 -245 268 -463 281 -485 12 -22 71 -125 132 -230 60 -104 172 -298
|
||||
248 -430 76 -132 146 -253 156 -270 11 -16 22 -36 26 -44 3 -8 30 -54 60 -103
|
||||
29 -49 53 -91 53 -93 0 -3 18 -34 40 -70 22 -36 40 -67 40 -69 0 -2 37 -66 81
|
||||
-142 45 -77 98 -168 119 -204 20 -36 47 -81 58 -100 12 -19 27 -47 33 -62 6
|
||||
-16 15 -28 20 -28 5 0 9 -4 9 -9 0 -6 63 -118 140 -251 77 -133 140 -243 140
|
||||
-245 0 -2 18 -33 41 -70 22 -37 49 -83 60 -101 10 -19 29 -51 40 -71 25 -45
|
||||
109 -189 126 -218 7 -11 17 -29 22 -40 6 -11 22 -38 35 -60 14 -22 37 -62 52
|
||||
-90 14 -27 35 -62 45 -77 11 -14 19 -29 19 -32 0 -3 18 -35 40 -71 22 -36 40
|
||||
-67 40 -69 0 -2 19 -35 42 -72 23 -38 55 -94 72 -124 26 -47 139 -244 171
|
||||
-298 6 -9 21 -36 34 -60 28 -48 37 -51 51 -19 6 12 19 36 29 52 10 17 27 46
|
||||
38 65 11 19 104 181 208 360 103 179 199 345 213 370 14 25 42 74 64 109 21
|
||||
34 38 65 38 67 0 2 18 33 40 69 22 36 40 67 40 69 0 3 177 310 199 346 16 26
|
||||
136 234 140 244 2 5 25 44 52 88 27 44 49 81 49 84 0 2 18 34 40 70 22 36 40
|
||||
67 40 69 0 2 20 36 43 77 35 58 169 289 297 513 9 17 50 86 90 155 40 69 86
|
||||
150 103 180 16 30 35 62 41 70 6 8 16 24 22 35 35 64 72 129 167 293 59 100
|
||||
116 199 127 220 11 20 30 53 41 72 43 72 1070 1850 1121 1940 14 25 65 113
|
||||
113 195 48 83 96 166 107 185 10 19 28 50 38 68 11 18 73 124 137 235 64 111
|
||||
175 303 246 427 71 124 173 299 225 390 52 91 116 202 143 248 27 45 49 85 49
|
||||
89 0 4 6 14 14 22 7 9 28 43 46 76 26 47 251 436 378 655 11 19 29 51 40 70
|
||||
11 19 101 176 201 348 99 172 181 317 181 323 0 5 5 9 10 9 6 0 10 5 10 11 0
|
||||
6 8 23 18 37 11 15 32 52 49 82 16 30 130 228 253 440 122 212 234 405 248
|
||||
430 13 25 39 70 57 100 39 65 69 117 130 225 25 44 50 87 55 95 12 19 78 134
|
||||
220 380 61 107 129 224 150 260 161 277 222 382 246 425 15 28 47 83 71 123
|
||||
24 41 43 78 43 83 0 5 4 9 8 9 4 0 13 12 19 28 7 15 23 45 36 67 66 110 277
|
||||
478 277 483 0 3 6 13 14 21 7 9 27 41 43 71 17 30 45 80 63 110 34 57 375 649
|
||||
394 685 6 11 16 27 22 35 6 8 26 42 44 75 18 33 41 74 51 90 10 17 24 41 32
|
||||
55 54 97 72 128 88 152 11 14 19 28 19 30 0 3 79 141 175 308 96 167 175 305
|
||||
175 308 0 3 6 13 14 21 7 9 26 39 41 66 33 60 276 483 338 587 24 40 46 80 50
|
||||
88 4 8 13 24 20 35 14 23 95 163 125 215 11 19 52 91 92 160 40 69 80 139 90
|
||||
155 9 17 103 179 207 360 105 182 200 346 211 365 103 181 463 802 489 845 7
|
||||
11 15 27 19 35 4 8 29 51 55 95 64 110 828 1433 848 1470 9 17 24 41 33 55 9
|
||||
14 29 48 45 77 15 28 52 93 82 145 30 51 62 107 71 123 17 30 231 398 400 690
|
||||
51 88 103 179 115 202 12 23 26 48 32 55 6 7 24 38 40 68 17 30 61 107 98 170
|
||||
37 63 84 144 103 180 19 36 41 72 48 81 8 8 14 18 14 21 0 4 27 51 59 106 32
|
||||
55 72 124 89 154 16 29 71 125 122 213 51 88 104 180 118 205 13 25 28 50 32
|
||||
55 4 6 17 26 28 45 11 19 45 80 77 135 31 55 66 116 77 135 11 19 88 152 171
|
||||
295 401 694 620 1072 650 1125 11 19 87 152 170 295 83 143 158 273 166 288 9
|
||||
16 21 36 26 45 6 9 31 52 55 96 25 43 54 94 66 115 11 20 95 164 186 321 91
|
||||
157 173 299 182 315 9 17 26 46 37 65 12 19 66 114 121 210 56 96 108 186 117
|
||||
200 8 14 24 40 34 59 24 45 383 664 412 713 5 9 17 29 26 45 15 28 120 210
|
||||
241 419 36 61 68 117 72 125 4 8 12 23 19 34 35 57 245 420 262 453 11 20 35
|
||||
61 53 90 17 29 32 54 32 56 0 3 28 51 62 108 33 57 70 119 80 138 10 19 23 42
|
||||
28 50 5 8 32 53 59 100 27 47 149 258 271 470 122 212 234 405 248 430 30 53
|
||||
62 108 80 135 6 11 15 27 19 35 4 8 85 150 181 315 96 165 187 323 202 350 31
|
||||
56 116 202 130 225 5 8 25 42 43 75 19 33 92 159 162 280 149 257 157 271 202
|
||||
350 19 33 38 67 43 75 9 14 228 392 275 475 12 22 55 96 95 165 40 69 80 139
|
||||
90 155 24 42 202 350 221 383 9 15 27 47 41 72 14 25 75 131 136 236 61 106
|
||||
121 210 134 232 99 172 271 470 279 482 5 8 23 40 40 70 18 30 81 141 142 245
|
||||
60 105 121 210 135 235 14 25 71 124 127 220 56 96 143 247 194 335 51 88 96
|
||||
167 102 175 14 24 180 311 204 355 23 43 340 590 356 615 5 8 50 87 101 175
|
||||
171 301 517 898 582 1008 25 43 46 81 46 83 0 2 12 23 27 47 14 23 40 67 56
|
||||
97 16 30 35 62 42 70 7 8 15 22 18 30 4 8 20 38 37 65 16 28 33 57 37 65 6 12
|
||||
111 196 143 250 5 8 55 95 112 193 57 98 113 195 126 215 12 20 27 46 32 57 6
|
||||
11 14 27 20 35 5 8 76 130 156 270 80 140 165 287 187 325 23 39 52 90 66 115
|
||||
13 25 30 52 37 61 8 8 14 18 14 21 0 4 41 77 92 165 50 87 175 302 276 478
|
||||
101 176 208 360 236 408 28 49 67 117 86 152 19 35 41 70 48 77 6 6 12 15 12
|
||||
19 0 7 124 224 167 291 12 21 23 40 23 42 0 2 21 40 46 83 26 43 55 92 64 109
|
||||
54 95 327 568 354 614 19 30 45 75 59 100 71 128 82 145 89 148 4 2 8 8 8 13
|
||||
0 5 42 82 94 172 311 538 496 858 518 897 14 25 40 70 58 100 18 30 42 71 53
|
||||
90 10 19 79 139 152 265 73 127 142 246 153 265 10 19 43 76 72 125 29 50 63
|
||||
108 75 130 65 116 80 140 87 143 4 2 8 8 8 12 0 8 114 212 140 250 6 8 14 24
|
||||
20 35 5 11 54 97 108 190 l100 170 -9611 3 c-5286 1 -9614 -1 -9618 -5 -5 -6
|
||||
-419 -719 -619 -1068 -89 -155 -267 -463 -323 -560 -38 -66 -81 -140 -95 -165
|
||||
-31 -56 -263 -457 -526 -910 -110 -190 -224 -388 -254 -440 -29 -52 -61 -109
|
||||
-71 -125 -23 -39 -243 -420 -268 -465 -11 -19 -204 -352 -428 -740 -224 -388
|
||||
-477 -826 -563 -975 -85 -148 -185 -322 -222 -385 -37 -63 -120 -207 -185
|
||||
-320 -65 -113 -177 -306 -248 -430 -72 -124 -172 -297 -222 -385 -51 -88 -142
|
||||
-245 -202 -350 -131 -226 -247 -427 -408 -705 -65 -113 -249 -432 -410 -710
|
||||
-160 -278 -388 -673 -506 -877 -118 -205 -216 -373 -219 -373 -3 0 -52 82
|
||||
-109 183 -58 100 -144 250 -192 332 -95 164 -402 696 -647 1120 -85 149 -228
|
||||
396 -317 550 -212 365 -982 1700 -1008 1745 -10 19 -43 76 -72 125 -29 50 -64
|
||||
110 -77 135 -14 25 -63 110 -110 190 -47 80 -96 165 -110 190 -14 25 -99 171
|
||||
-188 325 -89 154 -174 300 -188 325 -13 25 -64 113 -112 195 -48 83 -140 242
|
||||
-205 355 -65 113 -183 317 -263 454 -79 137 -152 264 -163 282 -50 89 -335
|
||||
583 -354 614 -12 19 -34 58 -50 85 -15 28 -129 226 -253 440 -124 215 -235
|
||||
408 -247 430 -12 22 -69 121 -127 220 -58 99 -226 389 -373 645 -148 256 -324
|
||||
561 -392 678 -67 117 -134 232 -147 255 -13 23 -33 59 -46 80 l-22 37 -9615 0
|
||||
-9615 0 20 -32z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 10 KiB |
@ -1,20 +1,52 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<router-link class="home-link" to="/">
|
||||
<Logo />
|
||||
</router-link>
|
||||
<router-link class="home-link" to="/">
|
||||
<Logo />
|
||||
</router-link>
|
||||
|
||||
<Notifications :notifications="notifications" @dismiss="dismissNotification" />
|
||||
|
||||
<main>
|
||||
<router-view />
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import Logo from '@/components/logo.vue'
|
||||
@Component({
|
||||
components: { Logo }
|
||||
<script lang='ts'>
|
||||
import { defineComponent } from 'vue'
|
||||
import { useState } from '@/state'
|
||||
import Logo from '@/components/Logo.vue'
|
||||
import Notifications from '@/components/Notifications.vue'
|
||||
|
||||
export default defineComponent({
|
||||
setup () {
|
||||
const { collection: notifications, actions } = useState('notifications')
|
||||
return {
|
||||
notifications,
|
||||
addNotification: actions.add,
|
||||
dismissNotification: actions.dismiss
|
||||
}
|
||||
},
|
||||
components: { Notifications, Logo },
|
||||
watch: {
|
||||
'$route' (newRoute) {
|
||||
const bodyEl = document.body
|
||||
bodyEl.className = "" // TODO: is this really the way to go here?
|
||||
|
||||
const bodyClass = newRoute.meta.bodyClass
|
||||
if (bodyClass) bodyEl.classList.add(bodyClass)
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.addNotification({
|
||||
level: 'warning',
|
||||
title: 'This is a pre-alpha version.',
|
||||
content: 'Many features are still unstable or completely missing. Check out <a href="https://github.com/nkoehring/rpg-cards-ng/">the code repository</a> for more information.'
|
||||
})
|
||||
|
||||
this.addNotification({
|
||||
content: 'Click the PLUS to create a new deck of cards.'
|
||||
})
|
||||
}
|
||||
})
|
||||
export default class App extends Vue {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style src="@/assets/app.css" />
|
||||
<style src='@/assets/app.css' />
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
@ -1,8 +0,0 @@
|
||||
import Component from 'vue-class-component'
|
||||
|
||||
// Register the router hooks with their names
|
||||
Component.registerHooks([
|
||||
'beforeRouteEnter',
|
||||
'beforeRouteLeave',
|
||||
'beforeRouteUpdate'
|
||||
])
|
||||
@ -0,0 +1,8 @@
|
||||
<template>
|
||||
<p class="note warning">
|
||||
<strong>This is a pre-alpha version.</strong>
|
||||
Many features are still unstable or completely missing.
|
||||
<br />
|
||||
Check out <a href="https://github.com/nkoehring/rpg-cards-ng/">the code repository</a> for more information.
|
||||
</p>
|
||||
</template>
|
||||
@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<div class="icon-wrapper">
|
||||
<img :src="iconPath" alt="card icon" />
|
||||
</div>
|
||||
<slot></slot>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed } from 'vue'
|
||||
import iconPath from '@/lib/iconPath'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'CardBack',
|
||||
props: {
|
||||
icon: String,
|
||||
color: String
|
||||
},
|
||||
setup (props) {
|
||||
return {
|
||||
iconPath: computed(() => iconPath(props.icon || 'plus'))
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<section name="notifications">
|
||||
<p class="note" :class="note.level" v-for="note in notDismissedNotes">
|
||||
<strong>{{ note.title }}</strong>
|
||||
<div v-html="note.content" />
|
||||
<button @click="$emit('dismiss', note)">dismiss</button>
|
||||
</p>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
import { Notification } from '@/types'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Notifications',
|
||||
props: {
|
||||
notifications: Array
|
||||
},
|
||||
computed: {
|
||||
notDismissedNotes (): Notification[] {
|
||||
const notes = this.notifications as Notification[]
|
||||
return notes.filter(note => !note.dismissed)
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -1,49 +0,0 @@
|
||||
<template>
|
||||
<main ref="cardEl" class="card-content"></main>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator'
|
||||
import { Card } from '@/types'
|
||||
|
||||
import Editor from '@editorjs/editorjs'
|
||||
import List from '@editorjs/list'
|
||||
import { Heading, Delimiter, Charges, DnDStats } from '@/editor'
|
||||
|
||||
@Component
|
||||
export default class DeckCardEditor extends Vue {
|
||||
@Prop() public readonly cardId!: string
|
||||
@Prop() public readonly active!: boolean
|
||||
@Prop() public readonly content!: Card['content']
|
||||
|
||||
private editor!: Editor
|
||||
|
||||
private get id () {
|
||||
return `${this.cardId}-editor`
|
||||
}
|
||||
|
||||
private mounted () {
|
||||
this.editor = new Editor({
|
||||
holder: this.$refs.cardEl as HTMLElement,
|
||||
autofocus: false,
|
||||
tools: {
|
||||
list: { class: List, inlineToolbar: true },
|
||||
heading: { class: Heading, inlineToolbar: true },
|
||||
delimiter: { class: Delimiter, inlineToolbar: false },
|
||||
charges: { class: Charges, inlineToolbar: false },
|
||||
dndstats: { class: DnDStats, inlineToolbar: false }
|
||||
},
|
||||
data: this.content,
|
||||
placeholder: 'Click here to write your card.',
|
||||
onChange: () => {
|
||||
console.log('editor change, saving')
|
||||
this.editor.save().then(value => {
|
||||
this.$emit('change', { field: 'content', value })
|
||||
}).catch(error => {
|
||||
console.error('error saving data', error)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,187 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
:id="card.id"
|
||||
class="flip-card card"
|
||||
:class="{ active: isSelection }"
|
||||
:style="containerStyle"
|
||||
@click="clickUnlessSelected">
|
||||
<div class="active-background" @click.self.stop="$emit('close')" />
|
||||
<button class="action-close" @click.self.stop="$emit('close')" v-if="isSelection" />
|
||||
<section name="card-front" class="card-front">
|
||||
<header>
|
||||
<h1 :contenteditable="isSelection"
|
||||
@blur="editField('name', $event)"
|
||||
@keypress.enter.prevent="editField('name', $event)">
|
||||
{{ card.name }}
|
||||
</h1>
|
||||
<img :src="icon" />
|
||||
</header>
|
||||
<deck-card-editor
|
||||
:card-id="card.id"
|
||||
:active="isSelection"
|
||||
:content="card.content"
|
||||
@change="$emit('edit', $event)"
|
||||
/>
|
||||
</section>
|
||||
<section name="card-back" class="card-back">
|
||||
<div class="icon-wrapper">
|
||||
<img :src="backIcon" />
|
||||
</div>
|
||||
<button @click="$emit('click')">edit card</button>
|
||||
<button @click="$emit('delete')">delete card</button>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator'
|
||||
import { Deck, Card } from '@/types'
|
||||
import { cardSizeToStyle, iconPath } from '@/lib'
|
||||
import DeckCardEditor from '@/components/deck-card-editor.vue'
|
||||
|
||||
@Component({
|
||||
components: { DeckCardEditor }
|
||||
})
|
||||
export default class DeckCard extends Vue {
|
||||
@Prop() public readonly card!: Card
|
||||
@Prop() public readonly deck!: Deck
|
||||
@Prop() public readonly isSelection!: boolean
|
||||
|
||||
private editHeadline = false;
|
||||
private editFieldIndex: number | null = null;
|
||||
|
||||
private clickUnlessSelected () {
|
||||
if (this.isSelection) return
|
||||
this.$emit('click')
|
||||
}
|
||||
|
||||
private editField (field: string, event: Event) {
|
||||
if (event.target === null) return
|
||||
const target = event.target as HTMLElement
|
||||
const payload = { field, value: target.innerText }
|
||||
this.$emit('edit', payload)
|
||||
}
|
||||
|
||||
private get icon () {
|
||||
const icon = this.card.icon || this.deck.icon
|
||||
return iconPath(icon)
|
||||
}
|
||||
|
||||
private get backIcon () {
|
||||
const icon = this.card.backIcon || this.deck.icon
|
||||
return iconPath(icon)
|
||||
}
|
||||
|
||||
private get containerStyle () {
|
||||
const style = {
|
||||
'--highlight-color': this.card.color || this.deck.color,
|
||||
...cardSizeToStyle(this.deck.cardSize),
|
||||
transform: ''
|
||||
}
|
||||
|
||||
const selected = this.isSelection
|
||||
const hasElement = this.$el
|
||||
|
||||
if (selected && hasElement) {
|
||||
const el = this.$el.getBoundingClientRect()
|
||||
const wWidth = window.innerWidth
|
||||
const wHeight = window.innerHeight
|
||||
let scale = Math.min(2, wWidth / el.width)
|
||||
|
||||
const dH = wHeight / el.height
|
||||
if (dH < scale) {
|
||||
// leave some space if scaled card would otherwise fill top to bottom
|
||||
// so that we can fit controls
|
||||
scale = dH - dH * 0.1
|
||||
}
|
||||
|
||||
console.log('scale', scale)
|
||||
|
||||
const dx = Math.round(wWidth / 2.0 - el.x - el.width / 2.0)
|
||||
const dy = Math.round(wHeight / 2.0 - el.y - el.height / 2.0)
|
||||
|
||||
style.transform = `translate(${dx}px, ${dy}px) scale(${scale})`
|
||||
}
|
||||
|
||||
return style
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style src="@/assets/card.css" />
|
||||
|
||||
<style scoped>
|
||||
.flip-card {
|
||||
position: relative;
|
||||
perspective: 600px;
|
||||
transition: transform .2s ease-out .4s;
|
||||
}
|
||||
.flip-card > .active-background {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: -100vh;
|
||||
left: -100vw;
|
||||
width: 200vw;
|
||||
height: 200vh;
|
||||
background-color: #0008;
|
||||
}
|
||||
.flip-card.active {
|
||||
z-index: 1;
|
||||
}
|
||||
.flip-card.active > .active-background {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.card-front, .card-back {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--highlight-color);
|
||||
transform: rotateX(0) rotateY(0);
|
||||
transform-style: preserve-3d;
|
||||
backface-visibility: hidden;
|
||||
transition: transform .4s ease-out;
|
||||
overflow: hidden;
|
||||
}
|
||||
.flip-card:not(.active):hover > .card-front {
|
||||
transform: rotateX(0) rotateY(179deg);
|
||||
}
|
||||
.flip-card:not(.active):hover > .card-back {
|
||||
z-index: 2;
|
||||
transform: rotateX(0) rotateY(0);
|
||||
}
|
||||
|
||||
.card-front {
|
||||
z-index: 1;
|
||||
}
|
||||
.card-front > header > h1[contenteditable="true"] { text-decoration: underline dotted; }
|
||||
.card-front > header > h1[contenteditable="true"]:focus { text-decoration: none; }
|
||||
|
||||
.card-back {
|
||||
cursor: pointer;
|
||||
z-index: 2;
|
||||
transform: rotateX(0) rotateY(-179deg);
|
||||
}
|
||||
.card-back > button {
|
||||
width: 80%;
|
||||
margin: .1rem auto;
|
||||
}
|
||||
|
||||
.action-close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
margin-top: -3rem;
|
||||
}
|
||||
|
||||
@media screen and (orientation:landscape) {
|
||||
.action-close {
|
||||
top: 3rem;
|
||||
right: -3rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,70 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
:id="deck.id" class="card deck-cover" :style="style"
|
||||
@click="$emit('click')"
|
||||
>
|
||||
<div class="icon-wrapper">
|
||||
<img :src="icon" />
|
||||
</div>
|
||||
<footer>{{ deck.name }} ({{ deck.cards.length }})</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator'
|
||||
import { Deck } from '@/types'
|
||||
import { cardSizeToStyle, iconPath, defaultDeck } from '@/lib'
|
||||
|
||||
const emptyDeck: Deck = {
|
||||
...defaultDeck(),
|
||||
id: '_add_deck',
|
||||
name: 'create new deck',
|
||||
color: 'transparent',
|
||||
icon: 'plus'
|
||||
}
|
||||
|
||||
@Component
|
||||
export default class DeckCover extends Vue {
|
||||
@Prop({ default () { return emptyDeck } }) public readonly deck!: Deck
|
||||
|
||||
private get icon () {
|
||||
const icon = this.deck.icon || 'default'
|
||||
return iconPath(icon)
|
||||
}
|
||||
|
||||
private get style () {
|
||||
return {
|
||||
backgroundColor: this.deck.color,
|
||||
...cardSizeToStyle(this.deck.cardSize)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.deck-cover {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: space-evenly;
|
||||
text-align: center;
|
||||
line-height: 4rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
.deck-cover > footer {
|
||||
font-size: 2rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
#_add_deck.deck-cover {
|
||||
height: var(--card-height);
|
||||
width: 25rem;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
#_add_deck.deck-cover > footer {
|
||||
display: none;
|
||||
}
|
||||
.deck-cover > .icon-wrapper {
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
@ -1,76 +0,0 @@
|
||||
<template>
|
||||
<form class="options-form" @submit.prevent="saveDeck">
|
||||
<div class="deck-form-fields">
|
||||
<select v-model="icon">
|
||||
<option :key="iconName" :value="iconName" v-for="iconName in icons">{{ iconName }}</option>
|
||||
</select>
|
||||
|
||||
<input v-model="name" title="deck name" placeholder="give it a name" />
|
||||
<input v-model="description" title="deck description" placeholder="the most awesome deck of cards" />
|
||||
|
||||
<p>Pick a colour: <input type="color" v-model="color" /></p>
|
||||
|
||||
<select v-model="cardSize">
|
||||
<option :key="size.value" :value="size.value" v-for="size in sizes">{{ size.title }}</option>
|
||||
</select>
|
||||
|
||||
<button type="submit">Save deck</button>
|
||||
<button class="cancel" @click.prevent="$emit('close')">cancel</button>
|
||||
</div>
|
||||
|
||||
<DeckCover :deck="newDeck" />
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Emit, Vue } from 'vue-property-decorator'
|
||||
import { Deck, CardSize } from '@/types'
|
||||
import { cardSizeOptions } from '@/consts'
|
||||
import DeckCover from '@/components/deck-cover.vue'
|
||||
import { iconPath } from '../lib'
|
||||
|
||||
@Component({
|
||||
components: { DeckCover }
|
||||
})
|
||||
export default class DeckForm extends Vue {
|
||||
@Prop() public readonly deck!: Deck
|
||||
|
||||
private icons = ['mouth-watering', 'robe', 'thorny-triskelion']
|
||||
private sizes = cardSizeOptions
|
||||
|
||||
private icon: string
|
||||
private name: string
|
||||
private description: string
|
||||
private color: string
|
||||
private cardSize: CardSize
|
||||
|
||||
constructor () {
|
||||
super()
|
||||
this.icon = this.deck.icon
|
||||
this.name = this.deck.name
|
||||
this.description = this.deck.description
|
||||
this.color = this.deck.color
|
||||
this.cardSize = this.deck.cardSize
|
||||
}
|
||||
|
||||
private get iconPath () {
|
||||
return iconPath(this.icon)
|
||||
}
|
||||
|
||||
private get newDeck (): Deck {
|
||||
return {
|
||||
...this.deck,
|
||||
name: this.name,
|
||||
description: this.description,
|
||||
color: this.color,
|
||||
icon: this.icon,
|
||||
cardSize: this.cardSize
|
||||
}
|
||||
}
|
||||
|
||||
@Emit('save')
|
||||
private saveDeck (): Deck {
|
||||
return this.newDeck
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,24 +0,0 @@
|
||||
<template>
|
||||
<div id="edit-deck-form" class="deck">
|
||||
<header>Deck Config</header>
|
||||
<DeckForm :deck="deck" @save="saveDeck" @close="$emit('close')" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Emit, Vue } from 'vue-property-decorator'
|
||||
import { Deck } from '@/types'
|
||||
import DeckForm from './deck-form.vue'
|
||||
|
||||
@Component({
|
||||
components: { DeckForm }
|
||||
})
|
||||
export default class EditDeckForm extends Vue {
|
||||
@Prop() public readonly deck!: Deck
|
||||
|
||||
@Emit('save')
|
||||
private saveDeck (deck: Deck) {
|
||||
this.$storage.saveDeck(deck)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,63 +0,0 @@
|
||||
<template>
|
||||
<div class="switch">
|
||||
<input :id="id" class="checkbox" type="checkbox" :checked="value" @change="$emit('input', !value)" />
|
||||
<label :for="id">
|
||||
<div class="switch-label-text">{{ label }}</div>
|
||||
<div class="switch-elements-wrapper">
|
||||
<div class="switch-elements">
|
||||
<div class="switch-element off"><slot name="off">NO</slot></div>
|
||||
<div class="switch-element btn"></div>
|
||||
<div class="switch-element on"><slot name="on">YES</slot></div>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator'
|
||||
|
||||
@Component
|
||||
export default class FlipSwitch extends Vue {
|
||||
@Prop() public readonly id!: string
|
||||
@Prop() public readonly value!: boolean
|
||||
@Prop() public readonly label!: string
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.switch > input {
|
||||
display: none;
|
||||
}
|
||||
.switch .switch-elements-wrapper {
|
||||
height: 2em;
|
||||
width: 4em;
|
||||
border: 4px solid black;
|
||||
border-radius: 2em;
|
||||
background-color: black;
|
||||
overflow: hidden;
|
||||
}
|
||||
.switch .switch-elements {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
transition: transform .2s ease-in;
|
||||
}
|
||||
.switch .switch-element {
|
||||
height: 1.8em;
|
||||
width: 1.8em;
|
||||
margin: .1em;
|
||||
line-height: 1.8em;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.switch .btn {
|
||||
background-color: gray;
|
||||
border-radius: 5em;
|
||||
}
|
||||
|
||||
input.checkbox:checked + label .switch-elements-wrapper > .switch-elements {
|
||||
transform: translate(-2em, 0);
|
||||
}
|
||||
input.checkbox:checked + label .switch-elements-wrapper {
|
||||
box-shadow: 0 0 15px 2px green;
|
||||
}
|
||||
</style>
|
||||
@ -1,58 +0,0 @@
|
||||
<template>
|
||||
<div id="new-deck-form" class="deck">
|
||||
<header>Create a new deck of cards</header>
|
||||
<DeckForm :deck="newDeck" @save="saveDeck" @close="$emit('close')" />
|
||||
<footer class="centered">You can also <button @click="importDeck">import</button> an existing set.</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Emit, Vue } from 'vue-property-decorator'
|
||||
import { Deck } from '@/types'
|
||||
import DeckForm from './deck-form.vue'
|
||||
import { defaultDeck, randomId, isValidDeck } from '../lib'
|
||||
|
||||
@Component({
|
||||
components: { DeckForm }
|
||||
})
|
||||
export default class NewDeckForm extends Vue {
|
||||
private newDeck: Deck = defaultDeck()
|
||||
|
||||
private importDeck () {
|
||||
const newFileSelector = document.createElement('input')
|
||||
newFileSelector.setAttribute('type', 'file')
|
||||
|
||||
newFileSelector.onchange = event => {
|
||||
if (event === null) return
|
||||
const fileList = (event.target as HTMLInputElement).files
|
||||
if (fileList === null || fileList.length < 1) return
|
||||
const file = fileList[0]
|
||||
if (!file) return
|
||||
|
||||
const seemsToBeJSON = file.type === 'application/json'
|
||||
// TODO: more checks?
|
||||
let fileOk = seemsToBeJSON
|
||||
|
||||
if (!seemsToBeJSON) {
|
||||
fileOk = window.confirm(`This seems to be wrong file type (${file.type}). Should be JSON. Import anyway?`)
|
||||
}
|
||||
|
||||
if (!fileOk) return
|
||||
|
||||
file.text().then((text: string) => {
|
||||
const json = JSON.parse(text)
|
||||
if (!isValidDeck(json)) window.alert('Sorry, that did\'t seem to be a valid deck.')
|
||||
else this.$emit('save', this.$storage.saveDeck(json))
|
||||
})
|
||||
}
|
||||
|
||||
newFileSelector.click()
|
||||
}
|
||||
|
||||
@Emit('save')
|
||||
private saveDeck (deck: Deck) {
|
||||
deck.id = randomId() // just to make sure
|
||||
this.$storage.saveDeck(deck)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,96 +0,0 @@
|
||||
<template>
|
||||
<div id="print-options-form">
|
||||
<header>Print Deck</header>
|
||||
|
||||
<form @submit.prevent="printDeck">
|
||||
<div class="deck-form-fields">
|
||||
<label for="print-option-page-size">
|
||||
Page Size
|
||||
<select class="print-option-select" id="print-option-page-size" v-model="pageSize">
|
||||
<option :key="size.value" :value="size.value" v-for="size in pageSizes">{{ size.title }}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label for="print-option-card-size">
|
||||
Card Size
|
||||
<select class="print-option-select" id="print-option-card-size" v-model="cardSize">
|
||||
<option :key="size.value" :value="size.value" v-for="size in cardSizes">{{ size.title }}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label for="print-option-arrangement">
|
||||
Arrangement
|
||||
<select class="print-option-select" id="print-option-arrangement" v-model="arrangement">
|
||||
<option :key="arrangement.value" :value="arrangement.value" v-for="arrangement in arrangements">{{ arrangement.title }}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<FlipSwitch id="print-option-rounded-corners" label="Rounded Corners" v-model="roundedCorners">
|
||||
</FlipSwitch>
|
||||
|
||||
<button type="submit">Print deck</button>
|
||||
<button class="cancel" @click.prevent="$emit('close')">cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator'
|
||||
import { Deck } from '@/types'
|
||||
import {
|
||||
cardSizeOptions,
|
||||
pageSizeOptions,
|
||||
arrangementOptions,
|
||||
defaultCardSize,
|
||||
defaultPageSize,
|
||||
defaultArrangement
|
||||
} from '@/consts'
|
||||
import FlipSwitch from '@/components/flip-switch.vue'
|
||||
|
||||
@Component({
|
||||
components: { FlipSwitch }
|
||||
})
|
||||
export default class EditDeckForm extends Vue {
|
||||
@Prop() public readonly deck!: Deck
|
||||
|
||||
private pageSizes = pageSizeOptions
|
||||
private cardSizes = cardSizeOptions
|
||||
private arrangements = arrangementOptions
|
||||
|
||||
private pageSize = defaultPageSize
|
||||
private cardSize = defaultCardSize
|
||||
private arrangement = defaultArrangement
|
||||
private roundedCorners = true
|
||||
|
||||
private mounted () {
|
||||
this.cardSize = this.deck.cardSize
|
||||
this.pageSize = this.deck.pageSize
|
||||
this.arrangement = this.deck.arrangement
|
||||
this.roundedCorners = this.deck.roundedCorners
|
||||
}
|
||||
|
||||
private printDeck () {
|
||||
this.$storage.saveDeck({
|
||||
...this.deck,
|
||||
arrangement: this.arrangement,
|
||||
pageSize: this.pageSize,
|
||||
cardSize: this.cardSize,
|
||||
roundedCorners: this.roundedCorners
|
||||
})
|
||||
console.log('would print on', this.pageSize, `(${this.arrangement})`, this.deck.cards.length, 'cards of size', this.cardSize, this.roundedCorners ? 'with rounded corners' : '')
|
||||
window.open(`/print/${this.deck.id}`, '_blank')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.print-option-select {
|
||||
width: 55%;
|
||||
}
|
||||
.deck-form-fields {
|
||||
width: 100%;
|
||||
max-width: 20em;
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
@ -1,89 +0,0 @@
|
||||
<template>
|
||||
<div class="card" :style="containerStyle">
|
||||
<div class="card-front" v-if="showFront">
|
||||
<header>
|
||||
<h1>{{ card.name }}</h1>
|
||||
<img :src="icon" />
|
||||
</header>
|
||||
<main ref="cardEl" class="card-content">
|
||||
</main>
|
||||
</div>
|
||||
<div class="card-back" v-if="showBack">BACK</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator'
|
||||
import { Deck, Card } from '@/types'
|
||||
import { iconPath } from '@/lib'
|
||||
|
||||
import Editor from '@editorjs/editorjs'
|
||||
import List from '@editorjs/list'
|
||||
import { Heading, Delimiter, Charges, DnDStats } from '@/editor'
|
||||
|
||||
@Component
|
||||
export default class StaticCard extends Vue {
|
||||
@Prop() public readonly card!: Card
|
||||
@Prop() public readonly deck!: Deck
|
||||
@Prop({ default: false }) public readonly showFront!: boolean
|
||||
@Prop({ default: false }) public readonly showBack!: boolean
|
||||
|
||||
private editor!: Editor
|
||||
|
||||
private mounted () {
|
||||
this.editor = new Editor({
|
||||
holder: this.$refs.cardEl as HTMLElement,
|
||||
autofocus: false,
|
||||
hideToolbar: true,
|
||||
tools: {
|
||||
list: { class: List, inlineToolbar: false },
|
||||
heading: { class: Heading, inlineToolbar: false },
|
||||
delimiter: { class: Delimiter, inlineToolbar: false },
|
||||
charges: { class: Charges, inlineToolbar: false },
|
||||
dndstats: { class: DnDStats, inlineToolbar: false }
|
||||
},
|
||||
data: this.card.content,
|
||||
onReady: () => {
|
||||
console.log('editor is ready, what to do?')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
private get icon () {
|
||||
const icon = this.card.icon || this.deck.icon
|
||||
return iconPath(icon)
|
||||
}
|
||||
|
||||
private get backIcon () {
|
||||
const icon = this.card.backIcon || this.deck.icon
|
||||
return iconPath(icon)
|
||||
}
|
||||
|
||||
private get containerStyle () {
|
||||
const color = (this.deck && this.deck.color) || this.card.color
|
||||
|
||||
return {
|
||||
'--highlight-color': color
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style src="@/assets/card.css" />
|
||||
|
||||
<style scoped>
|
||||
.card {
|
||||
height: auto;
|
||||
width: auto;
|
||||
background-color: var(--highlight-color);
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
margin: 0;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
.card-front, .card-back {
|
||||
width: var(--card-width);
|
||||
height: var(--card-height);
|
||||
}
|
||||
</style>
|
||||
@ -1,39 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import { randomId } from './lib'
|
||||
|
||||
const eventHandlers: { [key: string]: () => void } = {}
|
||||
|
||||
Vue.directive('editable', (el, { value, arg }, vnode) => {
|
||||
const keypressHandler = (event: KeyboardEvent) => {
|
||||
// allow line break via Shift + Enter
|
||||
if (event.keyCode === 13 && !event.shiftKey) {
|
||||
event.preventDefault()
|
||||
console.log('edit event on enter', el.innerText)
|
||||
if (!vnode.context) return
|
||||
vnode.context.$emit('edit', { param: arg, value: el.innerText })
|
||||
}
|
||||
}
|
||||
|
||||
const blurHandler = () => {
|
||||
console.log('edit event on blur', el.innerText)
|
||||
if (!vnode.context) return
|
||||
vnode.context.$emit('edit', { param: arg, value: el.innerText })
|
||||
}
|
||||
|
||||
// remove old event listeners
|
||||
if (el.dataset.__evtid) {
|
||||
eventHandlers[el.dataset.__evtid]()
|
||||
}
|
||||
|
||||
el.contentEditable = value ? 'true' : 'false'
|
||||
el.addEventListener('keypress', keypressHandler)
|
||||
el.addEventListener('blur', blurHandler)
|
||||
|
||||
// TODO: is there a better way to avoid multiple event handlers?
|
||||
const id = randomId()
|
||||
el.dataset.__evtid = id
|
||||
eventHandlers[id] = () => {
|
||||
el.removeEventListener('keypress', keypressHandler)
|
||||
el.removeEventListener('blur', blurHandler)
|
||||
}
|
||||
})
|
||||
@ -1,134 +0,0 @@
|
||||
import { ContentlessBlock, BlockToolArgs } from './contentless-block'
|
||||
import icon from '../assets/editor/charges.svg.txt'
|
||||
import iconCircle from '../assets/editor/charges-circle.svg.txt'
|
||||
|
||||
const title = 'Charges'
|
||||
|
||||
interface ChargesData {
|
||||
variant: string;
|
||||
amount: number;
|
||||
size: number;
|
||||
stretch: boolean;
|
||||
}
|
||||
|
||||
class Charges extends ContentlessBlock {
|
||||
static MIN_SIZE = 1
|
||||
static MAX_SIZE = 5
|
||||
private _variant: string
|
||||
private _amount: number
|
||||
private _size: number
|
||||
private _stretch: boolean
|
||||
|
||||
constructor (args: BlockToolArgs) {
|
||||
super(args)
|
||||
this._settingButtons = [
|
||||
{ name: 'box', icon, action: (name: string) => this.setVariant(name) },
|
||||
{ name: 'more', icon: icon, action: () => this.increaseAmount() },
|
||||
{ name: 'bigger', icon: icon, action: () => this.increaseSize() },
|
||||
{ name: 'circle', icon: iconCircle, action: (name: string) => this.setVariant(name) },
|
||||
{ name: 'less', icon: icon, action: () => this.decreaseAmount() },
|
||||
{ name: 'smaller', icon: icon, action: () => this.decreaseSize() },
|
||||
{ name: 'toggle-stretch', icon: icon, action: () => this.toggleStretch() }
|
||||
]
|
||||
const { variant, amount, size, stretch } = (args.data || {}) as ChargesData
|
||||
|
||||
this._variant = variant || 'box'
|
||||
this._amount = amount || 5
|
||||
this._size = size || 1
|
||||
this._stretch = !(stretch === false)
|
||||
|
||||
this._element = this._render()
|
||||
}
|
||||
|
||||
private setVariant (variant: string) {
|
||||
if (this._variant === variant) return
|
||||
|
||||
const charges = Array.from(this._element.children)
|
||||
|
||||
charges.forEach(charge => {
|
||||
charge.classList.remove(`card-charge-${this._variant}`)
|
||||
charge.classList.add(`card-charge-${variant}`)
|
||||
})
|
||||
|
||||
this._variant = variant
|
||||
}
|
||||
|
||||
private toggleStretch () {
|
||||
if (this._stretch) this._element.classList.remove('card-charges-stretch')
|
||||
else this._element.classList.add('card-charges-stretch')
|
||||
this._stretch = !this._stretch
|
||||
}
|
||||
|
||||
private createCharge (): HTMLElement {
|
||||
const charge = document.createElement('DIV')
|
||||
charge.classList.add('card-charge', `card-charge-${this._variant}`, `card-charge-size-${this._size}`)
|
||||
return charge
|
||||
}
|
||||
|
||||
private increaseAmount () {
|
||||
this._element.appendChild(this.createCharge())
|
||||
this._amount++
|
||||
}
|
||||
|
||||
private decreaseAmount () {
|
||||
const child = this._element.lastElementChild
|
||||
if (child) {
|
||||
this._element.removeChild(child)
|
||||
this._amount--
|
||||
}
|
||||
}
|
||||
|
||||
private increaseSize () {
|
||||
if (this._size >= Charges.MAX_SIZE) return
|
||||
|
||||
const charges = Array.from(this._element.children)
|
||||
|
||||
charges.forEach(charge => {
|
||||
charge.classList.remove(`card-charge-size-${this._size}`)
|
||||
charge.classList.add(`card-charge-size-${this._size + 1}`)
|
||||
})
|
||||
|
||||
this._size++
|
||||
}
|
||||
|
||||
private decreaseSize () {
|
||||
if (this._size <= Charges.MIN_SIZE) return
|
||||
|
||||
const charges = Array.from(this._element.children)
|
||||
|
||||
charges.forEach(charge => {
|
||||
charge.classList.remove(`card-charge-size-${this._size}`)
|
||||
charge.classList.add(`card-charge-size-${this._size - 1}`)
|
||||
})
|
||||
|
||||
this._size--
|
||||
}
|
||||
|
||||
protected _render (): HTMLElement {
|
||||
const el = document.createElement('DIV')
|
||||
el.classList.add('card-charges-wrapper', this._CSS.block)
|
||||
|
||||
if (this._stretch) el.classList.add('card-charges-stretch')
|
||||
|
||||
for (let i = 0; i < this._amount; i++) {
|
||||
el.appendChild(this.createCharge())
|
||||
}
|
||||
|
||||
return el
|
||||
}
|
||||
|
||||
public save (): ChargesData {
|
||||
return {
|
||||
variant: this._variant,
|
||||
amount: this._amount,
|
||||
size: this._size,
|
||||
stretch: this._stretch
|
||||
}
|
||||
}
|
||||
|
||||
static get toolbox () {
|
||||
return { icon, title }
|
||||
}
|
||||
}
|
||||
|
||||
export default Charges
|
||||
@ -1,222 +0,0 @@
|
||||
import {
|
||||
BlockTool,
|
||||
BlockToolData,
|
||||
ToolboxConfig,
|
||||
API,
|
||||
HTMLPasteEvent,
|
||||
ToolSettings,
|
||||
SanitizerConfig
|
||||
} from '@editorjs/editorjs'
|
||||
|
||||
export { HTMLPasteEvent } from '@editorjs/editorjs'
|
||||
|
||||
interface PasteConfig {
|
||||
tags: string[];
|
||||
}
|
||||
|
||||
export interface ContentBlockConfig extends ToolSettings {
|
||||
placeholder?: string;
|
||||
}
|
||||
|
||||
export interface ContentBlockSettingButton {
|
||||
name: string;
|
||||
icon: string;
|
||||
action: (name: string, event?: MouseEvent) => void; // action triggered by button
|
||||
isActive?: (name: string) => boolean; // determine if current button is active
|
||||
}
|
||||
|
||||
export type ContentBlockSettings = ContentBlockSettingButton[]
|
||||
|
||||
export interface ContentBlockArgs {
|
||||
api: API;
|
||||
config?: ContentBlockConfig;
|
||||
data?: BlockToolData;
|
||||
}
|
||||
|
||||
export interface CSSClasses {
|
||||
[key: string]: string;
|
||||
}
|
||||
|
||||
export interface ContentBlockData extends BlockToolData {
|
||||
text?: string;
|
||||
}
|
||||
|
||||
type importFunction = (str: string) => ContentBlockData
|
||||
type exportFunction = (data: ContentBlockData) => string
|
||||
|
||||
export interface ConversionConfig {
|
||||
import: string | importFunction;
|
||||
export: string | exportFunction;
|
||||
}
|
||||
|
||||
export class ContentBlock implements BlockTool {
|
||||
// Default placeholder for Paragraph Tool
|
||||
static get DEFAULT_PLACEHOLDER (): string {
|
||||
return ''
|
||||
}
|
||||
|
||||
static _supportedTags: string[] = []
|
||||
|
||||
static _toolboxConfig: ToolboxConfig = {
|
||||
icon: '<svg></svg>',
|
||||
title: 'UnnamedContentPlugin'
|
||||
}
|
||||
|
||||
protected _defaultPlaceholder (): string {
|
||||
return ContentBlock.DEFAULT_PLACEHOLDER
|
||||
}
|
||||
|
||||
protected api: API
|
||||
protected _element: HTMLElement
|
||||
protected _data: ContentBlockData
|
||||
protected _config: ContentBlockConfig
|
||||
protected _placeholder: string
|
||||
protected _CSS: CSSClasses = {}
|
||||
protected onKeyUp: (event: KeyboardEvent) => void
|
||||
protected _settingButtons: ContentBlockSettings = []
|
||||
|
||||
constructor ({ data, config, api }: ContentBlockArgs) {
|
||||
this.api = api
|
||||
this._config = config as ContentBlockConfig
|
||||
this._CSS.block = this.api.styles.block
|
||||
|
||||
this.onKeyUp = (event: KeyboardEvent) => this._onKeyUp(event)
|
||||
|
||||
// Placeholder it is first Block
|
||||
this._placeholder = config?.placeholder ? config.placeholder : this._defaultPlaceholder()
|
||||
this._data = data as ContentBlockData
|
||||
this._element = this._render()
|
||||
}
|
||||
|
||||
// Check if text content is empty and set empty string to inner html.
|
||||
// We need this because some browsers (e.g. Safari) insert <br> into empty contenteditanle elements
|
||||
_onKeyUp (event: KeyboardEvent) {
|
||||
if (event.code !== 'Backspace' && event.code !== 'Delete') return
|
||||
|
||||
if (this._element.textContent === '') {
|
||||
this._element.innerHTML = ''
|
||||
}
|
||||
}
|
||||
|
||||
// render tool view
|
||||
// whenever a redraw is needed the result is saved in this._element
|
||||
protected _render (): HTMLElement {
|
||||
const el = document.createElement('DIV')
|
||||
el.classList.add(this._CSS.block)
|
||||
el.dataset.placeholder = this._placeholder
|
||||
el.addEventListener('keyup', this.onKeyUp)
|
||||
el.innerHTML = this.data.text || ''
|
||||
el.contentEditable = 'true'
|
||||
|
||||
return el
|
||||
}
|
||||
|
||||
// Return Tool's view
|
||||
public render (): HTMLElement {
|
||||
return this._element
|
||||
}
|
||||
|
||||
// Method that specified how to merge two Text blocks.
|
||||
// Called by Editor.js by backspace at the beginning of the Block
|
||||
public merge (data: ContentBlockData) {
|
||||
this.data = {
|
||||
text: (this.data.text || '') + data.text
|
||||
}
|
||||
}
|
||||
|
||||
// Validate Paragraph block data (by default checks for emptiness)
|
||||
public validate (savedData: ContentBlockData): boolean {
|
||||
if (!savedData.text) return false
|
||||
return savedData.text.trim() !== ''
|
||||
}
|
||||
|
||||
// Extract Tool's data from the view
|
||||
public save (toolsContent: HTMLElement): ContentBlockData {
|
||||
return {
|
||||
text: toolsContent.innerHTML
|
||||
}
|
||||
}
|
||||
|
||||
public get CSS (): CSSClasses {
|
||||
return this._CSS
|
||||
}
|
||||
|
||||
/**
|
||||
* Enable Conversion Toolbar. Paragraph can be converted to/from other tools
|
||||
*/
|
||||
static get conversionConfig (): ConversionConfig {
|
||||
return {
|
||||
export: 'text', // to convert Paragraph to other block, use 'text' property of saved data
|
||||
import: 'text' // to covert other block's exported string to Paragraph, fill 'text' property of tool data
|
||||
}
|
||||
}
|
||||
|
||||
// Sanitizer rules
|
||||
static get sanitize (): SanitizerConfig {
|
||||
return {
|
||||
text: { br: true }
|
||||
}
|
||||
}
|
||||
|
||||
get data (): ContentBlockData {
|
||||
const text = this._element?.innerHTML
|
||||
if (text !== undefined) this._data.text = text
|
||||
if (this._data.text === undefined) this._data.text = ''
|
||||
return this._data
|
||||
}
|
||||
|
||||
set data (data: ContentBlockData) {
|
||||
this._data = data || {}
|
||||
this._element.innerHTML = this._data.text || ''
|
||||
}
|
||||
|
||||
public renderSettings (): HTMLElement {
|
||||
const wrapper = document.createElement('DIV')
|
||||
|
||||
this._settingButtons.forEach(tune => {
|
||||
// make sure the settings button does something
|
||||
if (!tune.icon || typeof tune.action !== 'function') return
|
||||
|
||||
const { name, icon, action, isActive } = tune
|
||||
|
||||
const btn = document.createElement('SPAN')
|
||||
btn.classList.add(this.api.styles.settingsButton)
|
||||
|
||||
if (typeof isActive === 'function' && isActive(name)) {
|
||||
btn.classList.add(this.api.styles.settingsButtonActive)
|
||||
}
|
||||
btn.innerHTML = icon
|
||||
btn.addEventListener('click', event => action(name, event))
|
||||
|
||||
wrapper.appendChild(btn)
|
||||
})
|
||||
|
||||
return wrapper
|
||||
}
|
||||
|
||||
// Used by Editor.js paste handling API.
|
||||
// Provides configuration to handle the tools tags.
|
||||
static get pasteConfig (): PasteConfig {
|
||||
return {
|
||||
tags: this._supportedTags
|
||||
}
|
||||
}
|
||||
|
||||
// overwrite this if you need special handling of paste data
|
||||
protected pasteHandler (element: HTMLElement): ContentBlockData {
|
||||
return { text: element.innerText }
|
||||
}
|
||||
|
||||
// On paste callback fired from Editor.
|
||||
public onPaste (event: HTMLPasteEvent) {
|
||||
const element = event.detail.data
|
||||
this.data = this.pasteHandler(element)
|
||||
}
|
||||
|
||||
// Icon and title for displaying at the Toolbox
|
||||
static get toolbox (): ToolboxConfig {
|
||||
return this._toolboxConfig
|
||||
}
|
||||
}
|
||||
|
||||
export default ContentBlock
|
||||
@ -1,73 +0,0 @@
|
||||
import { BlockTool, BlockToolData, ToolSettings, ToolboxConfig, API } from '@editorjs/editorjs'
|
||||
import { ContentBlockSettings, CSSClasses } from './content-block'
|
||||
|
||||
export interface BlockToolArgs {
|
||||
api: API;
|
||||
config?: ToolSettings;
|
||||
data?: BlockToolData;
|
||||
}
|
||||
|
||||
export class ContentlessBlock implements BlockTool {
|
||||
static get contentless () {
|
||||
return true
|
||||
}
|
||||
|
||||
protected api: API
|
||||
protected _element: HTMLElement
|
||||
protected _data: object
|
||||
protected _config: ToolSettings
|
||||
protected _CSS: CSSClasses = {}
|
||||
protected _settingButtons: ContentBlockSettings = []
|
||||
|
||||
constructor ({ data, config, api }: BlockToolArgs) {
|
||||
this.api = api
|
||||
this._config = config as ToolSettings
|
||||
this._data = data || {}
|
||||
this._CSS.block = this.api.styles.block
|
||||
this._element = this._render()
|
||||
}
|
||||
|
||||
protected _render (): HTMLElement {
|
||||
const el = document.createElement('DIV')
|
||||
el.classList.add(this._CSS.block)
|
||||
return el
|
||||
}
|
||||
|
||||
public render (): HTMLElement {
|
||||
return this._element
|
||||
}
|
||||
|
||||
public save (_toolsContent: HTMLElement): object {
|
||||
return {}
|
||||
}
|
||||
|
||||
public renderSettings (): HTMLElement {
|
||||
const wrapper = document.createElement('DIV')
|
||||
|
||||
this._settingButtons.forEach(tune => {
|
||||
// make sure the settings button does something
|
||||
if (!tune.icon || typeof tune.action !== 'function') return
|
||||
|
||||
const { name, icon, action, isActive } = tune
|
||||
|
||||
const btn = document.createElement('SPAN')
|
||||
btn.classList.add(this.api.styles.settingsButton)
|
||||
|
||||
if (typeof isActive === 'function' && isActive(name)) {
|
||||
btn.classList.add(this.api.styles.settingsButtonActive)
|
||||
}
|
||||
btn.innerHTML = icon
|
||||
btn.addEventListener('click', event => action(name, event))
|
||||
|
||||
wrapper.appendChild(btn)
|
||||
})
|
||||
|
||||
return wrapper
|
||||
}
|
||||
|
||||
static get toolbox (): ToolboxConfig {
|
||||
return { icon: '<svg></svg>', title: 'UnnamedPlugin' }
|
||||
}
|
||||
}
|
||||
|
||||
export default ContentlessBlock
|
||||
@ -1,53 +0,0 @@
|
||||
import { ContentlessBlock, BlockToolArgs } from './contentless-block'
|
||||
import icon from '../assets/editor/delimiter.svg.txt'
|
||||
import iconR from '../assets/editor/delimiter_r.svg.txt'
|
||||
import iconL from '../assets/editor/delimiter_l.svg.txt'
|
||||
const title = 'Delimiter'
|
||||
|
||||
interface DelimiterData {
|
||||
variant: string;
|
||||
}
|
||||
|
||||
class Delimiter extends ContentlessBlock {
|
||||
private _variant = 'none'
|
||||
|
||||
constructor (args: BlockToolArgs) {
|
||||
super(args)
|
||||
this._settingButtons = [
|
||||
{ name: 'straight', icon, action: (name: string) => this.setDelimiterType(name) },
|
||||
{ name: 'pointing-left', icon: iconL, action: (name: string) => this.setDelimiterType(name) },
|
||||
{ name: 'pointing-right', icon: iconR, action: (name: string) => this.setDelimiterType(name) }
|
||||
]
|
||||
const { variant } = (args.data || {}) as DelimiterData
|
||||
if (variant) this.setDelimiterType(variant)
|
||||
}
|
||||
|
||||
private setDelimiterType (name: string) {
|
||||
this._element.classList.remove('pointing-left')
|
||||
this._element.classList.remove('pointing-right')
|
||||
this._variant = 'none'
|
||||
|
||||
if (name === 'pointing-left' || name === 'pointing-right') {
|
||||
this._variant = name
|
||||
this._element.classList.add(name)
|
||||
}
|
||||
}
|
||||
|
||||
protected _render (): HTMLElement {
|
||||
const el = document.createElement('HR')
|
||||
el.classList.add('card-delimiter', this._CSS.block)
|
||||
return el
|
||||
}
|
||||
|
||||
public save (): DelimiterData {
|
||||
return {
|
||||
variant: this._variant
|
||||
}
|
||||
}
|
||||
|
||||
static get toolbox () {
|
||||
return { icon, title }
|
||||
}
|
||||
}
|
||||
|
||||
export default Delimiter
|
||||
@ -1,106 +0,0 @@
|
||||
import { ContentlessBlock, BlockToolArgs } from './contentless-block'
|
||||
import icon from '../assets/editor/charges-circle.svg.txt'
|
||||
|
||||
const title = 'DnDStats'
|
||||
|
||||
interface DnDStatsData {
|
||||
text: string;
|
||||
}
|
||||
|
||||
class DnDStats extends ContentlessBlock {
|
||||
static _toolboxConfig = { icon, title }
|
||||
private _stats = [10, 10, 10, 10, 10, 10]
|
||||
|
||||
constructor (args: BlockToolArgs) {
|
||||
super(args)
|
||||
this.data = args.data as DnDStatsData
|
||||
this._element = this._render()
|
||||
}
|
||||
|
||||
public get data () {
|
||||
return {
|
||||
text: this._stats.join(',')
|
||||
}
|
||||
}
|
||||
|
||||
public set data (data: DnDStatsData) {
|
||||
if (data.text === undefined) data.text = ''
|
||||
|
||||
const newStats = data.text.split(',')
|
||||
.map(x => parseInt(x, 10))
|
||||
.filter(x => !Number.isNaN(x))
|
||||
|
||||
while (newStats.length < 6) newStats.push(10) // fill missing stats
|
||||
|
||||
this._stats = newStats
|
||||
}
|
||||
|
||||
// creates a random four character long id
|
||||
private randomId (): string {
|
||||
const min = 46656 // '1000'
|
||||
const max = 1679615 /* 'zzzz' */ - 46656 /* '1000' */
|
||||
return (min + Math.floor(max * Math.random())).toString(36)
|
||||
}
|
||||
|
||||
private renderStatMod (value: number): string {
|
||||
const mod = Math.floor((value - 10) / 2.0)
|
||||
const sign = mod < 0 ? '' : '+'
|
||||
return ` (${sign}${mod})`
|
||||
}
|
||||
|
||||
private createStatBlock (title: string, value: number, changeHandler: (newValue: number) => void): HTMLElement {
|
||||
const id = `dnd-stat-${title}-${this.randomId()}`
|
||||
|
||||
const labelWrapper = document.createElement('label')
|
||||
const titleEl = document.createElement('span')
|
||||
const statInputEl = document.createElement('input')
|
||||
const statModEl = document.createElement('span')
|
||||
|
||||
// should allow focussing block with tab
|
||||
labelWrapper.setAttribute('z-index', '1')
|
||||
labelWrapper.classList.add('dnd-stat-block')
|
||||
labelWrapper.setAttribute('for', id)
|
||||
|
||||
titleEl.classList.add('dnd-stat-title')
|
||||
titleEl.innerText = title
|
||||
|
||||
statInputEl.id = id
|
||||
statInputEl.value = `${value}`
|
||||
statInputEl.addEventListener('input', () => {
|
||||
const value = parseInt(statInputEl.value, 10)
|
||||
statModEl.innerText = this.renderStatMod(value)
|
||||
changeHandler(value)
|
||||
})
|
||||
|
||||
statModEl.innerText = this.renderStatMod(value)
|
||||
|
||||
labelWrapper.appendChild(titleEl)
|
||||
labelWrapper.appendChild(statInputEl)
|
||||
labelWrapper.appendChild(statModEl)
|
||||
|
||||
return labelWrapper
|
||||
}
|
||||
|
||||
protected _render (): HTMLElement {
|
||||
const el = document.createElement('div')
|
||||
el.classList.add('card-dnd-stats')
|
||||
const stats = this._stats || [10, 10, 10, 10, 10, 10]
|
||||
const titles = ['STR', 'DEX', 'CON', 'INT', 'WIS', 'CHA']
|
||||
|
||||
stats.forEach((stat, i) => {
|
||||
const title = titles[i]
|
||||
const block = this.createStatBlock(title, stat, newValue => {
|
||||
this._stats[i] = newValue
|
||||
})
|
||||
el.appendChild(block)
|
||||
})
|
||||
|
||||
return el
|
||||
}
|
||||
|
||||
public save (): DnDStatsData {
|
||||
return this.data
|
||||
}
|
||||
}
|
||||
|
||||
export default DnDStats
|
||||
@ -1,159 +0,0 @@
|
||||
import {
|
||||
ContentBlock,
|
||||
ContentBlockArgs,
|
||||
ContentBlockConfig,
|
||||
ContentBlockData
|
||||
} from './content-block'
|
||||
|
||||
import icon from '../assets/editor/header.svg.txt'
|
||||
import icon1 from '../assets/editor/header1.svg.txt'
|
||||
import icon2 from '../assets/editor/header2.svg.txt'
|
||||
import icon3 from '../assets/editor/header3.svg.txt'
|
||||
import icon4 from '../assets/editor/header4.svg.txt'
|
||||
import icon5 from '../assets/editor/header5.svg.txt'
|
||||
import icon6 from '../assets/editor/header6.svg.txt'
|
||||
|
||||
const title = 'Heading'
|
||||
|
||||
enum HeadingLevel {
|
||||
One = 1,
|
||||
Two = 2,
|
||||
Three = 3,
|
||||
Four = 4,
|
||||
Five = 5,
|
||||
Six = 6
|
||||
}
|
||||
|
||||
const icons = [null, icon1, icon2, icon3, icon4, icon5, icon6]
|
||||
|
||||
interface HeadingConfig extends ContentBlockConfig {
|
||||
placeholder?: string;
|
||||
levels?: HeadingLevel[];
|
||||
defaultLevel?: HeadingLevel;
|
||||
}
|
||||
|
||||
interface HeadingData extends ContentBlockData {
|
||||
text: string;
|
||||
level?: HeadingLevel;
|
||||
}
|
||||
|
||||
class Heading extends ContentBlock {
|
||||
static _supportedTags = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6']
|
||||
static _toolboxConfig = { icon, title }
|
||||
|
||||
protected _config: HeadingConfig
|
||||
private defaultLevel: HeadingLevel
|
||||
private currentLevel: HeadingLevel
|
||||
|
||||
constructor (args: ContentBlockArgs) {
|
||||
super(args)
|
||||
this._config = args.config as HeadingConfig
|
||||
|
||||
if (this._config.levels === undefined) {
|
||||
this._config.levels = [HeadingLevel.Two, HeadingLevel.Three]
|
||||
}
|
||||
if (this._config.defaultLevel === undefined) {
|
||||
this._config.defaultLevel = HeadingLevel.Two
|
||||
}
|
||||
if (this._config.levels.indexOf(this._config.defaultLevel) === -1) {
|
||||
console.warn('(ง\'̀-\'́)ง Heading Tool: the default level specified was not found in available levels')
|
||||
}
|
||||
this.defaultLevel = this._config.defaultLevel
|
||||
this.currentLevel = this.defaultLevel
|
||||
|
||||
// setting data will rerender the element with the right settings
|
||||
this.data = {
|
||||
level: this.currentLevel,
|
||||
text: (args.data as HeadingData).text || ''
|
||||
}
|
||||
|
||||
this._settingButtons = this._config.levels.map(level => {
|
||||
return {
|
||||
name: `H${level}`,
|
||||
icon: icons[level] || icon,
|
||||
action: (name: string) => this.setLevel(name),
|
||||
isActive: (name: string): boolean => this.isCurrentLevel(name)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
public get data (): HeadingData {
|
||||
return this._data as HeadingData
|
||||
}
|
||||
|
||||
public set data (data: HeadingData) {
|
||||
const currentData = this._data as HeadingData
|
||||
|
||||
if (data.level === undefined) data.level = currentData.level || this.defaultLevel
|
||||
if (data.text === undefined) data.text = currentData.text || ''
|
||||
|
||||
this._data = data
|
||||
this.currentLevel = data.level
|
||||
|
||||
const newHeader = this._render()
|
||||
if (this._element.parentNode) {
|
||||
this._element.parentNode.replaceChild(newHeader, this._element)
|
||||
}
|
||||
this._element = newHeader
|
||||
}
|
||||
|
||||
private isCurrentLevel (name: string): boolean {
|
||||
const currentLevel = `H${this.currentLevel}`
|
||||
return name === currentLevel
|
||||
}
|
||||
|
||||
private setLevel (name: string) {
|
||||
const level = parseInt(name[1], 10)
|
||||
this.data = { level, text: this._element.innerHTML }
|
||||
}
|
||||
|
||||
protected _render (): HTMLElement {
|
||||
const el = document.createElement(`H${this.currentLevel}`)
|
||||
el.innerHTML = this.data.text || ''
|
||||
el.classList.add(this._CSS.block)
|
||||
el.contentEditable = 'true'
|
||||
el.dataset.placeholder = this._config.placeholder || ''
|
||||
return el
|
||||
}
|
||||
|
||||
// Handle pasted H1-H6 tags to substitute with header tool
|
||||
protected pasteHandler (element: HTMLHeadingElement): HeadingData {
|
||||
const text = element.innerHTML
|
||||
let level = this.defaultLevel
|
||||
|
||||
const tagMatch = element.tagName.match(/H(\d)/)
|
||||
if (tagMatch) level = parseInt(tagMatch[1], 10)
|
||||
|
||||
// Fallback to nearest level when specified not available
|
||||
if (this._config.levels) {
|
||||
level = this._config.levels.reduce((prevLevel, currLevel) => {
|
||||
return Math.abs(currLevel - level) < Math.abs(prevLevel - level) ? currLevel : prevLevel
|
||||
})
|
||||
}
|
||||
|
||||
return { level, text }
|
||||
}
|
||||
|
||||
// Method that specified how to merge two Text blocks.
|
||||
// Called by Editor.js by backspace at the beginning of the Block
|
||||
public merge (data: HeadingData) {
|
||||
this.data = {
|
||||
text: this.data.text + (data.text || ''),
|
||||
level: this.data.level
|
||||
}
|
||||
}
|
||||
|
||||
// extract tools data from view
|
||||
public save (toolsContent: HTMLElement): HeadingData {
|
||||
return {
|
||||
text: toolsContent.innerHTML,
|
||||
level: this.currentLevel
|
||||
}
|
||||
}
|
||||
|
||||
static get sanitize () {
|
||||
return { level: {} }
|
||||
}
|
||||
}
|
||||
|
||||
export default Heading
|
||||
@ -1,4 +0,0 @@
|
||||
export { default as Delimiter } from './delimiter'
|
||||
export { default as Heading } from './heading'
|
||||
export { default as Charges } from './charges'
|
||||
export { default as DnDStats } from './dnd-stats'
|
||||
@ -1,66 +0,0 @@
|
||||
import { CardSize, PageSize, Arrangement, Deck, Card } from './types'
|
||||
|
||||
export function randomId (): string {
|
||||
const now = Date.now()
|
||||
const rnd = Math.round(10000000 + Math.random() * 10000000).toString(36)
|
||||
|
||||
return `${now}.${rnd}`
|
||||
}
|
||||
|
||||
export function cardWHFromSize (size: CardSize): number[] {
|
||||
return size.split('x').map(v => parseFloat(v))
|
||||
}
|
||||
|
||||
export function iconPath (icon: string): string {
|
||||
return `/img/${icon}.svg`
|
||||
}
|
||||
|
||||
export function cardSizeToStyle (size: CardSize): object {
|
||||
const [w, h] = cardWHFromSize(size)
|
||||
const ratio = w / h
|
||||
|
||||
return {
|
||||
width: `calc(var(--card-height) * ${ratio})`
|
||||
}
|
||||
}
|
||||
|
||||
export function defaultDeck (): Deck {
|
||||
return {
|
||||
id: randomId(),
|
||||
icon: 'robe',
|
||||
name: 'the nameless',
|
||||
description: '',
|
||||
color: '#3C1C00',
|
||||
cards: [],
|
||||
cardSize: CardSize.Poker,
|
||||
pageSize: PageSize.A4,
|
||||
arrangement: Arrangement.DoubleSided,
|
||||
roundedCorners: true
|
||||
}
|
||||
}
|
||||
|
||||
export function defaultCard (): Card {
|
||||
return {
|
||||
id: `c${randomId()}`,
|
||||
name: 'no title yet',
|
||||
count: 1,
|
||||
tags: [],
|
||||
icon: 'robe',
|
||||
content: {
|
||||
time: Date.now(),
|
||||
blocks: [],
|
||||
version: '2.17.0'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function isValidDeck (deck: any): boolean {
|
||||
const example = defaultDeck() as { [key: string]: any }
|
||||
|
||||
for (const key in example) {
|
||||
const type = typeof example[key]
|
||||
return typeof deck[key] === type
|
||||
}
|
||||
|
||||
return true
|
||||
}
|
||||
@ -0,0 +1,30 @@
|
||||
import randomId from './randomId'
|
||||
import { Card, CardSize } from '../types'
|
||||
|
||||
export function defaultCard (): Card {
|
||||
return {
|
||||
id: `c${randomId()}`,
|
||||
name: 'no title yet',
|
||||
count: 1,
|
||||
tags: [],
|
||||
icon: 'robe',
|
||||
content: {
|
||||
time: Date.now(),
|
||||
blocks: [],
|
||||
version: '2.17.0'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function cardWHFromSize (size: CardSize): number[] {
|
||||
return size.split('x').map(v => parseFloat(v))
|
||||
}
|
||||
|
||||
export function cardSizeToStyle (size: CardSize): { width: string } {
|
||||
const [w, h] = cardWHFromSize(size)
|
||||
const ratio = w / h
|
||||
|
||||
return {
|
||||
width: `calc(var(--card-height) * ${ratio})`
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,28 @@
|
||||
import randomId from './randomId'
|
||||
import { Deck, CardSize, PageSize, Arrangement } from '../types'
|
||||
|
||||
export function defaultDeck (): Deck {
|
||||
return {
|
||||
id: randomId(),
|
||||
icon: 'robe',
|
||||
name: 'the nameless',
|
||||
description: '',
|
||||
color: '#3C1C00',
|
||||
cards: [],
|
||||
cardSize: CardSize.Poker,
|
||||
pageSize: PageSize.A4,
|
||||
arrangement: Arrangement.DoubleSided,
|
||||
roundedCorners: true
|
||||
}
|
||||
}
|
||||
|
||||
export function isValidDeck (deck: any): boolean {
|
||||
const example = defaultDeck() as { [key: string]: any }
|
||||
|
||||
for (const key in example) {
|
||||
const type = typeof example[key]
|
||||
return typeof deck[key] === type
|
||||
}
|
||||
|
||||
return true
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
export default function iconPath (icon: string): string {
|
||||
return `/img/${icon}.svg`
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
export default function randomId (): string {
|
||||
const now = Date.now()
|
||||
const rnd = Math.round(10000000 + Math.random() * 10000000).toString(36)
|
||||
|
||||
return `${now}.${rnd}`
|
||||
}
|
||||
@ -1,22 +1,11 @@
|
||||
import './class-component-hooks'
|
||||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import { createApp } from 'vue'
|
||||
import router from './router'
|
||||
// import './registerServiceWorker'
|
||||
import './directives'
|
||||
|
||||
import StorageHandler from './storage'
|
||||
import state from './state'
|
||||
|
||||
declare module 'vue/types/vue' {
|
||||
interface Vue {
|
||||
$storage: StorageHandler;
|
||||
}
|
||||
}
|
||||
import App from './App.vue'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
Vue.prototype.$storage = new StorageHandler()
|
||||
const app = createApp(App)
|
||||
app.provide('state', state)
|
||||
app.use(router)
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
render: h => h(App)
|
||||
}).$mount('#app')
|
||||
app.mount('#app')
|
||||
|
||||
@ -1,12 +0,0 @@
|
||||
declare module '*.vue' {
|
||||
import Vue from 'vue'
|
||||
export default Vue
|
||||
}
|
||||
|
||||
declare module '*.txt' {
|
||||
const content: string
|
||||
export default content
|
||||
}
|
||||
|
||||
declare module '@editorjs/paragraph'
|
||||
declare module '@editorjs/list'
|
||||
@ -1,32 +0,0 @@
|
||||
/* eslint-disable no-console */
|
||||
|
||||
import { register } from 'register-service-worker'
|
||||
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
register(`${process.env.BASE_URL}service-worker.js`, {
|
||||
ready () {
|
||||
console.log(
|
||||
'App is being served from cache by a service worker.\n' +
|
||||
'For more details, visit https://goo.gl/AFskqB'
|
||||
)
|
||||
},
|
||||
registered () {
|
||||
console.log('Service worker has been registered.')
|
||||
},
|
||||
cached () {
|
||||
console.log('Content has been cached for offline use.')
|
||||
},
|
||||
updatefound () {
|
||||
console.log('New content is downloading.')
|
||||
},
|
||||
updated () {
|
||||
console.log('New content is available; please refresh.')
|
||||
},
|
||||
offline () {
|
||||
console.log('No internet connection found. App is running in offline mode.')
|
||||
},
|
||||
error (error) {
|
||||
console.error('Error during service worker registration:', error)
|
||||
}
|
||||
})
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
import Vue, { VNode } from 'vue'
|
||||
|
||||
declare global {
|
||||
namespace JSX {
|
||||
// tslint:disable no-empty-interface
|
||||
interface Element extends VNode {}
|
||||
// tslint:disable no-empty-interface
|
||||
interface ElementClass extends Vue {}
|
||||
interface IntrinsicElements {
|
||||
[elem: string]: any;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
declare module "*.vue" {
|
||||
import { defineComponent } from "vue"
|
||||
const Component: ReturnType<typeof defineComponent>
|
||||
export default Component
|
||||
}
|
||||
@ -0,0 +1,51 @@
|
||||
import { reactive, ref, Ref } from 'vue'
|
||||
import { State, Notification, Deck } from './types'
|
||||
import { defaultDeck } from './lib/deck'
|
||||
|
||||
interface Payload {
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
const state: State = {
|
||||
settings: ref({}),
|
||||
decks: ref([]),
|
||||
notifications: ref([])
|
||||
}
|
||||
|
||||
// { level: 'warning', title: 'This is a pre-alpha version.', content: 'Many features are still unstable or completely missing. Check out <a href="https://github.com/nkoehring/rpg-cards-ng/">the code repository</a> for more information.', dismissed: false },
|
||||
// { level: 'info', title: '', content: 'Click the PLUS to create a new deck of cards.', dismissed: false },
|
||||
|
||||
/// actions are called like action['sub/foo'](state.sub, payload)
|
||||
export const stateActions = {
|
||||
'notifications/add' (notifications: Ref<Notification[]>, payload: Payload) {
|
||||
notifications.value.push({
|
||||
level: 'info',
|
||||
title: '',
|
||||
content: '',
|
||||
dismissed: false,
|
||||
...payload
|
||||
})
|
||||
},
|
||||
'notifications/dismiss' (notifications: Ref<Notification[]>, notification: Notification) {
|
||||
notification.dismissed = true
|
||||
notifications.value = notifications.value.filter(note => !note.dismissed)
|
||||
},
|
||||
'decks/new' (): Deck {
|
||||
return defaultDeck()
|
||||
}
|
||||
}
|
||||
|
||||
export function useState (field: string): { [key: string]: any } {
|
||||
const collection = ref(state[field])
|
||||
const actions = Object.keys(stateActions).reduce((acc, key) => {
|
||||
if (key.startsWith(`${field}/`)) {
|
||||
const newKey = key.split('/')[1]
|
||||
acc[newKey] = (payload: Payload) => stateActions[key](collection, payload)
|
||||
}
|
||||
return acc
|
||||
}, {})
|
||||
|
||||
return { collection, actions }
|
||||
}
|
||||
|
||||
export default reactive(state)
|
||||
@ -1,48 +0,0 @@
|
||||
import { Deck, StoredStuff } from './types'
|
||||
const KEY = 'rpg-cards-ng'
|
||||
|
||||
export default class StorageHandler {
|
||||
private cache: StoredStuff = {
|
||||
decks: [],
|
||||
defaults: {
|
||||
color: '#3C1C00'
|
||||
}
|
||||
}
|
||||
|
||||
constructor () {
|
||||
if (localStorage.getItem(KEY) === undefined) this.persist()
|
||||
|
||||
const stored = localStorage.getItem(KEY)
|
||||
if (stored !== null) this.cache = JSON.parse(stored)
|
||||
}
|
||||
|
||||
get decks (): Deck[] {
|
||||
return this.cache.decks
|
||||
}
|
||||
|
||||
set decks (decks: Deck[]) {
|
||||
this.cache.decks = decks
|
||||
this.persist()
|
||||
}
|
||||
|
||||
saveDeck (newDeck: Deck) {
|
||||
const decks = this.cache.decks
|
||||
const index = decks.findIndex(deck => deck.id === newDeck.id)
|
||||
|
||||
if (index >= 0) decks[index] = newDeck
|
||||
else decks.push(newDeck)
|
||||
|
||||
this.persist()
|
||||
}
|
||||
|
||||
findDeck (id: string): Deck | null {
|
||||
for (const deck of this.cache.decks) {
|
||||
if (deck.id === id) return deck
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
persist () {
|
||||
localStorage.setItem(KEY, JSON.stringify(this.cache))
|
||||
}
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
<template>
|
||||
<div class="about">
|
||||
<h1>This is an about page</h1>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,54 +1,33 @@
|
||||
<template>
|
||||
<main name="home" :class="{ popup }">
|
||||
<header>RPG Cards for y'all</header>
|
||||
<section name="notifications">
|
||||
<p class="warning">
|
||||
<strong>This is a pre-alpha version.</strong>
|
||||
Many features are still unstable or completely missing.
|
||||
<br />
|
||||
Check out <a href="https://github.com/nkoehring/rpg-cards-ng/">the code repository</a> for more information.
|
||||
</p>
|
||||
</section>
|
||||
<section name="deck-covers" class="cards" :class="{ centered: !savedDecks.length }">
|
||||
<router-link :to="{ name: 'Deck', params: { id: deck.id } }" :key="deck.id" v-for="deck in savedDecks">
|
||||
<deck-cover :deck="deck" />
|
||||
</router-link>
|
||||
<deck-cover @click="newDeck" />
|
||||
</section>
|
||||
<p class="info" v-if="savedDecks.length === 0">Click the PLUS to create a new deck of cards.</p>
|
||||
<header>RPG Cards for y'all</header>
|
||||
|
||||
<section name="deck-covers" class="cards" :class="{ centered: !decks.length }">
|
||||
<router-link :to="{ name: 'Deck', params: { id: deck.id } }" :key="deck.id" v-for="deck in decks">
|
||||
<CardBack :icon="deck.icon" :color="deck.color" :size="deck.cardSize">
|
||||
{{ deck.name }} ({{ deck.cards.length }})
|
||||
</CardBack>
|
||||
</router-link>
|
||||
<CardBack @click="newDeck" icon="plus" />
|
||||
</section>
|
||||
|
||||
<div id="popup" v-show="popup">
|
||||
<div class="popup-content">
|
||||
<NewDeckForm @save="popup = false" @close="popup = false" />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import { Deck } from '../types'
|
||||
import DeckCover from '@/components/deck-cover.vue'
|
||||
import NewDeckForm from '@/components/new-deck-form.vue'
|
||||
|
||||
@Component({
|
||||
components: { NewDeckForm, DeckCover }
|
||||
})
|
||||
export default class Home extends Vue {
|
||||
private popup = false
|
||||
private savedDecks: Deck[];
|
||||
import { defineComponent } from 'vue'
|
||||
import { useState } from '@/state'
|
||||
|
||||
constructor () {
|
||||
super()
|
||||
this.savedDecks = this.$storage.decks
|
||||
}
|
||||
import CardBack from '@/components/CardBack.vue'
|
||||
|
||||
private editDeck (deck: Deck) {
|
||||
console.log('would edit deck', deck.name, 'now')
|
||||
}
|
||||
|
||||
private newDeck () {
|
||||
this.popup = true
|
||||
export default defineComponent({
|
||||
name: 'Home',
|
||||
components: { CardBack },
|
||||
setup () {
|
||||
const { collection: decks, actions } = useState('decks')
|
||||
return {
|
||||
decks,
|
||||
newDeck: actions['decks/new']
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -1,39 +1,26 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es6",
|
||||
"allowJs": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"declaration": false,
|
||||
"esModuleInterop": true,
|
||||
"experimentalDecorators": true,
|
||||
"module": "esnext",
|
||||
"strict": true,
|
||||
"jsx": "preserve",
|
||||
"importHelpers": true,
|
||||
"moduleResolution": "node",
|
||||
"experimentalDecorators": true,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"noImplicitAny": false,
|
||||
"noLib": false,
|
||||
"sourceMap": true,
|
||||
"strict": true,
|
||||
"strictPropertyInitialization": false,
|
||||
"suppressImplicitAnyIndexErrors": true,
|
||||
"target": "es2015",
|
||||
"baseUrl": ".",
|
||||
"types": [
|
||||
"webpack-env"
|
||||
],
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"src/*"
|
||||
]
|
||||
},
|
||||
"lib": [
|
||||
"esnext",
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"scripthost"
|
||||
]
|
||||
},
|
||||
"exclude": [
|
||||
"./node_modules"
|
||||
],
|
||||
"include": [
|
||||
"src/**/*.ts",
|
||||
"src/**/*.tsx",
|
||||
"src/**/*.vue",
|
||||
"tests/**/*.ts",
|
||||
"tests/**/*.tsx"
|
||||
"./src/**/*.ts",
|
||||
"./src/**/*.vue",
|
||||
],
|
||||
"exclude": [
|
||||
"node_modules"
|
||||
]
|
||||
}
|
||||
|
||||
@ -1,10 +0,0 @@
|
||||
module.exports = {
|
||||
chainWebpack: config => {
|
||||
config.module
|
||||
.rule('raw')
|
||||
.test(/\.txt$/)
|
||||
.use('raw-loader')
|
||||
.loader('raw-loader')
|
||||
.end()
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,96 @@
|
||||
const pkg = require('./package.json')
|
||||
const { resolve } = require('path')
|
||||
const { VueLoaderPlugin } = require('vue-loader')
|
||||
const CopyWebpackPlugin = require('copy-webpack-plugin')
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin')
|
||||
const FaviconsWebpackPlugin = require('favicons-webpack-plugin')
|
||||
const SriPlugin = require('webpack-subresource-integrity')
|
||||
|
||||
const htmlConfig = require('./html.config.json') || {}
|
||||
const outputPath = resolve(__dirname, './dist')
|
||||
const publicPath = resolve(__dirname, './public')
|
||||
|
||||
module.exports = (env = {}) => ({
|
||||
mode: env.prod ? 'production' : 'development',
|
||||
devtool: env.prod ? false : 'eval-source-map',
|
||||
entry: resolve(__dirname, './src/main.ts'),
|
||||
output: {
|
||||
path: outputPath,
|
||||
crossOriginLoading: 'anonymous'
|
||||
},
|
||||
optimization: {
|
||||
splitChunks: {
|
||||
chunks: 'async',
|
||||
minSize: 32000,
|
||||
maxSize: 48000
|
||||
}
|
||||
},
|
||||
module: {
|
||||
rules: [{
|
||||
test: /\.vue$/i,
|
||||
use: 'vue-loader'
|
||||
}, {
|
||||
test: /\.ts$/i,
|
||||
loader: 'ts-loader',
|
||||
options: { appendTsSuffixTo: [/\.vue$/] }
|
||||
}, {
|
||||
test: /\.css$/i,
|
||||
use: ['style-loader', 'css-loader']
|
||||
}, {
|
||||
test: /\.(png|jpg|gif)$/i,
|
||||
loader: 'url-loader',
|
||||
options: { limit: 8192 }
|
||||
}, {
|
||||
test: /\.(png|jpg|gif|svg)$/i,
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name (/*resourcePath, resourceQuery*/) {
|
||||
// see https://github.com/webpack-contrib/file-loader
|
||||
// `resourcePath` - `/absolute/path/to/file.js`
|
||||
// `resourceQuery` - `?foo=bar`
|
||||
return env.prod ? '[contenthash].[ext]' : '[path][name].[ext]'
|
||||
}
|
||||
}
|
||||
}, {
|
||||
test: /\.(txt|raw)$/i,
|
||||
use: 'raw-loader'
|
||||
}]
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['.ts', '.js', '.vue', '.json'],
|
||||
alias: {
|
||||
'vue': '@vue/runtime-dom',
|
||||
'@': resolve(__dirname, './src/'),
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
new VueLoaderPlugin(),
|
||||
new CopyWebpackPlugin({
|
||||
patterns: [{ from: publicPath, to: outputPath }]
|
||||
}),
|
||||
new HtmlWebpackPlugin({
|
||||
title: htmlConfig.title || pkg.name,
|
||||
meta: htmlConfig.meta || {},
|
||||
// TODO: not setting template option kinda breaks the build
|
||||
template: resolve(__dirname, htmlConfig.template || './index.html'),
|
||||
scriptLoading: htmlConfig.scriptLoading || 'defer',
|
||||
hash: true
|
||||
}),
|
||||
new FaviconsWebpackPlugin({
|
||||
logo: htmlConfig.logo || './logo.png',
|
||||
// see https://github.com/itgalaxy/favicons#usage
|
||||
favicons: htmlConfig.favicons || {}
|
||||
}),
|
||||
new SriPlugin({
|
||||
hashFuncNames: ['sha512'],
|
||||
enabled: env.prod
|
||||
})
|
||||
],
|
||||
devServer: {
|
||||
inline: true,
|
||||
hot: true,
|
||||
stats: 'minimal',
|
||||
contentBase: resolve(__dirname, 'dist'),
|
||||
overlay: true
|
||||
}
|
||||
})
|
||||
Loading…
Reference in New Issue