add main-site
This commit is contained in:
GZod01
parent
0bcf58c844
commit
0a3a77a9ff
52 changed files with 11206 additions and 0 deletions
36
main-site/fractal/dashboard.html
Normal file
36
main-site/fractal/dashboard.html
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="fractaldashboard.css">
|
||||
<script src="fractaldashboard.js"></script>
|
||||
<title>Fractal Dashboard</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class=headerelement id=connectedas>Connected as
|
||||
<span id=playername>MYNAME</span><img id=playerprofile/><br>
|
||||
<span id="logout">logout</span>
|
||||
</div>
|
||||
</header>
|
||||
<div id="dashboardcontent">
|
||||
|
||||
</div>
|
||||
<br>
|
||||
<footer>
|
||||
<div class=footerleft>
|
||||
<a href="//discord.gg/cnBCTZ37nP">Join the Discord Server</a>
|
||||
<a href="javascript:void(0)" onclick="navigator.share({
|
||||
title: 'FRACTAL',
|
||||
text: 'Venez jouez avec moi à Fractal',
|
||||
url: 'https:/\/gzod01.fr/fractal/',
|
||||
})">Share the game</a>
|
||||
<!--<button class=langchoose id="french"></button><button class="langchoose" id="english"></button>-->
|
||||
</div>
|
||||
<div class="footerright">
|
||||
<a href="javascript:'Game In development'">Buy the game</a>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
143
main-site/fractal/fractaldashboard.css
Normal file
143
main-site/fractal/fractaldashboard.css
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
body {
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
word-break: break-word;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: darkslategrey;
|
||||
}
|
||||
.dash-full-box{
|
||||
display: grid; /*or BLOCK BUT GRID IS BEST...*/
|
||||
position: relative;
|
||||
border-radius: 10px;
|
||||
min-height: 50px;
|
||||
height: max-content;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
#green{
|
||||
background-color: limegreen;
|
||||
}
|
||||
#red{
|
||||
background-color: rgb(197, 23, 23);
|
||||
}
|
||||
#blue{
|
||||
background-color: slateblue;
|
||||
}
|
||||
#yellow{
|
||||
background-color: rgb(191, 191, 19);
|
||||
}
|
||||
#orange{
|
||||
background-color: darkorange;
|
||||
}
|
||||
#withdrawalbutton{
|
||||
display:table-row;
|
||||
height: 100px;
|
||||
width: 50%;
|
||||
color: white;
|
||||
background: repeating-linear-gradient(
|
||||
45deg,
|
||||
darkorange,
|
||||
darkorange 10px,
|
||||
red 10px,
|
||||
red 20px
|
||||
);
|
||||
}
|
||||
#withdrawalbutton:hover{
|
||||
background: repeating-linear-gradient(
|
||||
45deg,
|
||||
red,
|
||||
red 10px,
|
||||
darkorange 10px,
|
||||
darkorange 20px
|
||||
);
|
||||
}
|
||||
button{
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
min-height: 10px;
|
||||
border: 0px;
|
||||
}
|
||||
.fullcentered{
|
||||
text-align:center;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.dash-title{
|
||||
text-decoration: underline;
|
||||
font-size: large;
|
||||
font-weight: bold;
|
||||
}
|
||||
header{
|
||||
margin:0;
|
||||
background-color: slateblue;
|
||||
color: white;
|
||||
padding-bottom: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.headerelement{
|
||||
text-decoration: none;
|
||||
float:left;
|
||||
display:block;
|
||||
text-align:center;
|
||||
padding:14px 16px;
|
||||
font-size: 17px
|
||||
}
|
||||
#connectedas{
|
||||
float: right;
|
||||
}
|
||||
footer{
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
margin-top: auto;
|
||||
display: flex ;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
background-color:slateblue ;
|
||||
color: white;
|
||||
}
|
||||
footer *{
|
||||
text-decoration: none;
|
||||
display:block;
|
||||
text-align:center;
|
||||
padding:14px 16px;
|
||||
font-size: 17px;
|
||||
color: white;
|
||||
}
|
||||
footer a:hover{
|
||||
color: darkgray;
|
||||
}
|
||||
.footerleft{
|
||||
height: 100%;
|
||||
left:0;
|
||||
width:50%;
|
||||
}
|
||||
.footerright{
|
||||
height: 100%;
|
||||
right:0;
|
||||
width:50%
|
||||
}
|
||||
table, th, td{
|
||||
border:solid 2px black
|
||||
}
|
||||
table{
|
||||
width:100%
|
||||
}
|
||||
.tablecontainer{
|
||||
overflow: auto;
|
||||
max-height: 200px;
|
||||
}
|
||||
#logindiv{
|
||||
text-align:center;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
197
main-site/fractal/fractaldashboard.js
Normal file
197
main-site/fractal/fractaldashboard.js
Normal file
|
|
@ -0,0 +1,197 @@
|
|||
const logindb = {
|
||||
loginplayer:[{username:'testuser',password:'testpwd'}]
|
||||
}
|
||||
var loginusername=''
|
||||
var loginpassword=''
|
||||
function addItemToMarketTable(item,price){
|
||||
let table = document.getElementById('balanceitems')
|
||||
let tr=document.createElement('tr')
|
||||
let tditem=document.createElement('td')
|
||||
tditem.innerHTML=item
|
||||
let tdprice=document.createElement('td')
|
||||
tdprice.innerHTML=price
|
||||
tr.appendChild(tditem)
|
||||
tr.appendChild(tdprice)
|
||||
table.appendChild(tr)
|
||||
}
|
||||
function addPlayerToLBTable(player,index){
|
||||
let table = document.getElementById('playerlb')
|
||||
let tr=document.createElement('tr')
|
||||
let tditem=document.createElement('td')
|
||||
tditem.innerHTML=player
|
||||
let tdindex=document.createElement('td')
|
||||
tdindex.innerHTML=index
|
||||
tr.appendChild(tditem)
|
||||
tr.appendChild(tdindex)
|
||||
table.appendChild(tr)
|
||||
}
|
||||
function addGuildToLBTable(guild,index){
|
||||
let table = document.getElementById('guildlb')
|
||||
let tr=document.createElement('tr')
|
||||
let tditem=document.createElement('td')
|
||||
tditem.innerHTML=guild
|
||||
let tdindex=document.createElement('td')
|
||||
tdindex.innerHTML=index
|
||||
tr.appendChild(tditem)
|
||||
tr.appendChild(tdindex)
|
||||
table.appendChild(tr)
|
||||
}
|
||||
function createDashBox(color,title=null){
|
||||
let dashBox = document.createElement('div')
|
||||
dashBox.className='dash-full-box'
|
||||
dashBox.id=color
|
||||
if(title!=null){
|
||||
let dashtitle = document.createElement('p')
|
||||
dashtitle.className='dash-title'
|
||||
dashtitle.innerText=title
|
||||
dashBox.appendChild(dashtitle)
|
||||
}
|
||||
document.getElementById('dashboardcontent').appendChild(dashBox)
|
||||
let br= document.createElement('br')
|
||||
document.getElementById('dashboardcontent').appendChild(br)
|
||||
return dashBox
|
||||
}
|
||||
function spawnBaseDashBox(){
|
||||
let wdmbox = createDashBox('red')
|
||||
wdmbox.innerHTML=`<div class=fullcentered>
|
||||
<button id="withdrawalbutton" name="withdrawalbutton">Immediate Withdrawal</button>
|
||||
</div>`
|
||||
let mobox = createDashBox('green','MONEY INFOS:')
|
||||
mobox.innerHTML = `
|
||||
<p><b>Your Current balance: </b><span id="playermoney">NODATA</span>$</p>
|
||||
<p><b>Current balance of your Guild: </b><span id=guildmoney>NODATA</span>$</p>`
|
||||
let markbox = createDashBox('yellow','TRADE INFOS:')
|
||||
markbox.innerHTML=`<b>Market price of items:</b>
|
||||
<div class="tablecontainer">
|
||||
<table >
|
||||
<thead>
|
||||
<th>
|
||||
Items:
|
||||
</th>
|
||||
<th>
|
||||
Price:
|
||||
</th>
|
||||
</thead>
|
||||
<tbody id="balanceitems">
|
||||
</tbody>
|
||||
</table>
|
||||
</div>`
|
||||
let lbbox = createDashBox('orange','LEADERBOARD:')
|
||||
lbbox.innerHTML=`<div class="tablecontainer">
|
||||
<table>
|
||||
<thead>
|
||||
<th>
|
||||
Player:
|
||||
</th>
|
||||
<th>
|
||||
Place:
|
||||
</th>
|
||||
</thead>
|
||||
<tbody id="playerlb">
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="tablecontainer">
|
||||
<table>
|
||||
<thead>
|
||||
<th>
|
||||
Guild:
|
||||
</th>
|
||||
<th>
|
||||
Place:
|
||||
</th>
|
||||
</thead>
|
||||
<tbody id="guildlb">
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
`
|
||||
|
||||
}
|
||||
function loadscript(){
|
||||
createauth()
|
||||
}
|
||||
window.onload=loadscript
|
||||
function startscript(){
|
||||
if(auth(loginusername,loginpassword)){
|
||||
mainscript(loginusername,loginpassword)
|
||||
}
|
||||
}
|
||||
function mainscript(username,password){
|
||||
spawnBaseDashBox()
|
||||
showGameDatas(username,password)
|
||||
}
|
||||
function createauth(){
|
||||
document.getElementById('dashboardcontent').innerHTML=`<div id=logindiv id=logindiv><div id=loginindic style="background-color:red; color:white"></div><input type=text id=loginusername placeholder="Your UserName"><br><input type=password id=loginpassword placeholder="Your PassWord"><br><button onclick="loginsubmit()">Se connecter</button></div>`
|
||||
}
|
||||
function loginsubmit(){
|
||||
loginusername = document.getElementById('loginusername').value
|
||||
loginpassword = document.getElementById('loginpassword').value
|
||||
startscript()
|
||||
}
|
||||
function auth(username,password){
|
||||
if(checkauth(username,password)){
|
||||
document.getElementById('logindiv').remove()
|
||||
return true
|
||||
}
|
||||
else{
|
||||
document.getElementById('loginindic').innerHTML='Bad Password or Username'
|
||||
return false
|
||||
}
|
||||
}
|
||||
function checkauth(username, password){
|
||||
const [check, index] = checkusername(username)
|
||||
if(check){
|
||||
if(logindb.loginplayer[index].password===password){
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
function checkusername(username){
|
||||
for(let i=0; i<logindb.loginplayer.length;i++){
|
||||
if(username===logindb.loginplayer[i].username){
|
||||
return [true , i]
|
||||
}
|
||||
}
|
||||
return [false , null]
|
||||
}
|
||||
|
||||
function fetchGameDatas(username,password){
|
||||
//fetch: return this normally
|
||||
let gamedatas = {
|
||||
playermoney:999999,
|
||||
guildmoney:999999999999,
|
||||
itemprice:[['Uranium',299],['EpicRubadium',599],['SuperExoticalFractalium',99999],['Iron',50],['Wood',20],['Steak',10],['Apple',5]],
|
||||
playerlb:['TheBestUser','TheSecondUser','ThethirdUser','hello','world','how','are','you','men'],
|
||||
guildlb:['BestGuild','SecondGuild','ThirdGuild','vote','for','the','best','guild','that','is','adminGuild!!!'],
|
||||
playerusername:'testuser',
|
||||
playerpicture:'https://cdn.discordapp.com/avatars/917123777488384021/d3a5dbeb89d98da26f30b061156e6868.webp?size=128'
|
||||
}
|
||||
return gamedatas //else if error return null
|
||||
}
|
||||
function showGameDatas(username,password){
|
||||
let gamedatas = fetchGameDatas(username,password)
|
||||
if(gamedatas!=null){
|
||||
gid('playermoney').innerHTML=gamedatas.playermoney
|
||||
gid('guildmoney').innerHTML=gamedatas.guildmoney
|
||||
for(let i =0; i< gamedatas.itemprice.length;i++){
|
||||
addItemToMarketTable(gamedatas.itemprice[i][0],gamedatas.itemprice[i][1])
|
||||
}
|
||||
for(let i=0;i<gamedatas.guildlb.length;i++){
|
||||
addGuildToLBTable(gamedatas.guildlb[i],i)
|
||||
}
|
||||
for(let i = 0; i<gamedatas.playerlb.length;i++){
|
||||
addPlayerToLBTable(gamedatas.playerlb[i],i)
|
||||
}
|
||||
gid('playername').innerHTML=gamedatas.playerusername
|
||||
gid('playerpicture').src=gamedatas.playerpicture
|
||||
}
|
||||
}
|
||||
function gid(id){
|
||||
return document.getElementById(id)
|
||||
}
|
||||
function withdrawal(){
|
||||
alert('Order Send, you\'re troops back home to your base')
|
||||
}
|
||||
document.getElementById('withdrawalbutton').addEventListener('click',withdrawal)
|
||||
21
main-site/fractal/index.html
Normal file
21
main-site/fractal/index.html
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="//api.gzod01.fr/pictures/gzod01.ico">
|
||||
<link rel="stylesheet" href="//api.gzod01.fr/css/style.css">
|
||||
<script src="//api.gzod01.fr/scripts/main.js"></script>
|
||||
<title>fractal/index.html</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="header"></div>
|
||||
<div class=content>
|
||||
<div class=fullcentered>
|
||||
<a href="dashboard">Go to your dashboard (you need to create an account and a base in the game before)</a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in a new issue