Merge branch 'dev'

darkmirafr · Dec 17, 2014 · c4caa6d · c4caa6d
2 parents e5acf20 + 550cf02
commit c4caa6d
Show file tree

Hide file tree

Showing 26 changed files with 1,352 additions and 3 deletions.
diff --git a/.gitignore b/.gitignore
diff --git a/README.md b/README.md
@@ -1,4 +1,47 @@
-xmas-pirate-race
-================
+Christmas pirate race
+=====================
 
-Display teams scores through an exciting pirates boats race for Darkmira Xmas blind-test !
+Display teams scores through an exciting pirates boats race.
+Project created for the Darkmira Xmas blind-test event.
+
+![Treasure map and boats](readme-treasure-map.jpg)
+
+Developed by [Darkmira](http://www.darkmira.fr/).
+
+
+### Prerequisites
+
+- Browser compatible with css3 ([use filter property, see compatibility](http://caniuse.com/#feat=css-filters))
+- A saber and brave crews to board your ship
+
+
+## Using
+
+Simply open index.html in your browser, and start to count points to each team
+by clicking + or - in the menu.
+
+Boats will then navigate to the treasure.
+
+
+### Features
+
+- Add or remove point to teams
+- Change team name
+
+
+### Advanced usage
+
+- Add or remove boats by changing `Config.boatsNumber` in model.js, and uncommenting UI items in index.html
+
+- Invoke Poseidon to create more or less waves:
+
+``` js
+Poseidon.createWaves(32);
+```
+
+
+## License
+
+This project in under GNU License.
+
+[See complete License here](LICENSE)
diff --git a/css/bootstrap.min.css b/css/bootstrap.min.css
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,95 @@
+@font-face {
+    font-family: pirate;
+    src: url(../fonts/black-sams-gold.ttf);
+}
+
+body {
+    font-family: pirate;
+    background: url("../img/background-wood.jpg");
+}
+
+.container-fluid {
+    padding-left: 0;
+    padding-right: 0;
+}
+
+#sea {
+    width: 1300px;
+    margin: auto;
+}
+
+#waves {
+    position: absolute;
+}
+
+.boat {
+    position: absolute;
+}
+
+.color-0, .boat:nth-child(1) {
+    color: red;
+    -webkit-filter: hue-rotate(150deg) saturate(0.75);
+}
+.color-1, .boat:nth-child(2) {
+    color: red;
+    -webkit-filter: hue-rotate(40deg) saturate(0.75);
+}
+.color-2, .boat:nth-child(3) {
+    color: red;
+    -webkit-filter: hue-rotate(200deg) saturate(0.75);
+}
+.color-3, .boat:nth-child(4) {
+    color: red;
+    -webkit-filter: hue-rotate(240deg) saturate(0.75);
+}
+.color-4, .boat:nth-child(5) {
+    color: red;
+    -webkit-filter: hue-rotate(290deg) saturate(0.75);
+}
+
+#ui {
+    height: auto;
+    background-image: url(../img/bg-boat.jpg), url(../img/bg.jpg);
+    background-repeat: no-repeat, repeat;
+    background-position: right bottom, 0 0;
+}
+
+#ui h2 {
+    padding-top: 15px;
+}
+
+#ui .team {
+    margin-top: 24px;
+    padding-bottom: 18px;
+    border-bottom: 2px dashed rgba(0, 0, 0, 0.15);
+}
+#ui input {
+    border: none;
+    background: none;
+    font-size: 26px;
+    padding: 4px 8px;
+    box-shadow: none;
+    text-align: center;
+}
+#ui .team .score {
+    font-size: 48px;
+    margin: 0;
+}
+#ui .team .more {
+    width: 100px;
+}
+
+@media (min-width: 992px) and (max-width: 1560px) {
+    .col-md-2 {
+        width: 100% !important;
+    }
+}
+
+@media (min-width: 1561px) {
+    #ui {
+        height: 980px;
+        position: fixed;
+        right: 0;
+        width: 300px;
+    }
+}
diff --git a/fonts/black-sams-gold.ttf b/fonts/black-sams-gold.ttf
diff --git a/fonts/glyphicons-halflings-regular.eot b/fonts/glyphicons-halflings-regular.eot
diff --git a/fonts/glyphicons-halflings-regular.svg b/fonts/glyphicons-halflings-regular.svg
diff --git a/fonts/glyphicons-halflings-regular.ttf b/fonts/glyphicons-halflings-regular.ttf
diff --git a/fonts/glyphicons-halflings-regular.woff b/fonts/glyphicons-halflings-regular.woff
diff --git a/img/background-wood.jpg b/img/background-wood.jpg
diff --git a/img/bg-boat.jpg b/img/bg-boat.jpg
diff --git a/img/bg.jpg b/img/bg.jpg
diff --git a/img/default.png b/img/default.png
diff --git a/img/map-pirate-race.png b/img/map-pirate-race.png
diff --git a/img/pirate-boat-1.png b/img/pirate-boat-1.png
diff --git a/img/pirate-boat-2.png b/img/pirate-boat-2.png
diff --git a/img/pirate-boat-3.png b/img/pirate-boat-3.png
diff --git a/img/pirate-boat-4.png b/img/pirate-boat-4.png
diff --git a/index.html b/index.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Bateaux pirates</title>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width">
+
+        <link href="css/bootstrap.min.css" rel="stylesheet">
+        <link href="css/style.css" rel="stylesheet">
+    </head>
+    <body>
+        <div class="container-fluid">
+            <div class="row">
+                <div id="sea" class="col-md-10">
+                    <div id="map"><img src="img/map-pirate-race.png" class="img-responsive" /></div>
+                    <div id="waves">
+                        <!--
+                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+                        -->
+                    </div>
+                </div>
+
+                <div id="ui" class="col-md-2">
+                    <div class="text-center">
+                        <h2>Planche à points</h2>
+                        <div id="team-0" class="team" data-boat="0">
+                            <input value="Equipe 1" class="form-control input-lg color-0" />
+                            <p class="score color-0">0</p>
+                            <div class="btn-group" role="group">
+                                <button type="button" class="btn btn-success more">+</button>
+                                <button type="button" class="btn btn-danger less">-</button>
+                            </div>
+                        </div>
+                        <div id="team-1" class="team" data-boat="1">
+                            <input value="Equipe 2" class="form-control input-lg color-1" />
+                            <p class="score color-1">0</p>
+                            <div class="btn-group" role="group">
+                                <button type="button" class="btn btn-success more">+</button>
+                                <button type="button" class="btn btn-danger less">-</button>
+                            </div>
+                        </div>
+                        <div id="team-2" class="team" data-boat="2">
+                            <input value="Equipe 3" class="form-control input-lg color-2" />
+                            <p class="score color-2">0</p>
+                            <div class="btn-group" role="group">
+                                <button type="button" class="btn btn-success more">+</button>
+                                <button type="button" class="btn btn-danger less">-</button>
+                            </div>
+                        </div>
+                        <!--
+                        <div id="team-4" class="team col-md-12" data-boat="3">
+                            <input value="Equipe 4" class="form-control input-lg color-3" />
+                            <p class="score color-3">0</p>
+                            <div class="btn-group" role="group">
+                                <button type="button" class="btn btn-success more">+</button>
+                                <button type="button" class="btn btn-danger less">-</button>
+                            </div>
+                        </div>
+                        <div id="team-5" class="team col-md-12" data-boat="4">
+                            <input value="Equipe 5" class="form-control input-lg color-4" />
+                            <p class="score color-4">0</p>
+                            <div class="btn-group" role="group">
+                                <button type="button" class="btn btn-success more">+</button>
+                                <button type="button" class="btn btn-danger less">-</button>
+                            </div>
+                        </div>
+                        -->
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <script src="js/jquery.min.js"></script>
+        <script src="js/jquery-ui.min.js"></script>
+        <script src="js/bootstrap.min.js"></script>
+        <script src="js/model.js"></script>
+        <script src="js/main.js"></script>
+    </body>
+</html>
diff --git a/js/bootstrap.min.js b/js/bootstrap.min.js
diff --git a/js/debug.js b/js/debug.js
@@ -0,0 +1,38 @@
+/**
+ * Debug function to display path.
+ * Call it again to remove path.
+ * Call it again to re-display path.
+ * Call it again to re-remove path.
+ * Call it again to re-display one more time if you are not sure the last times.
+ * And so on...
+ */
+function displayMainPath() {
+    if ($('.main-path-debug').size()) {
+        $('.main-path-debug').remove();
+        return;
+    }
+
+    for (var i = 0; i <= 1.0; i += 0.0025) {
+        var $p = $('<p class="main-path-debug">.</p>');
+        var pos = Poseidon.seaPath.getPosition(i);
+
+        $p.css({
+            position: 'absolute',
+            left: pos.x+'px',
+            top: pos.y+'px'
+        });
+
+        $('#sea').append($p);
+    }
+}
+
+/**
+ * Use it to trace a path with mouse.
+ */
+function logClicks() {
+    $('#sea').click(function (e) {
+        var origin = $('#sea').position();
+        var p = new Point(e.pageX - origin.left, e.pageY - origin.top);
+        console.log('new Point('+p.x+', '+p.y+'),');
+    });
+}