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

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

@ -6,7 +6,10 @@
<div class="has-image">
<responsive-image :src="image.url" :title="image.title" />
</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 class="area-settings">
@ -18,27 +21,34 @@
<tr>
<td><label>Scoring: </label></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 />
<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>
</tr>
<tr>
<td><label>Shapes: </label></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 />
<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 />
<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>
</tr>
<tr>
<td><label>Snapping: </label></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 />
<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>
</tr>
</table>
@ -192,4 +202,8 @@ export default defineComponent({
top: .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>

13
src/server/Images.ts
View file

@ -26,7 +26,9 @@ interface ImageInfo
url: string
title: string
tags: Tag[]
created: Timestamp,
created: Timestamp
width: number
height: number
}
const resizeImage = async (filename: string): Promise<void> => {
@ -109,6 +111,8 @@ const imageFromDb = (db: Db, imageId: number): ImageInfo => {
title: i.title,
tags: getTags(db, i.id),
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,
tags: getTags(db, i.id),
created: i.created * 1000,
width: i.width,
height: i.height,
}))
}
/**
* @deprecated old function, now database is used
*/
const allImagesFromDisk = (
tags: string[],
sort: string
@ -170,6 +179,8 @@ const allImagesFromDisk = (
title: f.replace(/\.[a-z]+$/, ''),
tags: [] as Tag[],
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) {