arcad/edge-ruedelasoif
16
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

svg

Browse Source
This commit is contained in:
afornerot
2024-02-24 12:00:53 +01:00
parent c3aca4a2b8
commit 68891dc445
5 changed files with 148 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/app.css
View File

@@ -318,7 +318,15 @@
.bigtile, .tile, .tilenone {
height: 200px;
background-position: center;
background-size:cover;
border: 1px red solid;
}
.tile, .tilenone { width: 33.33333333333333333333333% }
.tilenone {border: none;}
.sortable > span {
-webkit-touch-callout:none;

15
src/lib/Tile.svelte Normal file
View File

@@ -0,0 +1,15 @@
<script>
export let size;
export let id;
export let position;
export let img;
export let name;
var style="tile";
if(size=="big") style="bigtile";
</script>
<div class="{style}" style="background-image: url({img});">{name}</div>

6
src/routes/game/+page.js
View File

@@ -7,9 +7,11 @@ export async function load({ params }) {
let party;
let players;
let tiles;
if(player.partyid) {
party = await Edge.Client.rpc("getParty",player.partyid).catch(err => console.error(err));
players= await Edge.Client.rpc("getPartyplayers",party._id).catch(err => console.error(err));
tiles= await Edge.Client.rpc("getTiles",party._id).catch(err => console.error(err));
}
else window.location.href = '/';
@@ -22,8 +24,10 @@ export async function load({ params }) {
party,
players,
player,
tiles,
};
console.log(data);
Edge.Client.send({ [party._id]: data });
// Return data

93
src/routes/game/+page.svelte
View File

@@ -1,5 +1,6 @@
<script>
import Dice from '$lib/Dice.svelte';
import Tile from '$lib/Tile.svelte';
import { goto } from '$app/navigation';
import { enableBodyScroll, disableBodyScroll } from 'body-scroll-lock';
import { sortable } from 'svelte-agnostic-draggable' ;
@@ -24,9 +25,6 @@
let dice1;
let dice2;
let dice3;
let dice4;
let dice5;
let results=[];
Edge.Client.addEventListener("message", async function(evt) {
@@ -88,7 +86,15 @@
// Voir si le mouve et super gros gérer le multipassage par weekend
if(position>27) {
position=position-28
if(position == 28){
position = 0
data.party.playerparty.cash = data.party.playerparty.cash +100
}else{
let newPosition = position % 28;
let count = (position - newPosition) / 28;
data.party.playerparty.cash = data.party.playerparty.cash + (50 * count)
position = newPosition
}
}
// Mise à jour de la position du joueur
@@ -361,15 +367,90 @@
</div>
{/if}
{/if}
<div>
{#if data.party.playertile }
Nom = {data.party.playertile.name}<br>
Position = {data.party.playertile.position}<br>
Cash = {data.party.playerparty.cash}<br>
<img src="{data.party.playertile.img}" alt="tile" style="width:800px; max-width: 100%; margin:auto;">
{/if}
</div>
<div style="width:600px; max-width:100%; display:flex; flex-direction: column; margin:auto;">
<Tile {...data.tiles[0]} />
<div style="display:flex">
<Tile {...data.tiles[12]} />
<div class="tilenone"></div>
<Tile {...data.tiles[14]} />
</div>
<div style="display:flex">
<div class="tile" style="background-image: url({data.tiles[11].img});"></div>
<div class="tilenone"></div>
<div class="tile" style="background-image: url({data.tiles[15].img});"></div>
</div>
<div style="display:flex">
<div class="tile" style="background-image: url({data.tiles[10].img});"></div>
<div class="tilenone"></div>
<div class="tile" style="background-image: url({data.tiles[16].img});"></div>
</div>
<div style="display:flex">
<div class="tile" style="background-image: url({data.tiles[10].img});"></div>
<div class="tilenone"></div>
<div class="tile" style="background-image: url({data.tiles[17].img});"></div>
</div>
<div style="display:flex">
<div class="tile" style="background-image: url({data.tiles[10].img});"></div>
<div class="tilenone"></div>
<div class="tile" style="background-image: url({data.tiles[18].img});"></div>
</div>
<div style="display:flex">
<div class="tile" style="background-image: url({data.tiles[9].img});"></div>
<div class="tilenone"></div>
<div class="tile" style="background-image: url({data.tiles[19].img});"></div>
</div>
<div style="display:flex">
<div class="tile" style="background-image: url({data.tiles[8].img});"></div>
<div class="tilenone"></div>
<div class="tile" style="background-image: url({data.tiles[20].img});"></div>
</div>
<div style="display:flex">
<div class="tile" style="background-image: url({data.tiles[7].img});"></div>
<div class="tilenone"></div>
<div class="tile" style="background-image: url({data.tiles[21].img});"></div>
</div>
<div style="display:flex">
<div class="tile" style="background-image: url({data.tiles[6].img});"></div>
<div class="tilenone"></div>
<div class="tile" style="background-image: url({data.tiles[22].img});"></div>
</div>
<div style="display:flex">
<div class="tile" style="background-image: url({data.tiles[5].img});"></div>
<div class="tilenone"></div>
<div class="tile" style="background-image: url({data.tiles[23].img});"></div>
</div>
<div style="display:flex">
<div class="tile" style="background-image: url({data.tiles[4].img});"></div>
<div class="tilenone"></div>
<div class="tile" style="background-image: url({data.tiles[24].img});"></div>
</div>
<div style="display:flex">
<div class="tile" style="background-image: url({data.tiles[3].img});"></div>
<div class="tilenone"></div>
<div class="tile" style="background-image: url({data.tiles[25].img});"></div>
</div>
<div style="display:flex">
<div class="tile" style="background-image: url({data.tiles[2].img});"></div>
<div class="tilenone"></div>
<div class="tile" style="background-image: url({data.tiles[26].img});"></div>
</div>
<div style="display:flex">
<div class="tile" style="background-image: url({data.tiles[1].img});"></div>
<div class="tilenone"></div>
<div class="tile" style="background-image: url({data.tiles[27].img});"></div>
</div>
<div class="bigtile" style="background-image: url({data.tiles[0].img});"></div>
</div>
<!-- KILL -->
{#if data.party.status==="partyplay" && my._id===data.party.playerid }