Removing website container entirely from project (as it is specific to the WorkAdventure company and not to the WorkAdventure self-installed project)
23
.github/workflows/build-and-deploy.yml
vendored
@ -102,29 +102,6 @@ jobs:
|
||||
tags: ${{ env.GITHUB_REF_SLUG }}
|
||||
add_git_labels: true
|
||||
|
||||
build-website:
|
||||
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v2
|
||||
|
||||
# Create a slugified value of the branch
|
||||
- uses: rlespinasse/github-slug-action@3.1.0
|
||||
|
||||
- name: "Build and push back image"
|
||||
uses: docker/build-push-action@v1
|
||||
with:
|
||||
dockerfile: website/Dockerfile
|
||||
path: website/
|
||||
username: ${{ secrets.DOCKER_USERNAME }}
|
||||
password: ${{ secrets.DOCKER_PASSWORD }}
|
||||
repository: thecodingmachine/workadventure-website
|
||||
tags: ${{ env.GITHUB_REF_SLUG }}
|
||||
add_git_labels: true
|
||||
|
||||
build-maps:
|
||||
|
||||
runs-on: ubuntu-latest
|
||||
|
@ -100,17 +100,6 @@
|
||||
},
|
||||
"ports": [80]
|
||||
},
|
||||
"website": {
|
||||
"image": "thecodingmachine/workadventure-website:"+tag,
|
||||
"host": {
|
||||
"url": url,
|
||||
"https": "enable"
|
||||
},
|
||||
"ports": [80],
|
||||
"env": {
|
||||
"GAME_URL": "https://play."+url
|
||||
}
|
||||
}
|
||||
},
|
||||
"config": {
|
||||
"https": {
|
||||
|
@ -135,23 +135,6 @@ services:
|
||||
- "traefik.http.routers.uploader-ssl.tls=true"
|
||||
- "traefik.http.routers.uploader-ssl.service=uploader"
|
||||
|
||||
website:
|
||||
image: thecodingmachine/nodejs:12-apache
|
||||
environment:
|
||||
STARTUP_COMMAND_1: npm install
|
||||
STARTUP_COMMAND_2: npm run watch &
|
||||
APACHE_DOCUMENT_ROOT: dist/
|
||||
volumes:
|
||||
- ./website:/var/www/html
|
||||
labels:
|
||||
- "traefik.http.routers.website.rule=Host(`workadventure.localhost`)"
|
||||
- "traefik.http.routers.website.entryPoints=web"
|
||||
- "traefik.http.services.website.loadbalancer.server.port=80"
|
||||
- "traefik.http.routers.website-ssl.rule=Host(`workadventure.localhost`)"
|
||||
- "traefik.http.routers.website-ssl.entryPoints=websecure"
|
||||
- "traefik.http.routers.website-ssl.tls=true"
|
||||
- "traefik.http.routers.website-ssl.service=website"
|
||||
|
||||
messages:
|
||||
#image: thecodingmachine/nodejs:14
|
||||
image: thecodingmachine/workadventure-back-base:latest
|
||||
|
5
website/.gitignore
vendored
@ -1,5 +0,0 @@
|
||||
/node_modules/
|
||||
/dist/bundle.js
|
||||
/dist/main.css
|
||||
/dist/fonts
|
||||
/dist/images
|
@ -1,9 +0,0 @@
|
||||
# we are rebuilding on each deploy to cope with the GAME_URL environment URL
|
||||
FROM thecodingmachine/nodejs:12-apache
|
||||
|
||||
COPY --chown=docker:docker . .
|
||||
RUN yarn install
|
||||
|
||||
ENV NODE_ENV=production
|
||||
ENV STARTUP_COMMAND_1="yarn run build"
|
||||
ENV APACHE_DOCUMENT_ROOT=dist/
|
@ -1,45 +0,0 @@
|
||||
Basic Webpack config for simple website.
|
||||
|
||||
Install all packages:
|
||||
```
|
||||
$ npm install
|
||||
```
|
||||
|
||||
Run webpack
|
||||
```
|
||||
$ npm run build
|
||||
```
|
||||
|
||||
Done! Open index.html in browser for a cat image.
|
||||
|
||||
----
|
||||
|
||||
### Notice about production mode and postcss.config.js
|
||||
In *postcss.config.js* there is a check for **process.env.NODE_ENV** variable. The thing is even if you set Webpack mode to production it *won't* automatically change Node environment variable.
|
||||
|
||||
The simplest way to configure this is to install *cross-env* package:
|
||||
```
|
||||
$ npm install --save-dev cross-env
|
||||
```
|
||||
|
||||
Then just add another npm script in *package.json* for production mode:
|
||||
```javascript
|
||||
"scripts": {
|
||||
"build": "webpack --config webpack.config.js",
|
||||
"build-production": "cross-env NODE_ENV=production webpack --config webpack.config.js"
|
||||
}
|
||||
```
|
||||
|
||||
Now when you run `npm run build-production` the *process.env.NODE_ENV* variable will be production and postcss.config.js check is going to work:
|
||||
```javascript
|
||||
if(process.env.NODE_ENV === 'production') {
|
||||
module.exports = {
|
||||
plugins: [
|
||||
require('autoprefixer'),
|
||||
require('cssnano')
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
[From Webpack documentation](https://webpack.js.org/guides/production/):
|
||||
Technically, *NODE_ENV* is a system environment variable that Node.js exposes into running scripts. It is used by convention to determine dev-vs-prod behavior by server tools, build scripts, and client-side libraries. Contrary to expectations, *process.env.NODE_ENV* **is not set to "production"** within the build script webpack.config.js. Thus, conditionals like `process.env.NODE_ENV === 'production' ? '[name].[hash].bundle.js' : '[name].bundle.js'` within webpack configurations do not work as expected.
|
201
website/dist/choose-map.html
vendored
@ -1,201 +0,0 @@
|
||||
<!doctype html>
|
||||
<html class="no-js" lang="">
|
||||
|
||||
<head>
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-10196481-11"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'UA-10196481-11');
|
||||
</script>
|
||||
<link rel="apple-touch-icon" sizes="57x57" href="static/images/favicons/apple-icon-57x57.png">
|
||||
<link rel="apple-touch-icon" sizes="60x60" href="static/images/favicons/apple-icon-60x60.png">
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="static/images/favicons/apple-icon-72x72.png">
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="static/images/favicons/apple-icon-76x76.png">
|
||||
<link rel="apple-touch-icon" sizes="114x114" href="static/images/favicons/apple-icon-114x114.png">
|
||||
<link rel="apple-touch-icon" sizes="120x120" href="static/images/favicons/apple-icon-120x120.png">
|
||||
<link rel="apple-touch-icon" sizes="144x144" href="static/images/favicons/apple-icon-144x144.png">
|
||||
<link rel="apple-touch-icon" sizes="152x152" href="static/images/favicons/apple-icon-152x152.png">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="static/images/favicons/apple-icon-180x180.png">
|
||||
<link rel="icon" type="image/png" sizes="192x192" href="static/images/favicons/android-icon-192x192.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="static/images/favicons/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="static/images/favicons/favicon-96x96.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="static/images/favicons/favicon-16x16.png">
|
||||
<link rel="manifest" href="static/images/favicons/manifest.json">
|
||||
<meta name="msapplication-TileColor" content="#000000">
|
||||
<meta name="msapplication-TileImage" content="static/images/favicons/ms-icon-144x144.png">
|
||||
<meta name="theme-color" content="#000000">
|
||||
<meta charset="utf-8">
|
||||
<title>Choose map - WorkAdventu.re</title>
|
||||
|
||||
<link rel="stylesheet" href="main.css">
|
||||
<script src="bundle.js"></script>
|
||||
</head>
|
||||
|
||||
<body class="choose-map">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<a href="/" class="d-block mt-3 pixel-text">
|
||||
<< BACK TO HOMEPAGE
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-fluid container-lg section pt-5">
|
||||
<h1 class="text-center pixel-title">CHOOSE YOUR MAP !</h1>
|
||||
<div class="row">
|
||||
<div class="col text-center">
|
||||
<p>Pick a map that suits your mood! If you don't find what you need, you can always <a href="create-map.html">CREATE YOUR OWN MAP</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row no-gutters justify-content-center">
|
||||
<div class="col-12 col-sm-6 col-md-4">
|
||||
<div class="map-item" data-url="npeguin.github.io/skapa-map/map.json" id="map_1">
|
||||
<img src="static/images/maps/creative.png">
|
||||
<p>Need some inspiration? Enter our CREATIVE SPACE !</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-md-4">
|
||||
<div class="map-item" data-url="npeguin.github.io/pub-map/map.json" id="map_2">
|
||||
<img src="static/images/maps/pub.png">
|
||||
<p>Too late for working ? Just GO TO THE PUB !</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-md-4">
|
||||
<div class="map-item" data-url="npeguin.github.io/office-map/map.json" id="map_3">
|
||||
<img src="static/images/maps/office.png">
|
||||
<p>Want to try a SIMPLE OFFICE map ?</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-md-4">
|
||||
<div class="map-item" data-url="npeguin.github.io/classroom-map/map.json" id="map_4">
|
||||
<img src="static/images/maps/school.png">
|
||||
<p>Send your kids BACK TO SCHOOL... and rest a bit ;)</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-md-4">
|
||||
<div class="map-item" data-url="npeguin.github.io/tower-map/map.json" id="map_5">
|
||||
<img src="static/images/maps/dungeon.png">
|
||||
<p>Dungeons & Dragons Nostalgia ?</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-md-4">
|
||||
<div class="map-item" data-url="npeguin.github.io/fantasy-map/map.json" id="map_6">
|
||||
<img src="static/images/maps/fantasy.png">
|
||||
<p>Explore a fantasy world !</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 col-md-4">
|
||||
<div class="map-item" data-url="maps.workadventu.re/Floor0/floor0.json" id="map_7">
|
||||
<img src="static/images/maps/tcm.png">
|
||||
<p>Need a bigger Office? Visit us !</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-center">
|
||||
<div class="map-item" data-url="npeguin.github.io/corridor-map/map.json" id="map_8">
|
||||
<img src="static/images/maps/street.png">
|
||||
<p>NO IDEA, or just want to ROAM THE STREETS ? Enter the street map and choose your own path !</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-center">
|
||||
<p>Could not find what you need? No worries, you can always <a href="create-map.html">CREATE YOUR OWN MAP</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-fluid container-lg section text-center" id="map-link-container" style="display: none;">
|
||||
<h1 class="mb-3">YOUR MAP URL IS</h1>
|
||||
<p id="wa-link" class="mb-5"></p>
|
||||
<div class="row align-items-center justify-content-center">
|
||||
<div class="col-sm-8 text-right mb-4 pb-sm-0">
|
||||
<button class="copy-btn" onclick="copyToClipboard()">COPY MAP URL<small> TO CLIPBOARD</small></button>
|
||||
</div>
|
||||
<div class="col-sm-4 text-center text-sm-left">
|
||||
<span id="new-url">to share it !</span>
|
||||
<span id="url-copied"><img src="static/images/check.png">Link copied !</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row start-area justify-content-center mt-5">
|
||||
<div class="col-12 col-sm-1 d-none d-sm-block">
|
||||
<img src="static/images/female-character.gif">
|
||||
</div>
|
||||
<div class="col-12 col-sm-4 mb-3 mb-sm-0">
|
||||
<button id="start-btn" onclick="play()">START <span>>></span></button>
|
||||
</div>
|
||||
<div class="col-12 col-sm-1">
|
||||
<img src="static/images/male-character.gif">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var rand = '';
|
||||
var characters = 'abcdefghijklmnopqrstuvwxyz';
|
||||
var charactersLength = characters.length;
|
||||
for ( var i = 0; i < 9; i++ ) {
|
||||
rand += characters.charAt(Math.floor(Math.random() * charactersLength));
|
||||
}
|
||||
var id = rand.slice(0,3) + '-' + rand.slice(3,6) + '-' + rand.slice(6);
|
||||
var mapLink = document.getElementById('wa-link');
|
||||
var mapLinkContainer = document.getElementById('map-link-container');
|
||||
|
||||
function setSelectedMap(element){
|
||||
var items = document.querySelectorAll(".map-item");
|
||||
[].forEach.call(items, function(el) {
|
||||
el.classList.remove("active");
|
||||
});
|
||||
element.classList.add("active");
|
||||
mapLink.innerText = window.location.protocol + "//play."+window.location.host + "/_/" + id + "/" + element.dataset.url;
|
||||
mapLinkContainer.style.display = 'block';
|
||||
document.getElementById('new-url').style.display = 'inline';
|
||||
document.getElementById('url-copied').style.display = 'none';
|
||||
|
||||
mapLinkContainer.scrollIntoView({
|
||||
block: "start",
|
||||
inline: "nearest",
|
||||
behavior: "smooth"
|
||||
})
|
||||
}
|
||||
|
||||
function copyToClipboard() {
|
||||
var aux = document.createElement("input");
|
||||
aux.setAttribute("value", mapLink.innerHTML);
|
||||
document.body.appendChild(aux);
|
||||
aux.select();
|
||||
document.execCommand("copy");
|
||||
document.body.removeChild(aux);
|
||||
|
||||
document.getElementById('new-url').style.display = 'none';
|
||||
document.getElementById('url-copied').style.display = 'inline';
|
||||
setTimeout(function(){
|
||||
document.getElementById('new-url').style.display = 'inline';
|
||||
document.getElementById('url-copied').style.display = 'none';
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
function play(){
|
||||
window.location.assign(mapLink.innerText);
|
||||
}
|
||||
|
||||
(function() {
|
||||
document.addEventListener('click', function (event) {
|
||||
// If the clicked element doesn't have the right selector, bail
|
||||
var mapItem = event.target.closest('.map-item');
|
||||
if (mapItem === null) {
|
||||
return;
|
||||
}
|
||||
// Don't follow the link
|
||||
event.preventDefault();
|
||||
setSelectedMap(mapItem);
|
||||
}, false);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
240
website/dist/create-map.html
vendored
@ -1,240 +0,0 @@
|
||||
<!doctype html>
|
||||
<html class="no-js" lang="">
|
||||
|
||||
<head>
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-10196481-11"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'UA-10196481-11');
|
||||
</script>
|
||||
<link rel="apple-touch-icon" sizes="57x57" href="static/images/favicons/apple-icon-57x57.png">
|
||||
<link rel="apple-touch-icon" sizes="60x60" href="static/images/favicons/apple-icon-60x60.png">
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="static/images/favicons/apple-icon-72x72.png">
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="static/images/favicons/apple-icon-76x76.png">
|
||||
<link rel="apple-touch-icon" sizes="114x114" href="static/images/favicons/apple-icon-114x114.png">
|
||||
<link rel="apple-touch-icon" sizes="120x120" href="static/images/favicons/apple-icon-120x120.png">
|
||||
<link rel="apple-touch-icon" sizes="144x144" href="static/images/favicons/apple-icon-144x144.png">
|
||||
<link rel="apple-touch-icon" sizes="152x152" href="static/images/favicons/apple-icon-152x152.png">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="static/images/favicons/apple-icon-180x180.png">
|
||||
<link rel="icon" type="image/png" sizes="192x192" href="static/images/favicons/android-icon-192x192.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="static/images/favicons/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="static/images/favicons/favicon-96x96.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="static/images/favicons/favicon-16x16.png">
|
||||
<link rel="manifest" href="static/images/favicons/manifest.json">
|
||||
<meta name="msapplication-TileColor" content="#000000">
|
||||
<meta name="msapplication-TileImage" content="static/images/favicons/ms-icon-144x144.png">
|
||||
<meta name="theme-color" content="#000000">
|
||||
<meta charset="utf-8">
|
||||
<title>Choose map - WorkAdventu.re</title>
|
||||
|
||||
<link rel="stylesheet" href="main.css">
|
||||
<script src="bundle.js"></script>
|
||||
</head>
|
||||
|
||||
<body class="create-map">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<a href="/" class="d-block mt-3 pixel-text">
|
||||
<< BACK TO HOMEPAGE
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-fluid container-lg section pt-5">
|
||||
<h1 class="text-center pixel-title">CREATE YOUR MAP !</h1>
|
||||
<div class="row">
|
||||
<div class="col text-center">
|
||||
<p>Learn how to create your own map! If you want to go the easy route, you can instead <a href="choose-map.html">PICK A PREBUILT MAP</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h2 id="tools-you-will-need" class="pixel-title">Tools you will need</h2>
|
||||
<p>In order to build your own map for WorkAdventure, you need:</p>
|
||||
<ul>
|
||||
<li>the <a href="https://www.mapeditor.org/">Tiled editor</a> software</li>
|
||||
<li>"tiles" (i.e. images) to create your map (this starter kit provides a good default tileset for offices)</li>
|
||||
<li>a web-server to serve your map (this starter kit proposes to use Github static pages as a web-server which is both free and performant)</li>
|
||||
</ul>
|
||||
<p>WorkAdventure comes with a "map starter kit" that we recommend using to start designing your map quickly.</p>
|
||||
|
||||
<h2 id="getting-started" class="pixel-title">Getting started</h2>
|
||||
<p>Start by <a href="https://github.com/join">creating a GitHub account</a> if you don't already have one.</p>
|
||||
<p>Then, go to the <a href="https://github.com/thecodingmachine/workadventure-map-starter-kit">Github map starter kit repository page</a>
|
||||
and click the <strong>"Use this template"</strong> button.</p>
|
||||
<p class="text-center"><img src="docs/use_this_template.png" alt="" style="width: 70%"></p>
|
||||
<p>You will be prompted to enter a repository name for your map.</p>
|
||||
<p class="text-center"><img src="docs/create_repo.png" alt="" style="width: 70%"></p>
|
||||
<p>Be sure to keep the repository "Public".</p>
|
||||
<p>In your newly created repository, click on the <strong>Settings tab</strong> and scroll down to the <strong>GitHub Pages</strong> section.
|
||||
Then select the <strong>gh-pages</strong> branch. It might already be selected, but please be sure to click on it nonetheless (otherwise
|
||||
GitHub will not enable GitHub pages).</p>
|
||||
<p class="text-center"><img src="docs/github_pages.png" alt="" style="width: 70%"></p>
|
||||
<p>Wait a few minutes... Github will deploy a new website with the content of the repository.
|
||||
The address of the website is visible in the "GitHub Pages" section.</p>
|
||||
<p class="text-center"><img src="docs/website_address.png" alt="" style="width: 70%"></p>
|
||||
<p>Click on the link. You should be redirected directly to WorkAdventure, on your map!</p>
|
||||
|
||||
<h2 id="customizing-your-map" class="pixel-title">Customizing your map</h2>
|
||||
<p>Your map is now up and online, but this is still the demo map from the starter kit. You need to customize it.</p>
|
||||
<h3 id="cloning-the-map" class="pixel-title">Cloning the map</h3>
|
||||
<p>Start by cloning the map. If you are used to Git and GitHub, simply clone the map
|
||||
to your computer using your preferred tool and <a href="#loading-the-map-in-tiled">jump to the next chapter</a>.</p>
|
||||
<p>If you are new to Git, cloning the map means downloading the map to your computer.
|
||||
To do this, you will need Git, or a Git compatible tool. Our advice is to use
|
||||
<a href="https://desktop.github.com/">GitHub Desktop</a>. We recommend you take some time mastering
|
||||
the notion of pull / commit / push as this will make uploading your maps really easier.</p>
|
||||
<p>As an (easier) alternative, you can simply use the "Export" button to download the code of the map in a big Zip file.
|
||||
When you want to upload your work again, you will simply drag'n'drop your files in the GitHub website.</p>
|
||||
|
||||
|
||||
<h3 id="loading-the-map-in-tiled" class="pixel-title">Loading the map in Tiled</h3>
|
||||
<p>The sample map is in the file <code>map.json</code>.
|
||||
You can load this file in <a href="https://www.mapeditor.org/">Tiled</a>.</p>
|
||||
<p>Now, it's up to you to edit the map and write your own map.</p>
|
||||
<p>Some resources regarding Tiled:</p>
|
||||
<ul>
|
||||
<li><a href="https://doc.mapeditor.org/en/stable/manual/introduction/" target="_blank">Tiled documentation</a></li>
|
||||
<li><a href="https://www.gamefromscratch.com/post/2015/10/14/Tiled-Map-Editor-Tutorial-Series.aspx" target="_blank">Tiled video tutorials</a></li>
|
||||
</ul>
|
||||
<h2 id="about-workadventu-re-maps" class="pixel-title">About WorkAdventure maps</h2>
|
||||
<p>In order to design a map that will be readable by WorkAdventure, you will have to respect some constraints.</p>
|
||||
<p>In particular, you will need to:</p>
|
||||
<ul>
|
||||
<li>set a start position for the players</li>
|
||||
<li>configure the "floor layer" (so that WorkAdventure can correctly display characters above the floor, but under the ceiling)</li>
|
||||
<li>eventually, you can place exits that link to other maps</li>
|
||||
<li>the "Tile Layer Format" must be set to CSV. If you started from the map starter kit as explained above,
|
||||
you have nothing to do. However, if you start from scratch, please be sure to select "CSV" for the tile layer format
|
||||
when creating the map. You can change this setting later in the map properties.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="workadventure-maps-rules" class="pixel-title">WorkAdventure Map Rules</h3>
|
||||
<p>A few things to notice:</p>
|
||||
<ul>
|
||||
<li>your map can have as many layers as you want</li>
|
||||
<li>your map MUST contain a layer named "floorLayer" of type "objectgroup" that represents the layer on which characters will be drawn.
|
||||
Every layer above the "floorLayer" will be displayed on top of the characters.</li>
|
||||
<li>the tilesets in your map MUST be embedded. You cannot refer to an external typeset in a TSX file. Click the "embed tileset" button in the tileset tab to embed tileset data.</li>
|
||||
<li>your map MUST be exported in JSON format. You need to use a recent version of Tiled to get JSON format export (1.3+)</li>
|
||||
<li>WorkAdventure doesn't support object layers and will ignore them</li>
|
||||
<li>If you are starting from a blank map, your map MUST be orthogonal and tiles size should be 32x32. </li>
|
||||
</ul>
|
||||
<p class="text-center"><img src="docs/tiled_screenshot_1.png" alt="" style="width: 70%"></p>
|
||||
|
||||
<h3 id="building-walls" class="pixel-title">Building walls and "collidable" areas</h3>
|
||||
<p>By default, the characters can traverse any tiles. If you want to prevent your characeter from
|
||||
going through a tile (like a wall or a desktop), you must make this tile "collidable". You can do
|
||||
this by settings the <code>collides</code> property on a given tile.</p>
|
||||
|
||||
<p>To make a tile "collidable", you should:</p>
|
||||
|
||||
<ol>
|
||||
<li>select the relevant tileset and switch to "edit" mode:<br/>
|
||||
<img src="docs/collides-1.png" alt="">
|
||||
</li>
|
||||
<li>right click on a tile of the tileset to select it:<br/>
|
||||
<img src="docs/collides-2.png" alt="">
|
||||
</li>
|
||||
<li>on the left pane in the custom properties section, right click and select "Add properties":<br/>
|
||||
<img src="docs/collides-3.png" alt=""><br/>
|
||||
Please add a <code>collides</code> property. The type of the property must be <strong>bool</strong>.
|
||||
</li>
|
||||
<li>finally, check the checkbox for the <code>collides</code> property:<br/>
|
||||
<img src="docs/collides-4.png" alt="">
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<p>Repeat for every tile that should be "collidable".</p>
|
||||
|
||||
<h3 id="defining-a-default-entry-point" class="pixel-title">Defining a default entry point</h3>
|
||||
<p>In order to define a default start position, you MUST create a layer named "start" on your map.
|
||||
This layer MUST contain at least one tile. The players will start on the tile of this layer.
|
||||
If the layer contains many tiles selected, the players will start randomly on one of those tiles.</p>
|
||||
|
||||
<p class="text-center"><img src="docs/start_layer.png" alt="Start layer screenshot" style="width: 70%"></p>
|
||||
|
||||
<p>In the screenshot above, the start layer is made of the 2 white tiles. These tiles are
|
||||
not visible to the end user because they are hidden below the "bottom" layer that displays the floor
|
||||
of the map.</p>
|
||||
|
||||
<h3 id="defining-exits" class="pixel-title">Defining exits</h3>
|
||||
<p>In order to place an exit on your scene that leads to another scene:</p>
|
||||
<ul>
|
||||
<li>You must create a specific layer. When a character reaches ANY tile of that layer, it will exit the scene.</li>
|
||||
<li>In layer properties, you MUST add "exitUrl" property. It represents the URL of the next scene. You can put relative or absolute URLs.</li>
|
||||
<li>If you want to have multiple exits, you can create many layers with name "exit". Each layer has a different key <code>exitUrl</code> and have tiles that represent exits to another scene.</li>
|
||||
</ul>
|
||||
<p>
|
||||
<strong>Understanding map URLs in WorkAdventure:</strong><br/>
|
||||
There are 2 kinds of URLs in WorkAdventure:
|
||||
<ul>
|
||||
<li>Public URLs are in the form https://play.workadventu.re/_/[instance]/[server]/[path to map]</li>
|
||||
<li>Private URLs (used in paid accounts) are in the form https://play.workadventu.re/@/[organization]/[world]/[map]</li>
|
||||
</ul>
|
||||
Assuming your JSON map is hosted at "https://example.com/my/map.json", then you can browse your map at "https://play.workadventu.re/_/global/example.com/my/map.json".
|
||||
Here, "global" is a name of an "instance" of your map. You can put anything instead of "global" here. People on the same instance of the map can see each others.
|
||||
If 2 users use 2 different instances, they are on the same map, but in 2 parallel universes. They cannot see each other.
|
||||
</p>
|
||||
<p class="text-center"><img src="docs/exit_layer_map.png" alt="" style="width: 90%"></p>
|
||||
<p>Note: in older releases of WorkAdventure, you could link to a map file directly using properties "exitSceneUrl" and "exitInstance". Those properties are now deprecated. Use "exitUrl" instead.</p>
|
||||
<h3 id="defining-several-entry-points" class="pixel-title">Defining several entry points</h3>
|
||||
<p>Often your map will have several exits, and therefore, several entry points. For instance, if there
|
||||
is an exit by a door that leads to the garden map, when you come back from the garden you expect to
|
||||
come back by the same door. Therefore, a map can have several entry points.
|
||||
Those entry points are "named" (they have a name).</p>
|
||||
<p>In order to create a named entry point:</p>
|
||||
<ul>
|
||||
<li>You must create a specific layer. When a character enters the map by this entry point, it will enter the map randomly on ANY tile of that layer.</li>
|
||||
<li>In layer properties, you MUST add a boolean "startLayer" property. It should be set to true.</li>
|
||||
<li>The name of the entry point is the name of the layer</li>
|
||||
<li>To enter via this entry point, simply add a hash with the entry point name to the URL ("#[<em>startLayerName</em>]"). For instance: "https://workadventu.re/_/global/mymap.com/path/map.json#my-entry-point".</li>
|
||||
<li>You can of course use the "#" notation in an exit scene URL (so an exit scene URL will point to a given entry scene URL)</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="opening-a-website-when-walking-on-the-map" class="pixel-title">Opening a website when walking on the map</h3>
|
||||
<p>On your map, you can define special zones. When a player will pass over these zones, a website will open
|
||||
(as an iframe on the right side of the screen)</p>
|
||||
<p>In order to create a zone that opens websites:</p>
|
||||
<ul>
|
||||
<li>You must create a specific layer.</li>
|
||||
<li>In layer properties, you MUST add a "openWebsite" property (of type "string"). The value of the property is the URL of the website to open (the URL must start with "https://")</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="opening-a-jitsi-meet-when-walking-on-the-map" class="pixel-title">Opening a Jitsi meet when walking on the map</h3>
|
||||
<p>On your map, you can define special zones (meeting rooms) that will trigger the opening of a Jitsi meet. When a player will pass over these zones, a Jitsi meet will open
|
||||
(as an iframe on the right side of the screen)</p>
|
||||
<p>In order to create Jitsi meet zones:</p>
|
||||
<ul>
|
||||
<li>You must create a specific layer.</li>
|
||||
<li>In layer properties, you MUST add a "jitsiRoom" property (of type "string"). The value of the property is the name of the room in Jitsi. Note: the name of the room will be prepended with the name of the instance of the map (so that different instances of the map have different rooms)</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="making-a-silent-zone" class="pixel-title">Making a "silent" zone</h3>
|
||||
<p>On your map, you can define special silent zones where nobody is allowed to talk.
|
||||
In these zones, users will not speak to each others, even if they are next to each others.</p>
|
||||
<p>In order to create a silent zone:</p>
|
||||
<ul>
|
||||
<li>You must create a specific layer.</li>
|
||||
<li>In layer properties, you MUST add a boolean "silent" property. If the silent property is checked, the users are entering the silent zone when they walk on any tile of the layer.</li>
|
||||
</ul>
|
||||
|
||||
<h3 id="pushing-the-map" class="pixel-title">Pushing the map</h3>
|
||||
<p>When your changes are ready, you need to "commit" and "push" (i.e. "upload") the changes back to GitHub.
|
||||
Just wait a few minutes, and your map will be propagated automatically to the GitHub pages web-server.</p>
|
||||
|
||||
<h3 id="need-some-help" class="pixel-title">Need some help?</h3>
|
||||
<p>WorkAdventure is a young project and much needs to be said / written regarding map editing.</p>
|
||||
<p>If you are facing any troubles, do not hesitate to open an "issue" in the
|
||||
<a href="https://github.com/thecodingmachine/workadventure/issues" target="_blank">GitHub WorkAdventure account</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
BIN
website/dist/docs/collides-1.png
vendored
Before Width: | Height: | Size: 290 KiB |
BIN
website/dist/docs/collides-2.png
vendored
Before Width: | Height: | Size: 144 KiB |
BIN
website/dist/docs/collides-3.png
vendored
Before Width: | Height: | Size: 129 KiB |
BIN
website/dist/docs/collides-4.png
vendored
Before Width: | Height: | Size: 11 KiB |
BIN
website/dist/docs/create_repo.png
vendored
Before Width: | Height: | Size: 158 KiB |
BIN
website/dist/docs/exit_layer_map.png
vendored
Before Width: | Height: | Size: 401 KiB |
BIN
website/dist/docs/github_pages.png
vendored
Before Width: | Height: | Size: 73 KiB |
BIN
website/dist/docs/start_layer.png
vendored
Before Width: | Height: | Size: 106 KiB |
BIN
website/dist/docs/tiled_screenshot_1.png
vendored
Before Width: | Height: | Size: 26 KiB |
BIN
website/dist/docs/use_this_template.png
vendored
Before Width: | Height: | Size: 32 KiB |
BIN
website/dist/docs/website_address.png
vendored
Before Width: | Height: | Size: 44 KiB |
482
website/dist/index.html
vendored
@ -1,482 +0,0 @@
|
||||
<!doctype html>
|
||||
<html class="no-js" lang="">
|
||||
|
||||
<head>
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-10196481-11"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'UA-10196481-11');
|
||||
if (window.location.host.endsWith("localhost")){
|
||||
window['ga-disable-UA-10196481-11'] = true;
|
||||
}
|
||||
</script>
|
||||
<link rel="apple-touch-icon" sizes="57x57" href="static/images/favicons/apple-icon-57x57.png">
|
||||
<link rel="apple-touch-icon" sizes="60x60" href="static/images/favicons/apple-icon-60x60.png">
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="static/images/favicons/apple-icon-72x72.png">
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="static/images/favicons/apple-icon-76x76.png">
|
||||
<link rel="apple-touch-icon" sizes="114x114" href="static/images/favicons/apple-icon-114x114.png">
|
||||
<link rel="apple-touch-icon" sizes="120x120" href="static/images/favicons/apple-icon-120x120.png">
|
||||
<link rel="apple-touch-icon" sizes="144x144" href="static/images/favicons/apple-icon-144x144.png">
|
||||
<link rel="apple-touch-icon" sizes="152x152" href="static/images/favicons/apple-icon-152x152.png">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="static/images/favicons/apple-icon-180x180.png">
|
||||
<link rel="icon" type="image/png" sizes="192x192" href="static/images/favicons/android-icon-192x192.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="static/images/favicons/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="static/images/favicons/favicon-96x96.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="static/images/favicons/favicon-16x16.png">
|
||||
<link rel="manifest" href="static/images/favicons/manifest.json">
|
||||
<meta name="msapplication-TileColor" content="#000000">
|
||||
<meta name="msapplication-TileImage" content="static/images/favicons/ms-icon-144x144.png">
|
||||
<meta name="theme-color" content="#000000">
|
||||
<title>WorkAdventu.re</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<meta name="title" content="Workadventure" />
|
||||
<meta name="description" content="You are impatient to discover this new world? Click on 'Work online' and meet new people or share this adventure with your colleagues and friends by clicking on 'Work in private'" />
|
||||
<!-- Open Graph / Facebook -->
|
||||
<meta property="og:url" content="https://workadventu.re/" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:title" content="Workadventure" />
|
||||
<meta property="og:description" content="You are impatient to discover this new world? Click on 'Work online' and meet new people or share this adventure with your colleagues and friends by clicking on 'Work in private'" />
|
||||
<meta property="og:image" content="https://workadventu.re/static/images/meta-tags-image.jpg" />
|
||||
<meta property="og:image:type" content="image/jpeg" />
|
||||
<meta property="og:image:alt" content="workadventure" />
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:site" content="@coding_machine">
|
||||
<meta name="twitter:url" content="https://workadventu.re/" />
|
||||
<meta name="twitter:title" content="Workadventure" />
|
||||
<meta name="twitter:description" content="You are impatient to discover this new world? Click on 'Work online' and meet new people or share this adventure with your colleagues and friends by clicking on 'Work in private'" />
|
||||
<meta name="twitter:image" content="https://workadventu.re/static/images/meta-tags-image.jpg" />
|
||||
<link rel="stylesheet" href="main.css">
|
||||
<script src="bundle.js"></script>
|
||||
<script>
|
||||
function startDemo() {
|
||||
let playUrl = window.location.protocol + "//play."+window.location.host+'/_/global/gparant.github.io/tcm-client/Demo/demo-v1.json';
|
||||
window.open(playUrl, '_blank');
|
||||
}
|
||||
function startGame() {
|
||||
let playUrl = window.location.protocol + "//play."+window.location.host+'/_/global/npeguin.github.io/office-map/map.json';
|
||||
window.open(playUrl, '_blank');
|
||||
}
|
||||
function shareFB() {
|
||||
window.open('https://www.facebook.com/sharer/sharer.php?u=https://workadventu.re/', '_blank', 'width=500,height=500');
|
||||
}
|
||||
function shareLI() {
|
||||
window.open('https://www.linkedin.com/shareArticle?mini=true&url=https://workadventu.re/&title=&summary=Your workplace but better!&source=TheCodingMachine', '_blank', 'width=500,height=500');
|
||||
}
|
||||
function shareTW() {
|
||||
window.open('https://twitter.com/share?text=Your workplace but better!&url=https://workadventu.re/&hashtags=thecodingmachine', '_blank', 'width=500,height=500');
|
||||
}
|
||||
</script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/gsap.min.js" integrity="sha256-MVs0yHYDQBhIRZrNeWB1YaNMrGbFwowIEPIl3um5MZE=" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/ScrollTrigger.min.js" integrity="sha256-FEFPM9cOclVyq+lIim2xnU/dAgrALF+g4M8kYm2tbX0=" crossorigin="anonymous"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="container-lg section">
|
||||
<div class="over-image">
|
||||
<div class="row">
|
||||
<div class="col-10 col-md-6">
|
||||
<div class="logo">
|
||||
<img src="static/images/logo.png">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2 col-md-6">
|
||||
<div class="social-links">
|
||||
<a href="https://www.facebook.com/workadventurebytcm">
|
||||
<img class="social-image" src="static/images/facebook_bw.png" />
|
||||
</a>
|
||||
<a href="https://www.linkedin.com/company/workadventure-by-tcm">
|
||||
<img class="social-image" src="static/images/linkedin_bw.png" />
|
||||
</a>
|
||||
<a href="https://twitter.com/Workadventure_">
|
||||
<img class="social-image" src="static/images/twitter_bw.png" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title title-main text-center">
|
||||
<h1>Meet your teammates</h1>
|
||||
<h3>
|
||||
WorkAdventure preserves your social interaction while COVID is still out there.
|
||||
</h3>
|
||||
<h3>
|
||||
Stay connected with your teamworkers, by creating your own online workspace to work remotely.
|
||||
</h3>
|
||||
<h3>
|
||||
Stay connected with your clients by providing a dedicated digital place to organize meetings, workshops.
|
||||
</h3>
|
||||
<h3>
|
||||
Engage with your future collaborators by organizing online events.
|
||||
</h3>
|
||||
</div>
|
||||
<div class="row buttons-row justify-content-md-center pt-5">
|
||||
<div class="col col-lg-3">
|
||||
<a class="custom-link start" href="/choose-map.html" title="WORK IN PRIVATE">
|
||||
PRIVATE MAPS
|
||||
</a>
|
||||
</div>
|
||||
<div class="col col-lg-3">
|
||||
<a class="custom-link play" target="_BLANK" onclick="startGame()" title="WORK ONLINE">
|
||||
TRY IT NOW!
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!--<div class="row buttons-row justify-content-md-center pt-5"
|
||||
style="min-height: 80px;">
|
||||
<div class="col col-lg-3">
|
||||
<a class="custom-link start"
|
||||
href="/choose-map.html">
|
||||
CREATE YOUR MAP
|
||||
</a>
|
||||
</div>
|
||||
<div class="col col-lg-3">
|
||||
<a class="custom-link play" onclick="startDemo()">
|
||||
TUTORIAL
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div style="min-height: 100px" class="row buttons-row justify-content-md-center pt-5">
|
||||
<div class="col col-lg-3">
|
||||
<a class="custom-link contribute" onclick="startGame()">
|
||||
DEMO
|
||||
</a>
|
||||
</div>
|
||||
</div>-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="clouds clouds-2">
|
||||
<div class="cloud"></div>
|
||||
</div>
|
||||
<div class="clouds">
|
||||
<div class="cloud"></div>
|
||||
</div>
|
||||
</header>
|
||||
<section class="story-wrapper">
|
||||
<div class="clouds clouds-2">
|
||||
<div class="cloud"></div>
|
||||
</div>
|
||||
<div class="clouds">
|
||||
<div class="cloud"></div>
|
||||
</div>
|
||||
<div class="sky"></div>
|
||||
<div class="mountains"></div>
|
||||
<img src="static/images/story/story-map-bg.png" height="672" class="story-1" />
|
||||
<img src="static/images/story/character-static.png" class="character" id="leymah" />
|
||||
<div class="birds">
|
||||
<img class="bird bird-1" src="static/images/story/bird.gif" />
|
||||
<img class="bird bird-2" src="static/images/story/bird.gif" />
|
||||
<img class="bird bird-3" src="static/images/story/bird.gif" />
|
||||
<img class="bird bird-4" src="static/images/story/bird.gif" />
|
||||
<img class="bird bird-5" src="static/images/story/bird.gif" />
|
||||
<img class="bird bird-6" src="static/images/story/bird.gif" />
|
||||
<img class="bird bird-7" src="static/images/story/bird.gif" />
|
||||
<img class="bird bird-8" src="static/images/story/bird.gif" />
|
||||
</div>
|
||||
<div class="bubble bubble-1" style="width: 320px;height: 209px;">
|
||||
<div>
|
||||
<p>WorkAdventure is a video-conference application that lets people hold multiple parallel conversations in a virtual universe. </p>
|
||||
<p>Walk in, out, speak to anyone just like in real-life!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bubble bubble-thinking" style="width: 269px;height: 211px;">
|
||||
<div class="demo-gif">
|
||||
<img src="static/images/story/WA-Demo.gif" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="bubble bubble-3" style="height: 209px;">
|
||||
<div>
|
||||
<p>Remote work? Friend party? Use WorkAdventure as you prefer.</p>
|
||||
<p>Click the button below to come and say hi!</p>
|
||||
<p class="bubble-action"><span onclick="startDemo()">
|
||||
<img src="static/images/playicon.png" />
|
||||
DEMO!
|
||||
</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bubble bubble-4 b-revert" style="height: 254px;">
|
||||
<div>
|
||||
<p>You can also create a private room with your friends or your team ! </p>
|
||||
<p class="bubble-legend">To try, press button work in private</p>
|
||||
<p class="bubble-action">
|
||||
<a href="/choose-map.html">
|
||||
<img src="static/images/playicon.png" />
|
||||
CHOOSE YOU OWN MAP
|
||||
</a>
|
||||
<p>
|
||||
Don’t forget to activate your mic and camera, let’s play
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- PRELOADING (hidden elements) -->
|
||||
<img src="static/images/story/character-walk-right.gif" style="display:none;" />
|
||||
</section>
|
||||
<script>
|
||||
gsap.to(".title-main", {
|
||||
//y:-1000,
|
||||
scale: 0,
|
||||
opacity: 0,
|
||||
ease: "none",
|
||||
scrollTrigger: {
|
||||
trigger: "header",
|
||||
start: "top top", // the default values
|
||||
// end: "bottom top",
|
||||
scrub: true
|
||||
},
|
||||
});
|
||||
|
||||
gsap.to(".over-image .clouds", {
|
||||
y: 100,
|
||||
ease: "none",
|
||||
scrollTrigger: {
|
||||
trigger: "header",
|
||||
start: "top top", // the default values
|
||||
// end: "bottom top",
|
||||
scrub: true
|
||||
},
|
||||
});
|
||||
|
||||
var maxImageTranslateValue = 3507 - window.innerWidth;
|
||||
var bubbleNumber = document.getElementsByClassName("bubble").length;
|
||||
var charWalkToRightImage = "static/images/story/character-walk-right.gif";
|
||||
var charStaticImage = "static/images/story/character-static.png";
|
||||
|
||||
var storyScrollTrigger = gsap.timeline({
|
||||
scrollTrigger: {
|
||||
trigger: ".story-wrapper",
|
||||
pin: true, // pin the trigger element while active
|
||||
start: "top top", // when the top of the trigger hits the top of the viewport
|
||||
//end: "+=500", // end after scrolling 500px beyond the start
|
||||
scrub: 1, // smooth scrubbing, takes 1 second to "catch up" to the scrollbar
|
||||
}
|
||||
});
|
||||
|
||||
storyScrollTrigger.to(".birds", {
|
||||
x: (-window.innerWidth -200)
|
||||
});
|
||||
storyScrollTrigger.from(".character", {
|
||||
x: -maxImageTranslateValue * (1/bubbleNumber),
|
||||
onStart: function() {
|
||||
document.getElementById("leymah").src = charWalkToRightImage;
|
||||
},
|
||||
onComplete: function() {
|
||||
document.getElementById("leymah").src = charStaticImage;
|
||||
}
|
||||
})
|
||||
.to(".bubble-1, .bubble-thinking", {
|
||||
opacity: 1,
|
||||
y: 0
|
||||
})
|
||||
.to(".story-1", {
|
||||
x: -maxImageTranslateValue * (2/bubbleNumber),
|
||||
onStart: function() {
|
||||
document.getElementById("leymah").src = charWalkToRightImage;
|
||||
},
|
||||
onComplete: function() {
|
||||
document.getElementById("leymah").src = charStaticImage;
|
||||
}
|
||||
})
|
||||
.to(".bubble-1, .bubble-thinking", {
|
||||
opacity: 0
|
||||
})
|
||||
.to(".bubble-3", {
|
||||
opacity: 1,
|
||||
y: 0
|
||||
})
|
||||
.to(".story-1", {
|
||||
x: -maxImageTranslateValue,
|
||||
onStart: function() {
|
||||
document.getElementById("leymah").src = "static/images/story/character-walk-right.gif";
|
||||
},
|
||||
onComplete: function() {
|
||||
document.getElementById("leymah").src = "static/images/story/character-static.png";
|
||||
}
|
||||
})
|
||||
.to(".bubble-3", {
|
||||
opacity: 0
|
||||
})
|
||||
.to(".bubble-4", {
|
||||
opacity: 1,
|
||||
y: 0
|
||||
})
|
||||
.to(".character, .bubble-4", {
|
||||
x: "53vw",
|
||||
onStart: function() {
|
||||
document.getElementById("leymah").src = "static/images/story/character-walk-right.gif";
|
||||
},
|
||||
})
|
||||
.to(".bubble-4", {
|
||||
opacity: 0
|
||||
});
|
||||
|
||||
</script>
|
||||
<div class="section bg-white how-to">
|
||||
<div class="desktop-only text-center d-block d-md-none d-lg-none d-xl-none">
|
||||
<img src="static/images/desktop.png" width="64" /><br />
|
||||
Unfortunately, it's not mobile friendly yet. But we are happy to invite you to try it on your desktop. Enjoy!
|
||||
</div>
|
||||
|
||||
<div class="container-fluid container-lg">
|
||||
<div class="row justify-content-md-center">
|
||||
<div class="col-12 col-md-12 text-center">
|
||||
<h3>HOW IT WORKS</h3>
|
||||
</div>
|
||||
<div class="col-12 col-md-4 text-center my-3 my-md-0">
|
||||
<div class="image-item">
|
||||
<h2>CHOOSE YOUR WORKSPACE</h2>
|
||||
<div class="step-image"><img src="static/images/maps/office.png"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-4 text-center my-3 my-md-0">
|
||||
<div class="image-item">
|
||||
<h2>SELECT YOUR WOKA</h2>
|
||||
<div class="step-image"><img src="static/images/choose_character.png"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-4 text-center my-3 my-md-0">
|
||||
<div class="image-item">
|
||||
<h2>LET'S GO TO YOUR OFFICE</h2>
|
||||
<div class="step-image"><img src="static/images/interact.png"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-5">
|
||||
<div class="col-lg-9 text-right">
|
||||
<p class="py-3 font-weight-bold" style="font-size: 1.25rem">
|
||||
Want to try WorkAdventure with your team mates or friends?
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-lg-3">
|
||||
<a class="custom-link relative" href="/choose-map.html" title="WORK IN PRIVATE">
|
||||
GET STARTED!
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="social-links text-center pt-2 pb-4">
|
||||
<span class="share-title">... and if you liked WorkAdventure, share your experience!</span>
|
||||
<a onclick="shareFB()">
|
||||
<img class="social-image" src="static/images/facebook.png" />
|
||||
</a>
|
||||
<a onclick="shareLI()">
|
||||
<img class="social-image" src="static/images/linkedin.png" />
|
||||
</a>
|
||||
<a onclick="shareTW()">
|
||||
<img class="social-image" src="static/images/twitter.png" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section bg-white text-center pt-5">
|
||||
<div class="container-fluid container-lg">
|
||||
<div class="row justify-content-md-center">
|
||||
<div class="col-12 col-md-12 text-center">
|
||||
<h3>WORKADVENTURE'S USE CASES</h3>
|
||||
</div>
|
||||
<p>
|
||||
Workadventure is an intuitive and fun solution to professional issues:
|
||||
</p>
|
||||
<ul class="text-left">
|
||||
<li>
|
||||
Work in a remote way within a team,
|
||||
</li>
|
||||
<li>
|
||||
Create an event (even a big one),
|
||||
</li>
|
||||
<li>
|
||||
Stay connected and increase social interactions...
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
Feel free to contact us if you need a specific map, need a dedicated admin console or any
|
||||
support (for instance a large number of connexions) : <a href="mailto:workadventure@thecodingmachine.com" target="_blank">workadventure@thecodingmachine.com</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section bg-white">
|
||||
<div class="container-fluid container-lg">
|
||||
<div class="col-12 credits">
|
||||
<h2>CURRENT FEATURES</h2>
|
||||
<!-- <h3>We have already thought of new features:</h3>-->
|
||||
<p>Instant interaction with up to 4 people</p>
|
||||
<p>Share screen with others</p>
|
||||
<p>Organize a workshop and meeting with up to 60 people</p>
|
||||
<p>Design your own digital space</p>
|
||||
<p>... and infinite possibilities</p>
|
||||
<h3>You need more? Do not hesitate to tell us!</h3>
|
||||
<div class="row justify-content-md-center pt-5" style="margin-top: 65px;">
|
||||
<div class="col col-lg-3">
|
||||
<a class="custom-link contribute" target="_BLANK" href="https://docs.google.com/forms/d/e/1FAIpQLSdxvajEyqsn4X0ai0SoDAcdsa_JQPIfiP2Tp9PDzkfZA54v9Q/viewform" title="FEEDBACK">
|
||||
FEEDBACK
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gray section used-by">
|
||||
<div class="container-fluid container-lg">
|
||||
<h2 class="text-center pb-4">THEY MIGHT APPROVE</h2>
|
||||
<div class="row justify-content-md-center align-items-center">
|
||||
<div class="col col-md-auto">
|
||||
<img src="static/images/atari.png">
|
||||
</div>
|
||||
<div class="col col-md-auto">
|
||||
<img src="static/images/super-nintendo.png">
|
||||
</div>
|
||||
<div class="col col-md-auto">
|
||||
<img src="static/images/amstrad.png">
|
||||
</div>
|
||||
<div class="col col-md-auto">
|
||||
<img src="static/images/sinclair-2.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-fluid container-lg section quotes">
|
||||
<h2 class="text-center">Why we love WorkAdventure</h2>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-12 col-md-9">
|
||||
<div class="quote-item">
|
||||
<p class="quote">« Right on time! I feel like less alone in my home office. »</p>
|
||||
<p class="author">Julie</p>
|
||||
</div>
|
||||
<div class="quote-item">
|
||||
<p class="quote">« I love running into the hallway and check out where are my teammates! »</p>
|
||||
<p class="author">Sophie</p>
|
||||
</div>
|
||||
<div class="quote-item">
|
||||
<p class="quote">« Wow! More intimate than a Meet conference. »</p>
|
||||
<p class="author">Greg</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white footer">
|
||||
<div class="container-fluid container-lg">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 my-3 my-md-0">
|
||||
<a href="https://www.thecodingmachine.com/" target="_blank"><img src="static/images/Logo TCM.png"></a>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 my-3 my-md-0 floppy">
|
||||
<img src="static/images/floppy.png" />
|
||||
<div>Soon available on floppy !<br/><span>otherwise, available on <a href="https://github.com/thecodingmachine/workadventure" target="_BLANK">GitHub</a></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-fluid container-lg">
|
||||
<div class="row text-center">
|
||||
<div style="width: 100%;color:#afafaf;margin-top: 25px;">TheCodingMachine - All Rights Reserved</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
BIN
website/dist/static/images/Bitmap2.png
vendored
Before Width: | Height: | Size: 57 KiB |
BIN
website/dist/static/images/Bitmap3.png
vendored
Before Width: | Height: | Size: 158 KiB |
BIN
website/dist/static/images/Logo TCM.png
vendored
Before Width: | Height: | Size: 12 KiB |
BIN
website/dist/static/images/amstrad.png
vendored
Before Width: | Height: | Size: 4.9 KiB |
BIN
website/dist/static/images/atari.png
vendored
Before Width: | Height: | Size: 3.4 KiB |
BIN
website/dist/static/images/bitmap.png
vendored
Before Width: | Height: | Size: 64 KiB |
BIN
website/dist/static/images/check.png
vendored
Before Width: | Height: | Size: 231 B |
BIN
website/dist/static/images/choose_character.png
vendored
Before Width: | Height: | Size: 135 KiB |
BIN
website/dist/static/images/cloud.png
vendored
Before Width: | Height: | Size: 51 KiB |
BIN
website/dist/static/images/desktop.png
vendored
Before Width: | Height: | Size: 87 KiB |
BIN
website/dist/static/images/facebook.png
vendored
Before Width: | Height: | Size: 639 B |
BIN
website/dist/static/images/facebook_bw.png
vendored
Before Width: | Height: | Size: 1.4 KiB |
Before Width: | Height: | Size: 4.1 KiB |
Before Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 1.6 KiB |
Before Width: | Height: | Size: 2.0 KiB |
Before Width: | Height: | Size: 2.4 KiB |
Before Width: | Height: | Size: 3.0 KiB |
Before Width: | Height: | Size: 3.3 KiB |
Before Width: | Height: | Size: 3.5 KiB |
Before Width: | Height: | Size: 4.1 KiB |
Before Width: | Height: | Size: 4.2 KiB |
Before Width: | Height: | Size: 5.0 KiB |
Before Width: | Height: | Size: 2.1 KiB |
Before Width: | Height: | Size: 2.2 KiB |
Before Width: | Height: | Size: 2.4 KiB |
Before Width: | Height: | Size: 2.5 KiB |
Before Width: | Height: | Size: 5.0 KiB |
BIN
website/dist/static/images/favicons/apple-icon.png
vendored
Before Width: | Height: | Size: 5.0 KiB |
@ -1,2 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>
|
Before Width: | Height: | Size: 1.2 KiB |
Before Width: | Height: | Size: 1.6 KiB |
Before Width: | Height: | Size: 3.0 KiB |
BIN
website/dist/static/images/favicons/favicon.ico
vendored
Before Width: | Height: | Size: 1.1 KiB |
@ -1,41 +0,0 @@
|
||||
{
|
||||
"name": "App",
|
||||
"icons": [
|
||||
{
|
||||
"src": "\/android-icon-36x36.png",
|
||||
"sizes": "36x36",
|
||||
"type": "image\/png",
|
||||
"density": "0.75"
|
||||
},
|
||||
{
|
||||
"src": "\/android-icon-48x48.png",
|
||||
"sizes": "48x48",
|
||||
"type": "image\/png",
|
||||
"density": "1.0"
|
||||
},
|
||||
{
|
||||
"src": "\/android-icon-72x72.png",
|
||||
"sizes": "72x72",
|
||||
"type": "image\/png",
|
||||
"density": "1.5"
|
||||
},
|
||||
{
|
||||
"src": "\/android-icon-96x96.png",
|
||||
"sizes": "96x96",
|
||||
"type": "image\/png",
|
||||
"density": "2.0"
|
||||
},
|
||||
{
|
||||
"src": "\/android-icon-144x144.png",
|
||||
"sizes": "144x144",
|
||||
"type": "image\/png",
|
||||
"density": "3.0"
|
||||
},
|
||||
{
|
||||
"src": "\/android-icon-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image\/png",
|
||||
"density": "4.0"
|
||||
}
|
||||
]
|
||||
}
|
Before Width: | Height: | Size: 4.1 KiB |
Before Width: | Height: | Size: 4.2 KiB |
Before Width: | Height: | Size: 9.9 KiB |
Before Width: | Height: | Size: 2.4 KiB |
BIN
website/dist/static/images/female-character.gif
vendored
Before Width: | Height: | Size: 1.7 KiB |
BIN
website/dist/static/images/floppy.png
vendored
Before Width: | Height: | Size: 1.7 KiB |
BIN
website/dist/static/images/interact.png
vendored
Before Width: | Height: | Size: 374 KiB |
BIN
website/dist/static/images/linkedin.png
vendored
Before Width: | Height: | Size: 622 B |
BIN
website/dist/static/images/linkedin_bw.png
vendored
Before Width: | Height: | Size: 1.7 KiB |
BIN
website/dist/static/images/logo.png
vendored
Before Width: | Height: | Size: 16 KiB |
BIN
website/dist/static/images/male-character.gif
vendored
Before Width: | Height: | Size: 1.8 KiB |
BIN
website/dist/static/images/maps/coders.png
vendored
Before Width: | Height: | Size: 300 KiB |
BIN
website/dist/static/images/maps/creative.png
vendored
Before Width: | Height: | Size: 162 KiB |
BIN
website/dist/static/images/maps/dungeon.png
vendored
Before Width: | Height: | Size: 311 KiB |
BIN
website/dist/static/images/maps/fantasy.png
vendored
Before Width: | Height: | Size: 410 KiB |
BIN
website/dist/static/images/maps/office.png
vendored
Before Width: | Height: | Size: 206 KiB |
BIN
website/dist/static/images/maps/pub.png
vendored
Before Width: | Height: | Size: 36 KiB |
BIN
website/dist/static/images/maps/school.png
vendored
Before Width: | Height: | Size: 291 KiB |
BIN
website/dist/static/images/maps/street.png
vendored
Before Width: | Height: | Size: 729 KiB |
BIN
website/dist/static/images/maps/tcm.png
vendored
Before Width: | Height: | Size: 307 KiB |
BIN
website/dist/static/images/meta-tags-image.jpg
vendored
Before Width: | Height: | Size: 37 KiB |
BIN
website/dist/static/images/play.png
vendored
Before Width: | Height: | Size: 182 KiB |
BIN
website/dist/static/images/playicon.png
vendored
Before Width: | Height: | Size: 684 B |
BIN
website/dist/static/images/sinclair-2.png
vendored
Before Width: | Height: | Size: 9.9 KiB |
BIN
website/dist/static/images/step 1.png
vendored
Before Width: | Height: | Size: 166 KiB |
BIN
website/dist/static/images/step 2.png
vendored
Before Width: | Height: | Size: 58 KiB |
BIN
website/dist/static/images/step 3.png
vendored
Before Width: | Height: | Size: 138 KiB |
BIN
website/dist/static/images/story/WA-Demo.gif
vendored
Before Width: | Height: | Size: 1.5 MiB |
BIN
website/dist/static/images/story/bird.gif
vendored
Before Width: | Height: | Size: 912 B |
Before Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 6.5 KiB |
BIN
website/dist/static/images/story/story-map-bg.png
vendored
Before Width: | Height: | Size: 724 KiB |
BIN
website/dist/static/images/story/thinking.png
vendored
Before Width: | Height: | Size: 3.3 KiB |
BIN
website/dist/static/images/super-nintendo.png
vendored
Before Width: | Height: | Size: 12 KiB |
BIN
website/dist/static/images/twitter.png
vendored
Before Width: | Height: | Size: 615 B |
BIN
website/dist/static/images/twitter_bw.png
vendored
Before Width: | Height: | Size: 1.4 KiB |
7753
website/package-lock.json
generated
@ -1,28 +0,0 @@
|
||||
{
|
||||
"scripts": {
|
||||
"build": "webpack --config webpack.config.js",
|
||||
"watch": "webpack --config webpack.config.js --watch"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.3.4",
|
||||
"@babel/preset-env": "^7.3.4",
|
||||
"autoprefixer": "^9.4.10",
|
||||
"babel-loader": "^8.0.5",
|
||||
"css-loader": "^2.1.1",
|
||||
"cssnano": "^4.1.10",
|
||||
"file-loader": "^3.0.1",
|
||||
"mini-css-extract-plugin": "^0.5.0",
|
||||
"postcss-loader": "^3.0.0",
|
||||
"sass": "^1.26.7",
|
||||
"sass-loader": "^7.1.0",
|
||||
"webpack": "^4.29.6",
|
||||
"webpack-cli": "^3.3.11"
|
||||
},
|
||||
"dependencies": {
|
||||
"bootstrap": "^4.5.0",
|
||||
"jquery": "^3.5.1",
|
||||
"node-sass": "^4.14.1",
|
||||
"popper.js": "^1.16.1",
|
||||
"style-loader": "^1.2.1"
|
||||
}
|
||||
}
|
@ -1,6 +0,0 @@
|
||||
module.exports = {
|
||||
plugins: [
|
||||
require('autoprefixer'),
|
||||
require('cssnano')
|
||||
]
|
||||
}
|
Before Width: | Height: | Size: 3.0 KiB |
Before Width: | Height: | Size: 945 KiB |