Return of the Redesign: Upgrade of the AI:MMO home page

portal/forms/aimmo_home.py

@@ -0,0 +1,68 @@
+# -*- coding: utf-8 -*-
+# Code for Life
+#
+# Copyright (C) 2018, Ocado Innovation Limited
+#
+# This program is free software: you can redistribute it and/or modify
+# it under the terms of the GNU Affero General Public License as
+# published by the Free Software Foundation, either version 3 of the
+# License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU Affero General Public License for more details.
+#
+# You should have received a copy of the GNU Affero General Public License
+# along with this program.  If not, see <http://www.gnu.org/licenses/>.
+#
+# ADDITIONAL TERMS – Section 7 GNU General Public Licence
+#
+# This licence does not grant any right, title or interest in any “Ocado” logos,
+# trade names or the trademark “Ocado” or any other trademarks or domain names
+# owned by Ocado Innovation Limited or the Ocado group of companies or any other
+# distinctive brand features of “Ocado” as may be secured from time to time. You
+# must not distribute any modification of this program using the trademark
+# “Ocado” or claim any affiliation or association with Ocado or its employees.
+#
+# You are not authorised to use the name Ocado (or any of its trade names) or
+# the names of any author or contributor in advertising or for publicity purposes
+# pertaining to the distribution of this program, without the prior written
+# authorisation of Ocado.
+#
+# Any propagation, distribution or conveyance of this program must include this
+# copyright notice and these terms. You must not misrepresent the origins of this
+# program; modified versions of the program must be marked as such and not
+# identified as the original program.
+from django.core.exceptions import ValidationError
+from django.forms import ModelForm
+
+from aimmo.models import Game
+
+
+class AddGameForm(ModelForm):
+    class Meta:
+        model = Game
+        name = ['name']
+        exclude = ['Main', 'owner', 'auth_token', 'completed', 'main_user', 'static_data', 'can_play',
+                   'public', 'generator', 'target_num_cells_per_avatar',
+                   'target_num_score_locations_per_avatar', 'score_despawn_chance',
+                   'target_num_pickups_per_avatar', 'pickup_spawn_chance', 'obstacle_ratio',
+                   'start_height', 'start_width']
+
+    def clean(self):
+        name = self.cleaned_data['name']
+
+        playable_games_names = [
+            playable_game.name
+            for playable_game in self.playable_games
+            if self.playable_games and name
+        ]
+
+        if name in playable_games_names:
+            raise ValidationError("Sorry, a game with that name already exists.")
+
+        return self.cleaned_data
+
+    def add_playable_games(self, playable_games):
+        self.playable_games = playable_games

portal/static/portal/js/join_create_game_toggle.js

@@ -0,0 +1,90 @@
+/*
+Code for Life
+
+Copyright (C) 2018, Ocado Innovation Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+ADDITIONAL TERMS – Section 7 GNU General Public Licence
+
+This licence does not grant any right, title or interest in any “Ocado” logos,
+trade names or the trademark “Ocado” or any other trademarks or domain names
+owned by Ocado Innovation Limited or the Ocado group of companies or any other
+distinctive brand features of “Ocado” as may be secured from time to time. You
+must not distribute any modification of this program using the trademark
+“Ocado” or claim any affiliation or association with Ocado or its employees.
+
+You are not authorised to use the name Ocado (or any of its trade names) or
+the names of any author or contributor in advertising or for publicity purposes
+pertaining to the distribution of this program, without the prior written
+authorisation of Ocado.
+
+Any propagation, distribution or conveyance of this program must include this
+copyright notice and these terms. You must not misrepresent the origins of this
+program; modified versions of the program must be marked as such and not
+identified as the original program.
+*/
+
+$(document).ready(function() {
+    var game_name_input = $('#id_name');
+    var create_game_form = $('#create_game_form');
+    var join_game_section = $('#join_game');
+    var create_game_section = $('#create_game');
+    var create_game_button = $('#create_game_button');
+    var create_new_game_button = $('#create_new_game_button');
+    var back_button = $('#back_button');
+
+    if(game_name_input.val()){
+        showCreateGameForm();
+        game_name_input.val("");
+        showInputError("Sorry, a game with this name already exists...");
+    }
+
+    create_new_game_button.click(function(){
+        showCreateGameForm();
+    });
+
+    back_button.click(function(){
+        showJoinGameForm();
+    });
+
+    create_game_button.click(function(){
+        if(!game_name_input.val() || game_name_input.val() === ""){
+            showInputError("Give your new game a name...");
+        }
+        else {
+            create_game_form.submit();
+        }
+    });
+
+    game_name_input.click(function () {
+        game_name_input.attr("placeholder", "");
+        game_name_input.removeClass('input-invalid');
+    });
+
+    function showCreateGameForm(){
+        join_game_section.addClass("hidden");
+        create_game_section.removeClass("hidden");
+    }
+
+    function showJoinGameForm(){
+        create_game_section.addClass("hidden");
+        join_game_section.removeClass("hidden");
+    }
+
+    function showInputError(error_message){
+        game_name_input.attr("placeholder", error_message);
+        game_name_input.addClass('input-invalid');
+    }
+});

portal/static/portal/sass/modules/_colours.scss

@@ -1,17 +1,17 @@
 // General Palette
 $color-teacher-blue: #0c52a3;
 $color-student-orange: #f37300;
-$color-text-grey: #4a4a4a;
+$color-text-gray: #4a4a4a;
+$color-error: #ff0000;
 // Text
 $color-text-primary: #000000;
 $color-text-secondary: #ffffff;
-$color-text-tertiary: $color-text-grey;
-$color-text-form-error: #ff0000;
+$color-text-tertiary: $color-text-gray;
 $color-text-login-error: #ffff00;
 $color-text-materials-tag: #808080;
 // Quotes
 $color-quote-text: $color-teacher-blue;
-$color-quote-name: $color-text-grey;
+$color-quote-name: $color-text-gray;
 // Buttons
 $color-button-primary-action-general-play: $color-teacher-blue;
 $color-button-primary-action-general-play-hover: #002284;
@@ -23,12 +23,12 @@ $color-button-primary-action-negative: #ff637d;
 $color-button-primary-action-negative-hover: #fd3d6a;
 $color-button-primary-action-danger: #ff0000;
 $color-button-primary-action-danger-hover: #df0531;
-$color-button-primary-action-navigation: $color-text-grey;
+$color-button-primary-action-navigation: $color-text-gray;
 $color-button-primary-action-navigation-hover: #000000;
 $color-button-primary-action-setup: #fab300;
 $color-button-primary-action-setup-hover: #ff9500;
 $color-button-secondary-border-light: #ffffff;
-$color-button-secondary-border-dark: $color-text-grey;
+$color-button-secondary-border-dark: $color-text-gray;
 $color-button-border-teacher: $color-teacher-blue;
 $color-button-border-student: $color-student-orange;
 $color-button-disabled: #d8d8d8;
@@ -43,17 +43,17 @@ $color-tab-unselected-background: #ffffff;
 $color-onboarding-step-done-background: $color-teacher-blue;
 $color-onboarding-step-done-text: #ffffff;
 $color-onboarding-step-in-progress-background: #ffffff;
-$color-onboarding-step-in-progress-text: $color-text-grey;
-$color-onboarding-step-todo-background: $color-text-grey;
+$color-onboarding-step-in-progress-text: $color-text-gray;
+$color-onboarding-step-todo-background: $color-text-gray;
 $color-onboarding-step-todo-text: #ffffff;
 // Tables
 $color-table-header-primary: $color-teacher-blue;
-$color-table-header-secondary: $color-text-grey;
+$color-table-header-secondary: $color-text-gray;
 $color-table-border: #9b9b9b;
 // Backgrounds
 $color-background-primary: #000000;
 $color-background-secondary: #ffffff;
-$color-background-tertiary: $color-text-grey;
+$color-background-tertiary: $color-text-gray;
 $color-background-materials-tag: #cccccc;
 $color-background-teach: $color-teacher-blue;
 $color-background-play: $color-student-orange;

portal/static/portal/sass/partials/_banners.scss

@@ -20,7 +20,12 @@
 
   }
 
-  * {
+  h1,
+  h2,
+  h3,
+  h4,
+  p,
+  a {
     color: $color-text-secondary;
   }
 
@@ -36,10 +41,6 @@
     @include _padding(70px, 0px, 70px, 0px);
   }
 
-  small {
-    @include _padding(20px, 0px, 8px, 0px);
-  }
-
   div[class^='col-sm'] {
     padding: 0;
   }
@@ -92,6 +93,10 @@
   background-image: url('../img/teaching_resources.jpg');
 }
 
+.banner--picture--aimmo {
+  background-image: url('../img/aimmo_hero.jpg');
+}
+
 .banner--homepage {
   @include _padding(100px, 0px, 100px, 10px);
   display: flex;
@@ -104,7 +109,6 @@
   }
 }
 
-
 .banner--homepage__text {
   @include _font-size(140px);
   @include _line-height(120px);
@@ -174,6 +178,79 @@
 
 }
 
+.banner--aimmo-home {
+  .dropdown {
+    width: 50%;
+
+    button,
+    ul {
+      @include _margin(0px, 0px, 0px, 0px);
+      width: 100%;
+      z-index: 1;
+    }
+
+    li {
+      border-bottom: 1px solid $color-table-border;
+    }
+
+    .dropdown-menu__option__text {
+      border-bottom: 1px solid transparent;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: normal;
+
+      &:hover {
+        border-bottom: 1px solid $color-text-gray;
+      }
+    }
+
+    .glyphicon {
+      @include _font-size(10px);
+      @include _padding(8px, 0px, 0px, 0px);
+    }
+  }
+}
+
+.banner--teacher--create-aimmo-game {
+  align-items: start;
+
+  .button-group {
+    display: flex;
+
+    .dropdown + .button,
+    .dropdown + button {
+      @include _margin(0px, 0px, 0px, 20px);
+    }
+
+  }
+
+  #create_game_form {
+    padding: 0;
+
+    label,
+    .errorlist {
+      display: none;
+    }
+
+    input {
+      height: auto;
+      margin: 0;
+      width: 65%;
+
+      &::placeholder {
+        color: $color-error;
+      }
+
+    }
+
+  }
+
+  img {
+    @include _margin(14px, 0px, 0px, 0px);
+  }
+
+}
+
 .banner--rapid-router--background {
   background-image: url('../img/rapid_router_landing_hero.png');
   background-position: center center;