Skip to content

Commit

Permalink
feat(learnings): update learnings with keymap and updat readme and ro…
Browse files Browse the repository at this point in the history
…admap
  • Loading branch information
Mathieu Hermann committed Nov 14, 2024
1 parent 535b4de commit e9d5c0e
Show file tree
Hide file tree
Showing 8 changed files with 175 additions and 52 deletions.
75 changes: 30 additions & 45 deletions readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,49 +3,48 @@
</p>

# ❄️ Retro Ski game
Welcome on a small game dev project.<br>
Put your skis and let's race some randomly generated alpine ski tracks with your friends.
Welcome to a fun, small game development project!
Put on your skis and race down randomly generated alpine ski tracks with friends.

## 💻 Demo
<a href="https://une-entreprise.ch/retroski">Play RetroSki</a>

## 🎮 Controls
### During the race
<table>
<tr>
<th>Action</th>
<th align="left">⌨️ Keyboard</th>
<th align="left">🎮 Gamepad</th>
<th align="left">📱 Touch</th>
<th align="left">📱 Touch device</th>
</tr>
<tr>
<td>Start skiing (1x)</td>
<td>Start riding (1x)</td>
<td><img src="src/assets/icons/keyboard_arrow_up.png" valign="bottom"/></td>
<td><img src="src/assets/icons/gamepad_a.png" valign="bottom"/></td>
<td>Touch the screen</td>
</tr>
<tr>
<td>Carving</td>
<td>Carve</td>
<td><img src="src/assets/icons/keyboard_arrow_left.png" valign="bottom"/><img src="src/assets/icons/keyboard_arrow_right.png" valign="bottom"/></td>
<td><img src="src/assets/icons/gamepad_left_stick.png" valign="bottom"/></td>
<td>Touch left/right</td>
</tr>
<tr>
<td>Braking/Sliding</td>
<td>Brake / slide</td>
<td><img src="src/assets/icons/keyboard_space.png" valign="bottom"/></td>
<td><img src="src/assets/icons/gamepad_b.png" valign="bottom"/></td>
<td>Touch bottom</td>
</tr>
<tr>
<td>Show/hide ghosts</td>
<td><img src="src/assets/icons/keyboard_g.png" valign="bottom"/></td>
<td><img src="src/assets/icons/gamepad_left_bumper.png" valign="bottom"/></td>
<td>Leave the race</td>
<td><img src="src/assets/icons/keyboard_exit.png" valign="bottom"/></td>
<td><img src="src/assets/icons/gamepad_select.png" valign="bottom"/></td>
<td></td>
</tr>
<tr>
<td>Return to the event manager (restart the race)</td>
<td><img src="src/assets/icons/keyboard_exit.png" valign="bottom"/></td>
<td><img src="src/assets/icons/gamepad_select.png" valign="bottom"/></td>
<td>Toggle ghosts</td>
<td><img src="src/assets/icons/keyboard_g.png" valign="bottom"/></td>
<td><img src="src/assets/icons/gamepad_left_bumper.png" valign="bottom"/></td>
<td></td>
</tr>
<tr>
Expand All @@ -56,64 +55,50 @@ Put your skis and let's race some randomly generated alpine ski tracks with your
</tr>
</table>

### Event manager
<table>
<tr>
<th>Action</th>
<th>⌨️ Keyboard</th>
<th>🎮 Gamepad</th>
</tr>
<tr>
<td>Leave the event and go back to event setup</td>
<td><img src="src/assets/icons/keyboard_exit.png" valign="bottom"/></td>
<td><img src="src/assets/icons/gamepad_select.png" valign="bottom"/></td>
</tr>
</table>

## 📘 Gamer guide
### Ride local
Welcome to your event setup.<br>
Here you have to provide few informations before starting to ride :
1. Track (if the track doesn't exist you can create a new one)<br>
2. Riders name
3. Number of races (1 to 10)
Set up your event here!<br>
Enter a few details to get started:<br>
1. Choose a track (or create a new one if it doesn’t exist).
2. Enter rider names.
3. Select the number of races (1 to 10).

### Race
You made it to the top of the hill !<br>
Now it's time to have fun and enjoy some nice carving !<br><br>
You’re at the top of the hill. <br>
Time to carve some turns!<br>
Press (1x) ⌨️<img src="src/assets/icons/keyboard_arrow_up.png" valign="bottom"/>, 🎮<img src="src/assets/icons/gamepad_a.png" valign="bottom"/> or 📱touch to start skiing and see you at the finish line !<br>
⚠️ Don't miss a gate or you'll receive a penalty of <b>3 seconds</b>

### Game setup
You can access to specific game setup by clicking the ⚙️ on the top right in the interface<br>
Here you can enable or disable few settings for your race :
Here you can enable or disable few settings for your race:
<ul>
<li>🔊 Sounds</li>
<li>🧑‍🤝‍🧑 Spectators (may affect performance)</li>
<li>👻 Ghosts (may affect performance)</li>
<li> Particles (may affect performance)</li>
</ul>
You also have the possibility to reset and restore the game to the default content (tracks, ghosts & record).
You can also reset the game to default settings, restoring all tracks, ghosts, and records.

## 💡 Tips
### Preloaded tracks
By default the game provides 5 tracks, so you can use the same track as your friends even on a different setup.
The game includes 5 default tracks, so you can race on the same tracks as your friends, even on different devices:
1. <img src="https://www.kidlink.org/icons/f0-ch.gif" valign="middle"/> Davos (Giant slalom)
2. <img src="https://www.kidlink.org/icons/f0-ch.gif" valign="middle"/> Adelboden (Slalom)
3. <img src="https://www.kidlink.org/icons/f0-at.gif" valign="middle"/> Soelden (Giant slalom)
4. <img src="https://www.kidlink.org/icons/f0-ch.gif" valign="middle"/> Wengen (Super-G)
5. <img src="https://www.kidlink.org/icons/f0-ch.gif" valign="middle"/> Zermatt (Downhill)

### Different track styles
Each track style follow is own rule when generating a new track.<br>
The dynamic of the skier is also impacted by the style of the track to mimic real world differences.<br>
<b>Note: For your first rides, Giant slalom is a good style to start gaining some experience</b>
Each track style follows unique rules when generating a new track.<br>
Track style also impacts skier dynamics, mimicking real-world conditions.<br>
<b>Note:</b> Giant Slalom is a great track style to start gaining experience!

### Keep your records
RetroSki use localStorage and indexedDB to persist generated tracks and records.
RetroSki uses localStorage and indexedDB to save generated tracks and your records.

### Follow your path
By default ghost mode is activated and you can see your best times while racing<br>
Ghost mode is activated by default so you can view your best time as you race.<br>
<table>
<tr>
<th>Ghost</th>
Expand All @@ -130,11 +115,11 @@ By default ghost mode is activated and you can see your best times while racing<
</table>

### Performance
Retroski should be playable on any modern device with an updated browser.<br>
In case of performance trouble, you can try to disable via the game setup the display of spectators, ghosts and particles during the race.
RetroSki is playable on any modern device with an updated browser.<br>
If you experience performance issues, try disabling spectators, ghosts, and particles in the game setup.

### Crash
If your game crash, try to reset & erase all content via the game setup menu to reload original content.
If the game crashes, try resetting and erasing all content via the game setup menu to reload the original content.

## 👷‍♂️ What's next ?
<a href="roadmap.md">Draft of a roadmap</a>
Expand Down
4 changes: 2 additions & 2 deletions roadmap.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
- Implement async multiplayer
- Define default tracks, records and ghosts
- Rework skier dynamic
- Finish learning pages
- Improve scrolling dynamic on event page
- ✔️ ~~Finish learning pages~~
- ✔️ ~~Improve scrolling dynamic on event page~~
- ✔️ ~~Fix riders name selection~~
- ✔️ ~~Update deployment pipeline~~
- ✔️ ~~Rework models to prepare online record storage~~
Expand Down
10 changes: 10 additions & 0 deletions src/app/common/components/expander/expander.component.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<div class="header" (click)="expanded.set(!expanded())">
<div class="retro-subtitle">{{ title() }}</div>
<app-button-icon
class="tertiary"
icon="keyboard_arrow_down"
></app-button-icon>
</div>
<div class="content">
<ng-content></ng-content>
</div>
38 changes: 38 additions & 0 deletions src/app/common/components/expander/expander.component.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
:host {
display: flex;
flex-direction: column;
flex: 0 0 auto;
overflow: hidden;

&.expanded {
.content {
height: fit-content;
}

.header {
app-button-icon {
transform: rotate(180deg);
}
}
}

.header {
display: flex;
flex: 1 1 auto;
align-items: center;
justify-content: space-between;
cursor: pointer;

app-button-icon {
transition: var(--transition-time) ease;
}
}

.content {
display: flex;
flex-direction: column;
height: 0px;
overflow: hidden;
transition: max-height var(--transition-time) ease-in-out;
}
}
18 changes: 18 additions & 0 deletions src/app/common/components/expander/expander.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { ChangeDetectionStrategy, Component, HostBinding, input, model, signal } from '@angular/core';
import { ButtonIconComponent } from '../button-icon/button-icon.component';

@Component({
selector: 'app-expander',
standalone: true,
imports: [ButtonIconComponent],
templateUrl: './expander.component.html',
styleUrl: './expander.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'[class.expanded]': 'expanded()'
}
})
export class ExpanderComponent {
public title = input.required<string>();
public expanded = model<boolean>(false);
}
22 changes: 21 additions & 1 deletion src/app/common/scss/components.scss
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,9 @@
margin-bottom: 0.25rem;
color: var(--color-primary);
font-weight: 500;
position: sticky;
top: 0;
background-color: var(--color-surface);
}

.retro-subtitle {
Expand All @@ -76,6 +79,9 @@
margin-bottom: 0.25rem;
color: var(--color-tertiary);
font-weight: 500;
position: sticky;
top: 26px;
background-color: var(--color-surface);
}

.retro-text {
Expand Down Expand Up @@ -159,7 +165,7 @@
}

.retro-input {
font-size: 14px;
font-size: var(--text-standard);
border-radius: var(--border-radius-large);
border-color: var(--color-tertiary);
color: var(--color-tertiary);
Expand All @@ -173,3 +179,17 @@
text-align: right;
}
}

.retro-command {
display: flex;
gap: 1rem;
align-items: center;
font-size: var(--text-small);
color: var(--color-text);
padding: 0.2rem;

span {
color: var(--color-tertiary);
font-weight: 500;
}
}
57 changes: 54 additions & 3 deletions src/app/pages/learning/learning.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -60,9 +60,53 @@
You can use various devices to ride the mountain:
</div>
<div class="retro-title">Devices</div>
<div class="retro-subtitle">Keyboard</div>
<div class="retro-subtitle">Gamepad</div>
<div class="retro-subtitle">Smartphone</div>
<app-expander title="Keyboard" [expanded]="true">
<div class="retro-command">
<img src="./assets/icons/keyboard_arrow_up.png" /> Start riding
</div>
<div class="retro-command">
<img src="./assets/icons/keyboard_arrow_left.png" /> Carve left
</div>
<div class="retro-command">
<img src="./assets/icons/keyboard_arrow_right.png" /> Carve right
</div>
<div class="retro-command">
<img src="./assets/icons/keyboard_space.png" /> Brake / slide
</div>
<div class="retro-command">
<img src="./assets/icons/keyboard_exit.png" /> Leave the race
</div>
<div class="retro-command">
<img src="./assets/icons/keyboard_g.png" /> Toggle ghosts
</div>
<div class="retro-command">
<img src="./assets/icons/keyboard_d.png" /> Toggle debug mode
</div>
</app-expander>
<app-expander title="Gamepad">
<div class="retro-command">
<img src="./assets/icons/gamepad_a.png" /> Start riding
</div>
<div class="retro-command">
<img src="./assets/icons/gamepad_left_stick.png" /> Carve left /
right
</div>
<div class="retro-command">
<img src="./assets/icons/gamepad_b.png" /> Brake / slide
</div>
<div class="retro-command">
<img src="./assets/icons/gamepad_select.png" /> Leave the race
</div>
<div class="retro-command">
<img src="./assets/icons/gamepad_left_bumper.png" /> Toggle ghosts
</div>
</app-expander>
<app-expander title="Touch device">
<div class="retro-command"><span>Touch</span> Start riding</div>
<div class="retro-command"><span>Touch left</span> Carve left</div>
<div class="retro-command"><span>Touch right</span> Carve right</div>
<div class="retro-command"><span>Touch bottom</span> Brake / slide</div>
</app-expander>
</ng-template>

<ng-template #page_3>
Expand All @@ -84,6 +128,13 @@
Multiple ghosts can be displayed simultaneously, allowing you to track
different runs at once.
</div>
<div class="retro-subtitle">Ghosts on track</div>
<div class="retro-command">
<img src="./assets/icons/global_record_ghost.png" /> Overall best
</div>
<div class="retro-command">
<img src="./assets/icons/event_record_ghost.png" /> Event best
</div>
</ng-template>

<ng-template #page_4>
Expand Down
3 changes: 2 additions & 1 deletion src/app/pages/learning/learning.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,12 @@ import { ToolbarComponent } from '../../common/components/toolbar/toolbar.compon
import { RouterLink } from '@angular/router';
import { StepperComponent } from '../../common/components/stepper/stepper.component';
import { NgTemplateOutlet } from '@angular/common';
import { ExpanderComponent } from '../../common/components/expander/expander.component';

@Component({
selector: 'app-learning',
standalone: true,
imports: [ButtonIconComponent, NgTemplateOutlet, RouterLink, StepperComponent, ToolbarComponent],
imports: [ButtonIconComponent, ExpanderComponent, NgTemplateOutlet, RouterLink, StepperComponent, ToolbarComponent],
templateUrl: './learning.component.html',
styleUrl: './learning.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush
Expand Down

0 comments on commit e9d5c0e

Please sign in to comment.