Wednesday, November 6, 2013

Game implemented as an app for SharePoint in SharePoint 2013

http://code.msdn.microsoft.com/office/SharePoint-2013-Game-4048c85b
vs2012->file->new->project c# ->office/SharePoint->apps->apps for SharePoint 2013-> "SP_SharePointGame_js"
Click on 'Ok' Button
 Click on 'Validate' button. after 'Sign-in' click on 'Finish' button.
SP_SharePointGame_js -> Content -> App.css
add below css
.blank {
    cursor:pointer;
    background-image:url(../images/blank.png);
    width:96px;
    height:96px;
    margin:2px;
    float:left;
}
.nought {
    cursor:default;
    background-image:url(../images/nought.png);
    width:96px;
    height:96px;
    margin:2px;
    float:left;
}
.cross {
    cursor:default;
    background-image:url(../images/cross.png);
    width:96px;
    height:96px;
    margin:2px;
    float:left;

}

SP_SharePointGame_js -> Images -> add -> existing item -> add 'blank.png, cross.png, nought.png' images

SP_SharePointGame_js -> Right click -> Add -> New Item -> List -> 'Score'
 Click on 'Add' Button
Click on 'Finish' Button

SP_SharePointGame_js -> double click on 'Score' List (if any popup window open click on 'Yes')

SP_SharePointGame_js -> Pages -> Default.aspx 
add this script to 'PlaceHolderMain' of the Default.aspx page.
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
    <div>
        <p id="message">
            initializing...
        </p>
    </div>
    <h1>SharePoint vs. You!</h1>
    <div id="currentScores" style="float: none;"></div>
    <div id="gameArea" style="width: 300px; height: 300px; float: none;">
        <div id="square1" onclick="square_click(1);" class="blank" style=""></div>
        <div id="square2" onclick="square_click(2);" class="blank"></div>
        <div id="square3" onclick="square_click(3);" class="blank"></div>
        <div id="square4" onclick="square_click(4);" class="blank"></div>
        <div id="square5" onclick="square_click(5);" class="blank"></div>
        <div id="square6" onclick="square_click(6);" class="blank"></div>
        <div id="square7" onclick="square_click(7);" class="blank"></div>
        <div id="square8" onclick="square_click(8);" class="blank"></div>
        <div id="square9" onclick="square_click(9);" class="blank"></div>
    </div>
    <input type="button" id="resetGame" onclick="resetNow();" runat="server" value="Restart Game" />

</asp:Content>

SP_SharePointGame_js -> Scripts -> App.js
add below script to App.js file
'use strict';

var context;
var web;
var list;
var listItems;
var listItem;
var user;
var existingPlayer = false;
var playerListId;
var currentWins = 0;
var currentLosses = 0;
var context = SP.ClientContext.get_current();
var user = context.get_web().get_currentUser();

$(document).ready(function () {
    getUserName();
    start();
});

function getUserName() {
    context.load(user);
    context.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail);
}

function onGetUserNameSuccess() {
    $('#message').text('Hello ' + user.get_title());
}

function onGetUserNameFail(sender, args) {
    alert('Failed to get user name. Error:' + args.get_message());
}

function start() {
    context = SP.ClientContext.get_current();
    web = context.get_web();
    list = web.get_lists().getByTitle('Score');
    user = web.get_currentUser();
    context.load(user);

    context.executeQueryAsync(function () {
        var camlQuery = new SP.CamlQuery();
        camlQuery.set_viewXml("<View><Where><Eq><FieldRef Name='Title' /><Value Type='Text'>"
            + user.get_title()
            + "</Value></Eq></Where></View>");
        listItems = list.getItems(camlQuery);
        context.load(listItems, 'Include(Title, Wins, Losses)');
        context.executeQueryAsync(
            function () {
                showScore();
            },
            function (sender, args) {
                var dataArea = document.getElementById("currentScores");
                while (dataArea.hasChildNodes()) {
                    dataArea.removeChild(dataArea.lastChild);
                }
                dataArea.appendChild(document.createTextNode("Failed to get score data. Error: "
                    + args.get_message()));
            });
    },
    function () {
        var dataArea = document.getElementById("currentScores");
        while (dataArea.hasChildNodes()) {
            dataArea.removeChild(dataArea.lastChild);
        }
        dataArea.appendChild(document.createTextNode("Failed to get user name. Error: "
            + args.get_message()));
    });
}

function showScore() {
    var tableArea = document.getElementById("currentScores");
    while (tableArea.hasChildNodes()) {
        tableArea.removeChild(tableArea.lastChild);
    }
    var listItemEnumerator = listItems.getEnumerator();
    while (listItemEnumerator.moveNext()) {
        var listItem = listItemEnumerator.get_current();
        var playerName = listItem.get_fieldValues()["Title"];
        var playerWins = listItem.get_fieldValues()["Wins"];
        var playerLosses = listItem.get_fieldValues()["Losses"];
        if ((isNaN(playerWins)) || (IsNullOrUndefined(playerWins))) {
            playerWins = 0;
        }
        if ((isNaN(playerLosses)) || (IsNullOrUndefined(playerLosses))) {
            playerLosses = 0;
        }
        tableArea.appendChild(document.createTextNode("Welcome " + user.get_title() + "! You have won " + playerWins + " times, and lost " + playerLosses + " times!"));
        existingPlayer = true;
    }
    if (!existingPlayer) {
        tableArea.appendChild(document.createTextNode("Welcome " + user.get_title() + "! You have won 0 times, and lost 0 times!"));
    }
}

function square_click(number) {
    var square = document.getElementById("square" + number);
    if (square.getAttribute("class") == "blank") {
        square.setAttribute("class", "nought")
        if (checkWin('User')) {
            recordScore('Wins');
        }
        else {
            SharePointTurn();
        }
    }
}

function SharePointTurn() {
    if (hasGameEnded()) {
        recordScore('Draw');
    }
    else {
        setTimeout(function () { SharePointPlay(); }, 250);
    }
}

function hasGameEnded() {
    var gameEnded = true;
    for (var squareCounter = 1; squareCounter <= 9; squareCounter++) {
        var square = document.getElementById("square" + squareCounter);
        if (square.getAttribute("class") == "blank") {
            gameEnded = false;
        }
    }
    return (gameEnded);
}

function SharePointPlay() {
    var randomNumber;
    var availableSquare = false;
    while (!availableSquare) {
        randomNumber = Math.floor(Math.random() * 9) + 1;
        var square = document.getElementById("square" + randomNumber);
        if (square.getAttribute("class") == "blank") {
            square.setAttribute("class", "cross")
            availableSquare = true;
        }
    }
    if (checkWin('SharePoint')) {
        recordScore('Losses');
    }
}

function checkWin(player) {
    var retVal = false;
    var square1 = document.getElementById("square1").getAttribute("class");
    var square2 = document.getElementById("square2").getAttribute("class");
    var square3 = document.getElementById("square3").getAttribute("class");
    var square4 = document.getElementById("square4").getAttribute("class");
    var square5 = document.getElementById("square5").getAttribute("class");
    var square6 = document.getElementById("square6").getAttribute("class");
    var square7 = document.getElementById("square7").getAttribute("class");
    var square8 = document.getElementById("square8").getAttribute("class");
    var square9 = document.getElementById("square9").getAttribute("class");
    if (player == "User") {
        if ((square1 == "nought") && (square2 == "nought") && (square3 == "nought")) {
            retVal = true;
            return (retVal);
        }
        if ((square1 == "nought") && (square4 == "nought") && (square7 == "nought")) {
            retVal = true;
            return (retVal);
        }
        if ((square1 == "nought") && (square5 == "nought") && (square9 == "nought")) {
            retVal = true;
            return (retVal);
        }
        if ((square2 == "nought") && (square5 == "nought") && (square8 == "nought")) {
            retVal = true;
            return (retVal);
        }
        if ((square3 == "nought") && (square6 == "nought") && (square9 == "nought")) {
            retVal = true;
            return (retVal);
        }
        if ((square3 == "nought") && (square5 == "nought") && (square7 == "nought")) {
            retVal = true;
            return (retVal);
        }
        if ((square4 == "nought") && (square5 == "nought") && (square6 == "nought")) {
            retVal = true;
            return (retVal);
        }
        if ((square7 == "nought") && (square8 == "nought") && (square9 == "nought")) {
            retVal = true;
            return (retVal);
        }
    }
    else {
        if ((square1 == "cross") && (square2 == "cross") && (square3 == "cross")) {
            retVal = true;
            return (retVal);
        }
        if ((square1 == "cross") && (square4 == "cross") && (square7 == "cross")) {
            retVal = true;
            return (retVal);
        }
        if ((square1 == "cross") && (square5 == "cross") && (square9 == "cross")) {
            retVal = true;
            return (retVal);
        }
        if ((square2 == "cross") && (square5 == "cross") && (square8 == "cross")) {
            retVal = true;
            return (retVal);
        }
        if ((square3 == "cross") && (square6 == "cross") && (square9 == "cross")) {
            retVal = true;
            return (retVal);
        }
        if ((square3 == "cross") && (square5 == "cross") && (square7 == "cross")) {
            retVal = true;
            return (retVal);
        }
        if ((square4 == "cross") && (square5 == "cross") && (square6 == "cross")) {
            retVal = true;
            return (retVal);
        }
        if ((square7 == "cross") && (square8 == "cross") && (square9 == "cross")) {
            retVal = true;
            return (retVal);
        }
    }
    return (retVal);
}

function recordScore(state) {
    for (var squareCounter = 1; squareCounter <= 9; squareCounter++) {
        var square = document.getElementById("square" + squareCounter);
        square.disabled = true;
    }
    if (existingPlayer) {
        if (state == "Wins") {
            alert("Hurrah! You are smarter than SharePoint!");
            listItem = list.getItemById(playerListId);
            context.load(listItem);
            context.executeQueryAsync(function () { incrementWins(); }, function () { alert("Current score could not be retrieved"); });
        }
        if (state == "Draw") {
            alert("Not Bad: You and SharePoint are evenly matched...");
        }
        if (state == "Losses") {
            alert("Erm, I don't know how to break this to you, but you've been beaten by a random number generator...");
            listItem = list.getItemById(playerListId);
            context.load(listItem);
            context.executeQueryAsync(function () { incrementLosses(); }, function () { alert("Current score could not be retrieved"); });
        }
    }
    else {
        if (state == "Wins") {
            alert("Hurrah! You are smarter than SharePoint!");
            var itemCreateInfo = new SP.ListItemCreationInformation();
            listItem = list.addItem(itemCreateInfo);
            listItem.set_item("Title", user.get_title());
            listItem.set_item("Wins", 1);
            listItem.set_item("Losses", 0);
            listItem.update();
            context.load(listItem);
            context.executeQueryAsync(function () { playerListId = listItem.get_id(); },
                function () { alert('Score could not be stored'); });
        }
        if (state == "Draw") {
            alert("Not Bad: You and SharePoint are evenly matched...");
        }
        if (state == "Losses") {
            alert("Erm, I don't know how to break this to you, but you've been beaten by a random number generator...");
            var itemCreateInfo = new SP.ListItemCreationInformation();
            listItem = list.addItem(itemCreateInfo);
            listItem.set_item("Title", user.get_title());
            listItem.set_item("Wins", 0);
            listItem.set_item("Losses", 1);
            listItem.update();
            context.load(listItem);
            context.executeQueryAsync(function () { playerListId = listItem.get_id(); },
                function () { alert('Score could not be stored'); });
        }
    }
}

function incrementWins() {
    currentWins = listItem.get_fieldValues()["Wins"];
    listItem.set_item("Wins", parseInt(currentWins) + 1);
    listItem.update();
    context.executeQueryAsync(null, function () { alert("Score could not be updated"); });
}

function incrementLosses() {
    currentLosses = listItem.get_fieldValues()["Losses"];
    listItem.set_item("Losses", parseInt(currentLosses) + 1);
    listItem.update();
    context.executeQueryAsync(null, function () { alert("Score could not be updated"); });
}

function resetNow() {
    for (var squareCounter = 1; squareCounter <= 9; squareCounter++) {
        var square = document.getElementById("square" + squareCounter);
        square.setAttribute("class", "blank");
        square.disabled = false;
    }
    start();

}

SP_SharePointGame_js -> Right Click -> Deploy
Thank You.

1 comment:

Featured Post

Protect an API by using OAuth 2.0 with Azure Active Directory and API Management

Protect an API by using OAuth 2.0 with Azure Active Directory and API Management https://docs.microsoft.com/en-us/azure/api-management/api-...

Popular posts