Added button to show the copyright info of the map

front/dist/resources/logos/gray-noncopy.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="196" height="196" style="enable-background:new 0 0 196 196;">
+<circle cx="98" cy="98" r="98" fill="#808080"/>
+<circle cx="98" cy="98" r="78" fill="#fff"/>
+<circle cx="98" cy="98" r="55" fill="#808080"/>
+<circle cx="98" cy="98" r="30" fill="#fff"/>
+<rect width="31" height="25" x="123" y="85" fill="#fff"/>
+<rect width="20.5" height="100" transform="matrix(1,1,-1,1,137.75,37.75)" fill="#fff"/>
+<rect width="17.5" height="120" transform="matrix(1,1,-1,1,149.25,29.25)" fill="#808080"/>
+</svg>

front/dist/resources/logos/green_copyright.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="197" height="197" style="enable-background:new 0 0 197 197;">
+<circle cx="98" cy="98" r="88" fill="#fff" stroke="#0FAD2C" stroke-width="20"/>
+<path d="M152.5,111.4a55.3,55.3 0 1 1 0-25h-26a30,30 0 1 0 0,25z" fill="#0FAD2C"/>
+</svg>

front/dist/resources/style/style.css

@@ -110,6 +110,22 @@ video#myCamVideo{
     width: 450px;
     height: 150px;
 }
+
+/* override copyright btn*/
+.btn-cam-action#btn-copy-action {
+    position: absolute;
+    bottom: 0px;
+    left: 350px;
+    width: 150px;
+    height: 150px;
+}
+
+.copyright {
+    height: 100vh;
+    padding:1px;
+    background: #fff;
+}
+
 /*btn animation*/
 .btn-cam-action div{
     cursor: pointer;
@@ -150,6 +166,11 @@ video#myCamVideo{
     transition: all .2s;
     right: 224px;
 }
+.btn-copy{
+    transition: all .3s;
+    right: 44px;
+    opacity: 1;
+}
 /*.btn-call{
     transition: all .1s;
     left: 0px;

front/src/Phaser/Game/GameScene.ts

@@ -61,6 +61,7 @@ import {Room} from "../../Connexion/Room";
 import {jitsiFactory} from "../../WebRtc/JitsiFactory";
 import {urlManager} from "../../Url/UrlManager";
 import {audioManager} from "../../WebRtc/AudioManager";
+import {copyrightInfo} from "../../WebRtc/CopyrightInfo";
 import {PresentationModeIcon} from "../Components/PresentationModeIcon";
 import {ChatModeIcon} from "../Components/ChatModeIcon";
 import {OpenChatIcon, openChatIconName} from "../Components/OpenChatIcon";
@@ -433,6 +434,8 @@ export class GameScene extends ResizableScene implements CenterListener {
             }, 500);
         }
 
+        copyrightInfo.initCopyrightInfo(mapDirUrl);
+
         this.createPromiseResolve();
 
         this.userInputManager.spaceEvent(() => {

front/src/WebRtc/CopyrightInfo.ts

@@ -0,0 +1,101 @@
+import {HtmlUtils} from "./HtmlUtils";
+import { coWebsiteManager } from "./CoWebsiteManager";
+
+
+// Panel, dass die Copyright.txt anzeigt.
+class CopyrightInfo {
+    
+   
+    /**
+     * Quickly going in and out of an iframe trigger can create conflicts between the iframe states.
+     * So we use this promise to queue up every cowebsite state transition
+     */
+    private copyBtn: HTMLDivElement; 
+    private copyrightClose: HTMLImageElement;
+    private copyright: HTMLImageElement;
+    private copyrightTxt: string | null;
+    private copyBtnAction: HTMLDivElement;
+    
+    constructor() {
+        this.copyrightTxt = null;
+        this.copyBtnAction = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('btn-copy-action');
+        this.copyBtn = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('btn-copy');
+        this.copyright = HtmlUtils.getElementByIdOrFail<HTMLImageElement>('copyright');
+        this.copyrightClose = HtmlUtils.getElementByIdOrFail<HTMLImageElement>('copyright-close');
+
+        this.copyrightClose.style.display = "none";
+        this.copyrightClose.addEventListener('click', (e: MouseEvent) => {
+            e.preventDefault();
+            this.disableCopyright();
+            //update tracking
+        });
+        this.copyright.addEventListener('click', (e: MouseEvent) => {
+            e.preventDefault();
+            this.enableCopyright();
+            //update tracking
+        });
+    }
+
+    private showButtons(show : boolean) {
+        this.copyBtnAction.style.display = show ? "block" : "none";
+    }
+
+    private enableCopyright() {
+        this.copyrightClose.style.display = "block";
+        this.copyright.style.display = "none";
+        this.copyBtn.classList.add("enabled");
+        coWebsiteManager.insertCoWebsite(this.loadCoWebsite.bind(this));
+    }
+
+    private disableCopyright() {
+        this.copyrightClose.style.display = "none";
+        this.copyright.style.display = "block";
+        this.copyBtn.classList.remove("enabled");
+        coWebsiteManager.closeCoWebsite();
+    }
+
+    public async initCopyrightInfo(mapurl:string) : Promise<void>{
+        // try to find copyright
+        console.log("CopyrightInfo.init: mapurl=" + mapurl);
+        const copyrighturl = mapurl + '/' + "COPYRIGHT";
+        console.log("infered Copyright url=" + copyrighturl);
+        try{
+            this.copyrightTxt = await this.loadCopyrightTxt(copyrighturl);
+            this.showButtons(true);
+        }
+        catch
+        {
+            this.copyrightTxt = null;
+            this.showButtons(false);
+        }
+    }
+
+    private loadCopyrightTxt(copyrighturl: string) : Promise<string> {
+        return new Promise((resolve, reject)=>{
+            const xhr = new XMLHttpRequest();
+            xhr.open('GET', copyrighturl, true);
+            xhr.onerror = reject;
+            xhr.ontimeout = reject;
+            xhr.onload = function(ev :ProgressEvent<EventTarget>) {
+                if(xhr.status != 200){
+                    reject();        }
+                const copyrightTxt = this['responseText'];    
+                resolve(copyrightTxt);
+            }
+
+            xhr.send();
+        });
+    }
+
+    private static escapeTags(txt: string): string   {
+        return txt.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    }
+
+    private loadCoWebsite(coDiv: HTMLDivElement) : Promise<void> {
+        // add pre-loaded text
+        coDiv.innerHTML= "<div class=\"copyright\"><pre>" + CopyrightInfo.escapeTags(this.copyrightTxt ?? '') + "</pre></div>";
+        return Promise.resolve();
+    }
+}
+
+export const copyrightInfo = new CopyrightInfo();

front/src/index.html

@@ -40,6 +40,12 @@
                     </aside>
                     <div id="chat-mode" class="chat-mode three-col" style="display: none;">
                     </div>
+                    <div id="btn-copy-action" class="btn-cam-action">
+                        <div id="btn-copy" class="btn-copy">
+                            <img id="copyright" src="resources/logos/green_copyright.svg">
+                            <img id="copyright-close" src="resources/logos/gray-noncopy.svg">
+                        </div>
+                    </div>
                     <div id="activeCam" class="activeCam">
                         <div id="div-myCamVideo" class="video-container">
                             <video id="myCamVideo" autoplay muted></video>