Skip to content

HTML5 Canvas App as Real-Time NodeJS game #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

HTML5 Canvas App as Real-Time NodeJS game #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
76a583e
setup the development environment and adds a user interface
Mrena Mar 26, 2013
e7b1c31
adds a feature to save and view/delete saved drawings
Mrena Mar 27, 2013
9922e1c
Added a feature to create an album, and store drawings in it
Mrena Mar 29, 2013
86dc8cf
Adds more colors to choose from
Mrena Mar 29, 2013
5ba45f9
Adds login page
Mrena Apr 2, 2013
fa68043
Adds a whole lot
Mrena Jun 3, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
27 changes: 27 additions & 0 deletions TODO.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
William Malone's and I Simple Drawing app
- Make a drawing passable as a JSON object/ just pass it using canvas.toDataURL();. done
- Add more drawings for users to color
- make the canvas and drawing area bigger
- add more colors. done
- Add black as one of the colors so a player can be creative. done
- Make a page to display saved drawings. done
- Have folders on the saved drawing page. When a user is about to save an image, they should be able to selected an already created folder, or create a new one to save the image inside it. done
- Make saved images editable, and then re-savable
- Add a virtual currency, and call it Gee
- Make available a competition for users to be able to enter their saved drawing set in a special competition
- Add a feature for users to be able to vote for drawings other than theirs
- Add billing to enter the competition
- There will be 5, 10,15,20 minutes competitions, and with each increment of time the image will be larger and requires more attention to detail
- The images to color will be chose on the server and the connected users will have to finish coloring it in 5 minutes and afterward there will have to vote on other users' images, one vote each and the user who wins gets 10% of the virtual currency that was spent by all users who entered the competition.
- Add global chat where users can chat with other game users of this game and others we have created
- Add default chatrooms and give users the ability to create their chatrooms
- Add sound for every new chat message
more colors implementation
- Have some color brushes on the colorCanvas and some totally off. When a user clicks next we move the brushes 10px up, and the redraw.
- When a user clicks previous we move the brushes 10px down, and then redraw
- When a brush is clicked its color is assigned to the next color that will be used for drawing

- A user should be able to add colors to their favorite, so to be displayed on the upper color selection canvas
- Level 1 the user will have unlimited selection of colors
- Level 2 colors will be limited
- Level 3 they will have choose and then use only their favorite colors.
22 changes: 22 additions & 0 deletions deplist.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
#
# This file contains a list of Node modules and optionally version
# (one per line) of the form: <module-name>@<version>
# to install alongside your app ("locally") on the OpenShift environment.
#

# Any blank lines or lines starting with a hash (#) are ignored.
# E.g. uncomment the next line to install sqlite3
#sqlite3

#
# For a list of globally installed modules - see file: npm_global_module_list.
#
# Note: You can override a globally available module by specifying it in this
# file or packaging it in the node_modules/ directory. Node will give
# preference to the "locally" installed version of that module.
#

express
mysql
socket.io
websocket
291 changes: 291 additions & 0 deletions game.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,291 @@
<!DOCTYPE html>
<html>
<head>
<title>SimplyColor</title>

<link rel="stylesheet" href="static/css/jquery.mobile-1.2.0.css" />
<link rel="stylesheet" href="static/css/mobile-s.css" />
<link rel="stylesheet" href="static/css/mainstyle.css" />
<script type="text/javascript" src="static/js/jquery-1.8.0.js"></script>
<script type="text/javascript" src="static/js/jquery.mobile-1.2.0.js"></script>

<!-- <script src="node_modules/socket.io/lib/socket.io.js"></script> -->
</head>
<body>
<div data-role="page" id="index">
<div data-role="header" data-position="fixed"><h3>SimplyColor</h3></div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="b">
<li><h3>Home</h3></li>
</ul>

<div id="canvasDiv"></div>
<div data-role="fieldcontain">
<label for="drawing_name">Save Drawing</label><br />
<div id="notification_message" style="color:red"></div><br />
<input type="text" data-inset="true" id="drawing_name" placeholder="Drawing Name" /><br />
<label for="albums_selection">Choose Album</label><br />
<select id="albums_selection" data-native-menu="false">
<option>Create or Select Album</option>
<option value="create">Create New Album</option>
</select><br />
<a href="#" data-role="button" data-inline="true" id="save_drawing">Save</a>
</div>

<div data-role="popup" id="create_album">
<div style="padding:13px"></div>
<div data-role="header">Create Album</div>
<div data-role="content">
<div id="album_name_error"></div>
<div data-role="fieldcontain">
<label for="album_name">Name:</label><br />
<input type="text" id="album_name" />
<a href="#" data-role="button" id="save_album_name" data-inline="true">Save</a>
</div>
</div>
</div>

<div data-role="collapsible">
<h3>Instructions</h3>
<p></p>
</div>
<div data-role="collapsible">
<h3>About</h3>
<p>Name : SimplyColor<br />Version : 1.0<br />Developers : William Melon and Khulekani Ngongoma</p>
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#index" data-icon="ic_view_grid" data-iconpos="top" id="home" >Home</a></li>
<li><a href="#saved" data-icon="ic_email" data-iconpos="top">Collection</a></li>
<li><a href="#" data-icon="ic_info" data-iconpos="top" class="require_login showcase">Tournaments</a></li>
<li><a href="#" data-icon="ic_view_details" data-iconpos="top" class="require_login chat">Chat</a></li>
</ul>
</div>
</div>
</div>

<div data-role="page" id="saved">
<div data-role="header" data-position="fixed"><h3>SimplyColor</h3></div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="b">
<li><h3>Collection</h3></li>
</ul>
<div id="foldersDiv"></div>

</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#index" data-icon="ic_view_grid" data-iconpos="top" id="home" >Home</a></li>
<li><a href="#saved" data-icon="ic_email" data-iconpos="top">Collection</a></li>
<li><a href="#" data-icon="ic_info" data-iconpos="top" class="require_login showcase">Tournaments</a></li>
<li><a href="#" data-icon="ic_view_details" data-iconpos="top" class="require_login chat">Chat</a></li>
</ul>
</div>
</div>
</div>

<div data-role="page" id="savedImages">
<div data-role="header" data-position="fixed"><h3>SimplyColor</h3></div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="b">
<li><h3>Collection Drawings</h3></li>
</ul>
<div id="drawingsDiv"></div>

</div>
<div data-role="footer" data-position="fixed">
<a href="#" data-role="button" data-rel="back" style="width:500px">Back</a>
</div>
</div>

<div data-role="page" id="showcase">
<div data-role="header" data-position="fixed"><h3>SimplyColor</h3></div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="b">
<li><h3>Tournaments</h3></li>
</ul>
<ul data-role="listview" data-inset="true">
<li><a href="#" id="tournament_twenty">
<h3>Beginner</h3>
<p>It has basic drawings which requires the least attention to detail and gives you a lot of time to perfect your drawings.</p>
</a>
</li>
<li data-role="list-divider"></li>
<li>
<a href="#" id="tournament_ten">
<h3>Intermediate</h3>
<p>A little improvement... A bit difficult.</p>
</a>
</li>
<li data-role="list-divider"></li>
<li>
<a href="#" id="tournament_five">
<h3>Pro</h3>
<p>To win this tournament, you require speed and attention to detail.</p>
</a>
</li>
<li data-role="list-divider"></li>
<li>
<a href="#tournament_collection">
<h3>Collection Tournament</h3>
<p>Put your collection of drawings into a test.</p>
</a>
</li>


</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#index" data-icon="ic_view_grid" data-iconpos="top" id="home" >Home</a></li>
<li><a href="#saved" data-icon="ic_email" data-iconpos="top">Collection</a></li>
<li><a href="#" data-icon="ic_info" data-iconpos="top" class="require_login showcase">Tournaments</a></li>
<li><a href="#" data-icon="ic_view_details" data-iconpos="top" class="require_login chat">Chat</a></li>
</ul>
</div>
</div>
</div>

<div data-role="page" id="tournament_twenty">
<div data-role="header" data-position="fixed"><h3>SimplyColor</h3></div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="b">
<li><h3>Beginner Tournament</h3></li>
</ul>

</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#index" data-icon="ic_view_grid" data-iconpos="top" id="home" >Home</a></li>
<li><a href="#saved" data-icon="ic_email" data-iconpos="top">Collection</a></li>
<li><a href="#" data-icon="ic_info" data-iconpos="top" class="require_login showcase" id="showcase_btn">Tournaments</a></li>
<li><a href="#" data-icon="ic_view_details" data-iconpos="top" class="require_login chat" id="chat_btn">Chat</a></li>
</ul>
</div>
</div>
</div>

<div data-role="page" id="tournament_ten">
<div data-role="header" data-position="fixed"><h3>SimplyColor</h3></div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="b">
<li><h3>Intermediate Tournament</h3></li>
</ul>

</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#index" data-icon="ic_view_grid" data-iconpos="top" id="home" >Home</a></li>
<li><a href="#saved" data-icon="ic_email" data-iconpos="top">Collection</a></li>
<li><a href="#" data-icon="ic_info" data-iconpos="top" class="require_login showcase">Tournaments</a></li>
<li><a href="#" data-icon="ic_view_details" data-iconpos="top" class="require_login chat">Chat</a></li>
</ul>
</div>
</div>
</div>

<div data-role="page" id="tournament_five">
<div data-role="header" data-position="fixed"><h3>SimplyColor</h3></div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="b">
<li><h3>Pro Tournament</h3></li>
</ul>

</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#index" data-icon="ic_view_grid" data-iconpos="top" id="home" >Home</a></li>
<li><a href="#saved" data-icon="ic_email" data-iconpos="top">Collection</a></li>
<li><a href="#" data-icon="ic_info" data-iconpos="top" class="require_login showcase">Tournaments</a></li>
<li><a href="#" data-icon="ic_view_details" data-iconpos="top" class="require_login chat">Chat</a></li>
</ul>
</div>
</div>
</div>

<div data-role="page" id="chat">
<div data-role="header" data-position="fixed"><h3>SimplyColor</h3></div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="b">
<li><h3>Chat</h3></li>
</ul>
<ul data-role="listview" id="chat_content">
<li>
<h3>Online Users</h3>
<p>Me</p>
</li>

</ul>

</div>
<div data-role="footer" data-position="fixed">
<div id="chat_box" style="display:none">
<textarea id='chat_message' placeholder='type your chat message' data-inset='false' class='ui-input-text ui-body-c ui-corner-all ui-shadow-inset'></textarea>
<a href="#" data-role="button" data-inline="true" id="send_message">Send</a><a href="#" data-role="button" data-inline="true" id="clear_message">Clear</a>
</div>
<div data-role="navbar" class="navbar">
<ul>
<li><a href="#index" data-icon="ic_view_grid" data-iconpos="top" id="home" >Home</a></li>
<li><a href="#saved" data-icon="ic_email" data-iconpos="top">Collection</a></li>
<li><a href="#" data-icon="ic_info" data-iconpos="top" class="require_login showcase">Tournaments</a></li>
<li><a href="#" data-icon="ic_view_details" data-iconpos="top" class="require_login chat">Chat</a></li>
</ul>
</div>
</div>
</div>

<div data-role="page" id="login">
<div data-role="header" data-position="fixed"><h3>SimplyColor</h3></div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="b">
<li><h3>SocialHub</h3></li>
</ul>
<h3>Register once, and use your login details on all our games.</h3>
<div id="message"></div>
<label for="username">Username:</label>
<input type="text" id="username" placeholder="Enter username" data-inset="true" />
<label for="password">Password:</label>
<input type="password" id="password" placeholder="Enter password" data-inset="true" />
<label for="password_2">Re-type Password (Registration):</label>
<input type="password" id="password_2" placeholder="Re-type password" data-inset="true" />
<a href="#" data-role="button" id="btnLogin" data-inline="true">Login</a>
<a href="#" data-role="button" id="btnRegister" data-inline="true">Register</a>

</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#index" data-icon="ic_view_grid" data-iconpos="top" id="home" >Home</a></li>
<li><a href="#saved" data-icon="ic_email" data-iconpos="top">Collection</a></li>
<li><a href="#" data-icon="ic_info" data-iconpos="top" class="require_login showcase">Tournaments</a></li>
<li><a href="#" data-icon="ic_view_details" data-iconpos="top" class="require_login chat">Chat</a></li>
</ul>
</div>
</div>
</div>
<script src="/socket.io/lib/socket.io.js"></script>
<script> var socket = io.connect(); </script>
<script src="static/js/util.js"></script>
<script src="static/js/client_data_access/drawingAppDa.js"></script>
<script src="static/js/socket_listeners.js"></script>
<script src="static/js/dom_listeners.js"></script>
<!--[if IE]><script type="text/javascript" src="js/excanvas.js"></script><![endif]-->
<script type="text/javascript" src="static/js/drawingApp.js"></script>
<script src="static/js/logic.js"></script>
<script type="text/javascript">

socket.on("hello",function(data){
console.log("Connected to a Node Server");
});

drawingApp.init();

</script>
</body>
</html>
Loading