_Bastler/partey_workadventure
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge remote-tracking branch 'upstream/develop' into electron

Browse Source
This commit is contained in:
Anton Bracke
2022-03-03 14:43:33 +01:00
parent af15490dd1 1181187271
commit 4535a8ae96
36 changed files with 271 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/Dockerfile
+20 -23
View File
@@ -1,31 +1,28 @@
# protobuf build
FROM node:14.18.2-buster-slim@sha256:20bedf0c09de887379e59a41c04284974f5fb529cf0e13aab613473ce298da3d as builder
WORKDIR /usr/src/messages
WORKDIR /usr/src
COPY messages/yarn.lock messages/package.json ./
RUN yarn install
COPY messages .
RUN yarn install && yarn ts-proto
RUN yarn ts-proto
WORKDIR /usr/src/front
# typescript build
FROM node:14.18.2-buster-slim@sha256:20bedf0c09de887379e59a41c04284974f5fb529cf0e13aab613473ce298da3d as builder2
WORKDIR /usr/src
COPY front/yarn.lock front/package.json ./
RUN yarn install
COPY front .
# move messages to front
RUN cp -r ../messages/ts-proto-generated/protos/* src/Messages/ts-proto-generated
COPY --from=builder /usr/src/ts-proto-generated/protos src/Messages/ts-proto-generated
RUN sed -i 's/import { Observable } from "rxjs";/import type { Observable } from "rxjs";/g' src/Messages/ts-proto-generated/messages.ts
RUN cp -r ../messages/JsonMessages/* src/Messages/JsonMessages
COPY --from=builder /usr/src/JsonMessages src/Messages/JsonMessages
RUN yarn run typesafe-i18n && yarn run build-iframe-api && yarn build
RUN yarn install && yarn run typesafe-i18n && yarn run build-iframe-api && yarn build
# final production image
FROM nginx:1.21.6-alpine
FROM thecodingmachine/nodejs:14-apache
COPY front/nginx.conf /etc/nginx/conf.d/default.conf
COPY front/templater.sh /
COPY --from=builder2 /usr/src/dist /usr/share/nginx/html
COPY --from=builder --chown=docker:docker /usr/src/front/dist dist
COPY front/templater.sh .
USER root
RUN DEBIAN_FRONTEND=noninteractive apt-get update \
&& apt-get install -y \
gettext-base \
&& rm -rf /var/lib/apt/lists/*
USER docker
ENV STARTUP_COMMAND_0="./templater.sh"
ENV STARTUP_COMMAND_1="envsubst < dist/env-config.template.js > dist/env-config.js"
ENV APACHE_DOCUMENT_ROOT=dist/
EXPOSE 80
CMD ["/bin/sh", "-c", "/templater.sh && envsubst < /usr/share/nginx/html/env-config.template.js > /usr/share/nginx/html/env-config.js && exec nginx -g 'daemon off;'"]
front/nginx.conf
+51
View File
@@ -0,0 +1,51 @@
server {
listen 80;
listen [::]:80;
server_name localhost;
access_log off;
gzip on;
gzip_comp_level 6;
gzip_min_length 1000;
gzip_proxied any;
gzip_disable "msie6";
gzip_types
application/atom+xml
application/geo+json
application/javascript
application/x-javascript
application/json
application/ld+json
application/manifest+json
application/rdf+xml
application/rss+xml
application/xhtml+xml
application/xml
font/eot
font/otf
font/ttf
image/svg+xml
text/css
text/javascript
text/plain
text/xml;
# serve static assets (that have a cache busting hash) with an efficient cache policy
location /assets {
root /usr/share/nginx/html;
expires 1y;
add_header Cache-Control "public";
}
location / {
root /usr/share/nginx/html;
index index.html;
rewrite ^/register/ /index.html break;
rewrite ^/login /index.html break;
rewrite ^/jwt /index.html break;
}
location ~ ^/[@_]/ {
try_files $uri $uri/ /index.html;
}
}
front/public/resources/logos/jitsi.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

front/public/resources/logos/meet.svg
-49
View File
@@ -1,49 +0,0 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="452.388px" height="452.388px" viewBox="0 0 452.388 452.388" style="enable-background:new 0 0 452.388 452.388;"
xml:space="preserve">
<g>
<g id="Layer_8_38_">
<path d="M441.677,43.643H10.687C4.785,43.643,0,48.427,0,54.329v297.425c0,5.898,4.785,10.676,10.687,10.676h162.069v25.631
c0,0.38,0.074,0.722,0.112,1.089h-23.257c-5.407,0-9.796,4.389-9.796,9.795c0,5.408,4.389,9.801,9.796,9.801h158.506
c5.406,0,9.795-4.389,9.795-9.801c0-5.406-4.389-9.795-9.795-9.795h-23.256c0.032-0.355,0.115-0.709,0.115-1.089V362.43H441.7
c5.898,0,10.688-4.782,10.688-10.676V54.329C452.37,48.427,447.589,43.643,441.677,43.643z M422.089,305.133
c0,5.903-4.784,10.687-10.683,10.687H40.96c-5.898,0-10.684-4.783-10.684-10.687V79.615c0-5.898,4.786-10.684,10.684-10.684
h370.446c5.898,0,10.683,4.785,10.683,10.684V305.133z M303.942,290.648H154.025c0-29.872,17.472-55.661,42.753-67.706
c-15.987-10.501-26.546-28.571-26.546-49.13c0-32.449,26.306-58.755,58.755-58.755c32.448,0,58.753,26.307,58.753,58.755
c0,20.553-10.562,38.629-26.545,49.13C286.475,234.987,303.942,260.781,303.942,290.648z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.6 KiB

front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte
+37 -3
View File
@@ -21,7 +21,7 @@
onMount(() => {
icon.src = isJitsi
? "/resources/logos/meet.svg"
? "/resources/logos/jitsi.png"
: `${ICON_URL}/icon?url=${coWebsite.getUrl().hostname}&size=64..96..256&fallback_icon_color=14304c`;
icon.alt = coWebsite.getUrl().hostname;
icon.onload = () => {
@@ -188,10 +188,16 @@
/>
</rect>
</svg>
<!-- TODO use trigger message property -->
<div class="cowebsite-hover" class:hide={!isJitsi} style="width: max-content;">
<p>Open / Close Jitsi meeting!</p>
</div>
</div>
<style lang="scss">
.cowebsite-thumbnail {
cursor: url("../../../style/images/cursor_pointer.png"), pointer;
position: relative;
padding: 0;
background-color: rgba(#000000, 0.6);
@@ -236,6 +242,11 @@
height: 40px;
}
.cowebsite-hover {
top: -4px;
left: 55px;
}
animation: shake 0.35s ease-in-out;
}
@@ -315,10 +326,33 @@
}
&.jitsi {
filter: invert(100%);
-webkit-filter: invert(100%);
padding: 7px;
}
}
&:hover {
.cowebsite-hover {
display: block;
width: max-content !important;
}
}
.cowebsite-hover {
display: none;
position: absolute;
background-color: rgba(0, 0, 0, 0.6);
top: -40px;
left: -4px;
width: 0 !important;
min-height: 20px;
transition: all 0.2s ease;
overflow: hidden;
color: white;
padding: 4px;
border-radius: 4px;
p {
margin-bottom: 0;
}
}
}
</style>
front/src/Components/EmbedScreens/CoWebsitesContainer.svelte
+1 -2
View File
@@ -24,6 +24,7 @@
left: 2%;
overflow-x: auto;
overflow-y: hidden;
overflow: visible;
&.vertical {
height: auto !important;
@@ -31,8 +32,6 @@
bottom: auto !important;
left: auto !important;
position: relative;
overflow-x: hidden;
overflow-y: auto;
flex-direction: column;
align-items: center;
padding-top: 4px;
front/src/Components/Menu/MenuIcon.svelte
+8 -8
View File
@@ -61,15 +61,15 @@
on:dragstart|preventDefault={noDrag}
on:click|preventDefault={showMenu}
/>
<img
src={logoTalk}
alt={$LL.menu.icon.open.chat()}
class="nes-pointer"
draggable="false"
on:dragstart|preventDefault={noDrag}
on:click|preventDefault={showChat}
/>
{/if}
<img
src={logoTalk}
alt={$LL.menu.icon.open.chat()}
class="nes-pointer"
draggable="false"
on:dragstart|preventDefault={noDrag}
on:click|preventDefault={showChat}
/>
</main>
<style lang="scss">
front/src/Components/Video/ScreenSharingMediaBox.svelte
+4 -2
View File
@@ -4,13 +4,15 @@
import type { Streamable } from "../../Stores/StreamableCollectionStore";
import type { ScreenSharingPeer } from "../../WebRtc/ScreenSharingPeer";
import { getColorByString, srcObject } from "./utils";
import { getColorByString, srcObject, getTextColorByBackgroundColor } from "./utils";
export let clickable = false;
export let peer: ScreenSharingPeer;
let streamStore = peer.streamStore;
let name = peer.userName;
let backGroundColor = getColorByString(peer.userName);
let textColor = getTextColorByBackgroundColor(backGroundColor);
let statusStore = peer.statusStore;
let embedScreen: EmbedScreen;
@@ -32,7 +34,7 @@
{/if}
{#if $streamStore !== null}
<i class="container">
<span style="background-color: {getColorByString(name)};">{name}</span>
<span style="background-color: {backGroundColor}; color: {textColor};">{name}</span>
</i>
<!-- svelte-ignore a11y-media-has-caption -->
<video
front/src/Components/Video/VideoMediaBox.svelte
+4 -2
View File
@@ -5,7 +5,7 @@
import reportImg from "./images/report.svg";
import blockSignImg from "./images/blockSign.svg";
import { showReportScreenStore } from "../../Stores/ShowReportScreenStore";
import { getColorByString, srcObject } from "./utils";
import { getColorByString, getTextColorByBackgroundColor, srcObject } from "./utils";
import { highlightedEmbedScreen } from "../../Stores/EmbedScreensStore";
import type { EmbedScreen } from "../../Stores/EmbedScreensStore";
import type { Streamable } from "../../Stores/StreamableCollectionStore";
@@ -20,6 +20,8 @@
let streamStore = peer.streamStore;
let volumeStore = peer.volumeStore;
let name = peer.userName;
let backGroundColor = getColorByString(peer.userName);
let textColor = getTextColorByBackgroundColor(backGroundColor);
let statusStore = peer.statusStore;
let constraintStore = peer.constraintsStore;
@@ -65,7 +67,7 @@
{/if}
<!-- {#if !$constraintStore || $constraintStore.video === false} -->
<i class="container">
<span style="background-color: {getColorByString(name)};">{name}</span>
<span style="background-color: {backGroundColor}; color: {textColor};">{name}</span>
</i>
<div class="woka-icon {($constraintStore && $constraintStore.video !== false) || minimized ? '' : 'no-video'}">
<Woka userId={peer.userId} placeholderSrc={""} />
front/src/Components/Video/utils.ts
+18
View File
@@ -18,6 +18,24 @@ export function getColorByString(str: string): string | null {
return color;
}
/**
* @param color: string
* @return string
*/
export function getTextColorByBackgroundColor(color: string | null): string {
if (!color) {
return "white";
}
const rgb = color.slice(1);
const brightness = Math.round(
(parseInt(rgb[0] + rgb[1], 16) * 299 +
parseInt(rgb[2] + rgb[3], 16) * 587 +
parseInt(rgb[4] + rgb[5], 16) * 114) /
1000
);
return brightness > 125 ? "black" : "white";
}
export function srcObject(node: HTMLVideoElement, stream: MediaStream | null) {
node.srcObject = stream;
return {
front/src/Components/WarningContainer/WarningContainer.svelte
+4 -7
View File
@@ -4,36 +4,33 @@
import { ADMIN_URL } from "../../Enum/EnvironmentVariable";
import LL from "../../i18n/i18n-svelte";
const upgradeLink = ADMIN_URL + "/pricing";
const registerLink = ADMIN_URL + "/second-step-register";
</script>
<main class="warningMain" transition:fly={{ y: -200, duration: 500 }}>
{#if $userIsAdminStore}
<h2>{$LL.warning.title()}</h2>
<p>
{$LL.warning.content({ upgradeLink })}
</p>
<p>{@html $LL.warning.content()}</p>
{:else if $limitMapStore}
<p>
This map is available for 2 days. You can register your domain <a href={registerLink}>here</a>!
</p>
{:else}
<h2>{$LL.warning.title()}</h2>
<p>{$LL.warning.limit()}</p>
<p>{@html $LL.warning.content()}</p>
{/if}
</main>
<style lang="scss">
main.warningMain {
pointer-events: auto;
width: 80%;
width: 100%;
background-color: #f9e81e;
color: #14304c;
text-align: center;
position: absolute;
top: 4%;
top: 0;
left: 0;
right: 0;
margin-left: auto;
front/src/Connexion/ConnectionManager.ts
+31 -3
View File
@@ -16,6 +16,10 @@ import { isRegisterData } from "../Messages/JsonMessages/RegisterData";
import { isAdminApiData } from "../Messages/JsonMessages/AdminApiData";
import { limitMapStore } from "../Stores/GameStore";
import { showLimitRoomModalStore } from "../Stores/ModalStore";
import { gameManager } from "../Phaser/Game/GameManager";
import { locales } from "../i18n/i18n-util";
import type { Locales } from "../i18n/i18n-types";
import { setCurrentLocale } from "../i18n/locales";
class ConnectionManager {
private localUser!: LocalUser;
@@ -342,9 +346,12 @@ class ConnectionManager {
throw new Error("No Auth code provided");
}
}
const { authToken, userUuid, textures, email } = await Axios.get(`${PUSHER_URL}/login-callback`, {
params: { code, nonce, token, playUri: this.currentRoom?.key },
}).then((res) => {
const { authToken, userUuid, textures, email, username, locale } = await Axios.get(
`${PUSHER_URL}/login-callback`,
{
params: { code, nonce, token, playUri: this.currentRoom?.key },
}
).then((res) => {
return res.data;
});
localUserStore.setAuthToken(authToken);
@@ -352,6 +359,27 @@ class ConnectionManager {
localUserStore.saveUser(this.localUser);
this.authToken = authToken;
if (username) {
gameManager.setPlayerName(username);
}
if (locale) {
try {
if (locales.indexOf(locale) == -1) {
locales.forEach((l) => {
if (l.startsWith(locale.split("-")[0])) {
setCurrentLocale(l);
return;
}
});
} else {
setCurrentLocale(locale as Locales);
}
} catch (err) {
console.warn("Could not set locale", err);
}
}
//user connected, set connected store for menu at true
userIsConnected.set(true);
}
front/src/Phaser/Entity/Character.ts
+1 -1
View File
@@ -97,7 +97,7 @@ export abstract class Character extends Container implements OutlineableInterfac
fontFamily: '"Press Start 2P"',
fontSize: "8px",
strokeThickness: 2,
stroke: "gray",
stroke: "#14304C",
metrics: {
ascent: 20,
descent: 10,
front/src/Phaser/Game/ActivatablesManager.ts
+1 -1
View File
@@ -13,7 +13,7 @@ export class ActivatablesManager {
private canSelectByDistance: boolean = true;
private readonly outlineColor = 0xffff00;
private readonly outlineColor = 0xf9e81e;
private readonly directionalActivationPositionShift = 50;
constructor(currentPlayer: Player) {
front/src/Phaser/Game/GameScene.ts
+5 -1
View File
@@ -1220,6 +1220,8 @@ ${escapedMessage}
openCoWebsite.closable ?? true
);
coWebsiteManager.addCoWebsiteToStore(coWebsite, openCoWebsite.position);
if (openCoWebsite.lazy === undefined || !openCoWebsite.lazy) {
await coWebsiteManager.loadCoWebsite(coWebsite);
}
@@ -1596,6 +1598,8 @@ ${escapedMessage}
}
})
.catch((reason) => console.warn(reason));
urlManager.clearHashParameter();
} catch (err) {
console.warn(`Cannot proceed with moveTo command:\n\t-> ${err}`);
}
@@ -1715,7 +1719,7 @@ ${escapedMessage}
}
});
this.CurrentPlayer.on(Phaser.Input.Events.POINTER_OVER, (pointer: Phaser.Input.Pointer) => {
this.CurrentPlayer.pointerOverOutline(0x00ffff);
this.CurrentPlayer.pointerOverOutline(0x365dff);
});
this.CurrentPlayer.on(Phaser.Input.Events.POINTER_OUT, (pointer: Phaser.Input.Pointer) => {
this.CurrentPlayer.pointerOutOutline();
front/src/Phaser/Items/ActionableItem.ts
+1 -1
View File
@@ -56,7 +56,7 @@ export class ActionableItem implements ActivatableInterface {
this.getOutlinePlugin()?.add(this.sprite, {
thickness: 2,
outlineColor: 0xffff00,
outlineColor: 0xf9e81e,
});
}
front/src/Url/UrlManager.ts
+4
View File
@@ -58,6 +58,10 @@ class UrlManager {
return this.getHashParameters()[name];
}
public clearHashParameter(): void {
window.location.hash = "";
}
private getHashParameters(): Record<string, string> {
return window.location.hash
.substring(1)
front/src/i18n/de-DE/warning.ts
+4 -2
View File
@@ -1,9 +1,11 @@
import type { Translation } from "../i18n-types";
import { ADMIN_URL } from "../../Enum/EnvironmentVariable";
const upgradeLink = ADMIN_URL + "/pricing";
const warning: NonNullable<Translation["warning"]> = {
title: "Warnung!",
content:
'Diese Welt erreicht bald die maximale Kapazität. Du kannst die Kapazität <a href={upgradeLink} target="_blank">hier</a> erhöhen',
content: `Diese Welt erreicht bald die maximale Kapazität. Du kannst die Kapazität <a href="${upgradeLink}" target="_blank">hier</a> erhöhen`,
limit: "Diese Welt erreicht bald die maximale Kapazität!",
accessDenied: {
camera: "Zugriff auf die Kamera verweigert. Hier klicken um deine Browser Berechtigungen zu prüfen.",
front/src/i18n/en-US/warning.ts
+4 -2
View File
@@ -1,9 +1,11 @@
import type { BaseTranslation } from "../i18n-types";
import { ADMIN_URL } from "../../Enum/EnvironmentVariable";
const upgradeLink = ADMIN_URL + "/pricing";
const warning: BaseTranslation = {
title: "Warning!",
content:
'This world is close to its limit!. You can upgrade its capacity <a href={upgradeLink} target="_blank">here</a>',
content: `This world is close to its limit!. You can upgrade its capacity <a href="${upgradeLink}" target="_blank">here</a>`,
limit: "This world is close to its limit!",
accessDenied: {
camera: "Camera access denied. Click here and check your browser permissions.",
front/src/i18n/fr-FR/warning.ts
+4 -2
View File
@@ -1,9 +1,11 @@
import type { Translation } from "../i18n-types";
import { ADMIN_URL } from "../../Enum/EnvironmentVariable";
const upgradeLink = ADMIN_URL + "/pricing";
const warning: NonNullable<Translation["warning"]> = {
title: "Attention!",
content:
'Ce monde est proche de sa limite ! Vous pouvez améliorer sa capacité <a href={upgradeLink} target="_blank">içi</a>',
content: `Ce monde est proche de sa limite ! Vous pouvez améliorer sa capacité <a href="${upgradeLink}" target="_blank">içi</a>`,
limit: "Ce monde est proche de ses limites!",
accessDenied: {
camera: "Accès à la caméra refusé. Cliquez ici et vérifiez les autorisations de votre navigateur.",
front/templater.sh
+4 -4
View File
@@ -1,7 +1,7 @@
#!/usr/bin/env bash
#!/usr/bin/env sh
set -x
set -o nounset errexit
index_file=dist/index.html
index_file=/usr/share/nginx/html/index.html
tmp_trackcodefile=/tmp/trackcode
# To inject tracking code, you have two choices:
@@ -10,12 +10,12 @@ tmp_trackcodefile=/tmp/trackcode
# The ANALYTICS_CODE_PATH is the location of a file inside the container
ANALYTICS_CODE_PATH="${ANALYTICS_CODE_PATH:-dist/ga.html.tmpl}"
if [[ "${INSERT_ANALYTICS:-NO}" == "NO" ]]; then
if [ "${INSERT_ANALYTICS:-NO}" = "NO" ]; then
echo "" > "${tmp_trackcodefile}"
fi
# Automatically insert analytics if GA_TRACKING_ID is set
if [[ "${GA_TRACKING_ID:-}" != "" || "${INSERT_ANALYTICS:-NO}" != "NO" ]]; then
if [ "${GA_TRACKING_ID:-}" != "" ] || [ "${INSERT_ANALYTICS:-NO}" != "NO" ]; then
echo "Templating code from ${ANALYTICS_CODE_PATH}"
sed "s#<!-- TRACKING NUMBER -->#${GA_TRACKING_ID:-}#g" "${ANALYTICS_CODE_PATH}" > "$tmp_trackcodefile"
fi
front/yarn.lock
+1 -6
View File
@@ -475,12 +475,7 @@ ansi-escapes@^4.3.0:
dependencies:
type-fest "^0.21.3"
ansi-regex@^5.0.0:
version "5.0.0"
resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75"
integrity sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==
ansi-regex@^5.0.1:
ansi-regex@^5.0.0, ansi-regex@^5.0.1:
version "5.0.1"
resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==