kaiden/My-Website
1
0
Fork 0
generated from Skynet/deploy_user
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Initial commit from the last website
All checks were successful
On_Push / build (push) Successful in 31s
Details

Browse source
This commit is contained in:
Kaiden Foley 2025-02-12 20:00:56 +00:00
parent a9cc52719c
commit 6c37bd8b08
12 changed files with 578 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
src/CSS/easierToRead.css Normal file
View file

@ -0,0 +1,50 @@
body{
background-color: hsl(0, 0%, 40%);
margin: 0;
}
main{
margin-left: 20px;
margin-right: 20px;
}
h1{
text-align: center;
color:lightgrey;
}
h2{
text-align: center;
color:lightgrey;
}
h3{
text-align: center;
color:lightgrey;
}
p{
text-align: center;
color:lightgrey;
}
.navbar ul{
list-style-type: none;
background-color: hsl(0, 0%, 25%);
padding: 0;
margin: 0;
overflow: hidden;
}
.navbar a{
color: white;
text-decoration: none;
padding: 15px;
display: block;
text-align: center;
}
.navbar a:hover{
background-color: hsl(0, 0%, 10%);
}
.navbar li{
float: left;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}

31
src/CSS/lightstyle.css Normal file
View file

@ -0,0 +1,31 @@
body{
background-color: hsl(0, 0%, 40%);
margin: 0;
}
main{
margin-left: 20px;
margin-right: 20px;
}
h1{
text-align: center;
}
.navbar ul{
list-style-type: none;
background-color: hsl(0, 0%, 25%);
padding: 0;
margin: 0;
overflow: hidden;
}
.navbar a{
color: white;
text-decoration: none;
padding: 15px;
display: block;
text-align: center;
}
.navbar a:hover{
background-color: hsl(0, 0%, 10%);
}
.navbar li{
float: left;
}

36
src/CSS/snake_style.css Normal file
View file

@ -0,0 +1,36 @@
html, body {
background-color: black;
height: 100%;
margin: 0;
}
.navbar ul{
list-style-type: none;
background-color: hsl(0, 0%, 25%);
padding: 0;
margin: 0;
overflow: hidden;
}
.navbar a{
color: white;
text-decoration: none;
padding: 15px;
display: block;
text-align: center;
}
.navbar a:hover{
background-color: hsl(0, 0%, 10%);
}
.navbar li{
float: left;
}
#gameContainer {
background: black;
display: flex;
align-items: center;
justify-content: center;
}
canvas {
border: 1px solid white;
}

99
src/Manual.html Normal file
View file

@ -0,0 +1,99 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="GitLab Pages">
<title>Hub</title>
<link rel="stylesheet" href="CSS/easierToRead.css">
</head>
<body>
<nav class="navbar">
<ul>
<li><a href="index.html">Cool Home</a></li>
<li><a href="snake.html">Cool Snake</a></li>
<li><a href="timetable.html">Cool timetable</a></li>
<!--<li><a href="phrases.html">Cool phrases</a></li>-->
<li><a href="Manual.html">Cool Manual</a></li>
</ul>
</nav>
<h1>
This will just be a quick guide for telling you about how to install IntelliJ and then starting your first project.
</h1>
<h2>
Accessing the Educational License
</h2>
<img src="Images/Free-Educational-License.png" alt="Free Educational License" class="center">
<p>
As can be seen here IntelliJ offers a <a href="https://www.jetbrains.com/community/education/#students">Free License</a>
</p>
<p>
To access this you'll scroll down on this page and find a button to apply for this it should look like this.
</p>
<img src="Images/Apply-Button.png" alt="Apply Button" class="center">
<h3>
When you click into this you should get a page like this
</h3>
<img src="Images/Form_for_Application.png" alt="Form for Application" class="center">
<h3>
After filling in your details if you go into your University Email.
</h3>
<p>
You should get an email that looks like this.
</p>
<img src="Images/Email_for_Confirmation.png" alt="Email for Confirmation" class="center">
<h3>
After completing this the next part is just to make updating and accessing new JetBrains IDEs easier
</h3>
<p>
As such you should also download.
<br>
<a href="https://www.jetbrains.com/toolbox-app/">Jetbrains Toolbox</a>
<br>
</p>
<img src="Images/Toolbox_Install_link.png" alt="Toolbox Install link" class="center">
<h3>
Where is the button?
</h3>
<p>
After installing this you should have something like this at the bottom right of your screen.
If you are having trouble finding it on windows it can be inside the arrow instead of the just clicking the cube.
</p>
<img src="Images/Toolbox_Button.png" alt="Toolbox Button" class="center">
<h3>
All the IDEs *way too many*
</h3>
<p>
Now if you click into this it should bring you to something like this.
</p>
<img src="Images/Toolbox_Menu.png" alt="Toolbox Menu" class="center">
<p>
Within here you should find IntelliJ Idea Ultimate and a number of other IDEs for different Programming Languages.
Now once you haven't made any project before you can double-click on IntelliJ Idea Ultimate which should bring you to a menu like this.
</p>
<img src="Images/New_Project.png" alt="New Project" class="center">
<p>
From here just pick Java (optional ask for it to create a git repository) and add sample code if you feel it's necessary and away you go with your Java Project.
</p>
</body>
</html>

14
src/Readme/Readme.md Normal file
View file

@ -0,0 +1,14 @@
# The Website on skynet
Hi my name is Kaiden, I am currently a second year Maths and Computer Science Student studying in UL. I am currently trying to transfer into Computer Systems year 2.
As part of this I am trying to develop my skills with using html and developing websites and figuring out how to use Computer Science in my Everyday problems.
As such here is a list of the things I am trying to do
| Idea | Website |
|--------------------------------------|---------|
| Counter for high-score in Snake game | |
| Develop the snake game | |
| Make a button for dark/light mode | |
| Timetable | |

22
src/Readme/Snakes.md Normal file
View file

@ -0,0 +1,22 @@
# THE SNAKES
I found the code for this from ZiKT1229s' GitHub gist, here they have provided a basic implementation of the snake game which I am using to help with developing my skills with Javascript
The ideas which it has provided are
## Touchscreen
The idea here is that right now someone using a mobile phone has no way of playing unless they have access to a keyboard.
So I am going to look into how I can develop this feature for the game
## Score
The idea here is that right now there is no way of keeping track of the score so if there was some kind of counter that would allow you to easily know if you have beaten your highscore or not
### Leaderboard
There should be some way of using cookies to save the highscores of different users and then display them in a leaderboard
## Scaling for mobile
Make it so that the game is more accessible for mobile users as currently when held in portrait on my phone it is tiny but when held horizontal it is grand. So developing a way to tell the user to turn their phone horizontal while it is portrait.

23
src/Readme/Styling.md Normal file
View file

@ -0,0 +1,23 @@
# Styles
All this is for is how I have developed in using both css and html for the look of this website so right now I don't really know anything that I think is worth writing down.
So these are what I want to develop and write about
## Navbar woes
I have been trying to get the navbar to work for soooooo long and have finally solved it with the help of this [video](https://www.youtube.com/watch?v=f3uCSh6LIY0)
So now we have a nav bar, and it is working for the three different sites the only problem is that now there is no margin between it and the snake game
### Margin between navbar and snake game
Put a margin between the navbar and the snake game
## Dark/Light mode button
This would just be a button which I could add in the corner of each website which allowed you to activate a dark mode or light mode
### Save this setting
I think there would be a method using cookies to save the last mode a user has used so that the next time they open up the website it would just automatically open in their preferred setting

17
src/Readme/Timetable.md Normal file
View file

@ -0,0 +1,17 @@
# Train/Bus timetable
The idea for this project is that I would develop a website like what brendan has for the 300 bus but this would handle the limerick junction train to limerick.
Right now the scope is just to develop a list of the trains times for today pull them from the TFI website and display them here
## Further Ideas
### Limerick city buses
The idea here would be to connect this to the limerick city buses with the assumption of a ten-minute walk from limerick colbert station to the upper williams street stop. This is so that my entire trip from my Grandparents house is tipperary to UL would be handled by one website
### Limerick to waterford buses
The idea here would be to connect this website to the 55 expressway live timetables so that I could access all the timetables I need from one website.
Right now I think the best way to display this would be to have a dropdown menu added above the normal train time

31
src/index.html
View file

@ -1,12 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="generator" content="GitLab Pages">
<title>Hub</title>
<link rel="stylesheet" href="CSS/lightstyle.css">
</head>
<body>
<div>
<h1>Hello World!</h1>
<h2>All hail Skynet!!</h2>
</div>
<nav class="navbar">
<ul>
<li><a href="index.html">Cool Home</a></li>
<li><a href="snake.html">Cool Snake</a></li>
<li><a href="timetable.html">Cool timetable</a></li>
<!--<li><a href="phrases.html">Cool phrases</a></li>-->
<li><a href="Manual.html">Cool Manual</a></li>
</ul>
</nav>
<main>
<h1>
Hello World!
</h1>
<h3>
This is for messing around mainly
</h3>
<p>
This is my new Website Using Skynet
</p>
</main>
</body>
</html>

35
src/phrases.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="GitLab Pages">
<title>Timetable</title>
<link rel="stylesheet" href="CSS/lightstyle.css">
</head>
<body>
<nav class="navbar">
<ul>
<li><a href="index.html">Cool Home</a></li>
<li><a href="snake.html">Cool Snake</a></li>
<li><a href="timetable.html">Cool timetable</a></li>
<!-- <li><a href="phrases.html">Cool phrases</a></li>-->
<li><a href="Manual.html">Cool Manual</a></li>
</ul>
</nav>
<main>
<h1>
This is the phrases document
</h1>
<div style="display: flex; justify-content: center;">
<iframe
src="https://docs.google.com/document/d/1J7Ad9IQ4gxn9MEER-Rx9XxcotNveBY6F9gcPf64n-mw/pub?embedded=true"
title = "The Phrases"
height = 1000
width = 800>
</iframe>
</div>
</main>
</body>
</html>

191
src/snake.html Normal file
View file

@ -0,0 +1,191 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="CSS/snake_style.css">
<title>SNAKE GAME</title>
</head>
<body>
<nav class="navbar">
<ul>
<li><a href="index.html">Cool Home</a></li>
<li><a href="snake.html">Cool Snake</a></li>
<li><a href="timetable.html">Cool timetable</a></li>
<!-- <li><a href="phrases.html">Cool phrases</a></li>-->
<li><a href="Manual.html">Cool Manual</a></li>
</ul>
</nav>
<div id="gameContainer">
<canvas width="400" height="400" id="game"></canvas>
</div>
<script>
document.getElementById("gameContainer").style.margin = "50px";
const canvas = document.getElementById('game');
const context = canvas.getContext('2d');
const grid = 16;
let count = 0;
const snake = {
x: 160,
y: 160,
// snake velocity. moves one grid length every frame in either the x or y direction
dx: grid,
dy: 0,
// keep track of all grids the snake body occupies
cells: [],
// length of the snake. grows when eating an apple
maxCells: 4
};
let apple = {
x: 320,
y: 320
// Significant points on the gird
// left top: 384,384
// right bottom: 0,0
// right top: 384,0
// left bottom: 0,384
};
// get random whole numbers in a specific range
// @see https://stackoverflow.com/a/1527820/2124254
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
// game loop
function loop() {
requestAnimationFrame(loop);
// slow game loop to 15 fps instead of 60 (60/15 = 4)
if (++count < 4) {
return;
}
count = 0;
context.clearRect(0,0,canvas.width,canvas.height);
// move snake by its velocity
snake.x += snake.dx;
snake.y += snake.dy;
// wrap snake position horizontally on edge of screen
if (snake.x < 0) {
snake.x = canvas.width - grid;
}
else if (snake.x >= canvas.width) {
snake.x = 0;
}
// wrap snake position vertically on edge of screen
if (snake.y < 0) {
snake.y = canvas.height - grid;
}
else if (snake.y >= canvas.height) {
snake.y = 0;
}
// keep track of where snake has been. front of the array is always the head
snake.cells.unshift({x: snake.x, y: snake.y});
// remove cells as we move away from them
if (snake.cells.length > snake.maxCells) {
snake.cells.pop();
}
// draw apple
context.fillStyle = 'red';
context.fillRect(apple.x, apple.y, grid-1, grid-1);
// draw snake one cell at a time
context.fillStyle = 'green';
snake.cells.forEach(function(cell, index) {
// drawing 1 px smaller than the grid creates a grid effect in the snake body, so you can see how long it is
context.fillRect(cell.x, cell.y, grid-1, grid-1);
// snake ate apple
if (cell.x === apple.x && cell.y === apple.y) {
snake.maxCells++;
// canvas is 400x400 which is 25x25 grids
apple.x = getRandomInt(0, 25) * grid;
apple.y = getRandomInt(0, 25) * grid;
}
// check collision with all cells after this one (modified bubble sort)
for (let i = index + 1; i < snake.cells.length; i++) {
// snake occupies same space as a body part. reset game
if (cell.x === snake.cells[i].x && cell.y === snake.cells[i].y) {
snake.x = 160;
snake.y = 160;
snake.cells = [];
snake.maxCells = 4;
snake.dx = grid;
snake.dy = 0;
apple.x = getRandomInt(0, 25) * grid;
apple.y = getRandomInt(0, 25) * grid;
}
}
});
}
// listen to keyboard events to move the snake
document.addEventListener('keydown', function(e) {
// prevent snake from backtracking on itself by checking that it's
// not already moving on the same axis (pressing left while moving
// left won't do anything, and pressing right while moving left
// shouldn't let you collide with your own body)
// left arrow key
if (e.code === "ArrowLeft" && snake.dx === 0) {
snake.dx = -grid;
snake.dy = 0;
}
// up arrow key
else if (e.code === "ArrowUp" && snake.dy === 0) {
snake.dy = -grid;
snake.dx = 0;
}
// right arrow key
else if (e.code === "ArrowRight" && snake.dx === 0) {
snake.dx = grid;
snake.dy = 0;
}
// down arrow key
else if (e.code === "ArrowDown" && snake.dy === 0) {
snake.dy = grid;
snake.dx = 0;
}
/*
document.addEventListener("touchstart", touchHandler);
document.addEventListener("touchend", touchHandler);
function touchHandler(e) {
var playerY;
var playerX;
if (e.touches) {
playerX = e.touches[0].pageX - canvas.offsetLeft;
playerY = e.touches[0].pageY - canvas.offsetTop;
e.preventDefault();
}
}More work is needed but this is the start to making touch controls for the snake game
*/
});
// start the game
requestAnimationFrame(loop);
</script>
</body>
</html>

30
src/timetable.html Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="GitLab Pages">
<title>Timetable</title>
<link rel="stylesheet" href="CSS/lightstyle.css">
</head>
<body>
<nav class="navbar">
<ul>
<li><a href="index.html">Cool Home</a></li>
<li><a href="snake.html">Cool Snake</a></li>
<li><a href="timetable.html">Cool timetable</a></li>
<!-- <li><a href="phrases.html">Cool phrases</a></li>-->
<li><a href="Manual.html">Cool Manual</a></li>
</ul>
</nav>
<main>
<h1>
Timetable for Tipperary to Limerick
</h1>
<p>
This is my Site for the timetable
</p>
</main>
</body>
</html>