para/puzzle
1
1
Fork 0
Code Issues 8 Pull requests Releases Wiki Activity

show image dimensions when creating game

Browse source
This commit is contained in:
Zutatensuppe 2021-06-20 14:21:48 +02:00
parent b8673e6a40
commit 9c0ceb685e
7 changed files with 47 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

1
build/public/assets/index.4ee35f15.js Normal file
View file

File diff suppressed because one or more lines are too long

1
build/public/assets/index.e0726e0c.js
View file

File diff suppressed because one or more lines are too long

2
build/public/assets/index.5c03949d.css → build/public/assets/index.f00a590d.css
View file

File diff suppressed because one or more lines are too long

4
build/public/index.html
View file

@ -4,9 +4,9 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>🧩 jigsaw.hyottoko.club</title> <title>🧩 jigsaw.hyottoko.club</title>
<script type="module" crossorigin src="/assets/index.e0726e0c.js"></script> <script type="module" crossorigin src="/assets/index.4ee35f15.js"></script>
<link rel="modulepreload" href="/assets/vendor.684f7bc8.js"> <link rel="modulepreload" href="/assets/vendor.684f7bc8.js">
<link rel="stylesheet" href="/assets/index.5c03949d.css"> <link rel="stylesheet" href="/assets/index.f00a590d.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

9
build/server/main.js
View file

@ -1410,6 +1410,8 @@ const imageFromDb = (db, imageId) => {
title: i.title, title: i.title,
tags: getTags(db, i.id), tags: getTags(db, i.id),
created: i.created * 1000, created: i.created * 1000,
width: i.width,
height: i.height,
}; };
}; };
const allImagesFromDb = (db, tagSlugs, orderBy) => { const allImagesFromDb = (db, tagSlugs, orderBy) => {
@ -1447,8 +1449,13 @@ inner join images i on i.id = ixc.image_id ${where.sql};
title: i.title, title: i.title,
tags: getTags(db, i.id), tags: getTags(db, i.id),
created: i.created * 1000, created: i.created * 1000,
width: i.width,
height: i.height,
})); }));
}; };
/**
* @deprecated old function, now database is used
*/
const allImagesFromDisk = (tags, sort) => { const allImagesFromDisk = (tags, sort) => {
let images = fs.readdirSync(UPLOAD_DIR) let images = fs.readdirSync(UPLOAD_DIR)
.filter(f => f.toLowerCase().match(/\.(jpe?g|webp|png)$/)) .filter(f => f.toLowerCase().match(/\.(jpe?g|webp|png)$/))
@ -1460,6 +1467,8 @@ const allImagesFromDisk = (tags, sort) => {
title: f.replace(/\.[a-z]+$/, ''), title: f.replace(/\.[a-z]+$/, ''),
tags: [], tags: [],
created: fs.statSync(`${UPLOAD_DIR}/${f}`).mtime.getTime(), created: fs.statSync(`${UPLOAD_DIR}/${f}`).mtime.getTime(),
width: 0,
height: 0, // may have to fill when the function is used again
})); }));
switch (sort) { switch (sort) {
case 'alpha_asc': case 'alpha_asc':

30
src/frontend/components/NewGameDialog.vue
View file

@ -6,7 +6,10 @@
<div class="has-image"> <div class="has-image">
<responsive-image :src="image.url" :title="image.title" /> <responsive-image :src="image.url" :title="image.title" />
</div> </div>
<div class="image-title" v-if="image.title">"{{image.title}}"</div> <div class="image-title" v-if="image.title || image.width || image.height">
<span class="image-title-title" v-if="image.title">"{{image.title}}"</span>
<span class="image-title-dim" v-if="image.width || image.height">({{image.width}} ✕ {{image.height}})</span>
</div>
</div> </div>
<div class="area-settings"> <div class="area-settings">
@ -18,27 +21,34 @@
<tr> <tr>
<td><label>Scoring: </label></td> <td><label>Scoring: </label></td>
<td> <td>
<label><input type="radio" v-model="scoreMode" value="1" /> Any (Score when pieces are connected to each other or on final location)</label> <label><input type="radio" v-model="scoreMode" value="1" />
Any (Score when pieces are connected to each other or on final location)</label>
<br /> <br />
<label><input type="radio" v-model="scoreMode" value="0" /> Final (Score when pieces are put to their final location)</label> <label><input type="radio" v-model="scoreMode" value="0" />
Final (Score when pieces are put to their final location)</label>
</td> </td>
</tr> </tr>
<tr> <tr>
<td><label>Shapes: </label></td> <td><label>Shapes: </label></td>
<td> <td>
<label><input type="radio" v-model="shapeMode" value="0" /> Normal</label> <label><input type="radio" v-model="shapeMode" value="0" />
Normal</label>
<br /> <br />
<label><input type="radio" v-model="shapeMode" value="1" /> Any (flat pieces can occur anywhere)</label> <label><input type="radio" v-model="shapeMode" value="1" />
Any (flat pieces can occur anywhere)</label>
<br /> <br />
<label><input type="radio" v-model="shapeMode" value="2" /> Flat (all pieces flat on all sides)</label> <label><input type="radio" v-model="shapeMode" value="2" />
Flat (all pieces flat on all sides)</label>
</td> </td>
</tr> </tr>
<tr> <tr>
<td><label>Snapping: </label></td> <td><label>Snapping: </label></td>
<td> <td>
<label><input type="radio" v-model="snapMode" value="0" /> Normal (pieces snap to final destination and to each other)</label> <label><input type="radio" v-model="snapMode" value="0" />
Normal (pieces snap to final destination and to each other)</label>
<br /> <br />
<label><input type="radio" v-model="snapMode" value="1" /> Real (pieces snap only to corners, already snapped pieces and to each other)</label> <label><input type="radio" v-model="snapMode" value="1" />
Real (pieces snap only to corners, already snapped pieces and to each other)</label>
</td> </td>
</tr> </tr>
</table> </table>
@ -192,4 +202,8 @@ export default defineComponent({
top: .5em; top: .5em;
left: .5em; left: .5em;
} }
.new-game-dialog .image-title > span { margin-right: .5em; }
.new-game-dialog .image-title > span:last-child { margin-right: 0; }
.image-title-dim { display: inline-block; white-space: no-wrap; }
</style> </style>

13
src/server/Images.ts
View file

@ -26,7 +26,9 @@ interface ImageInfo
url: string url: string
title: string title: string
tags: Tag[] tags: Tag[]
created: Timestamp, created: Timestamp
width: number
height: number
} }
const resizeImage = async (filename: string): Promise<void> => { const resizeImage = async (filename: string): Promise<void> => {
@ -109,6 +111,8 @@ const imageFromDb = (db: Db, imageId: number): ImageInfo => {
title: i.title, title: i.title,
tags: getTags(db, i.id), tags: getTags(db, i.id),
created: i.created * 1000, created: i.created * 1000,
width: i.width,
height: i.height,
} }
} }
@ -153,9 +157,14 @@ inner join images i on i.id = ixc.image_id ${where.sql};
title: i.title, title: i.title,
tags: getTags(db, i.id), tags: getTags(db, i.id),
created: i.created * 1000, created: i.created * 1000,
width: i.width,
height: i.height,
})) }))
} }
/**
* @deprecated old function, now database is used
*/
const allImagesFromDisk = ( const allImagesFromDisk = (
tags: string[], tags: string[],
sort: string sort: string
@ -170,6 +179,8 @@ const allImagesFromDisk = (
title: f.replace(/\.[a-z]+$/, ''), title: f.replace(/\.[a-z]+$/, ''),
tags: [] as Tag[], tags: [] as Tag[],
created: fs.statSync(`${UPLOAD_DIR}/${f}`).mtime.getTime(), created: fs.statSync(`${UPLOAD_DIR}/${f}`).mtime.getTime(),
width: 0, // may have to fill when the function is used again
height: 0, // may have to fill when the function is used again
})) }))
switch (sort) { switch (sort) {