Appearance
Guess Name #
This example shows how to create an app where the user should guess on a name the app is thinking of.
js
class MyApp extends App{
createStartPage(){
return new EnterGuess()
}
}js
class EnterGuess extends Page{
createGui(){
return Rows(
Space,
Text(`I'm thinking of either the name Lily, Peter, Alice or Bob. Guess which one!`),
Space,
Space,
Cols(
EnterText()
.size(1)
.placeholder(`Enter name`)
.aVar(`enteredName`)
.page(InvalidGuess)
.pages({
'': NoGuessEntered,
'Lily': CorrectGuess,
'Peter': WrongGuess,
'Alice': WrongGuess,
'Bob': WrongGuess,
}),
Button(`⇨`),
),
)
}
}js
class CorrectGuess extends Page{
createGui(){
return Rows(
Space,
Text(`That's right, ${a.enteredName} is the one I'm thinking of!`),
Space,
Text(`Good work!`),
Space,
)
}
}js
class NoGuessEntered extends Page{
createGui(){
return Rows(
Space,
Text(`No... That's not a name...`),
Space,
Space,
Cols(
Space,
Button(`Guess again`).page(EnterGuess),
Space,
Button(`I give up`).page(GiveUp),
Space,
),
)
}
}js
class InvalidGuess extends Page{
createGui(){
return Rows(
Space,
Text(`No, ${a.enteredName} is totally wrong! It's not one of the names I mentioned.`),
Space,
Space,
Cols(
Space,
Button(`Guess again`).page(EnterGuess),
Space,
Button(`I give up`).page(GiveUp),
Space,
),
)
}
}js
class WrongGuess extends Page{
createGui(){
return Rows(
Space,
Text(`No, ${a.enteredName} is wrong.`),
Space,
Space,
Cols(
Space,
Button(`Guess again`).page(EnterGuess),
Space,
Button(`I give up`).page(GiveUp),
Space,
),
)
}
}js
class GiveUp extends Page{
createGui(){
return Rows(
Space,
Text(`Game Over!`),
Space,
Text(`Correct name was Lily.`),
Space,
)
}
}