Skip to content

Commit 0e9310d

Browse files
FenirenFeniren
committed
Added calendar and updated event cards.
1 parent ab4db45 commit 0e9310d

File tree

8 files changed

+277
-15
lines changed

8 files changed

+277
-15
lines changed

‎docs/Calendar.js‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
const CurrentDate = document.querySelector('.calendar-month');
2+
const ActiveDays = document.querySelector('.calendar-days');
3+
const PreviousIcon = document.querySelectorAll('.calendar-month-previous');
4+
const NextIcon = document.querySelectorAll('.calendar-month-next');
5+
const EventText = document.querySelector('.calendar-event');
6+
let Day = new Date();
7+
CurrentYear = Day.getFullYear();
8+
CurrentMonth = Day.getMonth();
9+
const AllMonths = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
10+
let DayList = [];
11+
var DayPairs = [];
12+
13+
const RenderCalendar = () => {
14+
let MonthFirstDay = new Date(CurrentYear, CurrentMonth, 1).getDay();
15+
let MonthLastDate = new Date(CurrentYear, (CurrentMonth + 1), 0).getDate();
16+
let MonthLastDay = new Date(CurrentYear, CurrentMonth, MonthLastDate).getDay();
17+
let PreviousMonthLastDay = new Date(CurrentYear, CurrentMonth, 0).getDate();
18+
let LiElements = "";
19+
20+
for (let i = MonthFirstDay; i > 0; i--){
21+
LiElements += `<li class="calendar-days-visible">${((PreviousMonthLastDay - i) + 1)}</li>`;
22+
DayList.push(new Date(CurrentYear, (CurrentMonth - 1), (PreviousMonthLastDay - i) + 1));
23+
}
24+
25+
for (let i = 1; i <= MonthLastDate; i++){
26+
LiElements += `<li class="calendar-days-visible">${i}</li>`;
27+
DayList.push(new Date(CurrentYear, CurrentMonth, i));
28+
}
29+
30+
for (let i = MonthLastDay; i < 6; i++){
31+
LiElements += `<li class="calendar-days-visible">${((i - MonthLastDay) + 1)}</li>`;
32+
DayList.push(new Date(CurrentYear, (CurrentMonth + 1), (i - MonthLastDay) + 1));
33+
}
34+
35+
CurrentDate.innerText = `${AllMonths[CurrentMonth]} ${CurrentYear}`;
36+
ActiveDays.innerHTML = LiElements;
37+
//console.log(DayList);
38+
}
39+
40+
RenderCalendar();
41+
42+
PreviousIcon.forEach(icon => {
43+
icon.addEventListener("click", () => {
44+
CurrentMonth--;
45+
46+
if (CurrentMonth < 0){
47+
CurrentMonth = 11;
48+
CurrentYear--;
49+
}
50+
51+
RenderCalendar();
52+
53+
DayPairs = [];
54+
55+
for (let i = 0; i < VisibleDates.length; i++) {
56+
DayPairs.push(VisibleDates[i], DayList[i]);
57+
console.log("Day Pair:" + DayPairs[i]);
58+
}
59+
})
60+
})
61+
62+
NextIcon.forEach(icon => {
63+
icon.addEventListener("click", () => {
64+
CurrentMonth++;
65+
66+
if (CurrentMonth > 11){
67+
CurrentMonth = 0;
68+
CurrentYear++;
69+
}
70+
71+
RenderCalendar();
72+
73+
DayPairs = [];
74+
75+
for (let i = 0; i < VisibleDates.length; i++) {
76+
DayPairs.push(VisibleDates[i], DayList[i]);
77+
console.log("Day Pair:" + DayPairs[i]);
78+
}
79+
80+
81+
})
82+
})
83+
84+
const FindValue = (Key) => {
85+
for (let i = 0; i < DayPairs.length; i++){
86+
if (Key == dayPairs[i].Key){
87+
return DayPairs[i].Value;
88+
}
89+
}
90+
}
91+
92+
const VisibleDates = document.querySelectorAll('.calendar-days-visible');
93+
//console.log(VisibleDates);
94+
95+
DayPairs = []
96+
97+
for (let i = 0; i < VisibleDates.length; i++) {
98+
DayPairs.push(VisibleDates[i], DayList[i]);
99+
console.log("Day Pair:" + DayPairs[i] + " index: " + i);
100+
}
101+
102+
VisibleDates.forEach(day => {
103+
day.addEventListener("click", () => {
104+
console.log("Events: " + AllEvents.length);
105+
for (let i = 0; i < AllEvents.length; i++){
106+
for (let j = 0; j < DayPairs.length; j++){
107+
if ((AllEvents[i].EventDate.getTime() == DayPairs[j].Value.getTime()) && (DayPairs[j].Key == day)){
108+
EventText.innerText = AllEvents[i].EventDescription;
109+
}
110+
}
111+
}
112+
})
113+
})
114+
115+
console.log("End of file");

‎docs/Event.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
const AllEvents = [];
2+
3+
class Event{
4+
//var EventDate = new Date();
5+
//var EventDescription = "";
6+
7+
constructor(Year, Month, Day){
8+
this.EventDate = new Date(Year, Month, Day);
9+
this.EventDescription = "test";
10+
}
11+
12+
GetEventDescription() {
13+
return this.EventDescription;
14+
}
15+
16+
SetEventDescription(Description){
17+
this.EventDescription = Description;
18+
}
19+
}
20+
21+
let temp = new Event(2024, 2, 24);
22+
temp.SetEventDescription("Science Carnival");
23+
24+
AllEvents.push(temp);

‎docs/Pair.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
class Pair{
2+
constructor(Key, Value){
3+
this.Key = Key;
4+
this.Value = Value;
5+
}
6+
}

‎docs/TypeMap.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
class TypeMap{
2+
constructor(){
3+
this.Pairs = [];
4+
}
5+
6+
AddPair(Key, Value){
7+
this.Pairs.push(new Pair(Key, Value));
8+
}
9+
10+
FindValue(Key){
11+
for (let i = 0; i < this.Pairs.length; i++){
12+
if (Key == this.Pairs.Key){
13+
return this.Pairs.Value;
14+
}
15+
}
16+
}
17+
}

‎docs/img/2023-2024/AboutUs/LucaFicanoLatimer.png‎

-697 KB
Loading

‎docs/img/2023-2024/Events/Game_Night_24-2-13.png‎

3.63 MB
Loading

‎docs/index.html‎

Lines changed: 33 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
<link rel="shortcut icon" href="img/favicon_32.ico" type="image/x-icon">
77
<link rel="stylesheet" href="styles.css">
88
<script src="https://kit.fontawesome.com/c4be304c4a.js" crossorigin="anonymous"></script>
9+
<script src="Event.js" defer></script>
10+
<script src="Calendar.js" defer></script>
911
</head>
1012
<body>
1113
<nav>
@@ -55,8 +57,8 @@ <h2>Updates</h2>
5557
<div class="card-container">
5658
<div class="card">
5759
<img src="img/22-23/main-meeting.png" alt="empty">
58-
<div>Thanks for a great Spring Semester!</div>
59-
<p>Thanks to everyone who worked hard this semester on their game pitches! Feel free to check the club's itch.io page to see all the submissions from this semester. We look forward to seeing everyone again in the fall!</p>
60+
<div>Welcome to Spring Semester!</div>
61+
<p>Spring Game Pitches will be presented today, February 13th!</p>
6062
<!-- <div>
6163
<u>Meeting Details</u><br>
6264
<p>
@@ -68,9 +70,9 @@ <h2>Updates</h2>
6870
</div>
6971

7072
<div class="card">
71-
<img src="img/22-23/main-firstmeeting.png" alt="empty">
72-
<div>Have a great summer!</div>
73-
<p>From everyone in the club, we hope that everyone has a great summer break! See you soon!</p>
73+
<img src="img/2023-2024/Events/Game_Night_24-2-13.png" alt="empty">
74+
<div>Game Night Social!</div>
75+
<p>Thank you to everyone who showed up to Friday's game night social!</p>
7476
<!-- <div>
7577
<u>Workshop Details</u><br>
7678
<p>
@@ -85,7 +87,7 @@ <h2>Updates</h2>
8587
<img src="img/pitches_blank.png" alt="empty">
8688
<div>Spring 2023 Game Pitches!</div>
8789
<p>
88-
Thanks for an amazing semester! Don't forget to check out all the games that were made this semester or watch the demo reel for each game with the links down below!
90+
After today's meeting the link to the presentation can be found here!
8991
<br><br>
9092
<a href="https://itch.io/jam/cpp-game-development-club-spring-2023-game-pitches/entries">
9193
<div class="link">
@@ -108,15 +110,31 @@ <h5>Fall Semester Demo Reel!</h5>
108110

109111
<div class="section">
110112
<h2>Calendar</h2>
111-
<p>
112-
August 23rd - Club Fair @ University Park 10:30am - 12:30pm
113-
<br />
114-
August 25th - Club Fair @ Unversity Park 4:00pm - 6:00pm
115-
<br />
116-
August 29th - First Club Meeting @ Building 8 Room 4 12:00pm - 1:00pm
117-
<br />
118-
September 1st - Game Night @ Building 6 Room 204 3:00pm - 5:00pm
119-
</p>
113+
<div class="calendar-container">
114+
<!-- <div>
115+
<ul class="calendar-month">
116+
<li class="calendar-month-previous">&#10094</li>
117+
<li>August</li>
118+
<li class="calendar-month-next">&#10095</li>
119+
</ul>
120+
</div> -->
121+
<div>
122+
<span class="calendar-month-previous">&#10094</span><span class="calendar-month"></span><span class="calendar-month-next">&#10095</span>
123+
</div>
124+
<ul class="calendar-weekdays">
125+
<li>Sunday</li>
126+
<li>Monday</li>
127+
<li>Tuesday</li>
128+
<li>Wednesday</li>
129+
<li>Thursday</li>
130+
<li>Friday</li>
131+
<li>Saturday</li>
132+
</ul>
133+
<ul class="calendar-days">
134+
</ul>
135+
<p class="calendar-event">
136+
</p>
137+
</div>
120138
</div>
121139

122140
<div class="section">

‎docs/styles.css‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,90 @@ nav{
2121
padding-left: 30px;
2222
}
2323

24+
.calendar-container{
25+
border-collapse: separate;
26+
border-radius: 10px;
27+
overflow: hidden;
28+
}
29+
30+
.calendar-days{
31+
background: #eee;
32+
margin: 0;
33+
padding: 10px 0;
34+
}
35+
36+
.calendar-days li{
37+
color: #777;
38+
display: inline-block;
39+
font-size: 12px;
40+
list-style-type: none;
41+
margin-bottom: 5px;
42+
text-align: center;
43+
width: 13.6%;
44+
}
45+
46+
.calendar-days-active{
47+
color: black;
48+
}
49+
50+
.calendar-days-visible{
51+
}
52+
53+
.calendar-event{
54+
}
55+
56+
.calendar-info{
57+
background: #eee;
58+
}
59+
60+
.calendar-month{
61+
background: #4eb970;
62+
display: inline-block;
63+
padding: 50px 25px;
64+
text-align: center;
65+
width: 93.3%;
66+
}
67+
68+
.calendar-month ul{
69+
margin: 0px;
70+
padding: 0px;
71+
}
72+
73+
.calendar-month-next{
74+
background: #4eb970;
75+
display: inline-block;
76+
float: right;
77+
font-size: 20px;
78+
list-style-type: none;
79+
padding-bottom: 45px;
80+
padding-right: 10px;
81+
padding-top: 50px;
82+
text-align: right;
83+
}
84+
85+
.calendar-month-previous{
86+
background: #4eb970;
87+
display: inline-block;
88+
float: left;
89+
font-size: 20px;
90+
list-style-type: none;
91+
padding-bottom: 45px;
92+
padding-right: 10px;
93+
padding-top: 50px;
94+
text-align: left;
95+
}
96+
2497
.calendar-weekdays{
98+
background-color: #ddd;
99+
margin: 0;
100+
padding: 10px 0;
101+
}
25102

103+
.calendar-weekdays li{
104+
color: #666;
105+
display: inline-block;
106+
text-align: center;
107+
width: 13.6%;
26108
}
27109

28110
.title{

0 commit comments

Comments
 (0)