anulax
/
skamkraft.anulax.ch
1
0
Fork 0
Code Issues Pull Requests Packages project_board Releases Wiki Activity

Ajout du menu, de la page login et register

Browse Source
main
Makaci Michael Gabriel ago%!(EXTRA string=1 year)
parent d9f08aa7f4
commit 1558238940
14 changed files with 301 additions and 29 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 27
      css/auth.css
  2. 129
      css/global.css
  3. 0
      html/auth/login.html
  4. 13
      html/template.html
  5. 19
      html/templates/auth/login.html
  6. 23
      html/templates/auth/register.html
  7. 3
      html/templates/home.html
  8. 3
      html/templates/modal_profile.html
  9. 2
      index.html
  10. 6
      js/controllers/home.js
  11. 9
      js/controllers/login.js
  12. 29
      js/controllers/menu_mod.js
  13. 9
      js/controllers/profile.js
  14. 58
      js/controllers/register.js

27
css/auth.css
Unescape View File

@ -0,0 +1,27 @@
.auth-container {
height: inherit;
display: flex;
justify-content: center;
align-items: center;
}
.auth{
width: 300px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: var(--main-color);
padding: 30px;
border-radius: 5px;
}
.auth-grp-label {
font-size: 20px;
display: flex;
justify-content: space-between;
}
.errors {
color: red;
}

129
css/global.css
Unescape View File

@ -0,0 +1,129 @@
@font-face {
font-family: pixellari;
src: url("/assets/fonts/Pixellari.ttf");
}
:root {
--text-color: white;
--text-familly: pixellari;
--main-color: black;
--sec-color: rgba(69, 128, 255, 0.842);
}
body{
background-image: url("/assets/img/background.png");
background-repeat: no-repeat;
background-size: 100%;
overflow-x: hidden;
font-family: var(--text-familly);
color: var(--text-color);
margin: 0;
padding: 0;
}
button{
font-family: var(--text-familly);
color: var(--text-color);
}
input{
font-family: var(--text-familly);
color: var(--text-color);
}
select {
font-family: var(--text-familly);
color: var(--text-color);
}
#block-content{
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
}
.modal-disable::backdrop {
background-color: rgba(0, 0, 0, 0.493);
}
.ext-modal[open] {
animation: myFadeIn 0.5s ease normal;
}
@keyframes myFadeIn{
from {
bottom: 100%;
}
to {
bottom: 0%;
}
}
.languettes {
right: -30px;
top: 25%;
width: 80px;
position: absolute;
display: flex;
flex-direction: column;
align-items:flex-end;
}
.languettes input{
width: 100%;
}
.languettes input:hover{
animation: slide-left;
position: relative;
animation-timing-function: ease;
animation-fill-mode: forwards;
animation-duration: 1s;
}
@keyframes slide-left {
0% {right: 0px; top: 0px;}
100% {right: 25px; top: 0px;}
}
.title{
font-size: 50px;
}
::placeholder {
color: var(--text-color);
}
.base-input{
margin: 5px;
padding: 10px;
border: none;
border-radius: 5px;
background-color: var(--sec-color);
font-size: 20px;
}
.base-input:active{
background-color: var(--sec-color);
font-size: 20px;
}
.base-btn{
margin: 2px;
padding: 10px;
border: none;
border-radius: 5px;
background-color: var(--sec-color);
font-size: 20px;
}
.base-btn:hover{
box-shadow: 1px 1px 1px 0px rgba(88, 88, 252, 0.842);
}
.base-select {
margin: 5px;
padding: 10px;
border: none;
border-radius: 3px;
background-color: var(--sec-color);
font-size: 15px;
}

0
html/auth/login.html
Unescape View File

13
html/template.html
Unescape View File

@ -1,16 +1,11 @@
<audio id="audio" controls loop style="display:none" crossorigin="anonymous">
<source src="/assets/sounds/skamkraft_main_theme.mp3" type="audio/mpeg">
<!-- <source src="/assets/sounds/skamkraft_main_theme.mp3" type="audio/mpeg"> -->
</audio>
<script>
document.getElementById('audio').play();
// document.getElementById('audio').play();
</script>
<div class="languettes">
<input type="image" alt="languette1" id="home-link" src="/assets/menu/home.png"/>
<input type="image" alt="languette2" src="/assets/menu/contracts.png"/>
<input type="image" alt="languette3" src="/assets/menu/ships.png"/>
<input type="image" alt="languette4" src="/assets/menu/info.png"/>
<input type="image" alt="languette5" src="/assets/menu/leaderboard.png"/>
<div id="links" class="languettes">
</div>
<div id="block-content">
</div>

19
html/templates/auth/login.html
Unescape View File

@ -0,0 +1,19 @@
<!-- Copyright © 2023 Entreprise SkamKraft -->
<div class="auth-container">
<div class="auth">
<p class="title">Login</p>
<input type="text" placeholder="Agent token" class="base-input" id="in-token">
<div class="auth-grp-label">
<p>Remember me ?</p>
<input type="checkbox" class="base-input" id="in-remember">
</div>
<div>
<button class="base-btn" id="btn-login">Validate</button>
<button class="base-btn" id="btn-cancel">Cancel</button>
</div>
<div>
<button class="base-btn" id="btn-register">New agent</button>
</div>
<div class="errors"></div>
</div>
</div>

23
html/templates/auth/register.html
Unescape View File

@ -0,0 +1,23 @@
<!-- Copyright © 2023 Entreprise SkamKraft -->
<div class="auth-container">
<div class="auth">
<p class="title">New Agent</p>
<input type="text" placeholder="Name" class="base-input" id="in-name">
<select class="base-select" id="in-faction">
<option value="" disabled selected>Factions</option>
<optgroup id="group-faction"></optgroup>
</select>
<div class="auth-grp-label">
<p>Remember me ?</p>
<input type="checkbox" class="base-input" id="in-remember">
</div>
<div>
<button class="base-btn" id="btn-register">Validate</button>
<button class="base-btn" id="btn-cancel">Cancel</button>
</div>
<div>
<button class="base-btn" id="btn-log">Login</button>
</div>
<div class="errors"></div>
</div>
</div>

3
html/templates/home.html
Unescape View File

@ -0,0 +1,3 @@
<div>
<p class="title">Home</p>
</div>

3
html/templates/modal_profile.html
Unescape View File

@ -0,0 +1,3 @@
<div>
<p class="title">Profile</p>
</div>

2
index.html
Unescape View File

@ -8,6 +8,8 @@
<script src="js/lib/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="module" src="js/index.js" defer></script>
<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="css/auth.css">
</head>
<body>

6
js/controllers/home.js
Unescape View File

@ -0,0 +1,6 @@
import menu_mod from "./menu_mod.js";
export default function home(temp_engine) {
temp_engine.after_render(menu_mod);
temp_engine.render("templates/home.html");
}

9
js/controllers/login.js
Unescape View File

@ -1,7 +1,8 @@
import { Auth } from "../skama_code/auth/auth.js";
import { My } from "../skama_code/api/agent.js";
import { My } from "../skama_code/commun/my.js";
import home from "./home.js";
import menu_mod from "./menu_mod.js";
import register from "./register.js";
export default function login(temp_engine) {
const auth = new Auth();
@ -20,6 +21,10 @@ export default function login(temp_engine) {
$("#in-token").val("");
$("#in-remember").prop("checked", false);
});
temp_engine.add_event("#btn-register", "click", () => {
register(temp_engine);
});
});
auth.done((agent) => {
@ -34,5 +39,5 @@ export default function login(temp_engine) {
});
});
temp_engine.render(`templates/auth/login.html`);
temp_engine.render("templates/auth/login.html");
}

29
js/controllers/menu_mod.js
Unescape View File

@ -1,27 +1,20 @@
import { My } from "../skama_code/api/agent.js";
import { My } from "../skama_code/commun/my.js";
import login from "./login.js";
import profile from "./profile.js";
function init_menu(temp_engine) {
temp_engine.add_event("#login-link", "click", () => {
login(temp_engine);
});
}
function loged_links() {
function loged_links(temp_engine) {
$("#links").html(`
<input type="image" alt="home" id="systems-link" src="/assets/menu/home.png"/>
<input type="image" alt="contracts" id="contracts-link" src="/assets/menu/contracts.png"/>
<input type="image" alt="ships" id="ships-link" src="/assets/menu/ships.png"/>
<input type="image" alt="info" src="/assets/menu/info.png"/>
<input type="image" alt="leaderboard" src="/assets/menu/leaderboard.png"/>
`);
<input type="image" alt="profile" id="profile-link" src="/assets/menu/info.png"/>
<input type="image" alt="leaderboard" id="leaderboard-link" src="/assets/menu/leaderboard.png"/>
`);
temp_engine.add_event("#profile-link", "click", () => {
profile(temp_engine);
});
}
export default function menu_mod(temp_engine) {
init_menu(temp_engine);
if (My.agent) {
loged_links();
} else {
unloged_links();
}
export default (temp_engine) => {
if(My.agent) loged_links(temp_engine);
}

9
js/controllers/profile.js
Unescape View File

@ -0,0 +1,9 @@
import { Modal } from "../skama_code/ui/modal.js"
export default function profile(temp_engine) {
let modal = new Modal("profile-modal", temp_engine);
modal.load("templates/modal_profile.html");
modal.after_load((temp_engine) => {
modal.show();
});
}

58
js/controllers/register.js
Unescape View File

@ -0,0 +1,58 @@
import { Auth } from "../skama_code/auth/auth.js";
import { My } from "../skama_code/commun/my.js";
import { Faction } from "../skama_code/api/faction.js";
import home from "./home.js";
import login from "./login.js";
import menu_mod from "./menu_mod.js";
export default function register(temp_engine) {
let auth = new Auth();
temp_engine.after_render((temp_engine) => {
menu_mod(temp_engine);
Faction.list_all((factions) => {
factions.forEach((faction) => {
let option;
if (faction.isRecruiting) {
option = `<option>${faction.symbol}</option>`;
} else {
option = `<option disabled>${faction.symbol}</option>`;
}
$("#group-faction").append(option);
});
});
temp_engine.add_event("#btn-register", "click", () => {
const is_checked = $("#in-remember").is(":checked");
const symbol = $("#in-name").val();
const faction = $("#in-faction").val();
auth.store = is_checked;
auth.register({ name: symbol, faction: faction });
});
temp_engine.add_event("#btn-cancel", "click", () => {
$("#in-name").val("");
$("#in-remember").prop("checked", false);
});
temp_engine.add_event("#btn-log", "click", () => {
login(temp_engine);
});
});
auth.done((agent) => {
My.agent = agent;
home(temp_engine);
});
auth.fail((errors) => {
$(".errors").html("");
errors.forEach((error) => {
$(".errors").append(`<p>${error}</p>`);
});
});
temp_engine.render(`templates/auth/register.html`);
}
Write Preview
Loading…
Cancel
Save