2021-08-26 12:01:07 +02:00
|
|
|
<script lang="ts">
|
|
|
|
import { gameManager } from "../../Phaser/Game/GameManager";
|
2021-12-06 16:12:37 +01:00
|
|
|
import { onMount } from "svelte";
|
2021-08-26 12:01:07 +02:00
|
|
|
|
|
|
|
let gameScene = gameManager.getCurrentGameScene();
|
|
|
|
|
|
|
|
let expandedMapCopyright = false;
|
|
|
|
let expandedTilesetCopyright = false;
|
|
|
|
|
|
|
|
let mapName: string = "";
|
|
|
|
let mapDescription: string = "";
|
|
|
|
let mapCopyright: string = "The map creator did not declare a copyright for the map.";
|
|
|
|
let tilesetCopyright: string[] = [];
|
|
|
|
|
|
|
|
onMount(() => {
|
|
|
|
if (gameScene.mapFile.properties !== undefined) {
|
2021-12-06 16:12:37 +01:00
|
|
|
const propertyName = gameScene.mapFile.properties.find((property) => property.name === "mapName");
|
|
|
|
if (propertyName !== undefined && typeof propertyName.value === "string") {
|
2021-08-26 12:01:07 +02:00
|
|
|
mapName = propertyName.value;
|
|
|
|
}
|
2021-12-06 16:12:37 +01:00
|
|
|
const propertyDescription = gameScene.mapFile.properties.find(
|
|
|
|
(property) => property.name === "mapDescription"
|
|
|
|
);
|
|
|
|
if (propertyDescription !== undefined && typeof propertyDescription.value === "string") {
|
2021-08-26 12:01:07 +02:00
|
|
|
mapDescription = propertyDescription.value;
|
|
|
|
}
|
2021-12-06 16:12:37 +01:00
|
|
|
const propertyCopyright = gameScene.mapFile.properties.find((property) => property.name === "mapCopyright");
|
|
|
|
if (propertyCopyright !== undefined && typeof propertyCopyright.value === "string") {
|
2021-08-26 12:01:07 +02:00
|
|
|
mapCopyright = propertyCopyright.value;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
for (const tileset of gameScene.mapFile.tilesets) {
|
|
|
|
if (tileset.properties !== undefined) {
|
2021-12-06 16:12:37 +01:00
|
|
|
const propertyTilesetCopyright = tileset.properties.find(
|
|
|
|
(property) => property.name === "tilesetCopyright"
|
|
|
|
);
|
|
|
|
if (propertyTilesetCopyright !== undefined && typeof propertyTilesetCopyright.value === "string") {
|
2021-08-26 12:01:07 +02:00
|
|
|
tilesetCopyright = [...tilesetCopyright, propertyTilesetCopyright.value]; //Assignment needed to trigger Svelte's reactivity
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2021-12-06 16:12:37 +01:00
|
|
|
});
|
2021-08-26 12:01:07 +02:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<div class="about-room-main">
|
|
|
|
<h2>Information on the map</h2>
|
|
|
|
<section class="container-overflow">
|
|
|
|
<h3>{mapName}</h3>
|
|
|
|
<p class="string-HTML">{mapDescription}</p>
|
2021-12-06 16:12:37 +01:00
|
|
|
<h3 class="nes-pointer hoverable" on:click={() => (expandedMapCopyright = !expandedMapCopyright)}>
|
|
|
|
Copyrights of the map
|
|
|
|
</h3>
|
|
|
|
<p class="string-HTML" hidden={!expandedMapCopyright}>{mapCopyright}</p>
|
|
|
|
<h3 class="nes-pointer hoverable" on:click={() => (expandedTilesetCopyright = !expandedTilesetCopyright)}>
|
|
|
|
Copyrights of the tilesets
|
|
|
|
</h3>
|
|
|
|
<section hidden={!expandedTilesetCopyright}>
|
2021-08-26 12:01:07 +02:00
|
|
|
{#each tilesetCopyright as copyright}
|
|
|
|
<p class="string-HTML">{copyright}</p>
|
|
|
|
{:else}
|
2021-12-06 16:12:37 +01:00
|
|
|
<p>
|
|
|
|
The map creator did not declare a copyright for the tilesets. Warning, This doesn't mean that those
|
|
|
|
tilesets have no license.
|
|
|
|
</p>
|
2021-08-26 12:01:07 +02:00
|
|
|
{/each}
|
|
|
|
</section>
|
|
|
|
</section>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<style lang="scss">
|
2021-12-06 16:12:37 +01:00
|
|
|
.string-HTML {
|
|
|
|
white-space: pre-line;
|
|
|
|
}
|
2021-08-26 12:01:07 +02:00
|
|
|
|
2021-12-06 16:12:37 +01:00
|
|
|
div.about-room-main {
|
|
|
|
height: calc(100% - 56px);
|
2021-08-26 12:01:07 +02:00
|
|
|
|
2021-12-06 16:12:37 +01:00
|
|
|
h2,
|
|
|
|
h3 {
|
|
|
|
width: 100%;
|
|
|
|
text-align: center;
|
|
|
|
}
|
2021-08-26 12:01:07 +02:00
|
|
|
|
2021-12-06 16:12:37 +01:00
|
|
|
h3.hoverable:hover {
|
|
|
|
background-color: #3c3e40;
|
|
|
|
border-radius: 32px;
|
|
|
|
}
|
2021-08-26 12:01:07 +02:00
|
|
|
|
2021-12-06 16:12:37 +01:00
|
|
|
section.container-overflow {
|
|
|
|
height: calc(100% - 220px);
|
|
|
|
margin: 0;
|
|
|
|
padding: 0;
|
|
|
|
overflow-y: auto;
|
|
|
|
}
|
2021-11-16 15:28:54 +01:00
|
|
|
}
|
2021-08-26 12:01:07 +02:00
|
|
|
|
2021-12-06 16:12:37 +01:00
|
|
|
@media only screen and (max-width: 800px), only screen and (max-height: 800px) {
|
|
|
|
div.about-room-main {
|
|
|
|
section.container-overflow {
|
|
|
|
height: calc(100% - 120px);
|
|
|
|
}
|
|
|
|
}
|
2021-08-26 12:01:07 +02:00
|
|
|
}
|
2021-12-06 16:12:37 +01:00
|
|
|
</style>
|