From 6c9b63ef3db6cb4f5f503f169aa6d47265398a68 Mon Sep 17 00:00:00 2001 From: Valdo Romao Date: Mon, 25 Oct 2021 16:29:57 +0100 Subject: [PATCH 1/8] WIP: design but no storage yet --- src/Features/properties_templates.ts | 40 +- .../Configuration/Components/Field.svelte | 85 ++ test/maps/configuration_logo.json | 1182 +++++++++++++++++ 3 files changed, 1303 insertions(+), 4 deletions(-) create mode 100644 test/maps/configuration_logo.json diff --git a/src/Features/properties_templates.ts b/src/Features/properties_templates.ts index c8261c8..4b9b443 100644 --- a/src/Features/properties_templates.ts +++ b/src/Features/properties_templates.ts @@ -10,25 +10,49 @@ export async function initPropertiesTemplates(): Promise { if (property.type === "int" || property.type === "bool" || property.type === "object") { continue; } + const template = new TemplateValue(property.value, WA.state); if (template.isPureString()) { continue; } const newValue = template.getValue(); - setProperty(layerName, property.name, newValue); + setLayerProperty(layerName, property.name, newValue); template.onChange((newValue) => { - setProperty(layerName, property.name, newValue); + setLayerProperty(layerName, property.name, newValue); }); } + + // Parse the URL of the integrated websites (for example if mustache is used) + // Here we want to select the Tiled object layers with the type 'website' and the property 'url' + if (layer.type === "objectgroup") { + for (const object of layer.objects) { + if (object.type === "website") { + for (const property of object.properties) { + if (property.name === "url") { + const template = new TemplateValue(property.value, WA.state); + if (template.isPureString()) { + continue; + } + const newValue = template.getValue(); + await setWebsiteProperty(object.name, newValue); + + template.onChange((newValue) => { + setWebsiteProperty(object.name, newValue); + }); + } + } + } + } + } } } /** - * Sets the property value on the map. + * Sets the property value of a layer on the map. * Furthermore, if the property name is "visible", modify the visibility of the layer. */ -function setProperty(layerName: string, propertyName: string, value: string): void { +function setLayerProperty(layerName: string, propertyName: string, value: string): void { WA.room.setProperty(layerName, propertyName, value); if (propertyName === "visible") { if (value) { @@ -38,3 +62,11 @@ function setProperty(layerName: string, propertyName: string, value: string): vo } } } + +/** + * Sets the property value of an object of type 'website' on the map. + */ +async function setWebsiteProperty(objectName: string, value: string): Promise { + const website = await WA.room.website.get(objectName); + website.url = value; +} diff --git a/src/Iframes/Configuration/Components/Field.svelte b/src/Iframes/Configuration/Components/Field.svelte index 24401af..f087d27 100644 --- a/src/Iframes/Configuration/Components/Field.svelte +++ b/src/Iframes/Configuration/Components/Field.svelte @@ -13,6 +13,12 @@ const stringVariableStore = variableStore as Writable; const boolVariableStore = variableStore as Writable; + let error: string; + + let container: HTMLElement; + let input: HTMLInputElement; + let image: HTMLImageElement; + let showImage = false; function getAllowedValues() { const allowedValuesStr = variable.properties.mustGetString('allowed_values'); @@ -22,6 +28,45 @@ function onChange(event: Event) { $variableStore = (event.target as HTMLInputElement).value; } + + function onUpload(event: Event) { + const files = (event.target as HTMLInputElement).files; + const file = files ? files[0] : null; + error = ''; + + if (file) { + showImage = true; + + const reader = new FileReader(); + reader.onload = () => { + if (typeof reader.result === "string") { + image.setAttribute("src", reader.result); + image.style.maxWidth = "128px"; + image.style.maxHeight = "64px"; + + fetch('http://workadventure.localhost/api/upload-file', { + method: 'POST', + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json' + }, + body: JSON.stringify({dataUrl: reader.result}) + }).then((response) => { + if(response.ok) { + console.log('SUCCESS',response) + // TODO: replace old logo URL by new + } else { + error = 'An error occurred. Please try later.' + console.log('ERROR',response) + } + }); + } + }; + reader.readAsDataURL(file); + return; + } + showImage = false; + } @@ -49,6 +94,26 @@ {/each} +{:else if type === 'upload' } +
+ {label} +
+ + +
+ {#if showImage} + Preview + {:else} + / + {/if} +
+
+
{:else}
@@ -59,6 +124,9 @@
{ description }
{/if} +{#if error } +
{ error }
+{/if} diff --git a/test/maps/configuration_logo.json b/test/maps/configuration_logo.json new file mode 100644 index 0000000..7254910 --- /dev/null +++ b/test/maps/configuration_logo.json @@ -0,0 +1,1182 @@ +{ "compressionlevel":-1, + "height":12, + "infinite":false, + "layers":[ + { + "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 555, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], + "height":12, + "id":2, + "name":"start", + "opacity":1, + "type":"tilelayer", + "visible":true, + "width":12, + "x":0, + "y":0 + }, + { + "data":[554, 554, 554, 554, 554, 554, 554, 554, 554, 554, 554, 554, 554, 554, 554, 554, 554, 554, 554, 554, 554, 554, 554, 554, 554, 554, 554, 554, 554, 554, 554, 554, 554, 554, 554, 554, 554, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 554, 554, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 554, 554, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 554, 554, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 554, 554, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 554, 554, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 554, 554, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 554, 554, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 554, 554, 554, 554, 554, 554, 554, 554, 554, 554, 554, 554, 554], + "height":12, + "id":22, + "name":"collisions", + "opacity":1, + "type":"tilelayer", + "visible":true, + "width":12, + "x":0, + "y":0 + }, + { + "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 563, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], + "height":12, + "id":16, + "name":"logoConfigZone", + "opacity":1, + "properties":[ + { + "name":"openConfig", + "type":"string", + "value":"logoUrl" + }, + { + "name":"openConfigTrigger", + "type":"string", + "value":"onaction" + }, + { + "name":"openConfigTriggerMessage", + "type":"string", + "value":"Edit your logo" + }, + { + "name":"zone", + "type":"string", + "value":"logoConfig" + }], + "type":"tilelayer", + "visible":true, + "width":12, + "x":0, + "y":0 + }, + { + "data":[23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23], + "height":12, + "id":1, + "name":"floor", + "opacity":1, + "type":"tilelayer", + "visible":true, + "width":12, + "x":0, + "y":0 + }, + { + "data":[490, 501, 501, 501, 501, 501, 501, 501, 501, 501, 501, 491, 486, 532, 532, 532, 532, 532, 532, 532, 532, 532, 532, 486, 486, 544, 544, 544, 544, 544, 544, 544, 544, 544, 544, 486, 486, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 486, 486, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 486, 486, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 486, 486, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 486, 486, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 486, 486, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 486, 486, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 486, 486, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 486, 502, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 503], + "height":12, + "id":8, + "name":"walls", + "opacity":1, + "type":"tilelayer", + "visible":true, + "width":12, + "x":0, + "y":0 + }, + { + "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], + "height":12, + "id":18, + "name":"furniture", + "opacity":1, + "type":"tilelayer", + "visible":true, + "width":12, + "x":0, + "y":0 + }, + { + "draworder":"topdown", + "id":3, + "name":"floorLayer", + "objects":[ + { + "height":110.319857312723, + "id":17, + "name":"readme", + "rotation":0, + "text": + { + "color":"#ffffff", + "fontfamily":"Sans Serif", + "pixelsize":13, + "text":"Test:\nOpen the config panel and enter a logo URL\n\nResult:\nThe corresponding logo should appear", + "wrap":true + }, + "type":"", + "visible":true, + "width":301.290632697714, + "x":48.6288751169901, + "y":212.181301258499 + }, + { + "height":36.1595607503847, + "id":29, + "name":"logo", + "properties":[ + { + "name":"allowApi", + "type":"bool", + "value":true + }, + { + "name":"url", + "type":"string", + "value":"{{#logoUrl}}{{{logoUrl}}}{{\/logoUrl}}{{^logoUrl}}https:\/\/workadventu.re\/favicon-32x32.png{{\/logoUrl}}" + }], + "rotation":0, + "type":"website", + "visible":true, + "width":64.0286177779626, + "x":160, + "y":42.3989018759619 + }], + "opacity":1, + "type":"objectgroup", + "visible":true, + "x":0, + "y":0 + }, + { + "draworder":"topdown", + "id":32, + "name":"configuration", + "objects":[ + { + "height":0, + "id":28, + "name":"logoUrl", + "point":true, + "properties":[ + { + "name":"default", + "type":"string", + "value":"" + }, + { + "name":"label", + "type":"string", + "value":"Select your logo" + }, + { + "name":"persist", + "type":"bool", + "value":true + }, + { + "name":"type", + "type":"string", + "value":"upload" + }], + "rotation":0, + "type":"variable", + "visible":true, + "width":0, + "x":127.247451482026, + "y":63.3014172680968 + }], + "opacity":1, + "type":"objectgroup", + "visible":true, + "x":0, + "y":0 + }, + { + "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], + "height":12, + "id":23, + "name":"abovePlayer", + "opacity":1, + "type":"tilelayer", + "visible":true, + "width":12, + "x":0, + "y":0 + }], + "nextlayerid":35, + "nextobjectid":34, + "orientation":"orthogonal", + "properties":[ + { + "name":"script", + "type":"string", + "value":"\/bundle.js" + }], + "renderorder":"right-down", + "tiledversion":"1.7.2", + "tileheight":32, + "tilesets":[ + { + "columns":11, + "firstgid":1, + "image":"tileset1.png", + "imageheight":352, + "imagewidth":352, + "margin":0, + "name":"tileset1", + "spacing":0, + "tilecount":121, + "tileheight":32, + "tilewidth":32 + }, + { + "columns":16, + "firstgid":122, + "image":"walls.png", + "imageheight":480, + "imagewidth":512, + "margin":0, + "name":"walls", + "spacing":0, + "tilecount":240, + "tileheight":32, + "tiles":[ + { + "id":128, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":129, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":130, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":131, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":132, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":133, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":134, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":135, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":144, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":145, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":146, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":147, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":148, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":149, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":150, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":151, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":160, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":161, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":162, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":163, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":164, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":165, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":166, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":167, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":168, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":169, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":170, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":171, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":172, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":173, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":176, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":177, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":178, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":179, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":180, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":181, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":182, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":183, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":184, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":185, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":186, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":187, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":188, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":189, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":192, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":193, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":194, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":195, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":196, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":197, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":198, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":199, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":200, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":201, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":202, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":203, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":204, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":205, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":208, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":209, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":210, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":211, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":212, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":213, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":214, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":215, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":216, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":217, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":218, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":219, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":220, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":221, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":224, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":225, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":226, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":227, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":228, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":229, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":230, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":231, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":232, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":233, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":234, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":235, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":236, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":237, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }], + "tilewidth":32 + }, + { + "columns":6, + "firstgid":362, + "image":"Door2_pipo.png", + "imageheight":384, + "imagewidth":192, + "margin":0, + "name":"Door2_pipo", + "spacing":0, + "tilecount":72, + "tileheight":32, + "tiles":[ + { + "id":6, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":9, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":12, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":15, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":24, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":27, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":30, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":33, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":42, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":48, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":60, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }, + { + "id":66, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }], + "tilewidth":32 + }, + { + "columns":12, + "firstgid":434, + "image":"tileset2.png", + "imageheight":320, + "imagewidth":384, + "margin":0, + "name":"tileset2", + "spacing":0, + "tilecount":120, + "tileheight":32, + "tilewidth":32 + }, + { + "columns":6, + "firstgid":554, + "image":"special-zones.png", + "imageheight":64, + "imagewidth":192, + "margin":0, + "name":"special-zones", + "spacing":0, + "tilecount":12, + "tileheight":32, + "tiles":[ + { + "id":0, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }] + }], + "tilewidth":32 + }], + "tilewidth":32, + "type":"map", + "version":"1.6", + "width":12 +} \ No newline at end of file From 3f6c8e3c7a4d2773d340a18d862696dd12d19817 Mon Sep 17 00:00:00 2001 From: Valdo Romao Date: Wed, 27 Oct 2021 19:56:42 +0100 Subject: [PATCH 2/8] Final WIP (no endpoint yet to upload) --- .../Configuration/Components/Field.svelte | 93 +++++++++++-------- 1 file changed, 55 insertions(+), 38 deletions(-) diff --git a/src/Iframes/Configuration/Components/Field.svelte b/src/Iframes/Configuration/Components/Field.svelte index f087d27..d4eb99f 100644 --- a/src/Iframes/Configuration/Components/Field.svelte +++ b/src/Iframes/Configuration/Components/Field.svelte @@ -19,6 +19,7 @@ let input: HTMLInputElement; let image: HTMLImageElement; let showImage = false; + const formData = new FormData() function getAllowedValues() { const allowedValuesStr = variable.properties.mustGetString('allowed_values'); @@ -36,30 +37,14 @@ if (file) { showImage = true; - const reader = new FileReader(); reader.onload = () => { if (typeof reader.result === "string") { + formData.append('file', file) image.setAttribute("src", reader.result); + // Just for the rendering, doesn't touch the actual file image.style.maxWidth = "128px"; image.style.maxHeight = "64px"; - - fetch('http://workadventure.localhost/api/upload-file', { - method: 'POST', - headers: { - 'Accept': 'application/json', - 'Content-Type': 'application/json' - }, - body: JSON.stringify({dataUrl: reader.result}) - }).then((response) => { - if(response.ok) { - console.log('SUCCESS',response) - // TODO: replace old logo URL by new - } else { - error = 'An error occurred. Please try later.' - console.log('ERROR',response) - } - }); } }; reader.readAsDataURL(file); @@ -67,6 +52,21 @@ } showImage = false; } + + function uploadFile() { + error = ''; + + fetch('https://some-api-for-the-upload', { + method: 'POST', + body: formData + }).then(response => response.json()) + .then(data => { + $variableStore = data.url; + }).catch(e => { + error = 'An error occurred. Please try later.' + throw new Error(e) + }) + } @@ -95,7 +95,7 @@ {/each}
{:else if type === 'upload' } -
+
{label}
-
- {#if showImage} - Preview - {:else} - / - {/if} +
+
+ {#if showImage} + Preview + {:else} + / + {/if} +
+ +
@@ -125,7 +129,7 @@ {/if} {#if error } -
{ error }
+

{ error }

{/if} From e7a643745ce5691c8b37e9e695765aee5170f01a Mon Sep 17 00:00:00 2001 From: Valdo Romao Date: Fri, 5 Nov 2021 15:15:46 +0000 Subject: [PATCH 3/8] Switched to local upload endpont --- src/Iframes/Configuration/Components/Field.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Iframes/Configuration/Components/Field.svelte b/src/Iframes/Configuration/Components/Field.svelte index d4eb99f..1fe3fed 100644 --- a/src/Iframes/Configuration/Components/Field.svelte +++ b/src/Iframes/Configuration/Components/Field.svelte @@ -56,7 +56,7 @@ function uploadFile() { error = ''; - fetch('https://some-api-for-the-upload', { + fetch('http://workadventure.localhost/api/upload-file', { method: 'POST', body: formData }).then(response => response.json()) From a23d1744afd5f68f323fa058fe1dcb09bdeb3eaa Mon Sep 17 00:00:00 2001 From: Valdo Romao Date: Wed, 24 Nov 2021 16:19:29 +0000 Subject: [PATCH 4/8] Added service and store --- .github/workflows/publish.yml | 1 + src/Features/default_api_url.ts | 5 ++ src/Features/properties_templates.ts | 4 +- .../Configuration/Components/Field.svelte | 75 +++++------------- src/Iframes/Configuration/Stores/form.ts | 76 +++++++++++++++++++ src/Uploader.ts | 65 ++++++++++++++++ test/maps/configuration_logo.json | 10 +++ 7 files changed, 181 insertions(+), 55 deletions(-) create mode 100644 src/Features/default_api_url.ts create mode 100644 src/Iframes/Configuration/Stores/form.ts create mode 100644 src/Uploader.ts diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index 8e97dc1..0e292fc 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -43,6 +43,7 @@ jobs: GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}} CI: true - run: sed -i 's|""|"https://unpkg.com/@workadventure/scripting-api-extra@${{ env.release_tag }}/dist"|g' src/Features/default_assets_url.ts + - run: sed -i 's|http://workadventure.localhost|https://workadventu.re|g' src/Features/default_api_url.ts - run: npm run build --if-present - run: npm run test - run: curl -s https://codecov.io/bash | bash diff --git a/src/Features/default_api_url.ts b/src/Features/default_api_url.ts new file mode 100644 index 0000000..6c9c83f --- /dev/null +++ b/src/Features/default_api_url.ts @@ -0,0 +1,5 @@ +/** + * The base URL for the default API. + * This file is updated dynamically during the package build process. + */ +export const defaultApiUrl = "http://workadventure.localhost/api"; diff --git a/src/Features/properties_templates.ts b/src/Features/properties_templates.ts index 4b9b443..03bcccc 100644 --- a/src/Features/properties_templates.ts +++ b/src/Features/properties_templates.ts @@ -25,6 +25,7 @@ export async function initPropertiesTemplates(): Promise { // Parse the URL of the integrated websites (for example if mustache is used) // Here we want to select the Tiled object layers with the type 'website' and the property 'url' + let promises = [] if (layer.type === "objectgroup") { for (const object of layer.objects) { if (object.type === "website") { @@ -35,7 +36,7 @@ export async function initPropertiesTemplates(): Promise { continue; } const newValue = template.getValue(); - await setWebsiteProperty(object.name, newValue); + promises.push(setWebsiteProperty(object.name, newValue)); template.onChange((newValue) => { setWebsiteProperty(object.name, newValue); @@ -45,6 +46,7 @@ export async function initPropertiesTemplates(): Promise { } } } + await Promise.all(promises); } } diff --git a/src/Iframes/Configuration/Components/Field.svelte b/src/Iframes/Configuration/Components/Field.svelte index 1fe3fed..f932439 100644 --- a/src/Iframes/Configuration/Components/Field.svelte +++ b/src/Iframes/Configuration/Components/Field.svelte @@ -1,7 +1,9 @@ @@ -101,20 +69,20 @@
- {#if showImage} - Preview + {#if $formStore.showImage} + Preview {:else} / {/if}
- +
@@ -128,8 +96,8 @@
{ description }
{/if} -{#if error } -

{ error }

+{#if $formStore.error } +

{ $formStore.error }

{/if}