Merge branch 'Progress' of github.com:EllipticEllipsis/zeldaret-website into Progress

src/app/app.component.html

@@ -1,7 +1,7 @@
 <header>
   <app-toolbar></app-toolbar>
 </header>
-<main>
+<main fxLayout="column column">
   <router-outlet></router-outlet>
 </main>
 <footer>

src/app/app.component.scss

@@ -1,5 +1,3 @@
-$footer-height: 125px;
-
 :host {
   display: flex;
   flex-direction: column;

src/app/app.module.ts

@@ -5,17 +5,20 @@ import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { HttpClientModule } from '@angular/common/http';
 import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatDialogModule } from '@angular/material/dialog';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { GamesModule } from './games/games.module';
 import { ToolbarComponent } from './toolbar/toolbar.component';
-import { N64BoxComponent } from './common-components/n64-box/n64-box.component';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { AppRoutingModule } from './app-routing.module';
 import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
 import { FooterComponent } from './footer/footer.component';
 import { LandingComponent } from './landing/landing.component';
+import { StatementNotificationComponent } from './statement-notification/statement-notification.component';
+import { AppService } from './app.service';
 
 @NgModule({
   declarations: [
@@ -23,7 +26,8 @@ import { LandingComponent } from './landing/landing.component';
     ToolbarComponent,
     LandingComponent,
     FooterComponent,
-    PageNotFoundComponent
+    PageNotFoundComponent,
+    StatementNotificationComponent
   ],
   imports: [
     BrowserModule,
@@ -32,12 +36,16 @@ import { LandingComponent } from './landing/landing.component';
     AppRoutingModule,
     HttpClientModule,
     MatButtonModule,
+    MatCardModule,
+    MatDialogModule,
     MatMenuModule,
     MatToolbarModule,
     FontAwesomeModule,
     FlexLayoutModule
   ],
-  providers: [],
+  providers: [
+    AppService
+  ],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/app.service.interface.ts

@@ -0,0 +1,26 @@
+import { Observable } from "rxjs";
+
+/**
+ * Statement data.
+ */
+export interface IStatement {
+  /**
+   * The statement title.
+   */
+  title: string;
+  /**
+   * The statement subtitle.
+   */
+  subtitle?: string;
+  /**
+   * The statement to display.
+   */
+  content: string;
+}
+
+export interface IAppService {
+  /**
+   * Try and get a statement that is available for display.
+   */
+  getStatement(): Observable<IStatement>;
+}

src/app/app.service.ts

@@ -0,0 +1,19 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { IAppService, IStatement } from './app.service.interface';
+
+/**
+ * Obtains data relating to the general site.
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class AppService implements IAppService {
+
+  constructor(private http: HttpClient) { }
+
+  getStatement(): Observable<IStatement> {
+    return this.http.get<IStatement>("/assets/json/statement.json");
+  }
+}

src/app/common-components/common-components.module.ts

@@ -1,8 +1,13 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { N64BoxComponent } from './n64-box/n64-box.component';
 import { N64ButtonComponent } from './n64-button/n64-button.component';
 import { RouterModule } from '@angular/router';
+import { DialogComponent } from './dialog/dialog.component';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
 /**
  * Module that holds generic content box and button components of varying styles.
@@ -10,11 +15,16 @@ import { RouterModule } from '@angular/router';
 @NgModule({
   declarations: [
     N64BoxComponent,
-    N64ButtonComponent
+    N64ButtonComponent,
+    DialogComponent
   ],
   imports: [
     CommonModule,
-    RouterModule
+    BrowserAnimationsModule,
+    RouterModule,
+    MatButtonModule,
+    MatDialogModule,
+    FontAwesomeModule
   ],
   exports: [
     N64BoxComponent,

src/app/common-components/dialog/dialog.component.html

@@ -0,0 +1,8 @@
+<div mat-dialog-title>
+  <button color="error" mat-icon-button mat-dialog-close>
+    <fa-icon [icon]="close"></fa-icon>
+  </button>
+  <h1>{{ data.title }}</h1>
+  <h2 *ngIf="data.subtitle">{{ data.subtitle }}</h2>
+</div>
+<mat-dialog-content [innerHTML]="data.content"></mat-dialog-content>

src/app/common-components/dialog/dialog.component.scss

@@ -0,0 +1,11 @@
+$button-offset: -8px;
+
+[mat-dialog-title] {
+  position: relative;
+}
+
+[mat-dialog-close] {
+  position: absolute;
+  right: $button-offset;
+  top: $button-offset;
+}

src/app/common-components/dialog/dialog.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DialogComponent } from './dialog.component';
+
+describe('DialogComponent', () => {
+  let component: DialogComponent;
+  let fixture: ComponentFixture<DialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DialogComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/common-components/dialog/dialog.component.ts

@@ -0,0 +1,23 @@
+import { Component, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { IconDefinition } from '@fortawesome/fontawesome-common-types';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import { IStatement } from 'src/app/app.service.interface';
+
+/**
+ * Generic dialog component.
+ */
+@Component({
+  templateUrl: './dialog.component.html',
+  styleUrls: ['./dialog.component.scss']
+})
+export class DialogComponent {
+
+  /**
+   * Close icon definition;
+   */
+  close: IconDefinition = faTimes;
+
+  constructor(public dialogRef: MatDialogRef<DialogComponent>, @Inject(MAT_DIALOG_DATA) public data: IStatement) {}
+
+}

src/app/landing/landing.component.html

@@ -1,2 +1,3 @@
 <h1>Zelda Reverse Engineering Team</h1>
+<statement-notification *ngIf="statement" [statement]="statement"></statement-notification>
 <game-summaries></game-summaries>

src/app/landing/landing.component.scss

@@ -0,0 +1,13 @@
+:host {
+  display: flex;
+  flex-direction: column;
+}
+
+h1 {
+  text-align: center;
+}
+
+statement-notification {
+  align-self: center;
+  margin-bottom: 1em;
+}

src/app/landing/landing.component.ts

@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { AppService } from '../app.service';
+import { IStatement } from '../app.service.interface';
 
 /**
  * Component shown on the front page (when people go to "/").
@@ -8,8 +10,19 @@ import { Component, OnInit } from '@angular/core';
   templateUrl: './landing.component.html',
   styleUrls: ['./landing.component.scss']
 })
-export class LandingComponent {
+export class LandingComponent implements OnInit {
 
-  constructor() { }
+  constructor(private appService: AppService) { }
+
+  /**
+   * The potential statement that is meant to be shown.
+   */
+  statement: IStatement = null;
+
+  ngOnInit() {
+    this.appService.getStatement().subscribe(
+      res => this.statement = res
+    );
+  }
 
 }

src/app/statement-notification/statement-notification.component.html

@@ -0,0 +1,7 @@
+<mat-card>
+  <mat-card-title>{{ statement.title }}</mat-card-title>
+  <mat-card-subtitle>Statement from the project leads</mat-card-subtitle>
+  <mat-card-actions>
+    <button color="primary" mat-stroked-button (click)="showStatement();">Show me!</button>
+  </mat-card-actions>
+</mat-card>

src/app/statement-notification/statement-notification.component.scss

@@ -0,0 +1,7 @@
+mat-card-actions {
+  text-align: center;
+}
+
+button {
+  width: 95%;
+}

src/app/statement-notification/statement-notification.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StatementNotificationComponent } from './statement-notification.component';
+
+describe('StatementNotificationComponent', () => {
+  let component: StatementNotificationComponent;
+  let fixture: ComponentFixture<StatementNotificationComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ StatementNotificationComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StatementNotificationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/statement-notification/statement-notification.component.ts

@@ -0,0 +1,33 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { IStatement } from '../app.service.interface';
+import { DialogComponent } from '../common-components/dialog/dialog.component';
+
+/**
+ * Box that allows a user to show a statement, should one be available.
+ */
+@Component({
+  selector: 'statement-notification',
+  templateUrl: './statement-notification.component.html',
+  styleUrls: ['./statement-notification.component.scss']
+})
+export class StatementNotificationComponent {
+
+  /**
+   * Statement data, if any.
+   */
+  @Input() statement: IStatement = null;
+
+  constructor(private dialog: MatDialog) { }
+
+  /**
+   * Show the statement in a dialog on button click.
+   */
+  showStatement() {
+    this.dialog.open(DialogComponent, {
+      data: this.statement,
+      width: "600px"
+    });
+  }
+
+}

src/assets/json/statement.json

@@ -0,0 +1,4 @@
+{
+  "title": "OoT has reached 100%!",
+  "content": "<p>It's been a wild ride. We've been able to create C code that, when compiled, reproduces the original game. We call this \"matching\" decompilation. On 26 November 2021, Fig02, who is a notable community member as well as a project lead, matched the last-remaining function in the first version of Ocarina of Time. This means that all compiled code in the game has been turned into human-readable C code. We thought for a time that we may never be able to match every function completely, so this is an incredibly exciting accomplishment. Dozens of people helped work on this project, and together we were able to achieve something amazing</p><p>There's still a lot of remaining work for the project, however. In no particular order:</p><ul><li>Documentation - Lots of code is not well understood, still, so we need to reverse-engineer things and document them.</li><li>Re-organization -We plan to reorganize the code and definitions in the project.</li><li>Re-naming - many names of things are not ideal for finding the code for a particular part of the game, so we plan to standardize and rename many systems and components.</li><li>Other versions - We have been working on decompiling the Master Quest Debug version of the game. However, Ocarina of Time has 17 other versions, which we plan to also decompile and support in the project.</li><li>Asset support - We plan to continue to improve support of asset-handling so that viewing / modifying assets on modern computers is easier to do.</li><li>Other games - We have many other projects in progress: Majora's Mask, The Minish Cap, Twilight Princess, and Breath of the Wild all need help as well to reach 100%!</li></ul><p style=\"float: right;\">— ZeldaRET project leads</p>"
+}

src/styles.scss

@@ -64,6 +64,14 @@ markdown h2 {
   border-bottom: 1px solid white;
 }
 
+ul {
+  padding-left: 20px;
+}
+
+li {
+  margin-bottom: 1rem;
+}
+
 mat-card {
   background-color: rgb(29, 48, 95) !important;
 }