Merge pull request #1298 from pnp/react-word-game-2
This commit is contained in:
commit
f2027a9dc1
|
@ -8,28 +8,24 @@ import {
|
||||||
PropertyPaneCheckbox
|
PropertyPaneCheckbox
|
||||||
} from '@microsoft/sp-webpart-base';
|
} from '@microsoft/sp-webpart-base';
|
||||||
|
|
||||||
import * as strings from 'WordGameWebPartStrings';
|
|
||||||
import WordGame from './components/WordGame';
|
import WordGame from './components/WordGame';
|
||||||
import { IWordGameProps } from './components/IWordGameProps';
|
import { IWordGameProps } from './components/IWordGameProps';
|
||||||
import { WordService } from './components/WordService';
|
|
||||||
|
|
||||||
export interface IWordGameWebPartProps {
|
export interface IWordGameWebPartProps {
|
||||||
gameTitle: string;
|
gameTitle: string;
|
||||||
enableHighScores: boolean
|
enableHighScores: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class WordGameWebPart extends BaseClientSideWebPart<IWordGameWebPartProps> {
|
export default class WordGameWebPart extends BaseClientSideWebPart<IWordGameWebPartProps> {
|
||||||
|
|
||||||
wordGame: WordGame;
|
public render(): void {
|
||||||
constructor() {
|
if (!this.properties.gameTitle) {
|
||||||
super();
|
this.properties.gameTitle = 'Word Game';
|
||||||
}
|
}
|
||||||
|
|
||||||
public render(): void {
|
if (this.properties.enableHighScores === undefined) {
|
||||||
if (!this.properties.gameTitle)
|
|
||||||
this.properties.gameTitle='Word Game';
|
|
||||||
if (this.properties.enableHighScores==null)
|
|
||||||
this.properties.enableHighScores = true;
|
this.properties.enableHighScores = true;
|
||||||
|
}
|
||||||
|
|
||||||
const element: React.ReactElement<IWordGameProps> = React.createElement(
|
const element: React.ReactElement<IWordGameProps> = React.createElement(
|
||||||
WordGame,
|
WordGame,
|
||||||
|
@ -40,9 +36,7 @@ export default class WordGameWebPart extends BaseClientSideWebPart<IWordGameWebP
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
||||||
ReactDom.render(element, this.domElement);
|
ReactDom.render(element, this.domElement);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
protected onDispose(): void {
|
protected onDispose(): void {
|
||||||
|
@ -74,7 +68,7 @@ export default class WordGameWebPart extends BaseClientSideWebPart<IWordGameWebP
|
||||||
}),
|
}),
|
||||||
PropertyPaneTextField('gameTitle', {
|
PropertyPaneTextField('gameTitle', {
|
||||||
label: 'Game Title'
|
label: 'Game Title'
|
||||||
}),
|
})
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import { WordGameListItem } from "./WordService";
|
import { WordGameListItem } from './WordService';
|
||||||
import { GameState } from "./WordGame";
|
import { GameState } from './WordGame';
|
||||||
import { WebPartContext } from "@microsoft/sp-webpart-base";
|
import { WebPartContext } from '@microsoft/sp-webpart-base';
|
||||||
|
|
||||||
export interface IWordGameProps {
|
export interface IWordGameProps {
|
||||||
description: string;
|
description: string;
|
||||||
|
@ -19,5 +19,4 @@ export interface IWordGameState {
|
||||||
lblMessage: string;
|
lblMessage: string;
|
||||||
highScores: WordGameListItem[];
|
highScores: WordGameListItem[];
|
||||||
mobileMode: boolean;
|
mobileMode: boolean;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,11 +1,11 @@
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import styles from './WordGame.module.scss';
|
import styles from './WordGame.module.scss';
|
||||||
import { IWordGameProps, IWordGameState } from './IWordGameProps';
|
import { IWordGameProps, IWordGameState } from './IWordGameProps';
|
||||||
import { escape, round } from '@microsoft/sp-lodash-subset';
|
|
||||||
import { WordService, Game } from './WordService';
|
import { WordService, Game } from './WordService';
|
||||||
import { Ref } from 'react';
|
|
||||||
import { WordGameListItem } from './WordService';
|
|
||||||
import WordHighScores from './WordHighScores';
|
import WordHighScores from './WordHighScores';
|
||||||
|
import { WordGameListItem } from '../../../../lib/webparts/wordGame/components/WordService';
|
||||||
|
|
||||||
|
// tslint:disable-next-line: no-any
|
||||||
const logo: any = require('../assets/ajax-loader.gif');
|
const logo: any = require('../assets/ajax-loader.gif');
|
||||||
require('./anims.css');
|
require('./anims.css');
|
||||||
|
|
||||||
|
@ -17,13 +17,7 @@ export enum GameState {
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class WordGame extends React.Component<IWordGameProps, IWordGameState> {
|
export default class WordGame extends React.Component<IWordGameProps, IWordGameState> {
|
||||||
|
public state: IWordGameState =
|
||||||
wordService: WordService = new WordService();
|
|
||||||
currentGame: Game;
|
|
||||||
timerInterval: number = -1;
|
|
||||||
numTimer: number;
|
|
||||||
|
|
||||||
state: IWordGameState =
|
|
||||||
{
|
{
|
||||||
gamestate: GameState.GameLoading,
|
gamestate: GameState.GameLoading,
|
||||||
currentWord: '',
|
currentWord: '',
|
||||||
|
@ -37,6 +31,12 @@ export default class WordGame extends React.Component<IWordGameProps, IWordGameS
|
||||||
mobileMode: false
|
mobileMode: false
|
||||||
};
|
};
|
||||||
|
|
||||||
|
private messageCounter: number = 0;
|
||||||
|
private wordService: WordService = new WordService();
|
||||||
|
private currentGame: Game;
|
||||||
|
private timerInterval: number = -1;
|
||||||
|
private numTimer: number;
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
|
|
||||||
|
@ -44,183 +44,24 @@ export default class WordGame extends React.Component<IWordGameProps, IWordGameS
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async componentDidMount() {
|
public async componentDidMount(): Promise<void> {
|
||||||
this.wordService.SetContext(this.props.context);
|
this.wordService.SetContext(this.props.context);
|
||||||
await this.wordService.loadWords();
|
await this.wordService.loadWords();
|
||||||
|
|
||||||
if (window.innerWidth<600)
|
if (window.innerWidth < 600) {
|
||||||
this.setState({mobileMode:true})
|
this.setState({ mobileMode: true });
|
||||||
|
}
|
||||||
|
|
||||||
this.setState({
|
this.setState({
|
||||||
gamestate: GameState.Title,
|
gamestate: GameState.Title
|
||||||
} as IWordGameState);
|
} as IWordGameState);
|
||||||
|
|
||||||
this.getHighScores();
|
this.getHighScores();
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
public async redraw() {
|
|
||||||
this.forceUpdate();
|
|
||||||
}
|
|
||||||
|
|
||||||
answerChanged(event) {
|
|
||||||
this.setState({ txtAnswer: event.target.value } as IWordGameState);
|
|
||||||
}
|
|
||||||
|
|
||||||
messageCounter = 0;
|
|
||||||
|
|
||||||
showMessage(message: string) {
|
|
||||||
this.setState({ lblMessage: message } as IWordGameState);
|
|
||||||
this.messageCounter = 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
async btnAnswer() {
|
|
||||||
let answerFound: boolean = false;
|
|
||||||
|
|
||||||
this.currentGame.rounds[this.state.currentRound].answers.forEach(answer => {
|
|
||||||
if (answer.toLowerCase() == this.state.txtAnswer.toLowerCase()) {
|
|
||||||
this.currentGame.rounds[this.state.currentRound].correctAnswer = this.state.txtAnswer;
|
|
||||||
this.numTimer += 5;
|
|
||||||
this.showMessage('Correct!! +5 Seconds');
|
|
||||||
this.setState({
|
|
||||||
lblTimer: this.numTimer + " seconds",
|
|
||||||
score: this.state.score + 1
|
|
||||||
} as IWordGameState);
|
|
||||||
answerFound = true;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
if (!answerFound) {
|
|
||||||
this.showMessage('Incorrect');
|
|
||||||
this.currentGame.rounds[this.state.currentRound].incorrectAnswers.push(this.state.txtAnswer);
|
|
||||||
this.setState({ txtAnswer: '' } as IWordGameState);
|
|
||||||
this.focusOnTextbox();
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
this.nextRound();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
btnSkip() {
|
|
||||||
this.nextRound();
|
|
||||||
this.focusOnTextbox();
|
|
||||||
}
|
|
||||||
|
|
||||||
async nextRound() {
|
|
||||||
|
|
||||||
//state doesn't modify immediately
|
|
||||||
await this.setState({
|
|
||||||
txtAnswer: '',
|
|
||||||
currentRound: this.state.currentRound + 1,
|
|
||||||
} as IWordGameState);
|
|
||||||
|
|
||||||
if (this.state.currentRound >= this.currentGame.rounds.length) {
|
|
||||||
this.finishGame();
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
this.setState({
|
|
||||||
currentWord: this.currentGame.rounds[this.state.currentRound].word,
|
|
||||||
possibleAnswersText: this.getPossibleAnswersText(this.state.currentRound)
|
|
||||||
} as IWordGameState);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
getPossibleAnswersText(currentRound:number):string{
|
|
||||||
let possibleAnswers = this.currentGame.rounds[currentRound].answers.length;
|
|
||||||
let possibleAnswersText = possibleAnswers + ' Possible Answer';
|
|
||||||
if (possibleAnswers>1)
|
|
||||||
possibleAnswersText = possibleAnswers + ' Possible Answers';
|
|
||||||
return possibleAnswersText
|
|
||||||
}
|
|
||||||
|
|
||||||
focusOnTextbox() {
|
|
||||||
let element = document.getElementById('txtWordGameAnswer');
|
|
||||||
if (element)
|
|
||||||
element.focus();
|
|
||||||
}
|
|
||||||
|
|
||||||
finishGame() {
|
|
||||||
this.sendScore(this.state.score, this.numTimer, JSON.stringify(this.currentGame));
|
|
||||||
this.stopTimer();
|
|
||||||
this.setState({ gamestate: GameState.GameFinished } as IWordGameState);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
async sendScore(score: number, seconds: number, details: string) {
|
|
||||||
if (!this.props.enableHighScores)
|
|
||||||
return;
|
|
||||||
await this.wordService.SubmitScore(score, seconds, details);
|
|
||||||
this.getHighScores();
|
|
||||||
}
|
|
||||||
|
|
||||||
async getHighScores(){
|
|
||||||
if (!this.props.enableHighScores)
|
|
||||||
return;
|
|
||||||
|
|
||||||
let scores = await this.wordService.GetHighScores();
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
highScores: scores
|
|
||||||
} as IWordGameState);
|
|
||||||
}
|
|
||||||
|
|
||||||
keyDownAnswer(event: React.KeyboardEvent<HTMLInputElement>) {
|
|
||||||
if (event.keyCode == 13)
|
|
||||||
this.btnAnswer();
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
async btnStartGame() {
|
|
||||||
this.setState({
|
|
||||||
gamestate: GameState.GameLoading
|
|
||||||
} as IWordGameState);
|
|
||||||
|
|
||||||
this.currentGame = this.wordService.GenerateGame();
|
|
||||||
|
|
||||||
|
|
||||||
await new Promise<void>(resolve => { setTimeout(resolve, 1000); });
|
|
||||||
|
|
||||||
this.setState({
|
|
||||||
gamestate: GameState.GamePlaying,
|
|
||||||
currentRound: 0,
|
|
||||||
txtAnswer: '',
|
|
||||||
score: 0,
|
|
||||||
lblMessage: '',
|
|
||||||
currentWord: this.currentGame.rounds[0].word,
|
|
||||||
possibleAnswersText: this.getPossibleAnswersText(0)
|
|
||||||
} as IWordGameState);
|
|
||||||
|
|
||||||
this.numTimer = 30;
|
|
||||||
this.setState({ lblTimer: this.numTimer + " seconds" });
|
|
||||||
this.timerInterval = setInterval(this.timerTick.bind(this), 1000);
|
|
||||||
}
|
|
||||||
|
|
||||||
timerTick() {
|
|
||||||
//for debugging
|
|
||||||
// if (this.numTimer>25)
|
|
||||||
this.numTimer--;
|
|
||||||
this.setState({ lblTimer: this.numTimer + " seconds" });
|
|
||||||
if (this.numTimer == 0) {
|
|
||||||
this.finishGame();
|
|
||||||
}
|
|
||||||
|
|
||||||
//toast messages
|
|
||||||
if (this.messageCounter > 0) {
|
|
||||||
this.messageCounter--;
|
|
||||||
if (this.messageCounter == 0)
|
|
||||||
this.setState({ lblMessage: '' } as IWordGameState);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
stopTimer() {
|
|
||||||
this.setState({ lblTimer: '' });
|
|
||||||
clearInterval(this.timerInterval);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
public render(): React.ReactElement<IWordGameProps> {
|
public render(): React.ReactElement<IWordGameProps> {
|
||||||
window["wordgame"] = this;
|
// tslint:disable-next-line: no-string-literal
|
||||||
|
window['wordgame'] = this;
|
||||||
|
|
||||||
let body: JSX.Element;
|
let body: JSX.Element;
|
||||||
switch (this.state.gamestate) {
|
switch (this.state.gamestate) {
|
||||||
|
@ -231,70 +72,91 @@ export default class WordGame extends React.Component<IWordGameProps, IWordGameS
|
||||||
{/* <h1>Word Game</h1> */}
|
{/* <h1>Word Game</h1> */}
|
||||||
{/* <h4>Count: {this.wordService.GetWordCount()}</h4> */}
|
{/* <h4>Count: {this.wordService.GetWordCount()}</h4> */}
|
||||||
<p>Unscramble as many words as you can before the time runs out</p>
|
<p>Unscramble as many words as you can before the time runs out</p>
|
||||||
<button className="blueButton" onClick={this.btnStartGame.bind(this)}>
|
<button className='blueButton' onClick={this.btnStartGame.bind(this)}>
|
||||||
Start Game
|
Start Game
|
||||||
</button>
|
</button>
|
||||||
{
|
{
|
||||||
this.props.enableHighScores ?
|
this.props.enableHighScores ?
|
||||||
<WordHighScores scores={this.state.highScores}></WordHighScores> : ''
|
<WordHighScores scores={this.state.highScores}></WordHighScores> : ''
|
||||||
}
|
}
|
||||||
</div>
|
</div>;
|
||||||
break;
|
break;
|
||||||
case GameState.GameLoading:
|
case GameState.GameLoading:
|
||||||
body =
|
body =
|
||||||
<div>
|
<div>
|
||||||
<img src={logo} />
|
<img src={logo} alt='Loading...' />
|
||||||
<span style={{ marginLeft: '15px' }}>
|
<span style={{ marginLeft: '15px' }}>
|
||||||
Loading...
|
Loading...
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>;
|
||||||
break;
|
break;
|
||||||
case GameState.GamePlaying:
|
case GameState.GamePlaying:
|
||||||
body =
|
body =
|
||||||
<div>
|
<div>
|
||||||
<div className="currentWord" style={{position:"relative"}}>
|
<div className='currentWord' style={{ position: 'relative' }}>
|
||||||
{this.state.currentWord}
|
{this.state.currentWord}
|
||||||
{/* MOBILE TOAST */}
|
{/* MOBILE TOAST */}
|
||||||
{
|
{
|
||||||
this.state.lblMessage != '' && this.state.mobileMode?
|
this.state.lblMessage !== '' && this.state.mobileMode ?
|
||||||
<div className={this.state.lblMessage == 'Incorrect' ? 'toastMiniRed word-fade-in' : 'toastMiniGreen word-fade-in'}
|
<div className={this.state.lblMessage === 'Incorrect' ?
|
||||||
style={{position:"absolute",left:"0",right:"0",fontSize:"10pt",top:"83px",padding:"0"}}>
|
'toastMiniRed word-fade-in'
|
||||||
|
: 'toastMiniGreen word-fade-in'}
|
||||||
|
style={{
|
||||||
|
position: 'absolute',
|
||||||
|
left: '0',
|
||||||
|
right: '0',
|
||||||
|
fontSize: '10pt',
|
||||||
|
top: '83px',
|
||||||
|
padding: '0'
|
||||||
|
}}>
|
||||||
{
|
{
|
||||||
this.state.lblMessage
|
this.state.lblMessage
|
||||||
}
|
}
|
||||||
</div> : ''
|
</div> : ''
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0"></meta>
|
<meta name='viewport'
|
||||||
<input type="text" autoFocus={true} placeholder="Enter Answer" id="txtWordGameAnswer"
|
content='width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0'></meta>
|
||||||
autoComplete="off" autoCapitalize="off" autoCorrect="off" spellCheck={false}
|
<input
|
||||||
value={this.state.txtAnswer} onChange={this.answerChanged.bind(this)} onKeyDown={this.keyDownAnswer.bind(this)} />
|
type='text'
|
||||||
<div className="numAnswersTip">{this.state.possibleAnswersText}</div>
|
autoFocus={true}
|
||||||
|
placeholder='Enter Answer'
|
||||||
|
id='txtWordGameAnswer'
|
||||||
|
autoComplete='off'
|
||||||
|
autoCapitalize='off'
|
||||||
|
autoCorrect='off'
|
||||||
|
spellCheck={false}
|
||||||
|
value={this.state.txtAnswer}
|
||||||
|
onChange={this.answerChanged.bind(this)}
|
||||||
|
onKeyDown={this.keyDownAnswer.bind(this)} />
|
||||||
|
<div className='numAnswersTip'>{this.state.possibleAnswersText}</div>
|
||||||
<table style={{ marginLeft: 'Auto', marginRight: 'Auto' }}>
|
<table style={{ marginLeft: 'Auto', marginRight: 'Auto' }}>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<button className="blueButton" style={{ marginTop: '20px' }} onClick={this.btnAnswer.bind(this)}>
|
<button className='blueButton' style={{ marginTop: '20px' }} onClick={this.btnAnswer.bind(this)}>
|
||||||
Submit
|
Submit
|
||||||
</button>
|
</button>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<button className="greyButton" onClick={this.btnSkip.bind(this)} style={{ marginTop: '20px' }} >
|
<button className='greyButton' onClick={this.btnSkip.bind(this)} style={{ marginTop: '20px' }} >
|
||||||
Skip
|
Skip
|
||||||
</button>
|
</button>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
<div className="timer">{this.state.lblTimer}</div>
|
<div className='timer'>{this.state.lblTimer}</div>
|
||||||
{/* DESKTOP TOAST */}
|
{/* DESKTOP TOAST */}
|
||||||
{
|
{
|
||||||
this.state.lblMessage != '' && !this.state.mobileMode?
|
this.state.lblMessage !== '' && !this.state.mobileMode ?
|
||||||
<div className="toast word-fade-in" >
|
<div className='toast word-fade-in' >
|
||||||
<div className={this.state.lblMessage == 'Incorrect' ? 'toastRed' : 'toastGreen'}>{this.state.lblMessage}</div>
|
<div
|
||||||
|
className={this.state.lblMessage === 'Incorrect'
|
||||||
|
? 'toastRed' : 'toastGreen'}>{this.state.lblMessage}</div>
|
||||||
</div> : ''
|
</div> : ''
|
||||||
}
|
}
|
||||||
</div>
|
</div>;
|
||||||
break;
|
break;
|
||||||
case GameState.GameFinished:
|
case GameState.GameFinished:
|
||||||
|
|
||||||
|
@ -302,9 +164,9 @@ export default class WordGame extends React.Component<IWordGameProps, IWordGameS
|
||||||
<div>
|
<div>
|
||||||
<h1>Well done! Score {this.state.score} out of 6</h1>
|
<h1>Well done! Score {this.state.score} out of 6</h1>
|
||||||
<p>See answers below to the current round</p>
|
<p>See answers below to the current round</p>
|
||||||
<button className="blueButton" onClick={this.btnStartGame.bind(this)}
|
<button className='blueButton' onClick={this.btnStartGame.bind(this)}
|
||||||
style={{ marginBottom: '20px' }}>Play Again</button>
|
style={{ marginBottom: '20px' }}>Play Again</button>
|
||||||
<div className="gameReview">
|
<div className='gameReview'>
|
||||||
<ul>
|
<ul>
|
||||||
{
|
{
|
||||||
this.currentGame.rounds.map(round => (
|
this.currentGame.rounds.map(round => (
|
||||||
|
@ -314,9 +176,19 @@ export default class WordGame extends React.Component<IWordGameProps, IWordGameS
|
||||||
<ul key={answer + '_wordgame_answer'}>
|
<ul key={answer + '_wordgame_answer'}>
|
||||||
<b>Answer </b> {answer}
|
<b>Answer </b> {answer}
|
||||||
{
|
{
|
||||||
round.correctAnswer == answer ?
|
round.correctAnswer === answer ?
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" style={{ marginLeft: '5px' }} width="15" height="15" viewBox="0 0 24 24" color="#155724">
|
<svg
|
||||||
<path fill="currentcolor" d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" /></svg>
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
|
style={{
|
||||||
|
marginLeft: '5px'
|
||||||
|
}}
|
||||||
|
width='15'
|
||||||
|
height='15'
|
||||||
|
viewBox='0 0 24 24'
|
||||||
|
color='#155724'>
|
||||||
|
<path
|
||||||
|
fill='currentcolor'
|
||||||
|
d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z' /></svg>
|
||||||
: ''
|
: ''
|
||||||
}
|
}
|
||||||
</ul>
|
</ul>
|
||||||
|
@ -331,13 +203,12 @@ export default class WordGame extends React.Component<IWordGameProps, IWordGameS
|
||||||
this.props.enableHighScores ?
|
this.props.enableHighScores ?
|
||||||
<WordHighScores scores={this.state.highScores}></WordHighScores> : ''
|
<WordHighScores scores={this.state.highScores}></WordHighScores> : ''
|
||||||
}
|
}
|
||||||
</div>
|
</div>;
|
||||||
break;
|
break;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
let maindiv = <div className="wordGameCustom" style={{ position: 'relative' }}>{body}</div>;
|
const maindiv: JSX.Element = <div className='wordGameCustom' style={{ position: 'relative' }}>{body}</div>;
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.wordGame} style={{ textAlign: 'center' }} >
|
<div className={styles.wordGame} style={{ textAlign: 'center' }} >
|
||||||
|
@ -346,5 +217,159 @@ export default class WordGame extends React.Component<IWordGameProps, IWordGameS
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// private async redraw(): Promise<void> {
|
||||||
|
// this.forceUpdate();
|
||||||
|
// }
|
||||||
|
|
||||||
|
private answerChanged(event: React.ChangeEvent<HTMLInputElement>): void {
|
||||||
|
this.setState({ txtAnswer: event.target.value } as IWordGameState);
|
||||||
|
}
|
||||||
|
|
||||||
|
private showMessage(message: string): void {
|
||||||
|
this.setState({ lblMessage: message } as IWordGameState);
|
||||||
|
this.messageCounter = 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
private async btnAnswer(): Promise<void> {
|
||||||
|
let answerFound: boolean = false;
|
||||||
|
|
||||||
|
this.currentGame.rounds[this.state.currentRound].answers.forEach(answer => {
|
||||||
|
if (answer.toLowerCase() === this.state.txtAnswer.toLowerCase()) {
|
||||||
|
this.currentGame.rounds[this.state.currentRound].correctAnswer = this.state.txtAnswer;
|
||||||
|
this.numTimer += 5;
|
||||||
|
this.showMessage('Correct!! +5 Seconds');
|
||||||
|
this.setState({
|
||||||
|
lblTimer: this.numTimer + ' seconds',
|
||||||
|
score: this.state.score + 1
|
||||||
|
} as IWordGameState);
|
||||||
|
answerFound = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!answerFound) {
|
||||||
|
this.showMessage('Incorrect');
|
||||||
|
this.currentGame.rounds[this.state.currentRound].incorrectAnswers.push(this.state.txtAnswer);
|
||||||
|
this.setState({ txtAnswer: '' } as IWordGameState);
|
||||||
|
this.focusOnTextbox();
|
||||||
|
} else {
|
||||||
|
this.nextRound();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private btnSkip(): void {
|
||||||
|
this.nextRound();
|
||||||
|
this.focusOnTextbox();
|
||||||
|
}
|
||||||
|
|
||||||
|
private async nextRound(): Promise<void> {
|
||||||
|
// state doesn't modify immediately
|
||||||
|
await this.setState({
|
||||||
|
txtAnswer: '',
|
||||||
|
currentRound: this.state.currentRound + 1
|
||||||
|
} as IWordGameState);
|
||||||
|
|
||||||
|
if (this.state.currentRound >= this.currentGame.rounds.length) {
|
||||||
|
this.finishGame();
|
||||||
|
} else {
|
||||||
|
this.setState({
|
||||||
|
currentWord: this.currentGame.rounds[this.state.currentRound].word,
|
||||||
|
possibleAnswersText: this.getPossibleAnswersText(this.state.currentRound)
|
||||||
|
} as IWordGameState);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private getPossibleAnswersText(currentRound: number): string {
|
||||||
|
const possibleAnswers: number = this.currentGame.rounds[currentRound].answers.length;
|
||||||
|
let possibleAnswersText: string = possibleAnswers + ' Possible Answer';
|
||||||
|
if (possibleAnswers > 1) {
|
||||||
|
possibleAnswersText = possibleAnswers + ' Possible Answers';
|
||||||
|
}
|
||||||
|
return possibleAnswersText;
|
||||||
|
}
|
||||||
|
|
||||||
|
private focusOnTextbox(): void {
|
||||||
|
const element: HTMLElement = document.getElementById('txtWordGameAnswer');
|
||||||
|
if (element) {
|
||||||
|
element.focus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private finishGame(): void {
|
||||||
|
this.sendScore(this.state.score, this.numTimer, JSON.stringify(this.currentGame));
|
||||||
|
this.stopTimer();
|
||||||
|
this.setState({ gamestate: GameState.GameFinished } as IWordGameState);
|
||||||
|
}
|
||||||
|
|
||||||
|
private async sendScore(score: number, seconds: number, details: string): Promise<void> {
|
||||||
|
if (!this.props.enableHighScores) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
await this.wordService.SubmitScore(score, seconds, details);
|
||||||
|
this.getHighScores();
|
||||||
|
}
|
||||||
|
|
||||||
|
private async getHighScores(): Promise<void> {
|
||||||
|
if (!this.props.enableHighScores) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const scores: WordGameListItem[] = await this.wordService.GetHighScores();
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
highScores: scores
|
||||||
|
} as IWordGameState);
|
||||||
|
}
|
||||||
|
|
||||||
|
private keyDownAnswer(event: React.KeyboardEvent<HTMLInputElement>): void {
|
||||||
|
if (event.keyCode === 13) {
|
||||||
|
this.btnAnswer();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private async btnStartGame(): Promise<void> {
|
||||||
|
this.setState({
|
||||||
|
gamestate: GameState.GameLoading
|
||||||
|
} as IWordGameState);
|
||||||
|
|
||||||
|
this.currentGame = this.wordService.GenerateGame();
|
||||||
|
|
||||||
|
await new Promise<void>(resolve => { setTimeout(resolve, 1000); });
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
gamestate: GameState.GamePlaying,
|
||||||
|
currentRound: 0,
|
||||||
|
txtAnswer: '',
|
||||||
|
score: 0,
|
||||||
|
lblMessage: '',
|
||||||
|
currentWord: this.currentGame.rounds[0].word,
|
||||||
|
possibleAnswersText: this.getPossibleAnswersText(0)
|
||||||
|
} as IWordGameState);
|
||||||
|
|
||||||
|
this.numTimer = 30;
|
||||||
|
this.setState({ lblTimer: this.numTimer + ' seconds' });
|
||||||
|
this.timerInterval = setInterval(this.timerTick.bind(this), 1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
private timerTick(): void {
|
||||||
|
// for debugging
|
||||||
|
// if (this.numTimer>25)
|
||||||
|
this.numTimer--;
|
||||||
|
this.setState({ lblTimer: this.numTimer + ' seconds' });
|
||||||
|
if (this.numTimer === 0) {
|
||||||
|
this.finishGame();
|
||||||
|
}
|
||||||
|
|
||||||
|
// toast messages
|
||||||
|
if (this.messageCounter > 0) {
|
||||||
|
this.messageCounter--;
|
||||||
|
if (this.messageCounter === 0) {
|
||||||
|
this.setState({ lblMessage: '' } as IWordGameState);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private stopTimer(): void {
|
||||||
|
this.setState({ lblTimer: '' });
|
||||||
|
clearInterval(this.timerInterval);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
import * as React from "react";
|
import * as React from 'react';
|
||||||
import { WordGameListItem } from "./WordService"
|
import { WordGameListItem } from './WordService';
|
||||||
|
|
||||||
export interface IWordHighScoresProps {
|
export interface IWordHighScoresProps {
|
||||||
scores: WordGameListItem[]
|
scores: WordGameListItem[];
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class WordHighScores extends React.Component<IWordHighScoresProps, {}> {
|
export default class WordHighScores extends React.Component<IWordHighScoresProps, {}> {
|
||||||
|
@ -13,13 +13,12 @@ export default class WordHighScores extends React.Component<IWordHighScoresProps
|
||||||
}
|
}
|
||||||
|
|
||||||
public render(): React.ReactElement<IWordHighScoresProps> {
|
public render(): React.ReactElement<IWordHighScoresProps> {
|
||||||
let rank = 1;
|
let rank: number = 1;
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
{
|
{
|
||||||
this.props.scores.length > 0 ?
|
this.props.scores.length > 0 ?
|
||||||
<h3 style={{ textDecoration: 'underline' }}>High Scores</h3> : ''
|
<h3 style={{ textDecoration: 'underline' }}>High Scores</h3> : ''
|
||||||
|
|
||||||
}
|
}
|
||||||
<table style={{ marginLeft: 'Auto', marginRight: 'Auto' }}>
|
<table style={{ marginLeft: 'Auto', marginRight: 'Auto' }}>
|
||||||
<tbody>
|
<tbody>
|
||||||
|
@ -38,5 +37,4 @@ export default class WordHighScores extends React.Component<IWordHighScoresProps
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
|
@ -1,53 +1,86 @@
|
||||||
// import * as $ from '../assets/jquery.min';
|
// import * as $ from '../assets/jquery.min';
|
||||||
import { SPComponentLoader } from '@microsoft/sp-loader';
|
|
||||||
import WordGame from './WordGame';
|
|
||||||
import { WebPartContext } from '@microsoft/sp-webpart-base';
|
import { WebPartContext } from '@microsoft/sp-webpart-base';
|
||||||
import {
|
import {
|
||||||
SPHttpClient,
|
SPHttpClient,
|
||||||
SPHttpClientResponse,
|
SPHttpClientResponse,
|
||||||
HttpClientConfiguration,
|
|
||||||
ISPHttpClientOptions
|
ISPHttpClientOptions
|
||||||
} from '@microsoft/sp-http';
|
} from '@microsoft/sp-http';
|
||||||
|
|
||||||
|
// tslint:disable-next-line: no-any
|
||||||
const wordjpg: any = require('../assets/wordlist.jpg');
|
const wordjpg: any = require('../assets/wordlist.jpg');
|
||||||
|
|
||||||
|
// tslint:disable-next-line: no-any
|
||||||
const $: any = require('../assets/jquery.min');
|
const $: any = require('../assets/jquery.min');
|
||||||
// const wordlist: any = require('../assets/wordlist.json');
|
|
||||||
|
|
||||||
export class Game
|
export class Game {
|
||||||
{
|
public rounds: Round[] = [];
|
||||||
rounds:Round[] = [];
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export class Round
|
export class Round {
|
||||||
{
|
public word: string = '';
|
||||||
word = "";
|
public answers: string[] = [];
|
||||||
answers:string[] = [];
|
public correctAnswer: string = '';
|
||||||
correctAnswer = "";
|
public incorrectAnswers: string[] = [];
|
||||||
incorrectAnswers:string[] = [];
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export class WordGameListItem {
|
||||||
|
// tslint:disable-next-line: variable-name
|
||||||
|
public Name: string;
|
||||||
|
|
||||||
|
// tslint:disable-next-line: variable-name
|
||||||
|
public Score: number;
|
||||||
|
|
||||||
|
// tslint:disable-next-line: variable-name
|
||||||
|
public Seconds: number;
|
||||||
|
|
||||||
|
// tslint:disable-next-line: variable-name
|
||||||
|
public Details: string;
|
||||||
|
|
||||||
|
constructor(name: string, score: number, seconds: number, details: string) {
|
||||||
|
this.Name = name;
|
||||||
|
this.Score = score;
|
||||||
|
this.Seconds = seconds;
|
||||||
|
this.Details = details;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export class WordService {
|
export class WordService {
|
||||||
|
public allwords: string[] = [];
|
||||||
|
public words3: string[] = [];
|
||||||
|
public words4: string[] = [];
|
||||||
|
public words5: string[] = [];
|
||||||
|
public words6: string[] = [];
|
||||||
|
public words7: string[] = [];
|
||||||
|
public words8: string[] = [];
|
||||||
|
public context: WebPartContext;
|
||||||
|
|
||||||
allwords: string[] = [];
|
public GenerateGame(): Game {
|
||||||
words3: string[] = [];
|
|
||||||
words4: string[] = [];
|
|
||||||
words5: string[] = [];
|
|
||||||
words6: string[] = [];
|
|
||||||
words7: string[] = [];
|
|
||||||
words8: string[] = [];
|
|
||||||
context:WebPartContext;
|
|
||||||
|
|
||||||
GenerateGame():Game
|
const game: Game = new Game();
|
||||||
{
|
|
||||||
|
|
||||||
let game = new Game();
|
const round1: Round = new Round();
|
||||||
|
round1.word = this.GetRandomScrambledWord(5);
|
||||||
|
round1.answers = this.FindPossibleWords(round1.word);
|
||||||
|
|
||||||
let round1 = new Round(); round1.word = this.GetRandomScrambledWord(5); round1.answers = this.FindPossibleWords(round1.word);
|
const round2: Round = new Round();
|
||||||
let round2 = new Round(); round2.word = this.GetRandomScrambledWord(5); round2.answers = this.FindPossibleWords(round2.word);
|
round2.word = this.GetRandomScrambledWord(5);
|
||||||
let round3 = new Round(); round3.word = this.GetRandomScrambledWord(5); round3.answers = this.FindPossibleWords(round3.word);
|
round2.answers = this.FindPossibleWords(round2.word);
|
||||||
let round4 = new Round(); round4.word = this.GetRandomScrambledWord(6); round4.answers = this.FindPossibleWords(round4.word);
|
|
||||||
let round5 = new Round(); round5.word = this.GetRandomScrambledWord(6); round5.answers = this.FindPossibleWords(round5.word);
|
const round3: Round = new Round();
|
||||||
let round6 = new Round(); round6.word = this.GetRandomScrambledWord(6); round6.answers = this.FindPossibleWords(round6.word);
|
round3.word = this.GetRandomScrambledWord(5);
|
||||||
|
round3.answers = this.FindPossibleWords(round3.word);
|
||||||
|
|
||||||
|
const round4: Round = new Round();
|
||||||
|
round4.word = this.GetRandomScrambledWord(6);
|
||||||
|
round4.answers = this.FindPossibleWords(round4.word);
|
||||||
|
|
||||||
|
const round5: Round = new Round();
|
||||||
|
round5.word = this.GetRandomScrambledWord(6);
|
||||||
|
round5.answers = this.FindPossibleWords(round5.word);
|
||||||
|
|
||||||
|
const round6: Round = new Round();
|
||||||
|
round6.word = this.GetRandomScrambledWord(6);
|
||||||
|
round6.answers = this.FindPossibleWords(round6.word);
|
||||||
|
|
||||||
game.rounds.push(round1);
|
game.rounds.push(round1);
|
||||||
game.rounds.push(round2);
|
game.rounds.push(round2);
|
||||||
|
@ -59,17 +92,16 @@ export class WordService {
|
||||||
return game;
|
return game;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public async loadWords(): Promise<void> {
|
||||||
|
|
||||||
async loadWords() {
|
// tslint:disable-next-line: no-string-literal
|
||||||
|
window['wordService'] = this;
|
||||||
window["wordService"] = this;
|
|
||||||
|
|
||||||
/* SP Loader Implementation */
|
/* SP Loader Implementation */
|
||||||
// console.log(jquery);
|
// console.log(jquery);
|
||||||
// await SPComponentLoader.loadScript('../assets/jquery.min.js', { globalExportsName: "ScriptGlobal" });
|
// await SPComponentLoader.loadScript('../assets/jquery.min.js', { globalExportsName: "ScriptGlobal" });
|
||||||
// console.log('jquery loaded');
|
// console.log('jquery loaded');
|
||||||
|
|
||||||
|
|
||||||
/* JSON File Implementation
|
/* JSON File Implementation
|
||||||
If you have a custom word list you would like to use
|
If you have a custom word list you would like to use
|
||||||
add it as a JSON file in assets/wordlist.json and
|
add it as a JSON file in assets/wordlist.json and
|
||||||
|
@ -80,24 +112,25 @@ export class WordService {
|
||||||
// for(let i=0;i<wordlistlength;i++)
|
// for(let i=0;i<wordlistlength;i++)
|
||||||
// this.allwords.push(wordvalues[i]);
|
// this.allwords.push(wordvalues[i]);
|
||||||
|
|
||||||
|
|
||||||
/* Text File Implementation
|
/* Text File Implementation
|
||||||
Yields the smallest file download size vs JSON (700k vs 1.3mb)
|
Yields the smallest file download size vs JSON (700k vs 1.3mb)
|
||||||
The word list is a text file stored as wordlist.jpg and
|
The word list is a text file stored as wordlist.jpg and
|
||||||
loaded as text/plain using an overrided mime type */
|
loaded as text/plain using an overrided mime type */
|
||||||
var responseText = await $.ajax({
|
const responseText: string = await $.ajax({
|
||||||
url: wordjpg,
|
url: wordjpg,
|
||||||
beforeSend: function (xhr) {
|
beforeSend: (xhr) => {
|
||||||
xhr.overrideMimeType("text/plain; charset=x-user-defined");
|
xhr.overrideMimeType('text/plain; charset=x-user-defined');
|
||||||
}
|
}
|
||||||
}) as string;
|
}) as string;
|
||||||
this.allwords = responseText.split("\r\n");
|
this.allwords = responseText.split('\r\n');
|
||||||
|
|
||||||
this.allwords.forEach(word => {
|
this.allwords.forEach(word => {
|
||||||
if (word.indexOf("-") > -1)
|
if (word.indexOf('-') > -1) {
|
||||||
return;
|
return;
|
||||||
if (word.indexOf("-") > -1)
|
}
|
||||||
|
if (word.indexOf('-') > -1) {
|
||||||
return;
|
return;
|
||||||
|
}
|
||||||
switch (word.length) {
|
switch (word.length) {
|
||||||
case 3:
|
case 3:
|
||||||
this.words3.push(word);
|
this.words3.push(word);
|
||||||
|
@ -126,13 +159,13 @@ export class WordService {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
GetWordCount(): number {
|
public GetWordCount(): number {
|
||||||
return this.allwords.length;
|
return this.allwords.length;
|
||||||
}
|
}
|
||||||
|
|
||||||
GetRandomScrambledWord(level: number) {
|
public GetRandomScrambledWord(level: number): string {
|
||||||
let randomWord = "";
|
let randomWord: string = '';
|
||||||
let randwordnum = 0;
|
let randwordnum: number = 0;
|
||||||
switch (level) {
|
switch (level) {
|
||||||
case 3:
|
case 3:
|
||||||
randwordnum = Math.floor(Math.random() * Math.floor(this.words3.length));
|
randwordnum = Math.floor(Math.random() * Math.floor(this.words3.length));
|
||||||
|
@ -162,106 +195,119 @@ export class WordService {
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
let scrambledWord = this.ScrambleWord(randomWord);
|
const scrambledWord: string = this.ScrambleWord(randomWord);
|
||||||
return scrambledWord;
|
return scrambledWord;
|
||||||
}
|
}
|
||||||
|
|
||||||
FindPossibleWords(currentWord: string) {
|
public FindPossibleWords(currentWord: string): string[] {
|
||||||
// coati
|
// coati
|
||||||
// taco
|
// taco
|
||||||
|
|
||||||
// currentWord = "coati";
|
// currentWord = "coati";
|
||||||
let possibleWords: string[] = [];
|
const possibleWords: string[] = [];
|
||||||
this.allwords.forEach(word => {
|
this.allwords.forEach(word => {
|
||||||
let tempword = word;//taco
|
let tempword: string = word; // taco
|
||||||
for (let i = 0; i < currentWord.length; i++) {
|
for (let i: number = 0; i < currentWord.length; i++) {
|
||||||
|
|
||||||
let letter = currentWord[i];
|
const letter: string = currentWord[i];
|
||||||
if (tempword.indexOf(letter) > -1) {
|
if (tempword.indexOf(letter) > -1) {
|
||||||
tempword = tempword.slice(0, tempword.indexOf(letter)) + tempword.slice(tempword.indexOf(letter) + 1);
|
tempword = tempword.slice(0, tempword.indexOf(letter)) + tempword.slice(tempword.indexOf(letter) + 1);
|
||||||
}
|
} else {
|
||||||
else {
|
|
||||||
tempword = 'n';
|
tempword = 'n';
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (tempword.length == 0)
|
if (tempword.length === 0) {
|
||||||
possibleWords.push(word)
|
possibleWords.push(word);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
return possibleWords;
|
return possibleWords;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
//replace a character in a string
|
public ScrambleWord(word: string): string {
|
||||||
private replaceCharAt(orig:string, index:number, replacement:string): string {
|
let notScrambled: boolean = true;
|
||||||
return orig.substr(0, index) + replacement + orig.substr(index + replacement.length);
|
let scrambledWord: string = '';
|
||||||
}
|
let count: number = 0;
|
||||||
|
const originalword: string = word;
|
||||||
ScrambleWord(word: string): string {
|
|
||||||
let notScrambled = true;
|
|
||||||
let scrambledWord = "";
|
|
||||||
let count = 0;
|
|
||||||
var originalword = word;
|
|
||||||
while (notScrambled) {
|
while (notScrambled) {
|
||||||
word = originalword;
|
word = originalword;
|
||||||
let chars = '';
|
let chars: string = '';
|
||||||
for (let i = 0; i < word.length; i++)
|
for (let i: number = 0; i < word.length; i++) {
|
||||||
chars += ' ';
|
chars += ' ';
|
||||||
|
}
|
||||||
|
|
||||||
let index = 0;
|
let index: number = 0;
|
||||||
while (word.length > 0) {
|
while (word.length > 0) {
|
||||||
let next = Math.floor(Math.random() * Math.floor(word.length)); // Get a random number between 0 and the length of the word.
|
// Get a random number between 0 and the length of the word.
|
||||||
chars = this.replaceCharAt(chars, index, word[next]); // Take the character from the random position and add to our char array.
|
const next: number = Math.floor(Math.random() * Math.floor(word.length));
|
||||||
word = word.substr(0, next) + word.substr(next + 1); // Remove the character from the word.
|
|
||||||
|
// Take the character from the random position and add to our char array.
|
||||||
|
chars = this.replaceCharAt(chars, index, word[next]);
|
||||||
|
|
||||||
|
// Remove the character from the word.
|
||||||
|
word = word.substr(0, next) + word.substr(next + 1);
|
||||||
++index;
|
++index;
|
||||||
}
|
}
|
||||||
scrambledWord = chars.slice(0);
|
scrambledWord = chars.slice(0);
|
||||||
count++;
|
count++;
|
||||||
|
|
||||||
if (originalword!=scrambledWord)
|
if (originalword !== scrambledWord) {
|
||||||
notScrambled = false;
|
|
||||||
|
|
||||||
//just in case there is a problem
|
|
||||||
if (count == 10)
|
|
||||||
notScrambled = false;
|
notScrambled = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
return scrambledWord;
|
// just in case there is a problem
|
||||||
|
if (count === 10) {
|
||||||
|
notScrambled = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return scrambledWord;
|
||||||
}
|
}
|
||||||
|
|
||||||
// SHAREPOINT APIS
|
// SHAREPOINT APIS
|
||||||
|
|
||||||
SetContext(context:WebPartContext){
|
public SetContext(context: WebPartContext): void {
|
||||||
this.context = context;
|
this.context = context;
|
||||||
}
|
}
|
||||||
|
|
||||||
public async SubmitScore(score:number,seconds:number,details:string){
|
public async SubmitScore(score: number, seconds: number, details: string): Promise<void> {
|
||||||
try {
|
try {
|
||||||
await this.CreateListIfNotExists();
|
await this.CreateListIfNotExists();
|
||||||
await this.CreateListItem(score, seconds, details);
|
await this.CreateListItem(score, seconds, details);
|
||||||
}catch(error){}
|
} catch (error) {
|
||||||
|
// do nothing
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async GetHighScores():Promise<WordGameListItem[]>{
|
public async GetHighScores(): Promise<WordGameListItem[]> {
|
||||||
|
|
||||||
var scores:WordGameListItem[] = [];
|
let scores: WordGameListItem[] = [];
|
||||||
try {
|
try {
|
||||||
let result = await this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + "/_api/web/lists/GetByTitle('WordGameList')/items", SPHttpClient.configurations.v1);
|
const result: SPHttpClientResponse = await this.context.spHttpClient.get(
|
||||||
let json:any = await result.json();
|
this.context.pageContext.web.absoluteUrl
|
||||||
|
+ "/_api/web/lists/GetByTitle('WordGameList')/items",
|
||||||
|
SPHttpClient.configurations.v1);
|
||||||
|
// tslint:disable-next-line: no-any
|
||||||
|
const json: any = await result.json();
|
||||||
console.log(json);
|
console.log(json);
|
||||||
|
|
||||||
|
|
||||||
json.value.forEach(item => {
|
json.value.forEach(item => {
|
||||||
scores.push(new WordGameListItem(item.Title,item.Score,item.Seconds,item.Details));
|
scores.push(new WordGameListItem(item.Title,
|
||||||
|
item.Score,
|
||||||
|
item.Seconds,
|
||||||
|
item.Details));
|
||||||
});
|
});
|
||||||
|
|
||||||
scores.sort((a,b)=> {return b.Score-a.Score});
|
scores.sort((a, b) => {
|
||||||
|
return b.Score - a.Score;
|
||||||
|
});
|
||||||
|
|
||||||
// top 10
|
// top 10
|
||||||
if (scores.length>10)
|
if (scores.length > 10) {
|
||||||
scores = scores.slice(0, 10);
|
scores = scores.slice(0, 10);
|
||||||
|
}
|
||||||
|
|
||||||
console.log('high scores', scores);
|
console.log('high scores', scores);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
|
@ -272,18 +318,28 @@ export class WordService {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async CreateListIfNotExists(){
|
// replace a character in a string
|
||||||
let result = await this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + '/_api/web/lists', SPHttpClient.configurations.v1);
|
private replaceCharAt(orig: string, index: number, replacement: string): string {
|
||||||
let json:any = await result.json();
|
return orig.substr(0, index) + replacement + orig.substr(index + replacement.length);
|
||||||
let exists = false;
|
}
|
||||||
|
|
||||||
|
private async CreateListIfNotExists(): Promise<void> {
|
||||||
|
const result: SPHttpClientResponse = await this.context.spHttpClient.get(
|
||||||
|
this.context.pageContext.web.absoluteUrl
|
||||||
|
+ '/_api/web/lists',
|
||||||
|
SPHttpClient.configurations.v1);
|
||||||
|
|
||||||
|
// tslint:disable-next-line: no-any
|
||||||
|
const json: any = await result.json();
|
||||||
|
let exists: boolean = false;
|
||||||
json.value.forEach(list => {
|
json.value.forEach(list => {
|
||||||
if (list.Title=='WordGameList'){
|
if (list.Title === 'WordGameList') {
|
||||||
console.log('list found');
|
console.log('list found');
|
||||||
exists = true;
|
exists = true;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
console.log(json);
|
console.log(json);
|
||||||
if (exists==false){
|
if (exists === false) {
|
||||||
console.log('Attempting to create list');
|
console.log('Attempting to create list');
|
||||||
await this.CreateList();
|
await this.CreateList();
|
||||||
await this.AddListColumnNumber('Score');
|
await this.AddListColumnNumber('Score');
|
||||||
|
@ -292,83 +348,90 @@ export class WordService {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async CreateListItem(score:number,seconds:number,details:string){
|
private async CreateListItem(score: number, seconds: number, details: string): Promise<void> {
|
||||||
var listMetadata = {
|
const listMetadata: {} = {
|
||||||
"__metadata": {
|
'__metadata': {
|
||||||
"type": "SP.Data.WordGameListListItem"
|
'type': 'SP.Data.WordGameListListItem'
|
||||||
},
|
},
|
||||||
"Title": this.context.pageContext.user.displayName,
|
'Title': this.context.pageContext.user.displayName,
|
||||||
"Score": score,
|
'Score': score,
|
||||||
"Seconds": seconds,
|
'Seconds': seconds,
|
||||||
"Details": details
|
'Details': details
|
||||||
};
|
};
|
||||||
|
|
||||||
var options: ISPHttpClientOptions = {
|
const options: ISPHttpClientOptions = {
|
||||||
headers: {
|
headers: {
|
||||||
"Accept": "application/json;odata=verbose",
|
'Accept': 'application/json;odata=verbose',
|
||||||
"Content-Type": "application/json;odata=verbose",
|
'Content-Type': 'application/json;odata=verbose',
|
||||||
"OData-Version": "" //Really important to specify
|
'OData-Version': '' // Really important to specify
|
||||||
},
|
},
|
||||||
body: JSON.stringify(listMetadata)
|
body: JSON.stringify(listMetadata)
|
||||||
};
|
};
|
||||||
|
|
||||||
let result = await this.context.spHttpClient.post(
|
const result: SPHttpClientResponse = await this.context.spHttpClient.post(
|
||||||
this.context.pageContext.web.absoluteUrl + "/_api/web/lists/GetByTitle('WordGameList')/items", SPHttpClient.configurations.v1,options);
|
this.context.pageContext.web.absoluteUrl
|
||||||
let json:any = await result.json();
|
+ "/_api/web/lists/GetByTitle('WordGameList')/items",
|
||||||
|
SPHttpClient.configurations.v1, options);
|
||||||
|
// tslint:disable-next-line: no-any
|
||||||
|
const json: any = await result.json();
|
||||||
console.log(json);
|
console.log(json);
|
||||||
}
|
}
|
||||||
|
|
||||||
async CreateList(){
|
private async CreateList(): Promise<void> {
|
||||||
var listMetadata = {
|
const listMetadata: {} = {
|
||||||
"__metadata": {
|
'__metadata': {
|
||||||
"type": "SP.List"
|
'type': 'SP.List'
|
||||||
},
|
},
|
||||||
"AllowContentTypes": true,
|
'AllowContentTypes': true,
|
||||||
"BaseTemplate": 100,
|
'BaseTemplate': 100,
|
||||||
"ContentTypesEnabled": true,
|
'ContentTypesEnabled': true,
|
||||||
"Description": "Holds high scores for the word game",
|
'Description': 'Holds high scores for the word game',
|
||||||
"Title": "WordGameList"
|
'Title': 'WordGameList'
|
||||||
};
|
};
|
||||||
|
|
||||||
var options: ISPHttpClientOptions = {
|
const options: ISPHttpClientOptions = {
|
||||||
headers: {
|
headers: {
|
||||||
"Accept": "application/json;odata=verbose",
|
'Accept': 'application/json;odata=verbose',
|
||||||
"Content-Type": "application/json;odata=verbose",
|
'Content-Type': 'application/json;odata=verbose',
|
||||||
"OData-Version": "" //Really important to specify
|
'OData-Version': '' // Really important to specify
|
||||||
},
|
},
|
||||||
body: JSON.stringify(listMetadata)
|
body: JSON.stringify(listMetadata)
|
||||||
};
|
};
|
||||||
|
|
||||||
let result = await this.context.spHttpClient.post(
|
const result: SPHttpClientResponse = await this.context.spHttpClient.post(
|
||||||
this.context.pageContext.web.absoluteUrl + '/_api/web/lists', SPHttpClient.configurations.v1, options);
|
this.context.pageContext.web.absoluteUrl + '/_api/web/lists', SPHttpClient.configurations.v1, options);
|
||||||
let json:any = await result.json();
|
// tslint:disable-next-line: no-any
|
||||||
|
const json: any = await result.json();
|
||||||
console.log(json);
|
console.log(json);
|
||||||
}
|
}
|
||||||
|
|
||||||
async AddListColumnMultiLineText(name:string){
|
private async AddListColumnMultiLineText(name: string): Promise<void> {
|
||||||
var listMetadata = {
|
const listMetadata: {} = {
|
||||||
'__metadata': { 'type': 'SP.FieldNumber' },
|
'__metadata': { 'type': 'SP.FieldNumber' },
|
||||||
'FieldTypeKind': 3,
|
'FieldTypeKind': 3,
|
||||||
'Title': name,
|
'Title': name
|
||||||
};
|
};
|
||||||
|
|
||||||
var options: ISPHttpClientOptions = {
|
const options: ISPHttpClientOptions = {
|
||||||
headers: {
|
headers: {
|
||||||
"Accept": "application/json;odata=verbose",
|
'Accept': 'application/json;odata=verbose',
|
||||||
"Content-Type": "application/json;odata=verbose",
|
'Content-Type': 'application/json;odata=verbose',
|
||||||
"OData-Version": "" //Really important to specify
|
'OData-Version': '' // Really important to specify
|
||||||
},
|
},
|
||||||
body: JSON.stringify(listMetadata)
|
body: JSON.stringify(listMetadata)
|
||||||
};
|
};
|
||||||
|
|
||||||
let result = await this.context.spHttpClient.post(
|
const result: SPHttpClientResponse = await this.context.spHttpClient.post(
|
||||||
this.context.pageContext.web.absoluteUrl + "/_api/web/lists/getbytitle('WordGameList')/fields", SPHttpClient.configurations.v1,options);
|
this.context.pageContext.web.absoluteUrl
|
||||||
let json:any = await result.json();
|
+ "/_api/web/lists/getbytitle('WordGameList')/fields",
|
||||||
|
SPHttpClient.configurations.v1, options);
|
||||||
|
// tslint:disable-next-line: no-any
|
||||||
|
const json: any = await result.json();
|
||||||
console.log(json);
|
console.log(json);
|
||||||
}
|
}
|
||||||
|
|
||||||
async AddListColumnNumber(name:string){
|
private async AddListColumnNumber(name: string): Promise<void> {
|
||||||
var listMetadata = {
|
const listMetadata: {} = {
|
||||||
'__metadata': { 'type': 'SP.FieldNumber' },
|
'__metadata': { 'type': 'SP.FieldNumber' },
|
||||||
'FieldTypeKind': 9,
|
'FieldTypeKind': 9,
|
||||||
'Title': name,
|
'Title': name,
|
||||||
|
@ -376,33 +439,20 @@ export class WordService {
|
||||||
'MaximumValue': 1000000
|
'MaximumValue': 1000000
|
||||||
};
|
};
|
||||||
|
|
||||||
var options: ISPHttpClientOptions = {
|
const options: ISPHttpClientOptions = {
|
||||||
headers: {
|
headers: {
|
||||||
"Accept": "application/json;odata=verbose",
|
'Accept': 'application/json;odata=verbose',
|
||||||
"Content-Type": "application/json;odata=verbose",
|
'Content-Type': 'application/json;odata=verbose',
|
||||||
"OData-Version": "" //Really important to specify
|
'OData-Version': '' // Really important to specify
|
||||||
},
|
},
|
||||||
body: JSON.stringify(listMetadata)
|
body: JSON.stringify(listMetadata)
|
||||||
};
|
};
|
||||||
|
|
||||||
let result = await this.context.spHttpClient.post(
|
const result: SPHttpClientResponse = await this.context.spHttpClient.post(
|
||||||
this.context.pageContext.web.absoluteUrl + "/_api/web/lists/getbytitle('WordGameList')/fields", SPHttpClient.configurations.v1,options);
|
this.context.pageContext.web.absoluteUrl + "/_api/web/lists/getbytitle('WordGameList')/fields",
|
||||||
let json:any = await result.json();
|
SPHttpClient.configurations.v1, options);
|
||||||
|
// tslint:disable-next-line: no-any
|
||||||
|
const json: any = await result.json();
|
||||||
console.log(json);
|
console.log(json);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
export class WordGameListItem{
|
|
||||||
Name:string;
|
|
||||||
Score:number;
|
|
||||||
Seconds:number;
|
|
||||||
Details:string;
|
|
||||||
constructor(name:string,score:number,seconds:number,details:string){
|
|
||||||
this.Name = name;
|
|
||||||
this.Score = score;
|
|
||||||
this.Seconds = seconds;
|
|
||||||
this.Details = details;
|
|
||||||
}
|
|
||||||
}
|
}
|
Loading…
Reference in New Issue