src/index.ejs
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title><%= htmlWebpackPlugin.options.title %></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Real favicons will be generated by webpack into dist index.html -->
<link rel="icon" href="favicon.png" />
<style>
.main-container.complete {
transition: opacity 450ms ease;
opacity: 1;
}
.main-container:not(.complete) {
opacity: 0;
}
</style>
</head>
<body class="grey lighten-5 grey-text text-darken-4">
<div class="main-container" data-page-slug="App">
<nav class="black white-text" role="navigation">
<div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">Tic Tac Toe</a>
<ul class="right hide-on-med-and-down">
<li><a class="btn-js btn-settings" data-role="settings">Settings</a></li>
<li><a class="btn-js btn-restart" data-role="restart">Restart the current game</a></li>
<li><a class="btn-js btn-restart" data-role="reset">Reset all</a></li>
<li><a href="dashboard.html">Dashboard</a></li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li class="menu-title grey darken-4">MENU</li>
<li><a class="btn-js btn-settings" data-role="settings">Settings</a></li>
<li><a class="btn-js btn-restart" data-role="restart">Restart the current game</a></li>
<li><a class="btn-js btn-restart" data-role="reset">Reset all</a></li>
<li><a href="dashboard.html">Dashboard</a></li>
</ul>
<a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
</div>
</nav>
<div class="container">
<div class="section main-section">
<div class='app'>
<div class="canvas-container z-depth-5">
<canvas class="game-canvas"></canvas>
</div>
<div id="loader-container"></div>
<div class="joysticks">
<div class="players-joystick grey darken-4 grey-text text-darken-4" data-tictactoe-player-id="player-1">
<h1 class="name grey-text text-lighten-5">Player 1</h1>
</div>
<div class="players-joystick grey darken-4 grey-text text-darken-4" data-tictactoe-player-id="player-2">
<h1 class="name grey-text text-lighten-5">Player 2</h1>
</div>
</div>
</div>
</div>
</div>
<footer class="page-footer grey lighten-2 grey-text text-darken-4">
<div class="container">
<div class="row">
<div class="col s12 m4">
<h5>Tic Tac Toe</h5>
<ul>
<li><a class="btn waves-effect waves-light grey darken-4" href="https://github.com/proustibat/tic-tac-toe" target="_blank">Github Source</a></li>
<li><a class="btn waves-effect waves-light grey darken-4" href="https://travis-ci.org/proustibat/tic-tac-toe" target="_blank">Travis Status</a></li>
<li><a class="btn waves-effect waves-light grey darken-4" href="https://codeclimate.com/github/proustibat/tic-tac-toe/" target="_blank">Code Climate</a></li>
<li><a class="btn waves-effect waves-light grey darken-4" href="https://sonarcloud.io/dashboard?id=prstbt.tictactoe" target="_blank">Sonarcloud</a></li>
</ul>
</div>
<div class="col s12 m4">
<h5>Share</h5>
<ul>
<li><a class="btn waves-effect waves-light grey darken-4" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A//proustibat.github.io/tic-tac-toe/">Facebook</a></li>
<li><a class="btn waves-effect waves-light grey darken-4" target="_blank" href="https://twitter.com/home?status=Tic%20Tac%20Toe%20Game%0Ahttps%3A//proustibat.github.io/tic-tac-toe/%20%23es6%20%23javascript%20%23dev">Twitter</a></li>
<li><a class="btn waves-effect waves-light grey darken-4" target="_blank" href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A//proustibat.github.io/tic-tac-toe/&title=Simple%20tic%20tac%20toe%20game%20in%20ES6&summary=&source=">LinkedIn</a></li>
<li><a class="btn waves-effect waves-light grey darken-4" target="_blank" href="mailto:?&subject=Simple tic tac toe game in ES6&body=Hi!%0A%0ATake%20a%20look%20at%20this%20simple%20tic%20tac%20toe%20game.%20This%20is%20just%20ES6,%20build%20with%20webpack,%20it%20uses%20Materialize%20CSS%20for%20the%20UI%20and%20canvas%20for%20the%20playground.">By Email</a></li>
</ul>
</div>
<div class="col s12 m4">
<h5>Connect</h5>
<ul class="social-links">
<li><a href="https://twitter.com/proustibat" class="twitter-follow-button" data-show-count="false" data-dnt="true">Follow @proustibat on Twitter</a></li>
<li><a class="medium-btn btn-follow" href="https://medium.com/@proustibat" target="_blank"><i class="material-icons">M</i>Follow @proustibat</a></li>
<li><iframe src="https://ghbtns.com/github-btn.html?user=proustibat&type=follow" title="Follow @proustibat on Github" width="130px" height="20px"></iframe></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright grey-text text-darken-4">
<div class="container">
© 2017 Proustibat.
<a class="right grey-text text-darken-4" href="https://github.com/proustibat/tic-tac-toe/blob/master/LICENSE.md">GNU Affero General<br/>Public License v3.0</a>
</div>
</div>
</footer>
</div>
<!-- Modal Structure -->
<div class="modal modal-settings">
<form>
<div class="modal-content">
<h4>Settings</h4>
<div class="row">
<div class="col s6">
<div class="row">
<h5>Player 1</h5>
</div>
<div class="row">
<div class="input-field">
<i class="material-icons prefix grey-text text-darken-4">account_circle</i>
<input id="player-1-pseudo" type="text" class="validate">
<label for="player-1-pseudo" class="grey-text text-darken-4">Name</label>
</div>
<div class="input-field input-color">
<i class="material-icons prefix grey-text text-darken-4">color_lens</i>
<label for="player-1-color" class="grey-text text-darken-4">Color</label>
<input id="player-1-color" class="picker-color player-1-color" type="color">
</div>
</div>
</div>
<div class="col s6">
<div class="row">
<h5>Player 2</h5>
</div>
<div class="row">
<div class="input-field">
<i class="material-icons prefix grey-text text-darken-4">account_circle</i>
<input id="player-2-pseudo" type="text" class="validate">
<label for="player-2-pseudo" class="grey-text text-darken-4">Name</label>
</div>
<div class="input-field input-color">
<i class="material-icons prefix grey-text text-darken-4">color_lens</i>
<label for="player-2-color" class="grey-text text-darken-4">Color</label>
<input id="player-2-color" type="color" class="picker-color player-2-color">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12">
<h5>Playground size</h5>
</div>
<div class="col s12">
<p class="range-field">
<input type="range" class="playground-range-input" id="playground-range" min="3" max="15" step="2" value="3" />
</p>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn waves-effect waves-light black" type="reset">
<i class="material-icons left">refresh</i> Reset
</button>
<button class="modal-action modal-close btn waves-effect waves-light black">
<i class="material-icons left">cancel</i> Cancel
</button>
<button class="btn waves-effect waves-light black" type="submit">
Let's go <i class="material-icons right">send</i>
</button>
</div>
</form>
</div>
<!-- Twitter Button -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</body>
</html>