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">
<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="stylesheet" href="/assets/index.5c03949d.css">
<link rel="stylesheet" href="/assets/index.f00a590d.css">
</head>
<body>
<div id="app"></div>

9
build/server/main.js
View file

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

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) {