From 9296e3af45f5e14eb4065cdf7b7494f56d183126 Mon Sep 17 00:00:00 2001
From: Steve Lindenberg <steve@stevelindenberg.com>
Date: Fri, 31 Dec 2021 15:44:09 -0800
Subject: [PATCH] Work in progress

---
 .../components/app_header/AppHeader.vue       |  58 ++++++-
 .../app_header/FullTimeInvisibleLogic.vue     |   2 +-
 .../components/app_header/MainHeader.vue      | 128 ---------------
 .../components/app_header/ModeToggles.vue     | 133 ---------------
 .../components/score_clock/ScoreClock.vue     |  29 ++++
 .../score_clock/ServerCommandsMixin.vue       |  80 +++++++++
 .../components/score_clock/clock/Clock.vue    |  54 ++++++
 .../score_clock/clock/ClockMixin.vue          | 135 +++++++++++++++
 .../score_clock/clock/ClockNumberDisplay.vue  |  30 ++++
 .../clock/controller/ControllerClock.vue      |  97 +++++++++++
 .../clock/focused/FocusedClock.vue            | 101 ++++++++++++
 .../components/score_clock/routes.json        |   6 +
 .../components/score_clock/score/Score.vue    | 154 ++++++++++++++++++
 .../score_clock/score/ScoreNumberDisplay.vue  |  33 ++++
 .../routes/front_page/FrontPageRoute.vue      |   8 +-
 assets/js/su_score_clock_js/store/modules.js  |   6 +-
 .../store/score_clock/header_icons.js         |  46 ++++++
 .../store/score_clock/score_clock.js          |  46 ++++++
 .../score_clock/score_clock_mutation_types.js |   1 +
 19 files changed, 871 insertions(+), 276 deletions(-)
 delete mode 100644 assets/js/su_score_clock_js/components/app_header/MainHeader.vue
 delete mode 100644 assets/js/su_score_clock_js/components/app_header/ModeToggles.vue
 create mode 100644 assets/js/su_score_clock_js/components/score_clock/ScoreClock.vue
 create mode 100644 assets/js/su_score_clock_js/components/score_clock/ServerCommandsMixin.vue
 create mode 100644 assets/js/su_score_clock_js/components/score_clock/clock/Clock.vue
 create mode 100644 assets/js/su_score_clock_js/components/score_clock/clock/ClockMixin.vue
 create mode 100644 assets/js/su_score_clock_js/components/score_clock/clock/ClockNumberDisplay.vue
 create mode 100644 assets/js/su_score_clock_js/components/score_clock/clock/controller/ControllerClock.vue
 create mode 100644 assets/js/su_score_clock_js/components/score_clock/clock/focused/FocusedClock.vue
 create mode 100644 assets/js/su_score_clock_js/components/score_clock/routes.json
 create mode 100644 assets/js/su_score_clock_js/components/score_clock/score/Score.vue
 create mode 100644 assets/js/su_score_clock_js/components/score_clock/score/ScoreNumberDisplay.vue
 create mode 100644 assets/js/su_score_clock_js/store/score_clock/header_icons.js
 create mode 100644 assets/js/su_score_clock_js/store/score_clock/score_clock.js
 create mode 100644 assets/js/su_score_clock_js/store/score_clock/score_clock_mutation_types.js

diff --git a/assets/js/su_score_clock_js/components/app_header/AppHeader.vue b/assets/js/su_score_clock_js/components/app_header/AppHeader.vue
index a1fba03..460980c 100644
--- a/assets/js/su_score_clock_js/components/app_header/AppHeader.vue
+++ b/assets/js/su_score_clock_js/components/app_header/AppHeader.vue
@@ -3,13 +3,21 @@
     <full-time-invisible-logic></full-time-invisible-logic>
     <div v-if="show_visible_header" class="col-12" style="position: fixed; top: 0; left: 0;">
       <theme-manager v-if="show_theme_manager"></theme-manager>
-      <main-header></main-header>
+      <main-header
+        :header_icons_ar="score_clock_app_header_icons_ar"
+        :main_label="main_label"
+        :main_label_target="net_main_label_target"
+      ></main-header>
       <version-update-in-progress></version-update-in-progress>
       <network-error-detection></network-error-detection>
     </div>
     <div class="col-12" style="opacity: 0;">
       <theme-manager v-if="show_theme_manager"></theme-manager>
-      <main-header></main-header>
+      <main-header
+        :header_icons_ar="score_clock_app_header_icons_ar"
+        :main_label="main_label"
+        :main_label_target="net_main_label_target"
+      ></main-header>
       <version-update-in-progress></version-update-in-progress>
       <network-error-detection></network-error-detection>
     </div>
@@ -22,10 +30,10 @@ module.exports = {
 
   components: {
     "full-time-invisible-logic": () => import("./FullTimeInvisibleLogic.vue"),
-    "network-error-detection": () => import("../../../su_client_js/components/header/NetworkErrorDetection.vue"),
-    "theme-manager": () => import("../../../su_client_js/components/header/ThemeManager.vue"),
-    "version-update-in-progress": () => import("../../../su_client_js/components/header/VersionUpdateInProgress.vue"),
-    "main-header": require("./MainHeader.vue").default,
+    "network-error-detection": () => import("../../../su_client_js/components/banners/NetworkErrorDetection.vue"),
+    "theme-manager": () => import("../../../su_client_js/components/banners/ThemeManager.vue"),
+    "version-update-in-progress": () => import("../../../su_client_js/components/banners/VersionUpdateInProgress.vue"),
+    "main-header": require("../../../su_client_js/components/app_header/MainHeader.vue").default,
   },
 
   data: function () {
@@ -35,14 +43,46 @@ module.exports = {
   methods: {},
 
   computed: {
-    show_visible_header: function() {
-      if (this.$store.getters.being_kind_to_mobile_mode_restarts) return false;
-      return true;
+    show_visible_header: function () {
+      if (this.$store.getters.being_kind_to_mobile_mode_restarts) return false
+      return true
     },
 
     show_theme_manager: function () {
       return this.$store.getters.is_running_locally
     },
+
+    score_clock_app_header_icons_ar: function () {
+      return this.$store.getters.score_clock_app_header_icons_ar
+    },
+
+    main_label: function () {
+      return "Score Clock"
+    },
+
+    net_main_label_target: function () {
+      if (!this.main_label_target) return null
+      if (this.main_label_target == this.$route.path) return null
+
+      return this.main_label_target
+    },
+
+    main_label_target: function () {
+      if (this.$store.getters.is_hamburger_expanded) return null
+
+      if (this.$route.path == "/login") return null
+
+      if (this.$route.params["username"]) return "/u/" + this.$route.params["username"]
+
+      var _route_cs = this.$route.params["context_slug"]
+
+      if (_route_cs) {
+        var _username = this.$store.getters.status_text_value(_route_cs, "user", "username", _route_cs)
+        if (_username) return "/u/" + _username
+      }
+
+      return null
+    },
   },
 }
 </script>
diff --git a/assets/js/su_score_clock_js/components/app_header/FullTimeInvisibleLogic.vue b/assets/js/su_score_clock_js/components/app_header/FullTimeInvisibleLogic.vue
index c617486..de6953f 100644
--- a/assets/js/su_score_clock_js/components/app_header/FullTimeInvisibleLogic.vue
+++ b/assets/js/su_score_clock_js/components/app_header/FullTimeInvisibleLogic.vue
@@ -14,7 +14,7 @@ module.exports = {
   components: {
     "missing-data-manager": () => import("../../../su_client_js/store/missing_data/MissingDataManager.vue"),
     "network-connection-error-detection": () => import("../../../su_client_js/store/network/NetworkConnectionErrorDetection.vue"),
-    "status-header": () => import("../../../su_client_js/components/header/StatusHeader.vue"),
+    "status-header": () => import("../../../su_client_js/components/banners/StatusHeader.vue"),
     "user-auth-session": () => import("../../../su_user_js/components/session/Session.vue"),
   },
 
diff --git a/assets/js/su_score_clock_js/components/app_header/MainHeader.vue b/assets/js/su_score_clock_js/components/app_header/MainHeader.vue
deleted file mode 100644
index 2eb02f3..0000000
--- a/assets/js/su_score_clock_js/components/app_header/MainHeader.vue
+++ /dev/null
@@ -1,128 +0,0 @@
-<template>
-  <div>
-    <div
-      class="row no-gutters w-100 bg-primary text-white flex-fill d-flex border border-top-0 border-left-0 border-right-0 border-bottom-1"
-    >
-      <div class="col-12">
-        <div :class="content_wrapper_class_ob">
-          <div class="row no-gutters">
-            <div :class="title_wrapper_class_ob">
-              <h3 class="font-weight-bold">
-                <hamburger-toggle></hamburger-toggle>
-                <router-link v-if="net_main_label_target" :to="net_main_label_target" class="text-white">
-                  {{ main_label }}
-                </router-link>
-                <span v-if="!net_main_label_target">
-                  {{ main_label }}
-                </span>
-              </h3>
-            </div>
-            <div v-if="show_mode_toggles" :class="toggles_wrapper_class_ob">
-              <mode-toggles></mode-toggles>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-module.exports = {
-  props: [],
-
-  components: {
-    "hamburger-toggle": require("../../../su_client_js/components/side_navigation/HamburgerToggle.vue").default,
-    "mode-toggles": require("./ModeToggles.vue").default,
-  },
-
-  data: function () {
-    return {}
-  },
-
-  methods: {},
-
-  computed: {
-    show_mode_toggles: function () {
-      if (this.$store.getters.in_mobile_mode && this.$store.getters.is_hamburger_expanded) return false
-
-      if (this.$route.name == "user_settings") return false
-      //  if (this.$route.params.username) if (!this.$route.params.nested_user_panel) return true
-
-      if (this.$route.name == "su_project-user")
-        if (this.$route.params["specifier"] == "settings")
-          return false
-
-      if (this.$route.name == "su_project-user") return true
-      if (this.$route.name == "su_project-user_list_item") return true
-
-      return false
-    },
-
-    main_label: function () {
-      if (this.$store.getters.is_hamburger_expanded) return "Score Clock"
-
-      if (this.$route.path == "/login") return "Login"
-
-      if (this.$route.params["username"]) return this.$route.params["username"]
-
-      var _route_cs = this.$route.params["context_slug"]
-
-      if (_route_cs) {
-        var _username = this.$store.getters.status_text_value(_route_cs, "user", "username", _route_cs)
-        if (_username) return _username
-      }
-
-      return "Score Clock"
-    },
-
-    net_main_label_target: function () {
-      if (!this.main_label_target) return null
-      if (this.main_label_target == this.$route.path) return null
-
-      return this.main_label_target
-    },
-
-    main_label_target: function () {
-      if (this.$store.getters.is_hamburger_expanded) return null
-
-      if (this.$route.path == "/login") return null
-
-      if (this.$route.params["username"]) return "/u/" + this.$route.params["username"]
-
-      var _route_cs = this.$route.params["context_slug"]
-
-      if (_route_cs) {
-        var _username = this.$store.getters.status_text_value(_route_cs, "user", "username", _route_cs)
-        if (_username) return "/u/" + _username
-      }
-
-      return null
-    },
-
-    content_wrapper_class_ob: function () {
-      var _use_fluid = this.$store.getters.is_hamburger_expanded || this.$store.getters.in_mobile_mode
-
-      var _ob = {}
-      _ob["container-fluid"] = _use_fluid
-      _ob["container"] = !_use_fluid
-      _ob["pl-0"] = this.$store.getters.center_hamburger_icon_with_side_navigation
-      return _ob
-    },
-
-    title_wrapper_class_ob: function () {
-      var _ob = {}
-      _ob["col-6 py-3 my-auto"] = true
-      return _ob
-    },
-
-    toggles_wrapper_class_ob: function () {
-      var _ob = {}
-      _ob["col-6 py-3 text-right my-auto"] = true
-      return _ob
-    },
-  },
-}
-</script>
-
-<style></style>
diff --git a/assets/js/su_score_clock_js/components/app_header/ModeToggles.vue b/assets/js/su_score_clock_js/components/app_header/ModeToggles.vue
deleted file mode 100644
index a467ebb..0000000
--- a/assets/js/su_score_clock_js/components/app_header/ModeToggles.vue
+++ /dev/null
@@ -1,133 +0,0 @@
-<template>
-  <span>
-    <i v-if="updating_user_data" class="fa-lg fa-fw fas fa-sync fa-spin ml-2"></i>
-    <i v-if="show_upgrade" :class="upgrade_icon_class_ob" title="New Version Available" @click="handle_upgrade_click"></i>
-    <i v-if="show_filter" :class="filtering_icon_class_ob" title="Filters" @click="handle_filter_click"></i>
-    <i v-if="!in_focus_mode" :class="planning_icon_class_ob" title="Planning Mode" @click="toggle_app_mode('planning')"></i>
-    <i v-if="!in_focus_mode" :class="doing_mode_icon_class_ob" title="Doing Mode" @click="toggle_app_mode('doing')"></i>
-    <i
-      v-if="!in_focus_mode"
-      :class="reviewing_mode_icon_class_ob"
-      title="Reviewing Mode"
-      @click="toggle_app_mode('reviewing')"
-    ></i>
-  </span>
-</template>
-
-<script>
-module.exports = {
-  props: [],
-
-  components: {},
-
-  data: function () {
-    return {}
-  },
-
-  methods: {
-    handle_upgrade_click: function () {
-      location.reload()
-    },
-
-    handle_filter_click: function () {
-      if (this.$store.getters.current_search_term) this.$store.dispatch("clear_text_filter_results", {})
-
-      if (this.$store.getters.current_privacy_level_visibility_int < 100)
-        this.$store.commit("update_current_privacy_level_visibility_int", 100)
-
-      this.toggle_app_mode("filtering")
-    },
-
-    toggle_app_mode: function (mode_key) {
-      this.$store.dispatch("toggle_app_mode", mode_key)
-    },
-  },
-
-  computed: {
-    in_focus_mode: function () {
-      return false
-    },
-
-    updating_user_data: function () {
-      if (this.$store.getters.does_domain_include("steve")) return false
-      return this.$store.getters.currently_joining_logged_in_user_channel
-    },
-
-    show_upgrade: function () {
-      if (this.$store.getters.app_ui_preference("application_update_phase") == "complete") return true
-
-      if (!this.latest_lists_web_version) return false
-
-      if (this.latest_lists_web_version == this.current_assets_version) return false
-
-      var _latest_splits = this.latest_lists_web_version.split(".")
-      var _current_splits = this.current_assets_version.split(".")
-
-      //  This is a little verbose, but there is a dev condition where the backend will skip recompiling mix.exs on build/deploy
-      //  The front end (in dev) thinks it's got 0.(backend+1).0 and (rightly) detects a mismatch
-      //  This evaluation style saves impatient me the steps of mix.clean on the backend to clear the dev mismatch version.
-      //  This is a non-factor on prod because every build process runs mix.clean
-      if (Number(_latest_splits[0]) > Number(_current_splits[0])) return true
-      if (Number(_latest_splits[1]) > Number(_current_splits[1])) return true
-      if (Number(_latest_splits[2]) > Number(_current_splits[2])) return true
-
-      return false
-    },
-
-    current_assets_version: function () {
-      return this.$store.getters.current_assets_version
-    },
-
-    latest_lists_web_version: function () {
-      return this.$store.getters.current_app_version("su_lists")
-    },
-
-    show_filter: function () {
-      if (this.updating_user_data) return false
-      if (this.show_upgrade) return false
-      return true
-    },
-
-    upgrade_icon_class_ob: function () {
-      var _ob = {}
-      _ob["fa-fw fa-lg ml-4 clickable"] = true
-      _ob["fa fa-cloud-download-alt"] = true
-      return _ob
-    },
-
-    filtering_icon_class_ob: function () {
-      var _ob = {}
-      _ob["fa-fw fa-lg ml-4 clickable"] = true
-      _ob[this.$store.getters.filtering_icon] = true
-      _ob["mostly-transparent"] = !this.$store.getters.in_app_mode("filtering")
-      return _ob
-    },
-
-    planning_icon_class_ob: function () {
-      var _ob = {}
-      _ob["fa-fw fa-lg ml-4 clickable"] = true
-      _ob[this.$store.getters.planning_icon] = true
-      _ob["mostly-transparent"] = !this.$store.getters.in_app_mode("planning")
-      return _ob
-    },
-
-    doing_mode_icon_class_ob: function () {
-      var _ob = {}
-      _ob["fa-fw fa-lg ml-4 clickable"] = true
-      _ob[this.$store.getters.doing_mode_icon] = true
-      _ob["mostly-transparent"] = !this.$store.getters.in_app_mode("doing")
-      return _ob
-    },
-
-    reviewing_mode_icon_class_ob: function () {
-      var _ob = {}
-      _ob["fa-fw fa-lg ml-4 clickable"] = true
-      _ob[this.$store.getters.reviewing_mode_icon] = true
-      _ob["mostly-transparent"] = !this.$store.getters.in_app_mode("reviewing")
-      return _ob
-    },
-  },
-}
-</script>
-
-<style></style>
diff --git a/assets/js/su_score_clock_js/components/score_clock/ScoreClock.vue b/assets/js/su_score_clock_js/components/score_clock/ScoreClock.vue
new file mode 100644
index 0000000..da65a57
--- /dev/null
+++ b/assets/js/su_score_clock_js/components/score_clock/ScoreClock.vue
@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <clock></clock>
+    <score></score>
+  </div>
+</template>
+
+<script>
+module.exports = {
+  props: [],
+
+  components: {
+    clock: () => import("./clock/Clock.vue"),
+    score: () => import("./score/Score.vue"),
+  },
+
+  data: function () {
+    return {}
+  },
+
+  created: function () {},
+
+  methods: {},
+
+  computed: {},
+}
+</script>
+
+<style></style>
diff --git a/assets/js/su_score_clock_js/components/score_clock/ServerCommandsMixin.vue b/assets/js/su_score_clock_js/components/score_clock/ServerCommandsMixin.vue
new file mode 100644
index 0000000..3e453d3
--- /dev/null
+++ b/assets/js/su_score_clock_js/components/score_clock/ServerCommandsMixin.vue
@@ -0,0 +1,80 @@
+<template> </template>
+
+<script>
+module.exports = {
+  props: ["state_ob", "current_channel"],
+
+  components: {
+    // 'kebab-case': () => import('./relative_path/CamelCase'),
+  },
+
+  data: function () {
+    return {}
+  },
+
+  methods: {
+    set_countdown_minutes: function (minutes) {
+      this.$store.getters.channel_by_key("score_clock").push("set_countdown", {minutes: minutes})
+    },
+
+    handle_reverse_scores: function () {
+      this.$store.getters.channel_by_key("score_clock").push("reverse_scores", {})
+    },
+
+    handle_fifteen_minute_countdown: function () {
+      this.$store.getters.channel_by_key("score_clock").push("set_countdown", {minutes: 15})
+    },
+    handle_three_minute_countdown: function () {
+      this.$store.getters.channel_by_key("score_clock").push("set_countdown", {minutes: 3})
+    },
+    handle_add_minute_countdown: function () {
+      this.$store.getters.channel_by_key("score_clock").push("adjust_countdown", {minutes: 1})
+    },
+
+    handle_toggle_timer: function () {
+      this.$store.getters.channel_by_key("score_clock").push("toggle_timer_running_bool", {})
+    },
+    handle_disable_transition_timer: function () {
+      this.$store.getters.channel_by_key("score_clock").push("disable_transition_timer", {})
+    },
+
+    handle_reset_score: function () {
+      this.$store.getters.channel_by_key("score_clock").push("reset_score", {})
+    },
+
+    handle_left_plus_three: function () {
+      this.$store.getters.channel_by_key("score_clock").push("adjust_score", {change_left: 3})
+    },
+    handle_left_plus_two: function () {
+      this.$store.getters.channel_by_key("score_clock").push("adjust_score", {change_left: 2})
+    },
+    handle_left_plus_one: function () {
+      this.$store.getters.channel_by_key("score_clock").push("adjust_score", {change_left: 1})
+    },
+    handle_left_minus_one: function () {
+      this.$store.getters.channel_by_key("score_clock").push("adjust_score", {change_left: -1})
+    },
+
+    handle_right_plus_three: function () {
+      this.$store.getters.channel_by_key("score_clock").push("adjust_score", {change_right: 3})
+    },
+    handle_right_plus_two: function () {
+      this.$store.getters.channel_by_key("score_clock").push("adjust_score", {change_right: 2})
+    },
+    handle_right_plus_one: function () {
+      this.$store.getters.channel_by_key("score_clock").push("adjust_score", {change_right: 1})
+    },
+    handle_right_minus_one: function () {
+      this.$store.getters.channel_by_key("score_clock").push("adjust_score", {change_right: -1})
+    },
+  },
+
+  computed: {
+    in_focus_mode: function () {
+      return this.$store.getters.in_app_mode("in_focus_mode")
+    },
+  },
+}
+</script>
+
+<style></style>
diff --git a/assets/js/su_score_clock_js/components/score_clock/clock/Clock.vue b/assets/js/su_score_clock_js/components/score_clock/clock/Clock.vue
new file mode 100644
index 0000000..609b665
--- /dev/null
+++ b/assets/js/su_score_clock_js/components/score_clock/clock/Clock.vue
@@ -0,0 +1,54 @@
+<template>
+  <div v-if="should_show">
+    <focused-clock v-if="in_focus_mode"></focused-clock>
+    <controller-clock v-else></controller-clock>
+  </div>
+</template>
+
+<script>
+const clock_mixin = require("./ClockMixin.vue").default
+
+module.exports = {
+  mixins: [clock_mixin],
+
+  props: [],
+
+  components: {
+    "controller-clock": () => import("./controller/ControllerClock.vue"),
+    "focused-clock": () => import("./focused/FocusedClock.vue"),
+  },
+
+  data: function () {
+    return {}
+  },
+
+  watch: {
+    timer_count_seconds: function () {
+      this.conditionally_beep()
+    },
+    global_audio_context: function (new_bool) {
+      this.guarantee_global_audio_context()
+    },
+  },
+
+  created: function () {
+    this.guarantee_global_audio_context()
+  },
+
+  methods: {},
+
+  computed: {
+    should_show: function () {
+      if (this.$store.getters.in_app_mode("timed_games") === false) return false
+
+      return true
+    },
+
+    in_focus_mode: function () {
+      return this.$store.getters.in_app_mode("in_focus_mode")
+    },
+  },
+}
+</script>
+
+<style></style>
diff --git a/assets/js/su_score_clock_js/components/score_clock/clock/ClockMixin.vue b/assets/js/su_score_clock_js/components/score_clock/clock/ClockMixin.vue
new file mode 100644
index 0000000..0af46d2
--- /dev/null
+++ b/assets/js/su_score_clock_js/components/score_clock/clock/ClockMixin.vue
@@ -0,0 +1,135 @@
+<template> </template>
+
+<script>
+const server_commands_mixin = require("../ServerCommandsMixin.vue").default
+
+module.exports = {
+  mixins: [server_commands_mixin],
+
+  props: [],
+
+  components: {},
+
+  data: function () {
+    return {}
+  },
+
+  methods: {
+    guarantee_global_audio_context: function () {
+      if (!this.global_audio_context && this.play_beeps)
+        this.$store.dispatch("update_state_value", {code: "play_beeps", value: false})
+    },
+
+    conditionally_beep: function () {
+      if (!this.play_beeps) return
+
+      if (this.minutes_digit_1 > 0) return
+      if (this.minutes_digit_2 > 2) return
+      if (this.seconds_digit_1 != 0) return
+      if (this.seconds_digit_2 != 0) return
+
+      if (this.minutes_digit_2 == 0) {
+        this.play_sound("/images/long_beep.mp3")
+      } else {
+        this.play_sound("/images/short_beep.mp3")
+      }
+    },
+  },
+
+  computed: {
+    play_beeps: function () {
+      return false
+    },
+
+    clock_class_ob: function () {
+      var _ob = {}
+      _ob["col-xs-12 col-lg-6"] = true
+      _ob["dimmed"] = !this.$store.getters.score_clock_state("timer_running_bool")
+      return _ob
+    },
+
+    show_transition_timer: function () {
+      //if (!this.$store.getters.state_value("show_transition_clock"))
+      //  return false;
+
+      if (this.$store.getters.score_clock_state("transition_timer_count_seconds") == null) return false
+
+      return true
+    },
+
+    timer_count_seconds: function () {
+      return this.$store.getters.score_clock_state("timer_count_seconds")
+    },
+
+    minutes: function () {
+      return Math.floor(this.timer_count_seconds / 60)
+    },
+
+    seconds: function () {
+      return this.timer_count_seconds % 60
+    },
+
+    in_last_minute: function () {
+      if (this.minutes > 0) return false
+
+      if (this.seconds > 0) return true
+
+      return false
+    },
+
+    minutes_digit_1: function () {
+      if (this.minutes < 10) return null
+      return Math.floor(this.minutes / 10)
+    },
+
+    minutes_digit_2: function () {
+      if (!this.minutes) return 0
+      return Number(this.minutes % 10)
+    },
+
+    seconds_digit_1: function () {
+      if (this.seconds < 10) return 0
+      return Math.floor(this.seconds / 10)
+    },
+
+    seconds_digit_2: function () {
+      if (!this.seconds) return 0
+      return this.seconds % 10
+    },
+
+    transition_timer_count_seconds: function () {
+      return this.$store.getters.score_clock_state("transition_timer_count_seconds")
+    },
+
+    transition_minutes: function () {
+      return Math.floor(this.transition_timer_count_seconds / 60)
+    },
+
+    transition_seconds: function () {
+      return this.transition_timer_count_seconds % 60
+    },
+
+    transition_minutes_digit_1: function () {
+      if (this.transition_minutes < 10) return null
+      return Math.floor(this.transition_minutes / 10)
+    },
+
+    transition_minutes_digit_2: function () {
+      if (!this.transition_minutes) return 0
+      return Number(this.transition_minutes % 10)
+    },
+
+    transition_seconds_digit_1: function () {
+      if (this.transition_seconds < 10) return 0
+      return Math.floor(this.transition_seconds / 10)
+    },
+
+    transition_seconds_digit_2: function () {
+      if (!this.transition_seconds) return 0
+      return this.transition_seconds % 10
+    },
+  },
+}
+</script>
+
+<style></style>
diff --git a/assets/js/su_score_clock_js/components/score_clock/clock/ClockNumberDisplay.vue b/assets/js/su_score_clock_js/components/score_clock/clock/ClockNumberDisplay.vue
new file mode 100644
index 0000000..fbfc31e
--- /dev/null
+++ b/assets/js/su_score_clock_js/components/score_clock/clock/ClockNumberDisplay.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="col-2">
+    <img v-bind:src="'/images/score_clock/' + net_int + '.png'" width="100%" />
+  </div>
+</template>
+
+<script>
+module.exports = {
+  props: ["number_int"],
+
+  components: {
+    // 'kebab-case': () => import('./relative_path/CamelCase'),
+  },
+
+  data: function () {
+    return {}
+  },
+
+  methods: {},
+
+  computed: {
+    net_int: function () {
+      if (!this.number_int) return 0
+      return this.number_int
+    },
+  },
+}
+</script>
+
+<style></style>
diff --git a/assets/js/su_score_clock_js/components/score_clock/clock/controller/ControllerClock.vue b/assets/js/su_score_clock_js/components/score_clock/clock/controller/ControllerClock.vue
new file mode 100644
index 0000000..208c029
--- /dev/null
+++ b/assets/js/su_score_clock_js/components/score_clock/clock/controller/ControllerClock.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="container">
+    <div class="row my-5">
+      <div class="col-12">
+        <div v-if="show_alt_countdowns" class="row">
+          <div class="col-6">
+            <button class="btn btn-square btn-block btn-secondary" v-on:click="set_countdown_minutes(20)">
+              Set to 20:00
+            </button>
+          </div>
+          <div class="col-6">
+            <button class="btn btn-square btn-block btn-secondary" v-on:click="set_countdown_minutes(12)">
+              Set to 12:00
+            </button>
+          </div>
+          <div class="col-6">
+            <button class="btn btn-square btn-block btn-secondary" v-on:click="set_countdown_minutes(10)">
+              Set to 10:00
+            </button>
+          </div>
+          <div class="col-6">
+            <button class="btn btn-square btn-block btn-secondary" v-on:click="set_countdown_minutes(3)">
+              Set to 3:00
+            </button>
+          </div>
+          <div class="col-6">
+            <button class="btn btn-square btn-block btn-secondary" v-on:click="set_countdown_minutes(2)">
+              Set to 2:00
+            </button>
+          </div>
+          <div class="col-6">
+            <button class="btn btn-square btn-block btn-secondary" v-on:click="handle_add_minute_countdown">
+              Add 1 minute
+            </button>
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="col-6">
+            <button class="btn btn-square btn-block btn-primary" v-on:click="set_countdown_minutes(15)">
+              Set to 15:00
+            </button>
+          </div>
+
+          <div class="col-6">
+            <button class="btn btn-square btn-block btn-secondary" v-on:click="toggle_other()">
+              {{ other_button_label }}
+            </button>
+          </div>
+        </div>
+
+        <focused-clock></focused-clock>
+
+        <button class="btn btn-square btn-block btn-primary" v-on:click="handle_toggle_timer">
+          Timer On/Off
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+const clock_mixin = require("../ClockMixin.vue").default
+
+module.exports = {
+  mixins: [clock_mixin],
+
+  props: [],
+
+  components: {
+    "focused-clock": () => import("../focused/FocusedClock.vue"),
+    "clock-number-display": () => import("../ClockNumberDisplay.vue"),
+  },
+
+  data: function () {
+    return {
+      show_alt_countdowns: false,
+    }
+  },
+
+  methods: {
+    toggle_other: function () {
+      this.show_alt_countdowns = !this.show_alt_countdowns
+    },
+  },
+
+  computed: {
+    other_button_label: function () {
+      if (this.show_alt_countdowns) return "Hide Other"
+
+      return "Show Other"
+    },
+  },
+}
+</script>
+
+<style></style>
diff --git a/assets/js/su_score_clock_js/components/score_clock/clock/focused/FocusedClock.vue b/assets/js/su_score_clock_js/components/score_clock/clock/focused/FocusedClock.vue
new file mode 100644
index 0000000..3c9217f
--- /dev/null
+++ b/assets/js/su_score_clock_js/components/score_clock/clock/focused/FocusedClock.vue
@@ -0,0 +1,101 @@
+<template>
+  <div class="row my-5">
+    <div v-bind:class="countdown_timer_class_ob" v-on:click="handle_toggle_timer">
+      <div class="row no-gutters" v-bind:class="clock_class_ob">
+        <div class="col-1"></div>
+        <clock-number-display
+          v-if="minutes_digit_1 && !hide_for_last_minute"
+          v-bind:current_channel="current_channel"
+          v-bind:number_int="minutes_digit_1"
+        ></clock-number-display>
+        <div class="col-2" v-if="!minutes_digit_1"></div>
+        <clock-number-display
+          v-if="!hide_for_last_minute"
+          v-bind:current_channel="current_channel"
+          v-bind:number_int="minutes_digit_2"
+        ></clock-number-display>
+        <div v-if="!hide_for_last_minute" class="col-2"><img src="/images/score_clock/colon.png" width="100%" /></div>
+        <clock-number-display
+          v-if="!hide_for_last_minute"
+          v-bind:current_channel="current_channel"
+          v-bind:number_int="seconds_digit_1"
+        ></clock-number-display>
+        <clock-number-display
+          v-if="!hide_for_last_minute"
+          v-bind:current_channel="current_channel"
+          v-bind:number_int="seconds_digit_2"
+        ></clock-number-display>
+        <div class="col-1"></div>
+      </div>
+    </div>
+
+    <div v-if="show_transition_timer" class="col-6">
+      <div class="row no-gutters" v-on:click="handle_disable_transition_timer">
+        <div class="col-1"></div>
+        <clock-number-display
+          v-if="transition_minutes_digit_1"
+          v-bind:current_channel="current_channel"
+          v-bind:number_int="transition_minutes_digit_1"
+        ></clock-number-display>
+        <div class="col-2" v-if="!transition_minutes_digit_1"></div>
+        <clock-number-display
+          v-bind:current_channel="current_channel"
+          v-bind:number_int="transition_minutes_digit_2"
+        ></clock-number-display>
+        <div class="col-2"><img src="/images/score_clock/colon.png" width="100%" /></div>
+        <clock-number-display
+          v-bind:current_channel="current_channel"
+          v-bind:number_int="transition_seconds_digit_1"
+        ></clock-number-display>
+        <clock-number-display
+          v-bind:current_channel="current_channel"
+          v-bind:number_int="transition_seconds_digit_2"
+        ></clock-number-display>
+        <div class="col-1"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+const clock_mixin = require("../ClockMixin.vue").default
+module.exports = {
+  mixins: [clock_mixin],
+
+  props: [],
+
+  components: {
+    "clock-number-display": () => import("../ClockNumberDisplay.vue"),
+  },
+
+  data: function () {
+    return {}
+  },
+
+  methods: {},
+
+  computed: {
+    clock_class_ob: function () {
+      var _ob = {}
+      _ob["dimmed"] = !this.$store.getters.score_clock_state("timer_running_bool")
+      return _ob
+    },
+
+    hide_for_last_minute: function () {
+      //if (!this.$store.getters.state_value("hide_last_minute"))
+      return false
+
+      //return this.in_last_minute
+    },
+
+    countdown_timer_class_ob: function () {
+      var _ob = {}
+      _ob["col-12"] = !this.show_transition_timer
+      _ob["col-6"] = this.show_transition_timer
+      return _ob
+    },
+  },
+}
+</script>
+
+<style></style>
diff --git a/assets/js/su_score_clock_js/components/score_clock/routes.json b/assets/js/su_score_clock_js/components/score_clock/routes.json
new file mode 100644
index 0000000..ef04ad6
--- /dev/null
+++ b/assets/js/su_score_clock_js/components/score_clock/routes.json
@@ -0,0 +1,6 @@
+[
+  {
+    "path": "/",
+    "component": () => import("./ScoreClockRoute")
+  }
+]
diff --git a/assets/js/su_score_clock_js/components/score_clock/score/Score.vue b/assets/js/su_score_clock_js/components/score_clock/score/Score.vue
new file mode 100644
index 0000000..4ae1d0f
--- /dev/null
+++ b/assets/js/su_score_clock_js/components/score_clock/score/Score.vue
@@ -0,0 +1,154 @@
+<template>
+  <div class="my-5">
+    <div v-if="in_focused_view" class="row" style="height: 150px;"></div>
+
+    <div class="row no-gutters my-4">
+      <div class="col-1"></div>
+      <score-number-display
+        v-if="score_left_digit_1"
+        v-bind:number_int="score_left_digit_1"
+        v-bind:on_click="'handle_left_plus_one'"
+      ></score-number-display>
+      <score-number-display
+        v-bind:number_int="score_left_digit_2"
+        v-bind:on_click="'handle_left_plus_one'"
+      ></score-number-display>
+      <div class="col-2" v-if="!score_left_digit_1"></div>
+      <div class="col-2"></div>
+      <score-number-display
+        v-if="score_right_digit_1"
+        v-bind:number_int="score_right_digit_1"
+        v-bind:on_click="'handle_right_plus_one'"
+      ></score-number-display>
+      <div class="col-2" v-if="!score_right_digit_1"></div>
+      <score-number-display
+        v-bind:number_int="score_right_digit_2"
+        v-bind:on_click="'handle_right_plus_one'"
+      ></score-number-display>
+
+      <div class="col-1"></div>
+    </div>
+
+    <div v-if="!in_focused_view" class="row my-4">
+      <div class="col-1"></div>
+      <div class="col-4">
+        <div class="row">
+          <div class="col-sm-12 col-lg-6 my-3">
+            <button class="btn btn-square btn-block btn-primary" v-on:click="handle_left_plus_three">+ 3</button>
+          </div>
+          <div class="col-sm-12 col-lg-6 my-3">
+            <button class="btn btn-square btn-block btn-primary" v-on:click="handle_left_plus_two">+ 2</button>
+          </div>
+          <div class="col-sm-12 col-lg-6 my-3">
+            <button class="btn btn-square btn-block btn-primary" v-on:click="handle_left_plus_one">+ 1</button>
+          </div>
+          <div class="col-sm-12 col-lg-6 my-3">
+            <button class="btn btn-square btn-block btn-danger" v-on:click="handle_left_minus_one">- 1</button>
+          </div>
+        </div>
+      </div>
+      <div class="col-2 my-auto">
+        <button class="btn btn-square btn-block btn-primary" v-on:click="handle_reverse_scores">FLIP SCORES</button>
+      </div>
+      <div class="col-4">
+        <div class="row">
+          <div class="col-sm-12 col-lg-6 my-3">
+            <button class="btn btn-square btn-block btn-primary" v-on:click="handle_right_plus_three">+ 3</button>
+          </div>
+          <div class="col-sm-12 col-lg-6 my-3">
+            <button class="btn btn-square btn-block btn-primary" v-on:click="handle_right_plus_two">+ 2</button>
+          </div>
+          <div class="col-sm-12 col-lg-6 my-3">
+            <button class="btn btn-square btn-block btn-primary" v-on:click="handle_right_plus_one">+ 1</button>
+          </div>
+          <div class="col-sm-12 col-lg-6 my-3">
+            <button class="btn btn-square btn-block btn-danger" v-on:click="handle_right_minus_one">- 1</button>
+          </div>
+
+          <div class="col-sm-12 col-lg-6"></div>
+        </div>
+      </div>
+      <div class="col-1"></div>
+      <div class="col-12 text-center my-3">
+        Scroll down to find reset score button
+      </div>
+    </div>
+
+    <div v-if="!in_focused_view" class="container margin-bottom-3x">
+      <div class="row">
+        <div class="col-12 margin-tb-1x">
+          <hr />
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col-12" style="height: 300px;"></div>
+        <div class="col-12">
+          <button class="btn btn-square btn-block btn-danger" v-on:click="handle_reset_score">
+            Reset Score
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="in_focused_view" class="row" style="height: 500px;">
+      <div class="col-12"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+const server_commands_mixin = require("../ServerCommandsMixin.vue").default
+
+module.exports = {
+  mixins: [server_commands_mixin],
+
+  props: [],
+
+  components: {
+    "score-number-display": () => import("./ScoreNumberDisplay.vue"),
+  },
+
+  data: function () {
+    return {}
+  },
+
+  methods: {},
+
+  computed: {
+    in_focused_view: function() {
+      return this.$store.getters.in_app_mode("focused_view")
+    },
+
+    left_score: function () {
+      return this.$store.getters.score_clock_state("left_score")
+    },
+
+    right_score: function () {
+      return this.$store.getters.score_clock_state("right_score")
+    },
+
+    score_left_digit_1: function () {
+      if (this.left_score < 10) return null
+      return Math.floor(this.left_score / 10)
+    },
+
+    score_left_digit_2: function () {
+      if (!this.left_score) return 0
+      return Number(this.left_score % 10)
+    },
+
+    score_right_digit_1: function () {
+      if (this.right_score < 10) return null
+      return Math.floor(this.right_score / 10)
+    },
+
+    score_right_digit_2: function () {
+      if (!this.right_score) return 0
+      return this.right_score % 10
+    },
+  },
+}
+</script>
+
+<style></style>
diff --git a/assets/js/su_score_clock_js/components/score_clock/score/ScoreNumberDisplay.vue b/assets/js/su_score_clock_js/components/score_clock/score/ScoreNumberDisplay.vue
new file mode 100644
index 0000000..de87803
--- /dev/null
+++ b/assets/js/su_score_clock_js/components/score_clock/score/ScoreNumberDisplay.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="col-2">
+    <img v-bind:src="'/images/score_clock/' + number_int + '.png'" width="100%" v-on:click="handle_click" />
+  </div>
+</template>
+
+<script>
+const server_commands_mixin = require("../ServerCommandsMixin.vue").default
+
+module.exports = {
+  mixins: [server_commands_mixin],
+
+  props: ["number_int", "on_click"],
+
+  components: {
+    // 'kebab-case': () => import('./relative_path/CamelCase'),
+  },
+
+  data: function () {
+    return {}
+  },
+
+  methods: {
+    handle_click: function () {
+      this[this.on_click]()
+    },
+  },
+
+  computed: {},
+}
+</script>
+
+<style></style>
diff --git a/assets/js/su_score_clock_js/routes/front_page/FrontPageRoute.vue b/assets/js/su_score_clock_js/routes/front_page/FrontPageRoute.vue
index c797ddc..9f8e854 100644
--- a/assets/js/su_score_clock_js/routes/front_page/FrontPageRoute.vue
+++ b/assets/js/su_score_clock_js/routes/front_page/FrontPageRoute.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="my-3">
-    Front Page Route
+    <score-clock></score-clock>
   </div>
 </template>
 
@@ -9,19 +9,19 @@ module.exports = {
   props: [],
 
   components: {
-
+    "score-clock": () => import("../../components/score_clock/ScoreClock.vue"),
   },
 
   data: function () {
     return {}
   },
 
-  created: function() {
+  created: function () {
     setTimeout(this.redirect_if_necessary, 1500)
   },
 
   methods: {
-    redirect_if_necessary: function() {
+    redirect_if_necessary: function () {
       if (this.$store.getters.logged_in_username)
         if (this.$store.getters.logged_in_user_channel_connected)
           this.$router.push("/u/" + this.$store.getters.logged_in_username, () => {})
diff --git a/assets/js/su_score_clock_js/store/modules.js b/assets/js/su_score_clock_js/store/modules.js
index f53f5c2..d7af602 100644
--- a/assets/js/su_score_clock_js/store/modules.js
+++ b/assets/js/su_score_clock_js/store/modules.js
@@ -1,7 +1,11 @@
 import app_versions from "./app_versions/app_versions"
+import header_icons from "./score_clock/header_icons"
+import score_clock from "./score_clock/score_clock"
 
 let store_modules = {
-  app_versions
+  app_versions,
+  header_icons,
+  score_clock,
 }
 
 export default store_modules
diff --git a/assets/js/su_score_clock_js/store/score_clock/header_icons.js b/assets/js/su_score_clock_js/store/score_clock/header_icons.js
new file mode 100644
index 0000000..0fba655
--- /dev/null
+++ b/assets/js/su_score_clock_js/store/score_clock/header_icons.js
@@ -0,0 +1,46 @@
+const state = {}
+
+const getters = {
+  score_clock_app_header_icons_ar: (state, getters) => {
+    var _ar = []
+
+    _ar.push({toggle_app_mode: "timed_games", fa_icon: "fas fa-clock"})
+    _ar.push({toggle_app_mode: "focused_view", fa_icon: "fas fa-expand"})
+
+    return _ar
+  },
+
+  show_lists_app_header_mode_toggles: (state, getters) => {
+    if (getters.in_mobile_mode && getters.is_hamburger_expanded) return false
+
+    if (getters.current_route_name == "user_settings") return false
+    //  if (this.$route.params.username) if (!this.$route.params.nested_user_panel) return true
+
+    if (getters.current_route_name == "su_project-user")
+      if (getters.current_route_params_value("specifier") == "settings") return false
+
+    if (getters.current_route_name == "su_project-user") return true
+    if (getters.current_route_name == "su_project-user_list_item") return true
+
+    return false
+  },
+}
+
+const actions = {
+  handle_lists_app_header_filters_toggle(store, ignored_param) {
+    if (store.getters.current_search_term) store.dispatch("clear_text_filter_results", {})
+
+    if (store.getters.current_privacy_level_visibility_int < 100) store.commit("update_current_privacy_level_visibility_int", 100)
+
+    store.dispatch("toggle_app_mode", "filtering")
+  },
+}
+
+const mutations = {}
+
+export default {
+  state,
+  getters,
+  actions,
+  mutations,
+}
diff --git a/assets/js/su_score_clock_js/store/score_clock/score_clock.js b/assets/js/su_score_clock_js/store/score_clock/score_clock.js
new file mode 100644
index 0000000..7b1f186
--- /dev/null
+++ b/assets/js/su_score_clock_js/store/score_clock/score_clock.js
@@ -0,0 +1,46 @@
+//  import { stateMerge } from "vue-object-merge"
+import * as types from "./score_clock_mutation_types"
+
+const state = {
+  score_clock_ob: {
+    left_score: 0,
+    right_score: 0,
+    timer_direction_int: -1,
+    timer_count_seconds: 15 * 60,
+    timer_running_bool: false,
+    transition_timer_count_seconds: null,
+    transition_timer_running_bool: false,
+  },
+}
+
+const getters = {
+  score_clock_state: (state) => {
+    return state.score_clock_ob
+  },
+
+  score_clock_state: (state) => (key) => {
+    if (state.score_clock_ob[key]) return state.score_clock_ob[key]
+
+    return null
+  },
+}
+
+const actions = {
+  update_score_clock(store, score_clock_ob) {
+    store.commit(types.UPDATE_SCORE_CLOCK, score_clock_ob)
+  },
+}
+
+const mutations = {
+  [types.UPDATE_SCORE_CLOCK](state, server_ob) {
+    console.log(server_ob)
+    //  stateMerge(state.score_clock_ob, server_ob)
+  },
+}
+
+export default {
+  state,
+  getters,
+  actions,
+  mutations,
+}
diff --git a/assets/js/su_score_clock_js/store/score_clock/score_clock_mutation_types.js b/assets/js/su_score_clock_js/store/score_clock/score_clock_mutation_types.js
new file mode 100644
index 0000000..bce546b
--- /dev/null
+++ b/assets/js/su_score_clock_js/store/score_clock/score_clock_mutation_types.js
@@ -0,0 +1 @@
+export const UPDATE_SCORE_CLOCK = "update_score_clock"