Filippine
Filippine puzzle with Angular
Usage
-
Install from npm
npm install @steinv/filippine -
Import the module in your app.module.ts
import { FilippineModule } from '@steinv/filippine';
@NgModule({
declarations: [
...
],
imports: [
FilippineModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }- Add the filippine directive in your component template
<filippine
[configuration]="configuration"
(answer)="questionAnswered($event)"
(completed)="puzzleCompleted($event)">
</filippine>- Add a configuration and handle output for your filippine puzzle in your component
public configuration: Configuration = {
questions: [
{question: 'q1?', answer: 'abcdefghijklm', answerLength: 13, answerPosition: 10},
{question: 'q2?', answer: 'abcd', answerLength: 4, answerPosition: 1},
{question: 'q3?', answer: 'abcde', answerLength: 5, answerPosition: 2},
{question: 'q4?', answer: 'abcdefgh', answerLength: 8, answerPosition: 2},
]
}
public questionAnswered(reply: Answer) {
/**
* do something with the reply: Answer
* reply.question
* reply.answer
*/
}
public puzzleCompleted(result: boolean) {
/**
* do something with the result: boolean
*/
if (result) {
console.log('well done!');
} else {
console.log('Uh-Oh looks like you made a mistake');
}
}Style
You can override the used css selectors to define your own custom styling
/* grid-tiles used for spacing */
.spacer {
background-color: transparent;
border: none;
box-shadow: none;
}
/* grid-tiles used for input */
.input {
background-color: white;
border: 1px solid black;
}
/* highlighted input grid-tiles */
.highlight {
background-color: yellow;
}