Cleaned up Codebase after finishing Tutorial on php and adding files, styles some logic for LearningPlattform Projekt
This commit is contained in:
Patryk Hegenberg
parent
1b0b12b655
commit
cbabe10ee9
22 changed files with 16 additions and 3419 deletions
|
|
@ -1,3 +0,0 @@
|
|||
<?php
|
||||
$heading = "About Us";
|
||||
require "views/about.view.php";
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
<?php
|
||||
$heading = "Contact Us";
|
||||
require "views/contact.view.php";
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
<?php
|
||||
require('Validator.php');
|
||||
$heading = 'Create Note';
|
||||
$username = 'appUser';
|
||||
$password = 'password';
|
||||
$config = require('config.php');
|
||||
$db = new Database($config['database'], $username, $password);
|
||||
|
||||
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
||||
$errors = [];
|
||||
|
||||
if (! Validator::string($_POST['body'], 1, 1000)) {
|
||||
$errors['body'] = 'A body of no more than 1000 characters is required.';
|
||||
}
|
||||
if (empty($errors)) {
|
||||
|
||||
$db->query("INSERT INTO notes (body, user_id) VALUES (:body, :user_id)", [
|
||||
'body' => $_POST['body'],
|
||||
'user_id' => 1
|
||||
]);
|
||||
}
|
||||
}
|
||||
require 'views/notes/create.view.php';
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<?php
|
||||
$username = 'appUser';
|
||||
$password = 'password';
|
||||
$config = require('config.php');
|
||||
$db = new Database($config['database'], $username, $password);
|
||||
|
||||
$heading = "My Notes";
|
||||
|
||||
$notes = $db->query('select * from notes where user_id = 1')->get();
|
||||
//dd($notes);
|
||||
require "views/notes/index.view.php";
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<?php
|
||||
$username = 'appUser';
|
||||
$password = 'password';
|
||||
$config = require('config.php');
|
||||
$db = new Database($config['database'], $username, $password);
|
||||
|
||||
$heading = "Note";
|
||||
$currentUserId = 1;
|
||||
|
||||
$note = $db->query('select * from notes where id = :id', [
|
||||
'id' => $_GET['id']
|
||||
])->findOrFail();
|
||||
|
||||
authorize(($note['user_id'] === $currentUserId));
|
||||
|
||||
|
||||
//dd($notes);
|
||||
require "views/notes/show.view.php";
|
||||
|
|
@ -10,8 +10,8 @@
|
|||
return $_SERVER['REQUEST_URI'] === $value;
|
||||
}
|
||||
|
||||
function authorize($condition) {
|
||||
function authorize($condition, $status = Response::FORBIDDEN) {
|
||||
if (! $condition) {
|
||||
abort(Response::FORBIDDEN);
|
||||
abort($status);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Mathespiel</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h3>Schreibe die richtige Zahl oder das richtige Rechenzeichen in die Lücke</h3>
|
||||
<div id="question"></div>
|
||||
<button id="submit-btn">Bestätigen</button>
|
||||
<p id="error-msg">Da gab es einen Fehler</p>
|
||||
</div>
|
||||
<div class="controls-container">
|
||||
<p id="result"></p>
|
||||
<button id="start-btn">Spiel starten</button>
|
||||
|
||||
</div>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,14 +1,9 @@
|
|||
<?php
|
||||
return[
|
||||
'/' => 'controllers/index.php',
|
||||
'/about' => 'controllers/about.php',
|
||||
'/contact' => 'controllers/contact.php',
|
||||
'/learn' => 'controllers/learn.php',
|
||||
'/mathe' => 'controllers/mathe.php',
|
||||
'/game' => 'controllers/game.php',
|
||||
'/note' => 'controllers/notes/show.php',
|
||||
'/notes' => 'controllers/notes/index.php',
|
||||
'/addition' => 'controllers/addition.php',
|
||||
'/notes/create' => 'controllers/notes/create.php',
|
||||
'/login' => 'controllers/login.php'
|
||||
];
|
||||
|
|
|
|||
93
script.js
93
script.js
|
|
@ -1,93 +0,0 @@
|
|||
let operators = ["*"];
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const question = document.getElementById("question");
|
||||
const controls = document.querySelector(".controls-container");
|
||||
const result = document.getElementById("result");
|
||||
const submitBtn = document.getElementById("submit-btn");
|
||||
const errorMessage = document.getElementById("error-msg");
|
||||
let answerValue;
|
||||
let operatorQuestion;
|
||||
|
||||
//Random Value Generator
|
||||
const randomValue = (min, max) => Math.floor(Math.random() * (max - min)) + min;
|
||||
|
||||
const questionGenerator = () => {
|
||||
//Two random values between 1 and 20
|
||||
let [num1, num2] = [randomValue(1, 10), randomValue(1, 10)];
|
||||
|
||||
//For getting random operator
|
||||
let randomOperator = operators[Math.floor(Math.random() * operators.length)];
|
||||
|
||||
if (randomOperator == "-" && num2 > num1) {
|
||||
[num1, num2] = [num2, num1];
|
||||
}
|
||||
|
||||
//Solve equation
|
||||
let solution = eval(`${num1}${randomOperator}${num2}`);
|
||||
|
||||
//For placing the input at random position
|
||||
//(1 for num1, 2 for num2, 3 for operator, anything else(4) for solution)
|
||||
let randomVar = randomValue(1, 3);
|
||||
|
||||
if (randomVar == 1) {
|
||||
answerValue = num1;
|
||||
question.innerHTML = `<input type="number" id="inputValue" placeholder="?"\> ${randomOperator} ${num2} = ${solution}`;
|
||||
} else if (randomVar == 2) {
|
||||
answerValue = num2;
|
||||
question.innerHTML = `${num1} ${randomOperator}<input type="number" id="inputValue" placeholder="?"\> = ${solution}`;
|
||||
} else if (randomVar == 3) {
|
||||
answerValue = randomOperator;
|
||||
operatorQuestion = true;
|
||||
question.innerHTML = `${num1} <input type="text" id="inputValue" placeholder="?"\> ${num2} = ${solution}`;
|
||||
} else {
|
||||
answerValue = solution;
|
||||
question.innerHTML = `${num1} ${randomOperator} ${num2} = <input type="number" id="inputValue" placeholder="?"\>`;
|
||||
}
|
||||
|
||||
//User Input Check
|
||||
submitBtn.addEventListener("click", () => {
|
||||
errorMessage.classList.add("hide");
|
||||
let userInput = document.getElementById("inputValue").value;
|
||||
//If user input is not empty
|
||||
if (userInput) {
|
||||
//If the user guessed correct answer
|
||||
if (userInput == answerValue) {
|
||||
stopGame(`Das war richtig!!`);
|
||||
}
|
||||
//If user inputs operator other than +,-,*
|
||||
else if (operatorQuestion && !operators.includes(userInput)) {
|
||||
errorMessage.classList.remove("hide");
|
||||
errorMessage.innerHTML = "Please enter a valid operator";
|
||||
}
|
||||
//If user guessed wrong answer
|
||||
else {
|
||||
stopGame(`Ups!! Das war leider falsch.`);
|
||||
}
|
||||
}
|
||||
//If user input is empty
|
||||
else {
|
||||
errorMessage.classList.remove("hide");
|
||||
errorMessage.innerHTML = "Input Cannot Be Empty";
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//Start Game
|
||||
startBtn.addEventListener("click", () => {
|
||||
operatorQuestion = false;
|
||||
answerValue = "";
|
||||
errorMessage.innerHTML = "";
|
||||
errorMessage.classList.add("hide");
|
||||
//Controls and buttons visibility
|
||||
controls.classList.add("hide");
|
||||
startBtn.classList.add("hide");
|
||||
questionGenerator();
|
||||
});
|
||||
|
||||
//Stop Game
|
||||
const stopGame = (resultText) => {
|
||||
result.innerHTML = resultText;
|
||||
startBtn.innerText = "Weiter";
|
||||
controls.classList.remove("hide");
|
||||
startBtn.classList.remove("hide");
|
||||
};
|
||||
96
script2.js
96
script2.js
|
|
@ -1,96 +0,0 @@
|
|||
//let operators = ["+", "-", "*"];
|
||||
let operators = ["*"];
|
||||
const startBtn = document.getElementById("start-btn");
|
||||
const question = document.getElementById("question");
|
||||
const controls = document.querySelector(".controls-container");
|
||||
const result = document.getElementById("result");
|
||||
const submitBtn = document.getElementById("submit-btn");
|
||||
const errorMessage = document.getElementById("error-msg");
|
||||
let answerValue;
|
||||
let operatorQuestion;
|
||||
|
||||
//Zufallswerte generieren
|
||||
const randomValue = (min, max) => Math.floor(Math.random() * (max - min)) + min;
|
||||
|
||||
const questionGenerator = () => {
|
||||
//Zwei Zufallszahlen zwischen 1 und 20
|
||||
let [num1, num2] = [randomValue(1, 10), randomValue(1, 10)];
|
||||
|
||||
//Zufälliges Rechenzeichen
|
||||
let randomOperator = operators[Math.floor(Math.random() * operators.length)];
|
||||
|
||||
if (randomOperator == "-" && num2 > num1) {
|
||||
[num1, num2] = [num2, num1];
|
||||
}
|
||||
|
||||
//Aufgabe
|
||||
let solution = eval(`${num1}${randomOperator}${num2}`);
|
||||
|
||||
//Eingabe an zufälliger Stelle innerhalb der Aufgabe
|
||||
//(1 für num1, 2 für num2, 3 for Rechenzeichen, alle anderen(4) für Ergebnis)
|
||||
//let randomVar = randomValue(1, 5);
|
||||
let randomVar = randomValue(1, 3);
|
||||
|
||||
if (randomVar == 1) {
|
||||
answerValue = num1;
|
||||
question.innerHTML = `<input type="number" id="inputValue" placeholder="?"\> ${randomOperator} ${num2} = ${solution}`;
|
||||
} else if (randomVar == 2) {
|
||||
answerValue = num2;
|
||||
question.innerHTML = `${num1} ${randomOperator}<input type="number" id="inputValue" placeholder="?"\> = ${solution}`;
|
||||
} else if (randomVar == 3) {
|
||||
answerValue = randomOperator;
|
||||
operatorQuestion = true;
|
||||
question.innerHTML = `${num1} <input type="text" id="inputValue" placeholder="?"\> ${num2} = ${solution}`;
|
||||
} else {
|
||||
answerValue = solution;
|
||||
question.innerHTML = `${num1} ${randomOperator} ${num2} = <input type="number" id="inputValue" placeholder="?"\>`;
|
||||
}
|
||||
|
||||
//Nutzereingabe prüfen
|
||||
submitBtn.addEventListener("click", () => {
|
||||
errorMessage.classList.add("hide");
|
||||
let userInput = document.getElementById("inputValue").value;
|
||||
//Wenn Eingabe nicht leer
|
||||
if (userInput) {
|
||||
//Bei richtiger Eingabe
|
||||
if (userInput == answerValue) {
|
||||
stopGame(`Das war richtig!!`);
|
||||
}
|
||||
//Wenn der Nutzer ein anderes Rechenzeichen als +,-,* eingibt
|
||||
else if (operatorQuestion && !operators.includes(userInput)) {
|
||||
errorMessage.classList.remove("hide");
|
||||
errorMessage.innerHTML = "Gib bitte ein gültiges Rechenzeichen ein.";
|
||||
}
|
||||
//Bei falscher Antwort
|
||||
else {
|
||||
stopGame(`Ups!! Das war leider falsch.`);
|
||||
}
|
||||
}
|
||||
//Wenn Nutzereingabe leer ist
|
||||
else {
|
||||
errorMessage.classList.remove("hide");
|
||||
errorMessage.innerHTML = "Die Eingabe darf nicht leer sein.";
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//Spiel starten
|
||||
startBtn.addEventListener("click", () => {
|
||||
operatorQuestion = false;
|
||||
answerValue = "";
|
||||
errorMessage.innerHTML = "";
|
||||
errorMessage.classList.add("hide");
|
||||
//Sichtbarkeit Buttons und Controls
|
||||
controls.classList.add("hide");
|
||||
startBtn.classList.add("hide");
|
||||
questionGenerator();
|
||||
});
|
||||
|
||||
//Spiel beenden
|
||||
const stopGame = (resultText) => {
|
||||
rightCounter += 1;
|
||||
result.innerHTML = resultText;
|
||||
startBtn.innerText = "Weiter";
|
||||
controls.classList.remove("hide");
|
||||
startBtn.classList.remove("hide");
|
||||
};
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
// It's the "microrogue" tileset
|
||||
|
||||
const tileSet = document.createElement("img");
|
||||
tileSet.src = "colored_tilemap_packed.png";
|
||||
tileSet.src = "./../images/colored_tilemap_packed.png";
|
||||
|
||||
const tileOptions = {
|
||||
layout: "tile",
|
||||
|
|
|
|||
118
style.css
118
style.css
|
|
@ -1,118 +0,0 @@
|
|||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "Poppins", sans-serif;
|
||||
}
|
||||
body {
|
||||
background-color: #33adee;
|
||||
}
|
||||
.container {
|
||||
background-color: #ffffff;
|
||||
width: 90%;
|
||||
max-width: 31.25em;
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
padding: 5em 3em;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
.container h3 {
|
||||
font-size: 1.2em;
|
||||
color: #23234c;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
line-height: 1.8em;
|
||||
}
|
||||
.container #submit-btn {
|
||||
font-size: 1.2em;
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
background-color: #33adee;
|
||||
border-radius: 0.3em;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
color: #1d1d20;
|
||||
padding: 0.6em 2em;
|
||||
}
|
||||
#error-msg {
|
||||
text-align: center;
|
||||
margin-top: 1em;
|
||||
background-color: #ffdde0;
|
||||
color: #d62f2f;
|
||||
padding: 0.2em 0;
|
||||
}
|
||||
.container #question {
|
||||
background-color: #eeedf1;
|
||||
font-size: 2em;
|
||||
font-weight: 600;
|
||||
color: #23234c;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 1.4em 0 1em 0;
|
||||
padding: 1em 0;
|
||||
}
|
||||
.container input {
|
||||
font-size: 1em;
|
||||
font-weight: 600;
|
||||
width: 2.35em;
|
||||
color: #23234c;
|
||||
text-align: center;
|
||||
padding: 0 0.2em;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
border-bottom: 0.12em solid #23234c;
|
||||
margin: 0 0.25em;
|
||||
}
|
||||
.container input:focus {
|
||||
border-color: #33adee;
|
||||
outline: none;
|
||||
}
|
||||
/*Hide Number Arrows*/
|
||||
.container input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
.container input[type="number"]::-webkit-outer-spin-button,
|
||||
.container input[type="number"]::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
.controls-container {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
background-color: #33adee;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
}
|
||||
#start-btn {
|
||||
font-size: 1.2em;
|
||||
font-weight: 500;
|
||||
background-color: #ffffff;
|
||||
color: #23234c;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
padding: 0.8em 1.8em;
|
||||
border-radius: 0.3em;
|
||||
}
|
||||
#result {
|
||||
margin-bottom: 1em;
|
||||
font-size: 1.5em;
|
||||
color: #23234c;
|
||||
}
|
||||
#result span {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
<?php require('partials/head.php') ?>
|
||||
<?php require('partials/nav.php') ?>
|
||||
<?php require('partials/banner.php') ?>
|
||||
<main>
|
||||
<div class="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">
|
||||
<p>Now you are on the about page.</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<?php require('partials/footer.php') ?>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
<?php require ('partials/head.php') ?>
|
||||
<?php require ('partials/nav.php') ?>
|
||||
<?php require ('partials/banner.php') ?>
|
||||
<main>
|
||||
<div class="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">
|
||||
<!-- Replace with your content -->
|
||||
<p>Now you are on the contact page.</p>
|
||||
</div>
|
||||
<!-- /End replace -->
|
||||
</div>
|
||||
</main>
|
||||
<?php require ('partials/footer.php') ?>
|
||||
476
views/game.css
476
views/game.css
|
|
@ -1,476 +0,0 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P');
|
||||
|
||||
.game-title-text {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
touch-action: manipulation;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Press Start 2P', cursive;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px auto;
|
||||
font-size: 1.5em;
|
||||
background-color: #222323;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
@media (max-width: 700px), (max-height: 820px) {
|
||||
body {
|
||||
font-size: 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
canvas {
|
||||
image-rendering: optimizeSpeed;
|
||||
image-rendering: crisp-edges;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
image-rendering: -o-crisp-edges;
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
-ms-interpolation-mode: nearest-neighbor;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #e77;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #faa;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/*** NES.css overrides ***/
|
||||
|
||||
.nes-container.is-rounded.is-dark {
|
||||
border-image-slice: 9 9 9 9 fill;
|
||||
border-image-source: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAphgAAKYYBIuzfjAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABgSURBVEiJY2AYBQQAIzGK/v///x+rZkZGgvqZSHURqYDmFrDgkkAOFikpZYJqcAXX0A8iFG8REyy4wLNndxGGIgXX0A+iUQsIApxlCTEpClfKQQbDOIiQwcgurkcBQQAARlMedugABy8AAAAASUVORK5CYII=');
|
||||
background-color: transparent;
|
||||
border-image-repeat: stretch;
|
||||
}
|
||||
|
||||
.nes-container.is-fake-rounded.is-dark::after {
|
||||
background: none;
|
||||
}
|
||||
|
||||
/*** screens ***/
|
||||
|
||||
.screen {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #222323;
|
||||
}
|
||||
|
||||
#title {
|
||||
background-image: url(bg.png);
|
||||
background-size: cover;
|
||||
animation: 20s para infinite ease;
|
||||
}
|
||||
|
||||
@keyframes para {
|
||||
0% {
|
||||
background-position: 0px 0%;
|
||||
}
|
||||
50% {
|
||||
background-position: 0px 80px;
|
||||
}
|
||||
100% {
|
||||
background-position: 0px 0px;
|
||||
}
|
||||
}
|
||||
|
||||
#plate {
|
||||
display: flex;
|
||||
animation: 2s plate-fade;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#plate > div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
padding: 40px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
@keyframes plate-fade {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
25% {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
75% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#plate > div > * + * {
|
||||
margin-left: 32px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
@media (max-width: 700px), (max-height: 820px) {
|
||||
#plate > div {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#plate > div > * + * {
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
#game-title {
|
||||
margin-bottom: 0px;
|
||||
width: 900px;
|
||||
max-width: 98%;
|
||||
}
|
||||
|
||||
@media (min-width: 700px) and (max-height: 820px) {
|
||||
#game-title {
|
||||
width: 900px;
|
||||
max-width: 98%;
|
||||
max-height: 35vh;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 600px) {
|
||||
#game-title {
|
||||
width: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
.game-title-animation {
|
||||
animation: 2s zoomInDown;
|
||||
}
|
||||
|
||||
/* https://github.com/animate-css/animate.css/blob/master/animate.css */
|
||||
@keyframes zoomInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
|
||||
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
|
||||
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
|
||||
}
|
||||
}
|
||||
|
||||
#options {
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
#menu {
|
||||
width: 400px;
|
||||
max-width: 100%;
|
||||
margin-bottom: 64px;
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
#menu label {
|
||||
margin-left: -1em;
|
||||
padding-top: 0.5em;
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.modal > * {
|
||||
max-width: 90%;
|
||||
width: 400px;
|
||||
margin: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 700px), (max-height: 820px) {
|
||||
.modal > * {
|
||||
margin: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
#instructions div > p {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#settings div > p {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#credits ul {
|
||||
list-style: "> ";
|
||||
padding-left: 2em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#credits ul li {
|
||||
margin: 0.5em 0px;
|
||||
}
|
||||
|
||||
.sprite {
|
||||
display: block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
image-rendering: optimizeSpeed;
|
||||
image-rendering: crisp-edges;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
image-rendering: -o-crisp-edges;
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
-ms-interpolation-mode: nearest-neighbor;
|
||||
image-rendering: pixelated;
|
||||
transform: scale(8);
|
||||
background-image: url("colored_tilemap_packed.png");
|
||||
margin: 80px auto;
|
||||
}
|
||||
|
||||
.free {
|
||||
position: absolute;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
|
||||
.tomb {
|
||||
background-position: -72px -56px;
|
||||
}
|
||||
|
||||
.ghost {
|
||||
background-position: -72px -8px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.empty {
|
||||
background-position: -8px -48px;
|
||||
}
|
||||
|
||||
.float-up {
|
||||
animation: float-up 2s linear forwards;
|
||||
}
|
||||
|
||||
@keyframes float-up {
|
||||
from {
|
||||
transform: scale(1) translate(0px, 0px);
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
transform: scale(3) translate(0px, -20px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.grow-fade {
|
||||
animation: grow-fade 2s linear;
|
||||
}
|
||||
|
||||
@keyframes grow-fade {
|
||||
from {
|
||||
transform: translate(0px, 0px) scale(8);
|
||||
opacity: 0.5;
|
||||
}
|
||||
to {
|
||||
transform: translate(0px, 0px) scale(16);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#play {
|
||||
width: 400px;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
#win {
|
||||
background: url(01coin.gif);
|
||||
background-size: 20%;
|
||||
}
|
||||
|
||||
/*** HUD ***/
|
||||
|
||||
#hud {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
width: 600px;
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
#message {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#message .hit {
|
||||
color: #C01256;
|
||||
}
|
||||
|
||||
#message .miss {
|
||||
color: #FFB570;
|
||||
}
|
||||
|
||||
#inventory {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
#inventory .sprite {
|
||||
transform: scale(3);
|
||||
display: inline-block;
|
||||
margin: 1em 2em 1em 1em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#inventory li {
|
||||
margin: 1em 0px;
|
||||
}
|
||||
|
||||
#inventory ul {
|
||||
list-style-type: none;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
#inventory > div {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 750px) {
|
||||
#inventory {
|
||||
bottom: 72px;
|
||||
}
|
||||
|
||||
#hud {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#arrows {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
#arrows > * {
|
||||
float: left;
|
||||
font-size: 16px;
|
||||
bottom: 0px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#arrows > * > span {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#btn-left {
|
||||
position: absolute;
|
||||
right: 7em;
|
||||
}
|
||||
|
||||
#btn-right {
|
||||
position: absolute;
|
||||
right: 0em;
|
||||
}
|
||||
|
||||
#btn-up {
|
||||
transform: rotate(90deg);
|
||||
position: absolute;
|
||||
right: 3.5em;
|
||||
margin-bottom: 3.75em;
|
||||
}
|
||||
|
||||
#btn-down {
|
||||
transform: rotate(90deg);
|
||||
position: absolute;
|
||||
right: 3.5em;
|
||||
}
|
||||
|
||||
#btn-skip {
|
||||
position: absolute;
|
||||
right: 0em;
|
||||
margin-bottom: 3.75em;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
#arrows > * {
|
||||
bottom: 72px;
|
||||
}
|
||||
}
|
||||
|
||||
/*** CSS animations ***/
|
||||
|
||||
.fade-in {
|
||||
animation: fade-in 0.8s;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from{opacity:0} to{opacity:1}
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.show {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.fade-out {
|
||||
display: flex;
|
||||
opacity: 1;
|
||||
animation: fade-out 3s forwards;
|
||||
}
|
||||
|
||||
@keyframes fade-out {
|
||||
from{opacity:1; display: flex;} 50%{opacity:1; display: flex;} to{opacity:0; display: none;}
|
||||
}
|
||||
947
views/game.js
947
views/game.js
|
|
@ -1,947 +0,0 @@
|
|||
(function (w) {
|
||||
let count = 1;
|
||||
// game title
|
||||
const gametitle = "The Math Wizard";
|
||||
|
||||
/*****************
|
||||
*** resources ***
|
||||
*****************/
|
||||
|
||||
// This tileset is from kenney.nl
|
||||
// It's the "microrogue" tileset
|
||||
|
||||
const tileSet = document.createElement("img");
|
||||
tileSet.src = "colored_tilemap_packed.png";
|
||||
|
||||
const tileOptions = {
|
||||
layout: "tile",
|
||||
bg: "transparent",
|
||||
tileWidth: 8,
|
||||
tileHeight: 8,
|
||||
tileSet: tileSet,
|
||||
tileMap: {
|
||||
"@": [40, 0], // player
|
||||
".": [32, 32], // floor
|
||||
"M": [88, 0], // monster
|
||||
"*": [72, 24], // treasure chest
|
||||
"g": [64, 40], // gold
|
||||
"x": [56, 32], // axe
|
||||
"p": [56, 64], // potion
|
||||
"a": [40, 32], // tree 1
|
||||
"b": [32, 40], // tree 2
|
||||
"c": [40, 40], // tree 3
|
||||
"d": [48, 40], // tree 4
|
||||
"e": [56, 40], // tree 5
|
||||
"T": [72, 56], // tombstone
|
||||
"╔": [0, 72], // room corner
|
||||
"╗": [24, 72], // room corner
|
||||
"╝": [72, 72], // room corner
|
||||
"╚": [48, 72], // room corner
|
||||
"═": [8, 72], // room edge
|
||||
"║": [32, 72], // room edge
|
||||
"o": [40, 72], // room corner
|
||||
"D": [16, 16], //Door to win
|
||||
"s": [32, 24], //stairs to next Stage
|
||||
},
|
||||
width: 25,
|
||||
height: 40,
|
||||
};
|
||||
|
||||
const usePointer = true;
|
||||
const useArrows = true;
|
||||
const touchOffsetY = -20; // move the center by this much
|
||||
const scaleMobile = 4; // scale mobile screens by this much
|
||||
const scaleMonitor = 6; // scale computer screens by this much
|
||||
const turnLengthMS = 200; // shortest time between turns
|
||||
|
||||
// these map tiles are walkable
|
||||
const walkable = [".", "*", "g", "D", "s"];
|
||||
|
||||
// these map tiles should not be replaced by room edges
|
||||
const noreplace = walkable.concat(["M", "╔", "╗", "╚", "╝", "═", "║"]);
|
||||
|
||||
// These sound effects are generated using sfxr.me
|
||||
|
||||
const sfx = {
|
||||
rubber:
|
||||
"5EoyNVaezhPnpFZjpkcJkF8FNCioPncLoztbSHU4u9wDQ8W3P7puffRWvGMnrLRdHa61kGcwhZK3RdoDRitmtwn4JjrQsZCZBmDQgkP5uGUGk863wbpRi1xdA",
|
||||
step: "34T6PkwiBPcxMGrK7aegATo5WTMWoP17BTc6pwXbwqRvndwRjGYXx6rG758rLSU5suu35ZTkRCs1K2NAqyrTZbiJUHQmra9qvbBrSdbBbJ7JvmyBFVDo6eiVD",
|
||||
choice:
|
||||
"34T6PkzXyyB6jHiwFztCFWEWsogkzrhzAH3FH2d97BCuFhqmZgfuXG3xtz8YYSKMzn95yyX8xZXJyesKmpcjpEL3dPP5h2e8mt5MmhExAksyqZyqgavBgsWMd",
|
||||
hide: "34T6PkzXyyB6jHiwFztCFWEniygA1GJtjsQuGxcd38JLDquhRqTB28dQgigseMjQSjSY14Z3aBmAtzz9KWcJZ2o9S1oCcgqQY4dxTAXikS7qCs3QJ3KuWJUyD",
|
||||
empty:
|
||||
"111112RrwhZ2Q7NGcdAP21KUHHKNQa3AhmK4Xea8mbiXfzkxr9aX41M8XYt5xYaaLeo9iZdUKUVL3u2N6XASue2wPv2wCCDy6W6TeFiUjk3dXSzFcBY7kTAM",
|
||||
hit: "34T6Pks4nddGzchAFWpSTRAKitwuQsfX8bfzRpJx5eDR7NSqxeeLMEkLjcuwvTCDS1ve7amXBg4eipzDdgKWoYnJBsQVESZh2X1DFV2GWybY5bAihB2EdHsbd",
|
||||
miss: "8R25jogvbp3Qy6A4GTPxRP4aT2SywwsAgoJ2pKmxUFMExgNashjgd311MnmZ2ThwrPQz71LA53QCfFmYQLHaXo6SocUv4zcfNAU5SFocZnoQSDCovnjpioNz3",
|
||||
win: "34T6Pkv34QJsqDqEa8aV4iwF2LnASMc3683oFUPKZic6kVUHvwjUQi6rz8qNRUHRs34cu37P5iQzz2AzipW3DHMoG5h4BZgDmZnyLhsXgPKsq2r4Fb2eBFVuR",
|
||||
lose: "7BMHBGHKKnn7bgcmGprqiBmpuRaTytcd4JS9eRNDzUTRuQy8BTBzs5g8XzS7rrp4C9cNeSaqAtWR9qdvXvtnWVTmTC8GXgDuCXD2KyHJNXzfUahbZrce8ibuy",
|
||||
kill: "7BMHBGKMhg8NZkxKcJxNfTWXKtMPiZVNsLR4aPEAghCSpz5ZxpjS5k4j4ZQpJ65UZnHSr4R2d7ALCHJe41pAS2ZPjauM7SveudhDGAxw2dhXpiNwEhG8xUYkX",
|
||||
};
|
||||
|
||||
for (let s in sfx) {
|
||||
sfx[s] = new SoundEffect(sfx[s]).generate().getAudio();
|
||||
}
|
||||
|
||||
const keyMap = {
|
||||
38: 0,
|
||||
33: 1,
|
||||
39: 2,
|
||||
34: 3,
|
||||
40: 4,
|
||||
35: 5,
|
||||
37: 6,
|
||||
36: 7,
|
||||
};
|
||||
|
||||
/*****************
|
||||
*** game code ***
|
||||
*****************/
|
||||
|
||||
// based on the original tutorial by Ondřej Žára
|
||||
// www.roguebasin.com/index.php?title=Rot.js_tutorial,_part_1
|
||||
|
||||
const Game = {
|
||||
// this is the ROT.js display handler
|
||||
display: null,
|
||||
// this is our map data
|
||||
map: {},
|
||||
// map of all items
|
||||
items: {},
|
||||
// reference to the ROT.js engine which
|
||||
// manages stuff like scheduling
|
||||
engine: null,
|
||||
// schedules events in the game for ROT.js
|
||||
scheduler: null,
|
||||
// reference to the player object
|
||||
player: null,
|
||||
// reference to the game monsters array
|
||||
monsters: null,
|
||||
door: null,
|
||||
// arrow handler
|
||||
lastArrow: null, // arrow keys held
|
||||
arrowInterval: null, // arrow key repeat
|
||||
arrowListener: null, // registered listener for arrow event
|
||||
// clean up this game instance
|
||||
cleanup: cleanup,
|
||||
playerAllowedToMove: true,
|
||||
};
|
||||
|
||||
// this gets called by the menu system
|
||||
// to launch the actual game
|
||||
function init(game) {
|
||||
game.map = {};
|
||||
game.items = {};
|
||||
// first create a ROT.js display manager
|
||||
game.display = new ROT.Display(tileOptions);
|
||||
resetCanvas(game.display.getContainer());
|
||||
|
||||
generateMap(game, count);
|
||||
|
||||
// let ROT.js schedule the player and monster entities
|
||||
game.scheduler = new ROT.Scheduler.Simple();
|
||||
game.scheduler.add(game.player, true);
|
||||
game.monsters.map((m) => game.scheduler.add(m, true));
|
||||
|
||||
// render the stats hud at the bottom of the screen
|
||||
renderStats(game.player.stats);
|
||||
|
||||
// kick everything off
|
||||
game.engine = new ROT.Engine(game.scheduler);
|
||||
game.engine.start();
|
||||
count = 1;
|
||||
}
|
||||
|
||||
function nextStage(game, stage, stats) {
|
||||
game.map = {};
|
||||
game.items = {};
|
||||
game.display = new ROT.Display(tileOptions);
|
||||
resetCanvas(game.display.getContainer());
|
||||
if (game.engine) {
|
||||
game.scheduler.clear();
|
||||
game.scheduler = null;
|
||||
game.monsters = null;
|
||||
game.door = null;
|
||||
game.stairs = null;
|
||||
};
|
||||
generateMap(game, stage);
|
||||
|
||||
// let ROT.js schedule the player and monster entities
|
||||
game.scheduler = new ROT.Scheduler.Simple();
|
||||
game.scheduler.add(game.player, true);
|
||||
game.monsters.map((m) => game.scheduler.add(m, true));
|
||||
|
||||
// render the stats hud at the bottom of the screen
|
||||
game.player.stats = stats;
|
||||
renderStats(game.player.stats);
|
||||
|
||||
// kick everything off
|
||||
game.engine = new ROT.Engine(game.scheduler);
|
||||
game.engine.start();;
|
||||
}
|
||||
|
||||
// this gets called at the end of the game when we want
|
||||
// to exit back out and clean everything up to display
|
||||
// the menu and get ready for next round
|
||||
function destroy(game) {
|
||||
// remove all listening event handlers
|
||||
removeListeners(game);
|
||||
|
||||
// tear everything down
|
||||
if (game.engine) {
|
||||
game.engine.lock();
|
||||
game.display = null;
|
||||
game.map = {};
|
||||
game.items = {};
|
||||
game.engine = null;
|
||||
game.scheduler.clear();
|
||||
game.scheduler = null;
|
||||
game.player = null;
|
||||
game.monsters = null;
|
||||
game.door = null;
|
||||
game.stairs = null;
|
||||
}
|
||||
|
||||
// hide the toast message
|
||||
hideToast(true);
|
||||
// close out the game screen and show the title
|
||||
showScreen("title");
|
||||
}
|
||||
|
||||
// this generates the game map
|
||||
function generateMap(game, stage) {
|
||||
const digger = new ROT.Map.Digger(tileOptions.width, tileOptions.height);
|
||||
// list of floor tiles that can be walked on
|
||||
const freeCells = [];
|
||||
// list of non-floor tiles that can't be traversed
|
||||
const zeroCells = [];
|
||||
|
||||
const digCallback = function (x, y, value) {
|
||||
const key = x + "," + y;
|
||||
if (value) {
|
||||
zeroCells.push(key);
|
||||
} else {
|
||||
game.map[key] = ".";
|
||||
freeCells.push(key);
|
||||
}
|
||||
};
|
||||
digger.create(digCallback.bind(game));
|
||||
|
||||
generateItems(game, freeCells);
|
||||
generateScenery(game.map, zeroCells);
|
||||
generateRooms(game.map, digger);
|
||||
|
||||
game.player = createBeing(makePlayer, freeCells);
|
||||
game.monsters = []
|
||||
for ( var i= 0; i<= stage; i++) {
|
||||
game.monsters.push(createBeing(makeMonster, freeCells));
|
||||
}
|
||||
|
||||
// draw the map and items
|
||||
for (let key in game.map) {
|
||||
drawTile(game, key);
|
||||
}
|
||||
|
||||
rescale(game.player._x, game.player._y, game);
|
||||
}
|
||||
|
||||
function generateItems(game, freeCells) {
|
||||
for (let i = 0; i < 15; i++) {
|
||||
const key = takeFreeCell(freeCells);
|
||||
if (!i) {
|
||||
if(count < 5) {
|
||||
game.stairs = key;
|
||||
game.items[key] = "s";
|
||||
} else {
|
||||
game.door = key;
|
||||
game.items[key] = "D";
|
||||
}
|
||||
} else {
|
||||
game.items[key] = ROT.RNG.getItem(["g"]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function takeFreeCell(freeCells) {
|
||||
const index = Math.floor(ROT.RNG.getUniform() * freeCells.length);
|
||||
const key = freeCells.splice(index, 1)[0];
|
||||
return key;
|
||||
}
|
||||
|
||||
function posFromKey(key) {
|
||||
const parts = key.split(",");
|
||||
const x = parseInt(parts[0]);
|
||||
const y = parseInt(parts[1]);
|
||||
return [x, y];
|
||||
}
|
||||
|
||||
function generateScenery(map, freeCells) {
|
||||
for (let i = 0; i < 100; i++) {
|
||||
if (freeCells.length) {
|
||||
const key = takeFreeCell(freeCells);
|
||||
map[key] = ROT.RNG.getItem("abcde");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function generateRooms(map, mapgen) {
|
||||
const rooms = mapgen.getRooms();
|
||||
for (let rm = 0; rm < rooms.length; rm++) {
|
||||
const room = rooms[rm];
|
||||
|
||||
const l = room.getLeft() - 1;
|
||||
const r = room.getRight() + 1;
|
||||
const t = room.getTop() - 1;
|
||||
const b = room.getBottom() + 1;
|
||||
|
||||
map[l + "," + t] = "╔";
|
||||
map[r + "," + t] = "╗";
|
||||
map[l + "," + b] = "╚";
|
||||
map[r + "," + b] = "╝";
|
||||
|
||||
for (let i = room.getLeft(); i <= room.getRight(); i++) {
|
||||
const j = i + "," + t;
|
||||
const k = i + "," + b;
|
||||
if (noreplace.indexOf(map[j]) == -1) {
|
||||
map[j] = "═";
|
||||
}
|
||||
if (noreplace.indexOf(map[k]) == -1) {
|
||||
map[k] = "═";
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = room.getTop(); i <= room.getBottom(); i++) {
|
||||
const j = l + "," + i;
|
||||
const k = r + "," + i;
|
||||
if (noreplace.indexOf(map[j]) == -1) {
|
||||
map[j] = "║";
|
||||
}
|
||||
if (noreplace.indexOf(map[k]) == -1) {
|
||||
map[k] = "║";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function drawTile(game, key, ignore) {
|
||||
const map = game.map;
|
||||
if (map[key]) {
|
||||
const parts = posFromKey(key);
|
||||
const monster = monsterAt(parts[0], parts[1]);
|
||||
const player = playerAt(parts[0], parts[1]);
|
||||
const display = game.display;
|
||||
const items = game.items;
|
||||
const draw = [map[key], items[key]];
|
||||
draw.push(monster && monster != ignore ? monster.character : null);
|
||||
draw.push(player && player != ignore ? player.character : null);
|
||||
display.draw(
|
||||
parts[0],
|
||||
parts[1],
|
||||
draw.filter((i) => i)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// both the player and monster initial position is set
|
||||
function createBeing(what, freeCells) {
|
||||
const key = takeFreeCell(freeCells);
|
||||
const pos = posFromKey(key);
|
||||
const being = what(pos[0], pos[1]);
|
||||
return being;
|
||||
}
|
||||
|
||||
/******************
|
||||
*** the player ***
|
||||
******************/
|
||||
|
||||
// creates a player object with position, and stats
|
||||
function makePlayer(x, y) {
|
||||
return {
|
||||
// player's position
|
||||
_x: x,
|
||||
_y: y,
|
||||
character: "@",
|
||||
name: "you",
|
||||
// the player's stats
|
||||
stats: { hp: 10, xp: 0, gold: 0 },
|
||||
// the ROT.js scheduler calls this method when it is time
|
||||
// for the player to act
|
||||
act: () => {
|
||||
Game.engine.lock();
|
||||
if (!Game["arrowListener"]) {
|
||||
document.addEventListener("arrow", arrowEventHandler);
|
||||
Game.arrowListener = true;
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
// this method gets called by the `movePlayer` function
|
||||
function checkItem(entity) {
|
||||
const key = entity._x + "," + entity._y;
|
||||
if (key == Game.door) {
|
||||
if(count < 5) {
|
||||
nextStage(Game, ++count, Game.player.stats);
|
||||
} else {
|
||||
win();
|
||||
}
|
||||
} else if (key == Game.stairs) {
|
||||
nextStage(Game, ++count, Game.player.stats);
|
||||
}else if (Game.items[key] == "g") {
|
||||
Game.player.stats.gold += 1;
|
||||
renderStats(Game.player.stats);
|
||||
toast("You found gold!");
|
||||
sfx["win"].play();
|
||||
delete Game.items[key];
|
||||
}
|
||||
drawTile(Game, key);
|
||||
}
|
||||
|
||||
function movePlayer(dir) {
|
||||
const p = Game.player;
|
||||
return movePlayerTo(p._x + dir[0], p._y + dir[1]);
|
||||
}
|
||||
|
||||
function movePlayerTo(x, y) {
|
||||
const p = Game.player;
|
||||
|
||||
const newKey = x + "," + y;
|
||||
if (walkable.indexOf(Game.map[newKey]) == -1) {
|
||||
return;
|
||||
}
|
||||
|
||||
// check if we've hit the monster
|
||||
const hitMonster = monsterAt(x, y);
|
||||
if (hitMonster) {
|
||||
//combat(p, hitMonster);
|
||||
setTimeout(function () {
|
||||
Game.engine.unlock();
|
||||
}, 250);
|
||||
} else {
|
||||
hideToast();
|
||||
|
||||
drawTile(Game, p._x + "," + p._y, p);
|
||||
|
||||
// update the player's coordinates
|
||||
p._x = x;
|
||||
p._y = y;
|
||||
|
||||
// re-draw the player
|
||||
for (let key in Game.map) {
|
||||
drawTile(Game, key);
|
||||
}
|
||||
// re-locate the game screen to center the player
|
||||
rescale(x, y, Game);
|
||||
window.removeEventListener("arrow", arrowEventHandler);
|
||||
Game.engine.unlock();
|
||||
sfx["step"].play();
|
||||
// check if the player stepped on an item
|
||||
checkItem(p);
|
||||
}
|
||||
}
|
||||
|
||||
/*******************
|
||||
*** The monster ***
|
||||
*******************/
|
||||
|
||||
// basic ROT.js entity with position and stats
|
||||
function makeMonster(x, y) {
|
||||
return {
|
||||
// monster position
|
||||
_x: x,
|
||||
_y: y,
|
||||
character: "M",
|
||||
name: "Orc",
|
||||
stats: { hp: 3 },
|
||||
// called by the ROT.js scheduler
|
||||
act: monsterAct,
|
||||
};
|
||||
}
|
||||
|
||||
function monsterAct() {
|
||||
const m = this;
|
||||
const p = Game.player;
|
||||
const map = Game.map;
|
||||
const display = Game.display;
|
||||
|
||||
const passableCallback = function (x, y) {
|
||||
return walkable.indexOf(map[x + "," + y]) != -1;
|
||||
};
|
||||
const astar = new ROT.Path.AStar(p._x, p._y, passableCallback, {
|
||||
topology: 4,
|
||||
});
|
||||
const path = [];
|
||||
const pathCallback = function (x, y) {
|
||||
path.push([x, y]);
|
||||
};
|
||||
astar.compute(m._x, m._y, pathCallback);
|
||||
|
||||
path.shift();
|
||||
if (path.length <= 1) {
|
||||
Game.playerAllowedToMove = false;
|
||||
Game.engine.lock();
|
||||
combat(m, p);
|
||||
} else {
|
||||
drawTile(Game, m._x + "," + m._y, m);
|
||||
m._x = path[0][0];
|
||||
m._y = path[0][1];
|
||||
drawTile(Game, m._x + "," + m._y);
|
||||
}
|
||||
}
|
||||
|
||||
function monsterAt(x, y) {
|
||||
if (Game.monsters && Game.monsters.length) {
|
||||
for (let mi = 0; mi < Game.monsters.length; mi++) {
|
||||
const m = Game.monsters[mi];
|
||||
if (m && m._x == x && m._y == y) {
|
||||
return m;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function playerAt(x, y) {
|
||||
return Game.player && Game.player._x == x && Game.player._y == y
|
||||
? Game.player
|
||||
: null;
|
||||
}
|
||||
|
||||
// if the monster is dead remove it from the game
|
||||
function checkDeath(m) {
|
||||
if (m.stats.hp <= 0) {
|
||||
if (m == Game.player) {
|
||||
toast("You died!");
|
||||
lose();
|
||||
} else {
|
||||
const key = m._x + "," + m._y;
|
||||
removeMonster(m);
|
||||
sfx["kill"].play();
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// remove a monster from the game
|
||||
function removeMonster(m) {
|
||||
const key = m._x + "," + m._y;
|
||||
Game.scheduler.remove(m);
|
||||
Game.monsters = Game.monsters.filter((mx) => mx != m);
|
||||
drawTile(Game, key);
|
||||
}
|
||||
|
||||
/******************************
|
||||
*** combat/win/lose events ***
|
||||
******************************/
|
||||
// this is how the player fights a monster
|
||||
function checkSolution(solution, answer, hitter, receiver) {
|
||||
console.log("Click: " + solution + " Antwort: " + answer);
|
||||
if (solution == answer) {
|
||||
hitter.stats.hp -= 1;
|
||||
sfx["hit"].play();
|
||||
if (checkDeath(hitter)) {
|
||||
Game.player.stats.xp += 1;
|
||||
showScreen("game");
|
||||
Game.playerAllowedToMove = true;
|
||||
Game.engine.unlock();
|
||||
} else {
|
||||
combat(hitter, receiver);
|
||||
}
|
||||
checkDeath(hitter);
|
||||
} else {
|
||||
sfx["miss"].play();
|
||||
//showScreen("game");
|
||||
//Game.playerAllowedToMove = true;
|
||||
//Game.engine.unlock();
|
||||
}
|
||||
}
|
||||
|
||||
function setupButtons(answerValue, hitter, receiver) {
|
||||
const randomValue = (min, max) =>
|
||||
Math.floor(Math.random() * (max - min)) + min;
|
||||
let randomVar = randomValue(1, 4);
|
||||
if (randomVar == 1) {
|
||||
document.getElementById("answer1").innerHTML = `${answerValue}`;
|
||||
document.getElementById("answer2").innerHTML = `${
|
||||
answerValue + randomValue(1, 4)
|
||||
}`;
|
||||
document.getElementById("answer3").innerHTML = `${
|
||||
answerValue - randomValue(1, 4)
|
||||
}`;
|
||||
} else if (randomVar == 2) {
|
||||
document.getElementById("answer1").innerHTML = `${
|
||||
answerValue + randomValue(1, 4)
|
||||
}`;
|
||||
document.getElementById("answer2").innerHTML = `${answerValue}`;
|
||||
document.getElementById("answer3").innerHTML = `${
|
||||
answerValue - randomValue(1, 4)
|
||||
}`;
|
||||
} else {
|
||||
document.getElementById("answer1").innerHTML = `${
|
||||
answerValue - randomValue(1, 4)
|
||||
}`;
|
||||
document.getElementById("answer2").innerHTML = `${
|
||||
answerValue + randomValue(1, 4)
|
||||
}`;
|
||||
document.getElementById("answer3").innerHTML = `${answerValue}`;
|
||||
}
|
||||
document.getElementById("answer1").addEventListener("click", async() => {
|
||||
checkSolution(document.getElementById("answer1").innerText, answerValue, hitter, receiver);
|
||||
}, {once: true});
|
||||
document.getElementById("answer2").addEventListener("click", async() => {
|
||||
checkSolution(document.getElementById("answer2").innerText, answerValue, hitter, receiver);
|
||||
}, {once: true});
|
||||
document.getElementById("answer3").addEventListener("click", async() => {
|
||||
checkSolution(document.getElementById("answer3").innerText, answerValue, hitter, receiver);
|
||||
}, {once: true});
|
||||
}
|
||||
|
||||
function combat(hitter, receiver) {
|
||||
const randomValue = (min, max) =>
|
||||
Math.floor(Math.random() * (max - min)) + min;
|
||||
let [num1, num2] = [randomValue(1, 10), randomValue(1, 10)];
|
||||
const answerValue = eval(`${num1} * ${num2}`);
|
||||
document.getElementById("question").innerHTML = `${num1} * ${num2} = ? `;
|
||||
setupButtons(answerValue, hitter, receiver);
|
||||
showScreen("combat");
|
||||
checkDeath(receiver);
|
||||
renderStats(Game.player.stats);
|
||||
}
|
||||
|
||||
// this gets called when the player wins the game
|
||||
function win() {
|
||||
Game.engine.lock();
|
||||
for (let i = 0; i < 5; i++) {
|
||||
setTimeout(function () {
|
||||
sfx["win"].play();
|
||||
}, 100 * i);
|
||||
}
|
||||
// set our stats for the end screen
|
||||
setEndScreenValues(Game.player.stats.xp, Game.player.stats.gold);
|
||||
// tear down the game
|
||||
destroy(Game);
|
||||
showScreen("win");
|
||||
}
|
||||
|
||||
// this gets called when the player loses the game
|
||||
function lose() {
|
||||
Game.engine.lock();
|
||||
// change the player into a tombstone tile
|
||||
const p = Game.player;
|
||||
p.character = "T";
|
||||
drawTile(Game, p._x + "," + p._y);
|
||||
const ghost = createGhost([p._x, p._y]);
|
||||
removeListeners(Game);
|
||||
sfx["lose"].play();
|
||||
setTimeout(function () {
|
||||
setEndScreenValues(Game.player.stats.xp, Game.player.stats.gold);
|
||||
// tear down the game
|
||||
destroy(Game);
|
||||
showScreen("lose");
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
/************************************
|
||||
*** graphics, UI & browser utils ***
|
||||
************************************/
|
||||
|
||||
const clickevt = !!("ontouchstart" in window) ? "touchstart" : "click";
|
||||
|
||||
const $ = document.querySelector.bind(document);
|
||||
const $$ = document.querySelectorAll.bind(document);
|
||||
NodeList.prototype.forEach = Array.prototype.forEach;
|
||||
|
||||
// this code resets the ROT.js display canvas
|
||||
function resetCanvas(el) {
|
||||
$("#canvas").innerHTML = "";
|
||||
$("#canvas").appendChild(el);
|
||||
window.onkeydown = keyHandler;
|
||||
window.onkeyup = arrowStop;
|
||||
if (useArrows) {
|
||||
document.ontouchend = arrowStop;
|
||||
}
|
||||
showScreen("game");
|
||||
}
|
||||
|
||||
function rescale(x, y, game) {
|
||||
const c = $("canvas");
|
||||
const scale = window.innerWidth < 600 ? scaleMobile : scaleMonitor;
|
||||
const offset = game.touchScreen ? touchOffsetY : 0;
|
||||
const tw =
|
||||
x * -tileOptions.tileWidth +
|
||||
(tileOptions.width * tileOptions.tileWidth) / 2 +
|
||||
-4;
|
||||
const th =
|
||||
y * -tileOptions.tileHeight +
|
||||
(tileOptions.height * tileOptions.tileHeight) / 2 +
|
||||
offset;
|
||||
if (canvas) {
|
||||
canvas.style.transition = "transform 0.5s ease-out 0s";
|
||||
if (game.display) {
|
||||
game.display
|
||||
.getContainer()
|
||||
.getContext("2d").imageSmoothingEnabled = false;
|
||||
}
|
||||
canvas.style.transform =
|
||||
"scale(" +
|
||||
scale +
|
||||
") " +
|
||||
"translate3d(" +
|
||||
Math.floor(tw) +
|
||||
"px," +
|
||||
Math.floor(th) +
|
||||
"px,0px)";
|
||||
}
|
||||
}
|
||||
|
||||
function removeListeners(game) {
|
||||
if (game.engine) {
|
||||
game.lastArrow = null;
|
||||
clearInterval(game.arrowInterval);
|
||||
game.arrowInterval = null;
|
||||
game.engine.lock();
|
||||
game.scheduler.clear();
|
||||
window.removeEventListener("arrow", arrowEventHandler);
|
||||
game.arrowListener = false;
|
||||
window.onkeydown = null;
|
||||
window.onkeyup = null;
|
||||
}
|
||||
}
|
||||
|
||||
// hides all screens and shows the requested screen
|
||||
function showScreen(which, ev) {
|
||||
ev && ev.preventDefault();
|
||||
const el = $("#" + which);
|
||||
const actionbutton = $("#" + which + ">.action");
|
||||
document.querySelectorAll(".screen").forEach(function (s) {
|
||||
s.classList.remove("show");
|
||||
s.classList.add("hide");
|
||||
});
|
||||
el.classList.remove("hide");
|
||||
el.classList.remove("show");
|
||||
void el.offsetHeight; // trigger CSS reflow
|
||||
el.classList.add("show");
|
||||
if (actionbutton) {
|
||||
actionbutton.focus();
|
||||
}
|
||||
}
|
||||
|
||||
// set the end-screen message
|
||||
function setEndScreenValues(xp, gold) {
|
||||
$$(".xp-stat").forEach((el) => (el.textContent = Math.floor(xp)));
|
||||
$$(".gold-stat").forEach((el) => (el.textContent = gold));
|
||||
}
|
||||
|
||||
// updates the stats listed at the bottom of the screen
|
||||
function renderStats(stats) {
|
||||
const st = $("#hud");
|
||||
st.innerHTML = "";
|
||||
for (let s in stats) {
|
||||
attach(st, el("span", {}, [s.toUpperCase() + ": " + stats[s]]));
|
||||
}
|
||||
}
|
||||
|
||||
// creates the ghost sprite when the player dies
|
||||
function createGhost(pos) {
|
||||
const tw = tileOptions.tileWidth;
|
||||
const th = tileOptions.tileHeight;
|
||||
const left = "left:" + pos[0] * tw + "px;";
|
||||
const top = "top:" + pos[1] * th + "px;";
|
||||
const ghost = el("div", {
|
||||
className: "sprite ghost free float-up",
|
||||
style: left + top,
|
||||
});
|
||||
ghost.onanimationend = function () {
|
||||
rmel(ghost);
|
||||
};
|
||||
return attach($("#canvas"), ghost);
|
||||
}
|
||||
|
||||
function battleMessage(messages) {
|
||||
const components = messages.reduce(function (msgs, m) {
|
||||
return msgs
|
||||
.concat(
|
||||
m.split(" ").map(function (p) {
|
||||
const match = p.match(/hit|miss/);
|
||||
return el("span", { className: match ? match[0] : "" }, [p, " "]);
|
||||
})
|
||||
)
|
||||
.concat(el("br", {}));
|
||||
}, []);
|
||||
return el("span", {}, components);
|
||||
}
|
||||
|
||||
function toast(message) {
|
||||
const m = $("#message");
|
||||
if (
|
||||
Game.scheduler._current == Game.player ||
|
||||
m.className.indexOf("show") == -1
|
||||
) {
|
||||
m.innerHTML = "";
|
||||
}
|
||||
m.classList.remove("fade-out");
|
||||
m.classList.add("show");
|
||||
if (typeof message == "string") {
|
||||
m.appendChild(el("span", {}, [message]));
|
||||
} else {
|
||||
m.appendChild(message);
|
||||
}
|
||||
}
|
||||
|
||||
function hideToast(instant) {
|
||||
const m = $("#message");
|
||||
if (instant) {
|
||||
m.classList.remove("show");
|
||||
m.classList.remove("fade-out");
|
||||
m.innerHTML = "";
|
||||
} else if (m.className.match("show")) {
|
||||
m.classList.remove("show");
|
||||
m.classList.add("fade-out");
|
||||
m.onanimationend = function () {
|
||||
m.classList.remove("fade-out");
|
||||
m.innerHTML = "";
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// create an HTML element
|
||||
function el(tag, attrs, children) {
|
||||
const node = document.createElement(tag);
|
||||
for (a in attrs) {
|
||||
node[a] = attrs[a];
|
||||
}
|
||||
(children || []).forEach(function (c) {
|
||||
if (typeof c == "string") {
|
||||
node.appendChild(document.createTextNode(c));
|
||||
} else {
|
||||
attach(node, c);
|
||||
}
|
||||
});
|
||||
return node;
|
||||
}
|
||||
|
||||
// add an HTML element to a parent node
|
||||
function attach(node, el) {
|
||||
node.appendChild(el);
|
||||
return el;
|
||||
}
|
||||
|
||||
// remove an element from the dom
|
||||
function rmel(node) {
|
||||
node.parentNode.removeChild(node);
|
||||
}
|
||||
|
||||
/*************************
|
||||
*** UI event handlers ***
|
||||
*************************/
|
||||
|
||||
function keyHandler(ev) {
|
||||
const code = ev.keyCode;
|
||||
if (code == 187 || code == 189) {
|
||||
ev.preventDefault();
|
||||
return;
|
||||
}
|
||||
if (code == 70 && ev.altKey && ev.ctrlKey && ev.shiftKey) {
|
||||
document.body.requestFullscreen();
|
||||
console.log("Full screen pressed.");
|
||||
return;
|
||||
}
|
||||
if (code == 73) {
|
||||
toggleInventory(ev, true);
|
||||
return;
|
||||
}
|
||||
if (code == 190) {
|
||||
Game.engine.unlock();
|
||||
return;
|
||||
} // skip turn
|
||||
if (!(code in keyMap)) {
|
||||
return;
|
||||
}
|
||||
const dir = ROT.DIRS[8][keyMap[code]];
|
||||
if (Game.display) {
|
||||
ev.preventDefault();
|
||||
}
|
||||
if(Game.playerAllowedToMove) {
|
||||
arrowStart(dir);
|
||||
}
|
||||
}
|
||||
|
||||
function arrowStart(dir) {
|
||||
const last = Game.lastArrow;
|
||||
Game.lastArrow = dir;
|
||||
if (!last) {
|
||||
document.dispatchEvent(new Event("arrow"));
|
||||
if (Game.arrowInterval) {
|
||||
clearInterval(Game.arrowInterval);
|
||||
}
|
||||
Game.arrowInterval = setInterval(function () {
|
||||
document.dispatchEvent(new Event("arrow"));
|
||||
}, turnLengthMS);
|
||||
}
|
||||
}
|
||||
|
||||
function arrowStop(ev) {
|
||||
clearInterval(Game.arrowInterval);
|
||||
Game.arrowInterval = null;
|
||||
Game.lastArrow = null;
|
||||
}
|
||||
|
||||
function arrowEventHandler() {
|
||||
if (Game.lastArrow) {
|
||||
movePlayer(Game.lastArrow);
|
||||
} else {
|
||||
arrowStop();
|
||||
}
|
||||
}
|
||||
|
||||
function startGame(ev) {
|
||||
showScreen("game");
|
||||
sfx["rubber"].play();
|
||||
init(Game);
|
||||
}
|
||||
|
||||
function handleMenuChange(which, ev) {
|
||||
ev.preventDefault();
|
||||
const choice = which.getAttribute("value");
|
||||
showScreen(choice);
|
||||
sfx["choice"].play();
|
||||
}
|
||||
|
||||
function hideModal(ev) {
|
||||
ev.preventDefault();
|
||||
showScreen("title");
|
||||
sfx["hide"].play();
|
||||
}
|
||||
|
||||
function cleanup() {
|
||||
destroy(Game);
|
||||
$("#play").removeEventListener(clickevt, startGame);
|
||||
}
|
||||
|
||||
/***************
|
||||
*** Startup ***
|
||||
***************/
|
||||
|
||||
// this code is called at load time and sets the game title
|
||||
document.querySelectorAll(".game-title-text").forEach(function (t) {
|
||||
t.textContent = gametitle;
|
||||
});
|
||||
|
||||
// listen for the start game button
|
||||
$("#play").addEventListener(clickevt, startGame);
|
||||
|
||||
if (w["rbb"]) {
|
||||
w["rbb"].cleanup();
|
||||
} else {
|
||||
$("#plate").addEventListener(
|
||||
"animationend",
|
||||
showScreen.bind(null, "title")
|
||||
);
|
||||
document.querySelectorAll("#options #menu input").forEach(function (el) {
|
||||
el.addEventListener("click", handleMenuChange.bind(null, el));
|
||||
});
|
||||
document.querySelectorAll(".modal button.action").forEach(function (el) {
|
||||
el.addEventListener(clickevt, hideModal);
|
||||
});
|
||||
}
|
||||
|
||||
w["rbb"] = Game;
|
||||
})(window);
|
||||
1435
views/game.view.php
1435
views/game.view.php
File diff suppressed because it is too large
Load diff
|
|
@ -1,55 +1,6 @@
|
|||
<?php require('partials/head.php') ?>
|
||||
<?php require('partials/nav.php') ?>
|
||||
<!--
|
||||
<div class="flex min-h-full items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div class="w-full max-w-md space-y-8 nes-container">
|
||||
<div>
|
||||
<h2 class="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">Melde dich mit deinem Konto an.</h2>
|
||||
<p class="mt-2 text-center text-sm text-gray-600">
|
||||
Oder
|
||||
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">registriere dich noch Heute</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form class="mt-8 space-y-6" action="#" method="POST">
|
||||
<input type="hidden" name="remember" value="true">
|
||||
<div class="-space-y-px rounded-md shadow-sm">
|
||||
<div class="nes-field">
|
||||
<label for="email-address" class="sr-only">Email address</label>
|
||||
<input id="email-address" name="email" type="email" autocomplete="email" required class="nes-input relative block w-full appearance-none rounded-none rounded-t-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm" placeholder="Email address">
|
||||
</div>
|
||||
<div class="nes-field">
|
||||
<label for="password" class="sr-only">Password</label>
|
||||
<input id="password" name="password" type="password" autocomplete="current-password" required class="nes-input relative block w-full appearance-none rounded-none rounded-b-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm" placeholder="Password">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
|
||||
<input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
|
||||
<label for="remember-me" class="ml-2 block text-sm text-gray-900">Angemeldet bleiben
|
||||
<input id="remember-me" name="remember-me" type="checkbox" class="nes-checkbox" />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="text-sm">
|
||||
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">Passwort vergessen?</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button type="submit" class="nes-btn is-primary">
|
||||
<span class="absolute inset-y-0 left-0 flex items-center pl-3">
|
||||
</span>
|
||||
Anmelden
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
<div class="flex min-h-full items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div class="w-full max-w-md space-y-8 nes-container">
|
||||
<form action="#" method="POST">
|
||||
|
|
|
|||
|
|
@ -1,42 +0,0 @@
|
|||
<?php require('views/partials/head.php') ?>
|
||||
<?php require('views/partials/nav.php') ?>
|
||||
<?php require('views/partials/banner.php') ?>
|
||||
<main>
|
||||
<div class="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">
|
||||
<div>
|
||||
<div class="md:grid md:grid-cols-3 md:gap-6">
|
||||
<div class="mt-5 md:col-span-2 md:mt-0">
|
||||
<form method="POST">
|
||||
<div class="shadow sm:overflow-hidden sm:rounded-md">
|
||||
<div class="space-y-6 bg-white px-4 py-5 sm:p-6">
|
||||
|
||||
<div>
|
||||
<label for="body" class="block text-sm font-medium text-gray-700">Body</label>
|
||||
<div class="mt-1">
|
||||
<textarea
|
||||
id="body"
|
||||
name="body"
|
||||
rows="3"
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
|
||||
placeholder="Here is an idea for a note."
|
||||
//required
|
||||
><?= $_POST['body'] ?? '' ?>
|
||||
</textarea>
|
||||
<?php if (isset($errors['body'])) : ?>
|
||||
<p class="text-red-500 text-xs mt-2"><?= $erros['body'] ?></p>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gray-50 px-4 py-3 text-right sm:px-6">
|
||||
<button
|
||||
type="submit"
|
||||
class="inline-flex justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<?php require('views/partials/footer.php') ?>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<?php require ('views/partials/head.php') ?>
|
||||
<?php require ('views/partials/nav.php') ?>
|
||||
<?php require ('views/partials/banner.php') ?>
|
||||
<main>
|
||||
<div class="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">
|
||||
<ul>
|
||||
<?php foreach ($notes as $note) : ?>
|
||||
<li>
|
||||
<a href="/note?id=<?= $note['id'] ?>" class="text-blue-500 hover:underline">
|
||||
<?= htmlspecialchars($note['body']) ?>
|
||||
</a>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
<p class="mt-6">
|
||||
<a href="/notes/create" class="text-blue-500 hover:underline">Create Note</a>
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<?php require ('views/partials/footer.php') ?>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
<?php require ('views/partials/head.php') ?>
|
||||
<?php require ('views/partials/nav.php') ?>
|
||||
<?php require ('views/partials/banner.php') ?>
|
||||
<main>
|
||||
<div class="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">
|
||||
<p class="mb-6">
|
||||
<a href="/notes" class="text-blue-500 hover:underline">go back</a>
|
||||
</p>
|
||||
<p><?= htmlspecialchars($note['body']) ?></p>
|
||||
</div>
|
||||
</main>
|
||||
<?php require ('views/partials/footer.php') ?>
|
||||
|
|
@ -30,18 +30,13 @@
|
|||
</div>
|
||||
<div class="hidden lg:flex lg:min-w-0 lg:flex-1 lg:justify-center lg:gap-x-12">
|
||||
<a href="/" class="<?= urlIs('/') ?> font-semibold text-gray-900 hover:text-gray-900">Home</a>
|
||||
|
||||
<a href="/about" class="<?= urlIs('/about') ?>font-semibold text-gray-900 hover:text-gray-900">About</a>
|
||||
|
||||
<a href="/contact" class="<?= urlIs('/contact') ?>font-semibold text-gray-900 hover:text-gray-900">Contact</a>
|
||||
|
||||
<a href="/learn" class="<?= urlIs('/learn') ?>font-semibold text-gray-900 hover:text-gray-900">Learn</a>
|
||||
<a href="/learn" class="<?= urlIs('/learn') ?>font-semibold text-gray-900 hover:text-gray-900">Lernen</a>
|
||||
<a href="/mathe" class="<?= urlIs('/mathe') ?>font-semibold text-gray-900 hover:text-gray-900">Mathe</a>
|
||||
<a href="/game" class="<?= urlIs('/game') ?>font-semibold text-gray-900 hover:text-gray-900">Game</a>
|
||||
</div>
|
||||
<div class="hidden lg:flex lg:min-w-0 lg:flex-1 lg:justify-end">
|
||||
<a href="/login" class="<?= urlIs('/login') ?> nes-btn">Log in</a>
|
||||
<a href="/register" class="<?= urlIs('/register') ?>nes-btn">Registrieren</a>
|
||||
<a href="/login" class="<?= urlIs('/login') ?> nes-btn">Anmelden</a>
|
||||
<a href="/register" class="<?= urlIs('/register') ?> nes-btn">Registrieren</a>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- Mobile menu, show/hide based on menu open state. -->
|
||||
|
|
@ -69,16 +64,12 @@
|
|||
<div class="space-y-2 py-6">
|
||||
<a href="/" class="<?= urlIs('/') ?> -mx-3 block rounded-lg py-2 px-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-400/10">Home</a>
|
||||
|
||||
<a href="/about" class="<?= urlIs('/about') ?>-mx-3 block rounded-lg py-2 px-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-400/10">About</a>
|
||||
|
||||
<a href="/contact" class="<?= urlIs('/contact') ?>-mx-3 block rounded-lg py-2 px-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-400/10">Contact</a>
|
||||
|
||||
<a href="/learn" class="<?= urlIs('/learn') ?> -mx-3 block rounded-lg py-2 px-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-400/10">Learn</a>
|
||||
<a href="/mathe" class="<?= urlIs('/mathe') ?> -mx-3 block rounded-lg py-2 px-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-400/10">Learn</a>
|
||||
<a href="/game" class="<?= urlIs('/game') ?> -mx-3 block rounded-lg py-2 px-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-400/10">Learn</a>
|
||||
<a href="/learn" class="<?= urlIs('/learn') ?> -mx-3 block rounded-lg py-2 px-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-400/10">Lernen</a>
|
||||
<a href="/mathe" class="<?= urlIs('/mathe') ?> -mx-3 block rounded-lg py-2 px-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-400/10">Mathe</a>
|
||||
<a href="/game" class="<?= urlIs('/game') ?> -mx-3 block rounded-lg py-2 px-3 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-400/10">Game</a>
|
||||
</div>
|
||||
<div class="py-6">
|
||||
<a href="/login" class="-mx-3 block rounded-lg py-2.5 px-3 text-base font-semibold leading-6 text-gray-900 hover:bg-gray-400/10">Log in</a>
|
||||
<a href="/login" class="-mx-3 block rounded-lg py-2.5 px-3 text-base font-semibold leading-6 text-gray-900 hover:bg-gray-400/10">Anmelden</a>
|
||||
<a href="/register" class="-mx-3 block rounded-lg py-2.5 px-3 text-base font-semibold leading-6 text-gray-900 hover:bg-gray-400/10">Registrieren</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -88,6 +79,3 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue