Basic setup of intro screens
This commit is contained in:
Dennis Schoepf
parent
1e04b3a826
commit
1e5b627e26
5 changed files with 185 additions and 0 deletions
38
index.html
38
index.html
|
|
@ -38,8 +38,46 @@
|
|||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div id="intro">
|
||||
<div id="intro-step1">
|
||||
<h1>Hello there 👋,</h1>
|
||||
<p>
|
||||
thanks for participating in an interactive study for this research project. I hope
|
||||
you've already filled out the declaration of consent I have sent you. If there are any
|
||||
problems with that or any other part of this study do not hesitate to contact me via
|
||||
mail:
|
||||
<a href="mailto:me@dnsc.io">me@dnsc.io</a>
|
||||
</p>
|
||||
<p>
|
||||
You are participating in a study on Playful Experiences within the Onboarding Process of
|
||||
Software Development Projects. In the following you are going to be guided through an
|
||||
interactive visualization of a software project. Within that visualization you are going
|
||||
to be able to reveal certain parts of the project, that might be of value in an
|
||||
onboarding process. The visualizations are going to be accompanied by some questions on
|
||||
the visualization itself but also on the broader aspect of using game mechanics in
|
||||
software development.
|
||||
</p>
|
||||
<div id="intro-disclaimer">
|
||||
<h3>Disclaimer</h3>
|
||||
<p>
|
||||
Do not expect a real game experience within this study. This study aims to gather
|
||||
initial feedback on certain aspects of which information could be interesting to
|
||||
include within software development onboarding and how its presentation changes how it
|
||||
is perceived. The visualization of the in-game elements is therefore very abstract.
|
||||
The arguably more important part of this study are the answers to the questions you
|
||||
will be asked in the end, so please answer them carefully. Thanks in advance, let's
|
||||
start now!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="intro-step2">Step 2</div>
|
||||
<div id="intro-step3">Step 3</div>
|
||||
<div id="intro-step4">Step 4</div>
|
||||
<button id="intro-button">Let's start!</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="backdrop"></div>
|
||||
<div id="intro-backdrop"></div>
|
||||
<script src="./main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
2
main.ts
2
main.ts
|
|
@ -6,6 +6,7 @@ import { Scenes } from './src/scenes/scenes';
|
|||
import store from './src/store';
|
||||
import { Companion, CompanionState } from './src/ui/companion';
|
||||
import { InfoMessage } from './src/ui/info';
|
||||
import { Intro } from './src/ui/intro';
|
||||
|
||||
const sketch = (s: p5) => {
|
||||
// Scenes
|
||||
|
|
@ -16,6 +17,7 @@ const sketch = (s: p5) => {
|
|||
s.createCanvas(SCREEN_WIDTH, SCREEN_HEIGHT);
|
||||
s.noCursor();
|
||||
|
||||
new Intro();
|
||||
new Companion();
|
||||
new InfoMessage();
|
||||
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import { getRevealablesforSubproject } from './helpers';
|
|||
import { SubProject } from './types';
|
||||
|
||||
export interface State {
|
||||
currentIntroStep: number;
|
||||
currentScene: Scenes;
|
||||
currentSubproject?: string;
|
||||
companionState: CompanionState;
|
||||
|
|
@ -24,6 +25,7 @@ export interface State {
|
|||
|
||||
const store = create<State>(
|
||||
devtools((set) => ({
|
||||
currentIntroStep: 1,
|
||||
currentScene: Scenes.OVERVIEW,
|
||||
currentSubproject: null,
|
||||
companionState: CompanionState.IDLE,
|
||||
|
|
|
|||
60
src/ui/intro.ts
Normal file
60
src/ui/intro.ts
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
import store from '../store';
|
||||
|
||||
export class Intro {
|
||||
currentStep: number;
|
||||
|
||||
nextButton: HTMLElement;
|
||||
step1Container: HTMLElement;
|
||||
step2Container: HTMLElement;
|
||||
step3Container: HTMLElement;
|
||||
step4Container: HTMLElement;
|
||||
|
||||
constructor() {
|
||||
this.step1Container = document.getElementById('intro-step1');
|
||||
this.step2Container = document.getElementById('intro-step2');
|
||||
this.step3Container = document.getElementById('intro-step3');
|
||||
this.step4Container = document.getElementById('intro-step4');
|
||||
this.nextButton = document.getElementById('intro-button');
|
||||
|
||||
this.nextButton.addEventListener('click', this.onNextClick);
|
||||
|
||||
store.subscribe((state) => {
|
||||
const currentStep = state.currentIntroStep;
|
||||
this.showStep(currentStep);
|
||||
});
|
||||
}
|
||||
|
||||
private onNextClick() {
|
||||
console.log('go next');
|
||||
|
||||
store.setState((state) => ({ currentIntroStep: state.currentIntroStep + 1 }));
|
||||
}
|
||||
|
||||
private sendConsent() {}
|
||||
|
||||
private sendDemoographicData() {}
|
||||
|
||||
private showStep(stepToShow: number) {
|
||||
if (stepToShow === 1) {
|
||||
this.step1Container.style.display = 'flex';
|
||||
this.step2Container.style.display = 'none';
|
||||
this.step3Container.style.display = 'none';
|
||||
this.step4Container.style.display = 'none';
|
||||
} else if (stepToShow === 2) {
|
||||
this.step1Container.style.display = 'none';
|
||||
this.step2Container.style.display = 'flex';
|
||||
this.step3Container.style.display = 'none';
|
||||
this.step4Container.style.display = 'none';
|
||||
} else if (stepToShow === 3) {
|
||||
this.step1Container.style.display = 'none';
|
||||
this.step2Container.style.display = 'none';
|
||||
this.step3Container.style.display = 'flex';
|
||||
this.step4Container.style.display = 'none';
|
||||
} else if (stepToShow === 4) {
|
||||
this.step1Container.style.display = 'none';
|
||||
this.step2Container.style.display = 'none';
|
||||
this.step3Container.style.display = 'none';
|
||||
this.step4Container.style.display = 'flex';
|
||||
}
|
||||
}
|
||||
}
|
||||
83
styles.scss
83
styles.scss
|
|
@ -23,6 +23,20 @@ main {
|
|||
button {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
|
||||
'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
font-size: 16px;
|
||||
|
||||
padding: 6px 15px;
|
||||
background-color: transparent;
|
||||
border: 2px solid black;
|
||||
border-radius: 5px;
|
||||
font-weight: bold;
|
||||
max-width: 180px;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.ui {
|
||||
|
|
@ -211,6 +225,64 @@ button {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
#intro {
|
||||
background-color: white;
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
min-width: 60%;
|
||||
max-width: 90%;
|
||||
max-height: 90%;
|
||||
overflow-y: auto;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: #fff;
|
||||
padding: 2.5rem 4rem;
|
||||
border-radius: 15px;
|
||||
--tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
|
||||
var(--tw-shadow);
|
||||
|
||||
#intro-step1 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
h3 {
|
||||
margin: 0.6rem 0 0rem 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0.6rem 0 1rem;
|
||||
}
|
||||
|
||||
#intro-disclaimer {
|
||||
background-color: #ffedd5;
|
||||
color: #7c2d12;
|
||||
padding: 4px 20px;
|
||||
border-radius: 5px;
|
||||
border-left: 7px solid #7c2d12;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
#intro-step2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#intro-step3 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#intro-step4 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#intro-button {
|
||||
float: right;
|
||||
margin-top: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#backdrop {
|
||||
|
|
@ -223,3 +295,14 @@ button {
|
|||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
#intro-backdrop {
|
||||
display: block;
|
||||
position: fixed;
|
||||
z-index: 3;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
|
|
|||
Reference in a new issue