bootstrap layout

This commit is contained in:
Miki 2024-01-15 16:05:09 +00:00
parent 94dfee0345
commit 7520e449b1
9 changed files with 356 additions and 340 deletions

Binary file not shown.

View file

@ -12,13 +12,13 @@
"devDependencies": { "devDependencies": {
"@sveltejs/adapter-auto": "^3.1.0", "@sveltejs/adapter-auto": "^3.1.0",
"@sveltejs/adapter-static": "^3.0.1", "@sveltejs/adapter-static": "^3.0.1",
"@sveltejs/kit": "^2.3.0", "@sveltejs/kit": "^2.3.2",
"@sveltejs/vite-plugin-svelte": "^3.0.1", "@sveltejs/vite-plugin-svelte": "^3.0.1",
"@types/eslint": "8.56.0", "@types/eslint": "8.56.0",
"eslint": "^8.56.0", "eslint": "^8.56.0",
"eslint-config-prettier": "^9.1.0", "eslint-config-prettier": "^9.1.0",
"eslint-plugin-svelte": "^2.35.1", "eslint-plugin-svelte": "^2.35.1",
"prettier": "^3.1.1", "prettier": "^3.2.2",
"prettier-plugin-svelte": "^3.1.2", "prettier-plugin-svelte": "^3.1.2",
"svelte": "^4.2.8", "svelte": "^4.2.8",
"vite": "^5.0.11" "vite": "^5.0.11"

View file

@ -7,13 +7,13 @@ settings:
devDependencies: devDependencies:
'@sveltejs/adapter-auto': '@sveltejs/adapter-auto':
specifier: ^3.1.0 specifier: ^3.1.0
version: 3.1.0(@sveltejs/kit@2.3.0) version: 3.1.0(@sveltejs/kit@2.3.2)
'@sveltejs/adapter-static': '@sveltejs/adapter-static':
specifier: ^3.0.1 specifier: ^3.0.1
version: 3.0.1(@sveltejs/kit@2.3.0) version: 3.0.1(@sveltejs/kit@2.3.2)
'@sveltejs/kit': '@sveltejs/kit':
specifier: ^2.3.0 specifier: ^2.3.2
version: 2.3.0(@sveltejs/vite-plugin-svelte@3.0.1)(svelte@4.2.8)(vite@5.0.11) version: 2.3.2(@sveltejs/vite-plugin-svelte@3.0.1)(svelte@4.2.8)(vite@5.0.11)
'@sveltejs/vite-plugin-svelte': '@sveltejs/vite-plugin-svelte':
specifier: ^3.0.1 specifier: ^3.0.1
version: 3.0.1(svelte@4.2.8)(vite@5.0.11) version: 3.0.1(svelte@4.2.8)(vite@5.0.11)
@ -30,11 +30,11 @@ devDependencies:
specifier: ^2.35.1 specifier: ^2.35.1
version: 2.35.1(eslint@8.56.0)(svelte@4.2.8) version: 2.35.1(eslint@8.56.0)(svelte@4.2.8)
prettier: prettier:
specifier: ^3.1.1 specifier: ^3.2.2
version: 3.1.1 version: 3.2.2
prettier-plugin-svelte: prettier-plugin-svelte:
specifier: ^3.1.2 specifier: ^3.1.2
version: 3.1.2(prettier@3.1.1)(svelte@4.2.8) version: 3.1.2(prettier@3.2.2)(svelte@4.2.8)
svelte: svelte:
specifier: ^4.2.8 specifier: ^4.2.8
version: 4.2.8 version: 4.2.8
@ -54,7 +54,7 @@ packages:
engines: {node: '>=6.0.0'} engines: {node: '>=6.0.0'}
dependencies: dependencies:
'@jridgewell/gen-mapping': 0.3.3 '@jridgewell/gen-mapping': 0.3.3
'@jridgewell/trace-mapping': 0.3.20 '@jridgewell/trace-mapping': 0.3.21
dev: true dev: true
/@esbuild/aix-ppc64@0.19.11: /@esbuild/aix-ppc64@0.19.11:
@ -327,7 +327,7 @@ packages:
dependencies: dependencies:
'@jridgewell/set-array': 1.1.2 '@jridgewell/set-array': 1.1.2
'@jridgewell/sourcemap-codec': 1.4.15 '@jridgewell/sourcemap-codec': 1.4.15
'@jridgewell/trace-mapping': 0.3.20 '@jridgewell/trace-mapping': 0.3.21
dev: true dev: true
/@jridgewell/resolve-uri@3.1.1: /@jridgewell/resolve-uri@3.1.1:
@ -344,8 +344,8 @@ packages:
resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==} resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
dev: true dev: true
/@jridgewell/trace-mapping@0.3.20: /@jridgewell/trace-mapping@0.3.21:
resolution: {integrity: sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==} resolution: {integrity: sha512-SRfKmRe1KvYnxjEMtxEr+J4HIeMX5YBg/qhRHpxEIGjhX1rshcHlnFUE9K0GazhVKWM7B+nARSkV8LuvJdJ5/g==}
dependencies: dependencies:
'@jridgewell/resolve-uri': 3.1.1 '@jridgewell/resolve-uri': 3.1.1
'@jridgewell/sourcemap-codec': 1.4.15 '@jridgewell/sourcemap-codec': 1.4.15
@ -376,129 +376,129 @@ packages:
resolution: {integrity: sha512-2LuNTFBIO0m7kKIQvvPHN6UE63VjpmL9rnEEaOOaiSPbZK+zUOYIzBAWcED+3XYzhYsd/0mD57VdxAEqqV52CQ==} resolution: {integrity: sha512-2LuNTFBIO0m7kKIQvvPHN6UE63VjpmL9rnEEaOOaiSPbZK+zUOYIzBAWcED+3XYzhYsd/0mD57VdxAEqqV52CQ==}
dev: true dev: true
/@rollup/rollup-android-arm-eabi@4.9.4: /@rollup/rollup-android-arm-eabi@4.9.5:
resolution: {integrity: sha512-ub/SN3yWqIv5CWiAZPHVS1DloyZsJbtXmX4HxUTIpS0BHm9pW5iYBo2mIZi+hE3AeiTzHz33blwSnhdUo+9NpA==} resolution: {integrity: sha512-idWaG8xeSRCfRq9KpRysDHJ/rEHBEXcHuJ82XY0yYFIWnLMjZv9vF/7DOq8djQ2n3Lk6+3qfSH8AqlmHlmi1MA==}
cpu: [arm] cpu: [arm]
os: [android] os: [android]
requiresBuild: true requiresBuild: true
dev: true dev: true
optional: true optional: true
/@rollup/rollup-android-arm64@4.9.4: /@rollup/rollup-android-arm64@4.9.5:
resolution: {integrity: sha512-ehcBrOR5XTl0W0t2WxfTyHCR/3Cq2jfb+I4W+Ch8Y9b5G+vbAecVv0Fx/J1QKktOrgUYsIKxWAKgIpvw56IFNA==} resolution: {integrity: sha512-f14d7uhAMtsCGjAYwZGv6TwuS3IFaM4ZnGMUn3aCBgkcHAYErhV1Ad97WzBvS2o0aaDv4mVz+syiN0ElMyfBPg==}
cpu: [arm64] cpu: [arm64]
os: [android] os: [android]
requiresBuild: true requiresBuild: true
dev: true dev: true
optional: true optional: true
/@rollup/rollup-darwin-arm64@4.9.4: /@rollup/rollup-darwin-arm64@4.9.5:
resolution: {integrity: sha512-1fzh1lWExwSTWy8vJPnNbNM02WZDS8AW3McEOb7wW+nPChLKf3WG2aG7fhaUmfX5FKw9zhsF5+MBwArGyNM7NA==} resolution: {integrity: sha512-ndoXeLx455FffL68OIUrVr89Xu1WLzAG4n65R8roDlCoYiQcGGg6MALvs2Ap9zs7AHg8mpHtMpwC8jBBjZrT/w==}
cpu: [arm64] cpu: [arm64]
os: [darwin] os: [darwin]
requiresBuild: true requiresBuild: true
dev: true dev: true
optional: true optional: true
/@rollup/rollup-darwin-x64@4.9.4: /@rollup/rollup-darwin-x64@4.9.5:
resolution: {integrity: sha512-Gc6cukkF38RcYQ6uPdiXi70JB0f29CwcQ7+r4QpfNpQFVHXRd0DfWFidoGxjSx1DwOETM97JPz1RXL5ISSB0pA==} resolution: {integrity: sha512-UmElV1OY2m/1KEEqTlIjieKfVwRg0Zwg4PLgNf0s3glAHXBN99KLpw5A5lrSYCa1Kp63czTpVll2MAqbZYIHoA==}
cpu: [x64] cpu: [x64]
os: [darwin] os: [darwin]
requiresBuild: true requiresBuild: true
dev: true dev: true
optional: true optional: true
/@rollup/rollup-linux-arm-gnueabihf@4.9.4: /@rollup/rollup-linux-arm-gnueabihf@4.9.5:
resolution: {integrity: sha512-g21RTeFzoTl8GxosHbnQZ0/JkuFIB13C3T7Y0HtKzOXmoHhewLbVTFBQZu+z5m9STH6FZ7L/oPgU4Nm5ErN2fw==} resolution: {integrity: sha512-Q0LcU61v92tQB6ae+udZvOyZ0wfpGojtAKrrpAaIqmJ7+psq4cMIhT/9lfV6UQIpeItnq/2QDROhNLo00lOD1g==}
cpu: [arm] cpu: [arm]
os: [linux] os: [linux]
requiresBuild: true requiresBuild: true
dev: true dev: true
optional: true optional: true
/@rollup/rollup-linux-arm64-gnu@4.9.4: /@rollup/rollup-linux-arm64-gnu@4.9.5:
resolution: {integrity: sha512-TVYVWD/SYwWzGGnbfTkrNpdE4HON46orgMNHCivlXmlsSGQOx/OHHYiQcMIOx38/GWgwr/po2LBn7wypkWw/Mg==} resolution: {integrity: sha512-dkRscpM+RrR2Ee3eOQmRWFjmV/payHEOrjyq1VZegRUa5OrZJ2MAxBNs05bZuY0YCtpqETDy1Ix4i/hRqX98cA==}
cpu: [arm64] cpu: [arm64]
os: [linux] os: [linux]
requiresBuild: true requiresBuild: true
dev: true dev: true
optional: true optional: true
/@rollup/rollup-linux-arm64-musl@4.9.4: /@rollup/rollup-linux-arm64-musl@4.9.5:
resolution: {integrity: sha512-XcKvuendwizYYhFxpvQ3xVpzje2HHImzg33wL9zvxtj77HvPStbSGI9czrdbfrf8DGMcNNReH9pVZv8qejAQ5A==} resolution: {integrity: sha512-QaKFVOzzST2xzY4MAmiDmURagWLFh+zZtttuEnuNn19AiZ0T3fhPyjPPGwLNdiDT82ZE91hnfJsUiDwF9DClIQ==}
cpu: [arm64] cpu: [arm64]
os: [linux] os: [linux]
requiresBuild: true requiresBuild: true
dev: true dev: true
optional: true optional: true
/@rollup/rollup-linux-riscv64-gnu@4.9.4: /@rollup/rollup-linux-riscv64-gnu@4.9.5:
resolution: {integrity: sha512-LFHS/8Q+I9YA0yVETyjonMJ3UA+DczeBd/MqNEzsGSTdNvSJa1OJZcSH8GiXLvcizgp9AlHs2walqRcqzjOi3A==} resolution: {integrity: sha512-HeGqmRJuyVg6/X6MpE2ur7GbymBPS8Np0S/vQFHDmocfORT+Zt76qu+69NUoxXzGqVP1pzaY6QIi0FJWLC3OPA==}
cpu: [riscv64] cpu: [riscv64]
os: [linux] os: [linux]
requiresBuild: true requiresBuild: true
dev: true dev: true
optional: true optional: true
/@rollup/rollup-linux-x64-gnu@4.9.4: /@rollup/rollup-linux-x64-gnu@4.9.5:
resolution: {integrity: sha512-dIYgo+j1+yfy81i0YVU5KnQrIJZE8ERomx17ReU4GREjGtDW4X+nvkBak2xAUpyqLs4eleDSj3RrV72fQos7zw==} resolution: {integrity: sha512-Dq1bqBdLaZ1Gb/l2e5/+o3B18+8TI9ANlA1SkejZqDgdU/jK/ThYaMPMJpVMMXy2uRHvGKbkz9vheVGdq3cJfA==}
cpu: [x64] cpu: [x64]
os: [linux] os: [linux]
requiresBuild: true requiresBuild: true
dev: true dev: true
optional: true optional: true
/@rollup/rollup-linux-x64-musl@4.9.4: /@rollup/rollup-linux-x64-musl@4.9.5:
resolution: {integrity: sha512-RoaYxjdHQ5TPjaPrLsfKqR3pakMr3JGqZ+jZM0zP2IkDtsGa4CqYaWSfQmZVgFUCgLrTnzX+cnHS3nfl+kB6ZQ==} resolution: {integrity: sha512-ezyFUOwldYpj7AbkwyW9AJ203peub81CaAIVvckdkyH8EvhEIoKzaMFJj0G4qYJ5sw3BpqhFrsCc30t54HV8vg==}
cpu: [x64] cpu: [x64]
os: [linux] os: [linux]
requiresBuild: true requiresBuild: true
dev: true dev: true
optional: true optional: true
/@rollup/rollup-win32-arm64-msvc@4.9.4: /@rollup/rollup-win32-arm64-msvc@4.9.5:
resolution: {integrity: sha512-T8Q3XHV+Jjf5e49B4EAaLKV74BbX7/qYBRQ8Wop/+TyyU0k+vSjiLVSHNWdVd1goMjZcbhDmYZUYW5RFqkBNHQ==} resolution: {integrity: sha512-aHSsMnUw+0UETB0Hlv7B/ZHOGY5bQdwMKJSzGfDfvyhnpmVxLMGnQPGNE9wgqkLUs3+gbG1Qx02S2LLfJ5GaRQ==}
cpu: [arm64] cpu: [arm64]
os: [win32] os: [win32]
requiresBuild: true requiresBuild: true
dev: true dev: true
optional: true optional: true
/@rollup/rollup-win32-ia32-msvc@4.9.4: /@rollup/rollup-win32-ia32-msvc@4.9.5:
resolution: {integrity: sha512-z+JQ7JirDUHAsMecVydnBPWLwJjbppU+7LZjffGf+Jvrxq+dVjIE7By163Sc9DKc3ADSU50qPVw0KonBS+a+HQ==} resolution: {integrity: sha512-AiqiLkb9KSf7Lj/o1U3SEP9Zn+5NuVKgFdRIZkvd4N0+bYrTOovVd0+LmYCPQGbocT4kvFyK+LXCDiXPBF3fyA==}
cpu: [ia32] cpu: [ia32]
os: [win32] os: [win32]
requiresBuild: true requiresBuild: true
dev: true dev: true
optional: true optional: true
/@rollup/rollup-win32-x64-msvc@4.9.4: /@rollup/rollup-win32-x64-msvc@4.9.5:
resolution: {integrity: sha512-LfdGXCV9rdEify1oxlN9eamvDSjv9md9ZVMAbNHA87xqIfFCxImxan9qZ8+Un54iK2nnqPlbnSi4R54ONtbWBw==} resolution: {integrity: sha512-1q+mykKE3Vot1kaFJIDoUFv5TuW+QQVaf2FmTT9krg86pQrGStOSJJ0Zil7CFagyxDuouTepzt5Y5TVzyajOdQ==}
cpu: [x64] cpu: [x64]
os: [win32] os: [win32]
requiresBuild: true requiresBuild: true
dev: true dev: true
optional: true optional: true
/@sveltejs/adapter-auto@3.1.0(@sveltejs/kit@2.3.0): /@sveltejs/adapter-auto@3.1.0(@sveltejs/kit@2.3.2):
resolution: {integrity: sha512-igS5hqCwdiXWb8NoWzThKCVQQj9tKgUkbTtzfxBPgSLOyFjkiGNDX0SgCoY2QIUWBqOkfGTOqGlrW5Ynw9oUvw==} resolution: {integrity: sha512-igS5hqCwdiXWb8NoWzThKCVQQj9tKgUkbTtzfxBPgSLOyFjkiGNDX0SgCoY2QIUWBqOkfGTOqGlrW5Ynw9oUvw==}
peerDependencies: peerDependencies:
'@sveltejs/kit': ^2.0.0 '@sveltejs/kit': ^2.0.0
dependencies: dependencies:
'@sveltejs/kit': 2.3.0(@sveltejs/vite-plugin-svelte@3.0.1)(svelte@4.2.8)(vite@5.0.11) '@sveltejs/kit': 2.3.2(@sveltejs/vite-plugin-svelte@3.0.1)(svelte@4.2.8)(vite@5.0.11)
import-meta-resolve: 4.0.0 import-meta-resolve: 4.0.0
dev: true dev: true
/@sveltejs/adapter-static@3.0.1(@sveltejs/kit@2.3.0): /@sveltejs/adapter-static@3.0.1(@sveltejs/kit@2.3.2):
resolution: {integrity: sha512-6lMvf7xYEJ+oGeR5L8DFJJrowkefTK6ZgA4JiMqoClMkKq0s6yvsd3FZfCFvX1fQ0tpCD7fkuRVHsnUVgsHyNg==} resolution: {integrity: sha512-6lMvf7xYEJ+oGeR5L8DFJJrowkefTK6ZgA4JiMqoClMkKq0s6yvsd3FZfCFvX1fQ0tpCD7fkuRVHsnUVgsHyNg==}
peerDependencies: peerDependencies:
'@sveltejs/kit': ^2.0.0 '@sveltejs/kit': ^2.0.0
dependencies: dependencies:
'@sveltejs/kit': 2.3.0(@sveltejs/vite-plugin-svelte@3.0.1)(svelte@4.2.8)(vite@5.0.11) '@sveltejs/kit': 2.3.2(@sveltejs/vite-plugin-svelte@3.0.1)(svelte@4.2.8)(vite@5.0.11)
dev: true dev: true
/@sveltejs/kit@2.3.0(@sveltejs/vite-plugin-svelte@3.0.1)(svelte@4.2.8)(vite@5.0.11): /@sveltejs/kit@2.3.2(@sveltejs/vite-plugin-svelte@3.0.1)(svelte@4.2.8)(vite@5.0.11):
resolution: {integrity: sha512-A6/aQTVFONDDv8nRLINNiXrERq6VeAdHT+/gHPBUSDt4+b6oBKTEF3oiGzNmxspcWDgHzBpypFO7NWtkoUK67g==} resolution: {integrity: sha512-AzGWV1TyUSkBuciy06E5NegXndIEgTthDtllv80qynEJFh8bZD62ZxLajiQLOsKGqRDilEQyshDARQxjIqiaqg==}
engines: {node: '>=18.13'} engines: {node: '>=18.13'}
hasBin: true hasBin: true
requiresBuild: true requiresBuild: true
@ -1327,18 +1327,18 @@ packages:
engines: {node: '>= 0.8.0'} engines: {node: '>= 0.8.0'}
dev: true dev: true
/prettier-plugin-svelte@3.1.2(prettier@3.1.1)(svelte@4.2.8): /prettier-plugin-svelte@3.1.2(prettier@3.2.2)(svelte@4.2.8):
resolution: {integrity: sha512-7xfMZtwgAWHMT0iZc8jN4o65zgbAQ3+O32V6W7pXrqNvKnHnkoyQCGCbKeUyXKZLbYE0YhFRnamfxfkEGxm8qA==} resolution: {integrity: sha512-7xfMZtwgAWHMT0iZc8jN4o65zgbAQ3+O32V6W7pXrqNvKnHnkoyQCGCbKeUyXKZLbYE0YhFRnamfxfkEGxm8qA==}
peerDependencies: peerDependencies:
prettier: ^3.0.0 prettier: ^3.0.0
svelte: ^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0 svelte: ^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0
dependencies: dependencies:
prettier: 3.1.1 prettier: 3.2.2
svelte: 4.2.8 svelte: 4.2.8
dev: true dev: true
/prettier@3.1.1: /prettier@3.2.2:
resolution: {integrity: sha512-22UbSzg8luF4UuZtzgiUOfcGM8s4tjBv6dJRT7j275NXsy2jb4aJa4NNveul5x4eqlF1wuhuR2RElK71RvmVaw==} resolution: {integrity: sha512-HTByuKZzw7utPiDO523Tt2pLtEyK7OibUD9suEJQrPUCYQqrHr74GGX6VidMrovbf/I50mPqr8j/II6oBAuc5A==}
engines: {node: '>=14'} engines: {node: '>=14'}
hasBin: true hasBin: true
dev: true dev: true
@ -1369,26 +1369,26 @@ packages:
glob: 7.2.3 glob: 7.2.3
dev: true dev: true
/rollup@4.9.4: /rollup@4.9.5:
resolution: {integrity: sha512-2ztU7pY/lrQyXSCnnoU4ICjT/tCG9cdH3/G25ERqE3Lst6vl2BCM5hL2Nw+sslAvAf+ccKsAq1SkKQALyqhR7g==} resolution: {integrity: sha512-E4vQW0H/mbNMw2yLSqJyjtkHY9dslf/p0zuT1xehNRqUTBOFMqEjguDvqhXr7N7r/4ttb2jr4T41d3dncmIgbQ==}
engines: {node: '>=18.0.0', npm: '>=8.0.0'} engines: {node: '>=18.0.0', npm: '>=8.0.0'}
hasBin: true hasBin: true
dependencies: dependencies:
'@types/estree': 1.0.5 '@types/estree': 1.0.5
optionalDependencies: optionalDependencies:
'@rollup/rollup-android-arm-eabi': 4.9.4 '@rollup/rollup-android-arm-eabi': 4.9.5
'@rollup/rollup-android-arm64': 4.9.4 '@rollup/rollup-android-arm64': 4.9.5
'@rollup/rollup-darwin-arm64': 4.9.4 '@rollup/rollup-darwin-arm64': 4.9.5
'@rollup/rollup-darwin-x64': 4.9.4 '@rollup/rollup-darwin-x64': 4.9.5
'@rollup/rollup-linux-arm-gnueabihf': 4.9.4 '@rollup/rollup-linux-arm-gnueabihf': 4.9.5
'@rollup/rollup-linux-arm64-gnu': 4.9.4 '@rollup/rollup-linux-arm64-gnu': 4.9.5
'@rollup/rollup-linux-arm64-musl': 4.9.4 '@rollup/rollup-linux-arm64-musl': 4.9.5
'@rollup/rollup-linux-riscv64-gnu': 4.9.4 '@rollup/rollup-linux-riscv64-gnu': 4.9.5
'@rollup/rollup-linux-x64-gnu': 4.9.4 '@rollup/rollup-linux-x64-gnu': 4.9.5
'@rollup/rollup-linux-x64-musl': 4.9.4 '@rollup/rollup-linux-x64-musl': 4.9.5
'@rollup/rollup-win32-arm64-msvc': 4.9.4 '@rollup/rollup-win32-arm64-msvc': 4.9.5
'@rollup/rollup-win32-ia32-msvc': 4.9.4 '@rollup/rollup-win32-ia32-msvc': 4.9.5
'@rollup/rollup-win32-x64-msvc': 4.9.4 '@rollup/rollup-win32-x64-msvc': 4.9.5
fsevents: 2.3.3 fsevents: 2.3.3
dev: true dev: true
@ -1494,7 +1494,7 @@ packages:
dependencies: dependencies:
'@ampproject/remapping': 2.2.1 '@ampproject/remapping': 2.2.1
'@jridgewell/sourcemap-codec': 1.4.15 '@jridgewell/sourcemap-codec': 1.4.15
'@jridgewell/trace-mapping': 0.3.20 '@jridgewell/trace-mapping': 0.3.21
acorn: 8.11.3 acorn: 8.11.3
aria-query: 5.3.0 aria-query: 5.3.0
axobject-query: 3.2.1 axobject-query: 3.2.1
@ -1575,7 +1575,7 @@ packages:
dependencies: dependencies:
esbuild: 0.19.11 esbuild: 0.19.11
postcss: 8.4.33 postcss: 8.4.33
rollup: 4.9.4 rollup: 4.9.5
optionalDependencies: optionalDependencies:
fsevents: 2.3.3 fsevents: 2.3.3
dev: true dev: true

View file

@ -0,0 +1,40 @@
import { writable } from 'svelte/store';
const initSurfers = [
{ color: 'lightgray', priority: '', name: '' },
{ color: 'lightgray', priority: '', name: '' },
{ color: 'lightgray', priority: '', name: '' },
{ color: 'lightgray', priority: '', name: '' },
{ color: 'lightgray', priority: '', name: '' },
{ color: 'lightgray', priority: '', name: '' },
];
const initRound = {
name: '',
heat: 1,
category: ''
};
function createPriority() {
const { subscribe, set, update } = writable({
surfers: initSurfers,
round: initRound,
surfersCount: 4
})
const reset = () => {
set({
surfers: initSurfers,
round: initRound,
surfersCount: 4
});
}
return {
subscribe,
set,
update,
reset,
}
};
export const priority = createPriority();

View file

@ -1,35 +0,0 @@
import { writable } from 'svelte/store';
function createSurfers() {
const { subscribe, set, update } = writable([
{ color: 'lightgray', priority: '', name: '' },
{ color: 'lightgray', priority: '', name: '' },
{ color: 'lightgray', priority: '', name: '' },
{ color: 'lightgray', priority: '', name: '' },
{ color: 'lightgray', priority: '', name: '' },
{ color: 'lightgray', priority: '', name: '' },
])
return {
subscribe,
set,
update,
reset: () => set([
{ color: 'lightgray', priority: '', name: '' },
{ color: 'lightgray', priority: '', name: '' },
{ color: 'lightgray', priority: '', name: '' },
{ color: 'lightgray', priority: '', name: '' },
{ color: 'lightgray', priority: '', name: '' },
{ color: 'lightgray', priority: '', name: '' },
]),
}
}
export const surfers = createSurfers()
export const surfersCount = writable(4)
export const round = writable({
name: '',
heat: 0,
category: ''
});

View file

@ -1,7 +1,7 @@
<script> <script>
import { dev } from '$app/environment'; import { dev } from '$app/environment';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { surfers, surfersCount } from '$lib/stores/surfers.js'; import { priority } from '$lib/stores/priority.js';
if (dev) { if (dev) {
console.log('Dev mode'); console.log('Dev mode');
@ -11,7 +11,7 @@
const events = ['priority']; const events = ['priority'];
$: setup_height = 100 / $surfersCount - 2.2 / $surfersCount; $: setup_height = 100 / $priority.surfersCount - 2.2 / $priority.surfersCount;
window.document.body.oncontextmenu = function () { window.document.body.oncontextmenu = function () {
return false; return false;
@ -41,8 +41,8 @@
sse.addEventListener('priority', (e) => { sse.addEventListener('priority', (e) => {
let Msg = JSON.parse(e.data); let Msg = JSON.parse(e.data);
console.log(JSON.stringify(Msg)); console.log(JSON.stringify(Msg));
console.log(`surfers: ${Msg.data.surfers}`); console.log(`surfers: ${Msg.data.priority}`);
$surfers = Msg.data.surfers; $priority = Msg.data.priority;
}); });
return () => { return () => {
@ -55,23 +55,23 @@
const res = await fetch(`/api/priority`); const res = await fetch(`/api/priority`);
const data = await res.json(); const data = await res.json();
console.log(`load priority: ${JSON.stringify(data)}`); console.log(`load priority: ${JSON.stringify(data)}`);
$surfers = data.surfers; $priority = data.priority;
} }
</script> </script>
<ul> <ul>
{#each Array($surfersCount) as _, id} {#each Array($priority.surfersCount) as _, id}
<li style="--height:{setup_height}vh"> <li style="--height:{setup_height}vh">
{#if $surfers[id].priority == 'P'} {#if $priority.surfers[id].priority == 'P'}
<div class="priority" id="p"> <div class="priority" id="p">
{$surfers[id].priority} {$priority.surfers[id].priority}
</div> </div>
{:else} {:else}
<div class="priority" id="n"> <div class="priority" id="n">
{$surfers[id].priority} {$priority.surfers[id].priority}
</div> </div>
{/if} {/if}
<div class="color" style:background-color={$surfers[id].color}></div> <div class="color" style:background-color={$priority.surfers[id].color}></div>
</li> </li>
{/each} {/each}
</ul> </ul>

View file

@ -1,7 +1,7 @@
<script> <script>
import { dev } from '$app/environment'; import { dev } from '$app/environment';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { surfers, surfersCount } from '$lib/stores/surfers.js'; import { priority } from '$lib/stores/priority.js';
if (dev) { if (dev) {
console.log('Dev mode'); console.log('Dev mode');
@ -40,8 +40,8 @@
sse.addEventListener('priority', (e) => { sse.addEventListener('priority', (e) => {
let Msg = JSON.parse(e.data); let Msg = JSON.parse(e.data);
console.log(JSON.stringify(Msg)); console.log(JSON.stringify(Msg));
console.log(`surfers: ${Msg.data.surfers}`); console.log(`surfers: ${Msg.data.priority}`);
$surfers = Msg.data.surfers; $priority = Msg.data.priority;
}); });
return () => { return () => {
@ -54,19 +54,19 @@
const res = await fetch(`/api/priority`); const res = await fetch(`/api/priority`);
const data = await res.json(); const data = await res.json();
console.log(`load priority: ${JSON.stringify(data)}`); console.log(`load priority: ${JSON.stringify(data)}`);
$surfers = data.surfers; $priority = data.priority;
} }
</script> </script>
<div class="wall"> <div class="wall">
{#each Array($surfersCount) as _, id} {#each Array($priority.surfersCount) as _, id}
<div class="column"> <div class="column">
{#if $surfers[id].priority == 'P'} {#if $priority.surfers[id].priority == 'P'}
<div class="priority" id="p">{$surfers[id].priority}</div> <div class="priority" id="p">{$priority.surfers[id].priority}</div>
{:else} {:else}
<div class="priority" id="n">{$surfers[id].priority}</div> <div class="priority" id="n">{$priority.surfers[id].priority}</div>
{/if} {/if}
<div class="color" style="background-color: {$surfers[id].color}"></div> <div class="color" style="background-color: {$priority.surfers[id].color}"></div>
</div> </div>
{/each} {/each}
</div> </div>

View file

@ -2,7 +2,7 @@
// import { page } from '$app/stores'; // import { page } from '$app/stores';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { dev } from '$app/environment'; import { dev } from '$app/environment';
import { surfers, surfersCount, round } from '$lib/stores/surfers.js'; import { priority } from '$lib/stores/priority.js';
if (dev) { if (dev) {
console.log('Dev mode'); console.log('Dev mode');
@ -15,7 +15,7 @@
let width; let width;
let header_height = 8; let header_height = 8;
$: setup_height = (100 - header_height) / $surfersCount - 12 / $surfersCount; $: setup_height = (100 - header_height) / $priority.surfersCount - 12 / $priority.surfersCount;
LoadPriority(); LoadPriority();
@ -39,10 +39,8 @@
sse.addEventListener('priority', (e) => { sse.addEventListener('priority', (e) => {
let Msg = JSON.parse(e.data); let Msg = JSON.parse(e.data);
console.log(JSON.stringify(Msg)); console.log(JSON.stringify(Msg));
console.log(`surfers: ${Msg.data.surfers}`); console.log(`surfers: ${Msg.data.priority}`);
$surfers = Msg.data.surfers; $priority = Msg.data.priority;
$surfersCount = Msg.data.count;
$round = Msg.data.round;
SaveSession(); SaveSession();
}); });
@ -53,55 +51,54 @@
} }
function SaveSession() { function SaveSession() {
window.sessionStorage.setItem('priority', JSON.stringify($surfers)); window.sessionStorage.setItem('status', true);
window.sessionStorage.setItem('surfers', JSON.stringify($surfersCount)); window.sessionStorage.setItem('priority', JSON.stringify($priority));
window.sessionStorage.setItem('round', JSON.stringify($round)); console.log(`saved: ${JSON.stringify($priority)}`);
console.log(`saved: ${JSON.stringify($surfers)}`);
} }
async function LoadPriority() { async function LoadPriority() {
const res = await fetch(`/api/priority`); const res = await fetch(`/api/priority`);
const data = await res.json(); const data = await res.json();
console.log(`load priority: ${JSON.stringify(data)}`); console.log(`load priority: ${JSON.stringify(data)}`);
$surfers = data.surfers; $priority = data.priority;
$surfersCount = data.count;
$round = data.round;
} }
onMount(async () => { onMount(async () => {
if (!dev) { if (!dev) {
const sse = StartSSE(); const sse = StartSSE();
let ses = window.sessionStorage.getItem('priority'); } else {
console.log(`session: ${ses}`); const sse = 0;
if (ses) {
$surfers = JSON.parse(ses);
$surfersCount = JSON.parse(window.sessionStorage.getItem('surfers'));
$round = JSON.parse(window.sessionStorage.getItem('round'));
console.log(`loaded: ${JSON.stringify($surfers)}`);
}
return sse;
} }
});
if (window.sessionStorage.getItem('status')) {
$priority = JSON.parse(window.sessionStorage.getItem('priority'));
console.log(`loaded: ${JSON.stringify($priority)}`);
}
return sse;
});
</script> </script>
<svelte:window bind:innerWidth={width} /> <svelte:window bind:innerWidth={width} />
<div class="header" style="--height:{header_height}vh"> <div class="header" style="--height:{header_height}vh">
<span class="title">{$round.name}</span> <span class="title">{$priority.round.name}</span>
<span class="title">{$round.category}</span> <span class="title">{$priority.round.category}</span>
<span class="heat">Heat {$round.heat}</span> <span class="heat">Heat {$priority.round.heat}</span>
</div> </div>
<div class="container"> <div class="container">
{#each Array($surfersCount) as _, id} {#each Array($priority.surfersCount) as _, id}
<div class="box"> <div class="box">
<div class="square" style="background-color: {$surfers[id].color}; --height:{setup_height}vh"> <div
{#if $surfers[id].priority != ''} class="square"
<span class="priority">{$surfers[id].priority}</span> style="background-color: {$priority.surfers[id].color}; --height:{setup_height}vh"
>
{#if $priority.surfers[id].priority != ''}
<span class="priority">{$priority.surfers[id].priority}</span>
{/if} {/if}
</div> </div>
<div class="text">{$surfers[id].name}</div> <div class="text">{$priority.surfers[id].name}</div>
</div> </div>
{/each} {/each}
</div> </div>
@ -122,7 +119,6 @@
background-color: gray; background-color: gray;
} }
.header { .header {
height: var(--height); height: var(--height);
background-color: var(--backColor); background-color: var(--backColor);
@ -201,5 +197,4 @@
font-size: 6vmin; font-size: 6vmin;
font-weight: lighter; font-weight: lighter;
} }
</style> </style>

View file

@ -1,56 +1,45 @@
<script> <script>
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { surfers, surfersCount, round } from '$lib/stores/surfers.js'; import { priority } from '$lib/stores/priority.js';
import { colors } from '$lib/stores/colors.js'; import { colors } from '$lib/stores/colors.js';
import { rounds } from '$lib/stores/rounds.js';
import { categories } from '$lib/stores/categories.js';
import { dev } from '$app/environment'; import { dev } from '$app/environment';
if (dev) { // if (dev) {
console.log('Dev mode'); // console.log('Dev mode');
} else { // } else {
console.log('Not dev mode'); // console.log('Not dev mode');
} // }
window.document.body.oncontextmenu = function () { window.document.body.oncontextmenu = function () {
return false; return false;
}; };
// const events = ['priority'];
$: start = false; $: start = false;
let footer_height = 8; let footer_height = 8;
$: setup_height = (100 - footer_height) / $surfersCount - 2.2 / $surfersCount; $: setup_height = (100 - footer_height) / $priority.surfersCount - 2.2 / $priority.surfersCount;
$: if (start && $surfers) { $: if ($priority.surfers) {
window.sessionStorage.setItem('priority', JSON.stringify($surfers)); SaveToLocalCahe();
window.sessionStorage.setItem('surfers', JSON.stringify($surfersCount));
window.sessionStorage.setItem('status', JSON.stringify(start));
window.sessionStorage.setItem('round', JSON.stringify($round));
console.log(`saved: ${JSON.stringify($surfers)}`);
} }
onMount(async () => { onMount(async () => {
let ses = window.sessionStorage.getItem('priority'); let status = window.sessionStorage.getItem('status');
if (ses) { if (status) {
$surfers = JSON.parse(ses); LoadFromLocalCache();
$surfersCount = JSON.parse(window.sessionStorage.getItem('surfers')); // console.log(`loaded: ${JSON.stringify($priority.surfers)}`);
start = JSON.parse(window.sessionStorage.getItem('status'));
console.log(`loaded: ${JSON.stringify($surfers)}`);
} }
// if (!dev) {
// const sse = StartSSE();
// return sse;
// }
}); });
function hasDuplicateColors() { function hasDuplicateColors() {
const colors = []; const colors = [];
console.log(JSON.stringify($surfers)); console.log(JSON.stringify($priority.surfers));
for (let i = 0; i < $surfersCount; i++) { for (let i = 0; i < $priority.surfersCount; i++) {
const color = $surfers[i].color; const color = $priority.surfers[i].color;
if (colors.includes(color)) { if (colors.includes(color)) {
console.log(`duplicate color: ${color}`); console.log(`duplicate color: ${color}`);
@ -64,8 +53,8 @@
} }
function ResetPriority() { function ResetPriority() {
for (let i = 0; i < $surfersCount; i++) { for (let i = 0; i < $priority.surfersCount; i++) {
$surfers[i].priority = ''; $priority.surfers[i].priority = '';
} }
} }
@ -80,123 +69,149 @@
} }
function StopHeat() { function StopHeat() {
window.sessionStorage.clear(); ResetLocalCache();
start = false; start = false;
ResetPriority(); ResetPriority();
SendPriority(); SendPriority();
} }
function AddSurfer() { function AddSurfer() {
if ($surfersCount < 6) { if ($priority.surfersCount < 6) {
$surfersCount += 1; $priority.surfersCount += 1;
} }
} }
function RemSurfer() { function RemSurfer() {
if ($surfersCount > 2) { if ($priority.surfersCount > 2) {
$surfersCount -= 1; $priority.surfersCount -= 1;
} }
} }
function ResetLocalCache() { function ResetLocalCache() {
console.log('ResetLocalCache');
window.sessionStorage.clear(); window.sessionStorage.clear();
location.reload(); window.sessionStorage.setItem('status', false);
console.log(`reset cache: ${JSON.parse(window.sessionStorage.getItem('priority'))}`);
priority.reset();
SendPriority();
}
function SaveToLocalCahe() {
window.sessionStorage.setItem('status', true);
window.sessionStorage.setItem('priority', JSON.stringify($priority));
window.sessionStorage.setItem('start', JSON.stringify(start));
console.log(`update cache: ${JSON.stringify($priority)}`);
}
function LoadFromLocalCache() {
$priority = JSON.parse(window.sessionStorage.getItem('priority'));
start = JSON.parse(window.sessionStorage.getItem('start'));
console.log(`load cache: ${JSON.stringify($priority)}`);
} }
async function ChangePriority(id) { async function ChangePriority(id) {
console.log($surfers[id]); console.log($priority.surfers[id]);
if ($surfers[id].priority === 'P') { if ($priority.surfers[id].priority === 'P') {
for (let i = 0; i < $surfersCount; i++) { for (let i = 0; i < $priority.surfersCount; i++) {
if (i != id) { if (i != id) {
let pos = parseInt($surfers[i].priority) - 1; let pos = parseInt($priority.surfers[i].priority) - 1;
if (pos === 1) { if (pos === 1) {
$surfers[i].priority = 'P'; $priority.surfers[i].priority = 'P';
} else { } else {
$surfers[i].priority = pos.toString(); $priority.surfers[i].priority = pos.toString();
} }
} }
} }
$surfers[id].priority = $surfersCount.toString(); $priority.surfers[id].priority = $priority.surfersCount.toString();
} else if ($surfers[id].priority === '') { } else if ($priority.surfers[id].priority === '') {
console.log(`priority empty; pressed: [${id}] ${$surfers[id].priority}`); console.log(`priority empty; pressed: [${id}] ${$priority.surfers[id].priority}`);
for (let i = 0; i < $surfersCount; i++) { for (let i = 0; i < $priority.surfersCount; i++) {
console.log(`looping(${id}): ${i} - ${$surfers[i].priority}`); console.log(`looping(${id}): ${i} - ${$priority.surfers[i].priority}`);
if (i != id) { if (i != id) {
if ($surfers[i].priority === '') { if ($priority.surfers[i].priority === '') {
console.log(`empty: [${i}] ${$surfers[i].priority}`); console.log(`empty: [${i}] ${$priority.surfers[i].priority}`);
continue; continue;
} else { } else {
console.log(`not empty: [${i}] ${$surfers[i].priority}`); console.log(`not empty: [${i}] ${$priority.surfers[i].priority}`);
let pos = parseInt($surfers[i].priority) - 1; let pos = parseInt($priority.surfers[i].priority) - 1;
if (pos === 1) { if (pos === 1) {
$surfers[i].priority = 'P'; $priority.surfers[i].priority = 'P';
} else { } else {
$surfers[i].priority = pos.toString(); $priority.surfers[i].priority = pos.toString();
} }
} }
} }
$surfers[id].priority = $surfersCount.toString(); $priority.surfers[id].priority = $priority.surfersCount.toString();
} }
} else { } else {
console.log(`pressed: [${id}] ${$surfers[id].priority}`); console.log(`pressed: [${id}] ${$priority.surfers[id].priority}`);
let oldpos = parseInt($surfers[id].priority); let oldpos = parseInt($priority.surfers[id].priority);
for (let i = 0; i < $surfersCount; i++) { for (let i = 0; i < $priority.surfersCount; i++) {
if (i != id) { if (i != id) {
console.log(`pos: [${i}] ${$surfers[i].priority} ${$surfers[i].priority > oldpos}`); console.log(
if ($surfers[i].priority != 'P') { `pos: [${i}] ${$priority.surfers[i].priority} ${$priority.surfers[i].priority > oldpos}`
let pos = parseInt($surfers[i].priority); );
if ($priority.surfers[i].priority != 'P') {
let pos = parseInt($priority.surfers[i].priority);
if (pos > oldpos) { if (pos > oldpos) {
console.log(`newpos: ${$surfers[i].priority}`); console.log(`newpos: ${$priority.surfers[i].priority}`);
$surfers[i].priority = (pos - 1).toString(); $priority.surfers[i].priority = (pos - 1).toString();
} }
} }
} else { } else {
$surfers[i].priority = $surfersCount.toString(); $priority.surfers[i].priority = $priority.surfersCount.toString();
console.log(`last: [${i}] ${$surfers[i].priority}`); console.log(`last: [${i}] ${$priority.surfers[i].priority}`);
} }
} }
} }
if (!dev) { SendPriority();
SendPriority();
}
} }
async function SendPriority() { async function SendPriority() {
if (dev) {
return;
}
const res = await fetch(`/api/priority`, { const res = await fetch(`/api/priority`, {
method: 'POST', method: 'POST',
body: JSON.stringify({ body: JSON.stringify({
surfers: $surfers, piority: $priority
count: $surfersCount
}), }),
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
} }
}); });
console.log(`SendPriority: ${res.status} ${res.statusText}`); console.log(`SendPriority: ${JSON.stringify($priority)}`);
} }
</script> </script>
<svelte:head> <svelte:head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <link
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script> href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"
></script>
</svelte:head> </svelte:head>
{#if start} {#if start}
<div class="container text-center"> <div class="container-fluid text-center mb-1">
<div class="row"> <div class="row bg-secondary p-1">
<div class="col"> <div class="col align-items-center">
<button class="button" on:click={StopHeat}>STOP</button> <button class="button" on:click={StopHeat}>STOP</button>
</div>
</div> </div>
</div> </div>
</div>
<ul> <ul>
{#each Array($surfersCount) as _, id} {#each Array($priority.surfersCount) as _, id}
<li style="--height:{setup_height}vh"> <li style="--height:{setup_height}vh">
{#if $surfers[id].priority == 'P'} {#if $priority.surfers[id].priority == 'P'}
<div <div
class="priority" class="priority"
id="p" id="p"
@ -205,7 +220,7 @@
role="button" role="button"
tabindex="-1" tabindex="-1"
> >
{$surfers[id].priority} {$priority.surfers[id].priority}
</div> </div>
{:else} {:else}
<div <div
@ -216,69 +231,129 @@
role="button" role="button"
tabindex="-1" tabindex="-1"
> >
{$surfers[id].priority} {$priority.surfers[id].priority}
</div> </div>
{/if} {/if}
<div class="color" style:background-color={$surfers[id].color}>{$surfers[id].name}</div> <div class="color" style:background-color={$priority.surfers[id].color}>
{$priority.surfers[id].name}
</div>
</li> </li>
{/each} {/each}
</ul> </ul>
{:else}
{:else} <div class="container-fluid text-center mb-1">
<div class="row bg-secondary p-1">
<div class="container text-center"> <div class="col align-items-center">
<div class="row"> <button class="btn btn-success btn-sm" on:click={StartHeat}>START</button>
<div class="col align-items-left">
<div class="btn-toolbar btn-group-sm" role="toolbar">
<button class="btn btn-primary" on:click={AddSurfer}>+</button>
<button class="btn btn-outline-black disabled">{$surfersCount}</button>
<button class="btn btn-primary" on:click={RemSurfer}>-</button>
</div> </div>
</div> </div>
<div class="col align-items-center"> </div>
<button class="btn btn-success btn-sm" on:click={StartHeat}>START</button>
</div> <!-- <div class="container-fluid text-center"></div> -->
<div class="col align-items-right">
<button class="btn btn-danger btn-sm" on:click={ResetLocalCache}>Reset</button> <div class="container-fluid text-center">
<div class="row row-cols-auto justify-content-between align-content-center bg-light mb-1">
<div class="col align-self-center">
<div class="btn-toolbar btn-group-sm" role="toolbar">
<button class="btn btn-primary" on:click={AddSurfer}>+</button>
<button class="btn btn-outline-black disabled">{$priority.surfersCount}</button>
<button class="btn btn-primary" on:click={RemSurfer}>-</button>
</div>
</div>
<div class="col align-self-center mt-1">
<div class="row row-cols-auto justify-content- align-content-center bg-light mb-1">
<div class="col align-self-center">
<div class="input-group">
<span class="input-group-text bg-info">Round</span>
<select
class="form-select form-select-sm"
name="round"
id="round"
bind:value={$priority.round.name}
>
{#each $rounds as round}
<option value={round}>{round}</option>
{/each}
</select>
</div>
</div>
<div class="col align-self-center">
<div class="input-group">
<span class="input-group-text bg-info">Category</span>
<select
class="form-select form-select-sm"
name="cetegory"
id="category"
bind:value={$priority.round.category}
>
{#each $categories as category}
<option value={category}>{category}</option>
{/each}
</select>
</div>
</div>
<div class="col align-self-center">
<div class="input-group">
<span class="input-group-text bg-info">Heat</span>
<input
type="number"
class="form-control"
min="1"
max="999"
size="3"
bind:value={$priority.round.heat}
/>
</div>
</div>
</div>
</div>
<div class="col align-self-center">
<button class="btn btn-danger btn-sm" on:click={ResetLocalCache}>Reset</button>
</div>
</div> </div>
</div> </div>
</div>
<table class="table is-hoverable is-striped is-bordered is-fullwidth"> <table class="table table-striped table-borderless table-sm">
<thead> <thead>
<tr> <tr class="table-primary">
<th> Name </th> <td> Name </td>
<td> Color </td> <td> Color </td>
</tr> </tr>
</thead> </thead>
<tbody> <tbody class="table-group-divider">
{#each Array($surfersCount) as _, id} {#each Array($priority.surfersCount) as _, id}
<tr> <tr class="table-light">
<th><input class="input" type="text" bind:value={$surfers[id].name}/></th> <td
<td> ><input
<div class="select"> class="input"
<select type="text"
size="30"
bind:value={$priority.surfers[id].name}
/></td
>
<td>
<div class="select">
<select
name="color{id}" name="color{id}"
{id} {id}
bind:value={$surfers[id].color} bind:value={$priority.surfers[id].color}
style="background-color: {$surfers[id].color};" style="background-color: {$priority.surfers[id].color};"
> >
{#each $colors as color} {#each $colors as color}
<option value={color} style="background-color: {color}">{color}</option> <option value={color} style="background-color: {color}">{color}</option>
{/each} {/each}
</select> </select>
</div> </div>
</td> </td>
</tr> </tr>
{:else} {:else}
<tr> <tr>
<th /> <th />
<td /> <td />
</tr> </tr>
{/each} {/each}
</tbody> </tbody>
</table> </table>
{/if} {/if}
<style> <style>
@ -324,20 +399,6 @@
height: 100%; height: 100%;
} }
.priority#color {
background-color: lightgrey;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.priority#color select {
width: 100%;
/* margin-top: 40%; */
font-size: 6vmin;
}
.color { .color {
display: flex; display: flex;
width: 100vw; width: 100vw;
@ -345,49 +406,4 @@
align-items: center; align-items: center;
text-align: center; text-align: center;
} }
.color input {
background-color: lightgray;
font-size: 5vmin;
}
.card {
background-color: aquamarine;
border-radius: 6%;
}
.myfooter {
display: inline-flex;
bottom: 0;
background-color: darkgrey;
/* border: 2px solid black; */
width: 100%;
height: var(--height);
justify-content: center;
align-items: center;
}
.control {
margin-left: 0;
margin-right: auto;
}
.command {
margin-left: auto;
margin-right: 0;
}
.display {
margin-left: 1vmin;
margin-right: 1vmin;
font-size: 2.5vmin;
}
.mybutton {
margin-left: 1vmin;
margin-right: 1vmin;
border-radius: 4px;
border-style: inset;
font-size: 2.5vmin;
}
</style> </style>