@mideind/netskrafl-react 1.0.0-beta.7 → 1.0.0-beta.9

package/dist/esm/css/netskrafl.css

@@ -303,14 +303,19 @@
 
 div.netskrafl-container {
   --logo-primary: #C94314;
+  --logo-primary-light: hsl(from var(--logo-primary) h s 75%);
   --logo-secondary: #FFAA88;
-  --logo-accent: #F17736;
+  --logo-accent: hsl(21, 87%, 58%);
+  --logo-accent-light: hsl(from var(--logo-accent) h s 80%);
   --svarkur-primary: #066960;
   --svarkur-secondary: #0a574f;
   --svarkur-accent: #008b7c;
   --malfridur-primary: #FF7C24;
-  --malfridur-secondary: #ffb400;
-  --malfridur-accent: #0788C0;
+  --malfridur-secondary: hsl(42, 100%, 50%);
+  --malfridur-secondary-light: hsl(from var(--malfridur-secondary) h s 80%);
+  --malfridur-accent: hsl(198, 93%, 39%);
+  --cold: hsl(177, 58%, 68%);
+  --cold-light: hsl(from var(--cold) h s 80%);
   --malfridur-green: #09814A;
   --dark-bg-color: #222222;
   --light-shadow: #666666;
@@ -384,12 +389,15 @@ div.netskrafl-container h3 {
 }
 */
 
-body div.netskrafl-loading,
-body div.netskrafl-user {
+body > div.netskrafl-loading,
+body > div.netskrafl-user,
+body > div.gatadagsins-loading,
+body > div.gatadagsins-user {
   display: none;
 }
 
-div.netskrafl-container div.netskrafl-user {
+div.netskrafl-container div.netskrafl-user,
+div.netskrafl-container div.gatadagsins-user {
   display: block;
 }
 
@@ -397,6 +405,24 @@ div#board-background {
   height: 100%;
 }
 
+@keyframes blinkOutline {
+  0% {
+    outline: var(--focus-border) solid 0px;
+  }
+  50% {
+    outline: var(--focus-border) solid 4px;
+  }
+  100% {
+    outline: var(--focus-border) solid 0px;
+  }
+}
+
+.blinking {
+  position: relative;
+  z-index: 10;
+  animation: blinkOutline 1s infinite;
+}
+
 div.game-container {
   position: absolute;
   top: 0;
@@ -754,10 +780,6 @@ table.bag-content.empty td {
   color: white;
 }
 
-td.over {
-  outline: var(--focus-border) solid 3px;
-}
-
 td.highlight {
   outline: var(--focus-border) solid 2px;
 }
@@ -943,7 +965,7 @@ div.board-area {
 div.board {
   background-color: var(--container-bg-color);
   overflow: auto; /* Must be auto to allow panning/scrolling */
-  width: 361px;
+  width: 100%;
 }
 
 div.tile {
@@ -1290,45 +1312,43 @@ div.try-again span.glyphicon {
 }
 
 div.recallbtn {
-  text-align: center;
+  display: none;
   font-size: 18px;
   font-weight: 700;
   color: white;
   margin: 0;
-  padding: 6px;
-  padding-top: 9px;
+  align-items: center;
+  justify-content: center;
   border-radius: 5px;
   cursor: pointer;
-  width: 33px;
-  height: 26px;
+  width: 45px;
+  height: 41px;
   background-color: var(--triple-word-color);
-  display: none;
 }
 
 div.rack-left div.recallbtn {
-  display: block;
+  display: flex;
   margin-right: auto;
   /* Left-align the button */
 }
 
 div.scramblebtn {
-  text-align: center;
+  display: none;
   font-size: 18px;
   font-weight: 700;
   color: white;
   margin: 0;
-  padding: 6px;
-  padding-top: 9px;
+  align-items: center;
+  justify-content: center;
   border-radius: 5px;
   cursor: pointer;
-  width: 33px;
-  height: 26px;
+  width: 45px;
+  height: 41px;
   background-color: var(--malfridur-accent);
-  display: none;
 }
 
 div.rack-left div.scramblebtn {
-  display: block;
+  display: flex;
   margin-right: auto;
   /* Left-align the button */
 }
@@ -1398,7 +1418,7 @@ div.submitexchange {
   border: 1.5px solid var(--header-background);
   width: 66px;
   height: 23px;
-  color: var(--ok-button);
+  color: var(--human-color);
 }
 
 div.submitexchange.disabled {
@@ -2269,7 +2289,7 @@ div.exchange {
   text-align: center;
   color: white;
   border-radius: 4px;
-  background-color: var(--ok-button);
+  background-color: var(--human-color);
 }
 
 div.submitmove#move-mobile {
@@ -3343,7 +3363,7 @@ div.xchg {
 
 div.xchgsel {
   color: white;
-  background-color: var(--ok-button);
+  background-color: var(--human-color);
 }
 
 .blanktile {
@@ -3912,7 +3932,7 @@ div.pass-last span.yesnobutton {
 }
 
 div.exchange span.yesnobutton {
-  color: var(--ok-button);
+  color: var(--human-color);
 }
 
 div.chall span.yesnobutton {
@@ -6651,25 +6671,25 @@ div.signup-header {
     background-color: var(--board-background);
   }
   div.recallbtn {
-    display: block;
+    display: flex;
     position: absolute;
     top: auto;
     bottom: 136px;
     background-color: var(--triple-word-color);
     font-size: 22px;
-    width: 40px;
-    height: 30px;
+    width: 52px;
+    height: 45px;
     left: 167px;
   }
   /* To the right of the rack */
   div.scramblebtn {
-    display: block;
+    display: flex;
     position: absolute;
     top: auto;
     bottom: 136px;
     font-size: 22px;
-    width: 40px;
-    height: 30px;
+    width: 52px;
+    height: 45px;
     left: 546px;
   }
   div.submitpass {
@@ -7528,3 +7548,594 @@ div.signup-header {
     padding-right: 3px;
   }
 }
+
+/* ================= GÁTA DAGSINS STYLES =============== */
+
+/* Mobile styles for Gáta Dagsins */
+
+div#gatadagsins-background {
+  height: 100%;
+}
+
+div.gatadagsins-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: hidden;
+}
+
+div.gatadagsins-main {
+  display: flex;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding: 0px;
+}
+
+/* Board and rack wrapper (left side) */
+
+div.gatadagsins-board-rack-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+div.gatadagsins-board-area {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+div.gatadagsins-board-area.celebrate div.tile.racktile{
+  animation: celebrationTilePulse 1.5s ease-in-out infinite;
+}
+
+@keyframes celebrationTilePulse {
+  0%, 100% {
+    background-color: white;
+  }
+  50% {
+    background-color: var(--malfridur-secondary-light);
+  }
+}
+
+/* Override board positioning for Gáta Dagsins */
+
+div.gatadagsins-container div.board {
+  position: relative;
+  top: auto;
+  left: auto;
+  padding: 0;
+}
+
+div.gatadagsins-container table.board {
+  position: relative;
+}
+
+div.gatadagsins-rack-area {
+  flex: 0 0 100px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  align-items: center;
+}
+
+/* Override rack positioning for Gáta Dagsins */
+
+div.gatadagsins-container div.rack-left {
+  display: flex;
+  align-items: center;
+  float: none;
+  width: auto;
+  height: auto;
+}
+
+div.gatadagsins-container div.rack {
+  position: relative;
+  float: none;
+  top: 0;
+  left: 0;
+  width: auto;
+}
+
+/* Override button positioning for Gáta Dagsins */
+
+div.gatadagsins-container div.recallbtn {
+  position: relative;
+  margin: 0 5px;
+  display: flex;
+  bottom: auto;
+  left: auto;
+  background-color: var(--triple-letter-color);
+}
+
+div.gatadagsins-container div.scramblebtn {
+  position: relative;
+  margin: 0 5px;
+  display: flex;
+  bottom: auto;
+  left: auto;
+}
+
+div.gatadagsins-container div.buttons {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  bottom: auto;
+  left: auto;
+}
+
+div.gata-dagsins-score {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 64px;
+  height: 26px;
+  color: white;
+  background-color: var(--tile-background);
+  border-radius: 5px;
+  margin: 0 5px;
+  border-color: transparent;
+  border-style: solid;
+  border-width: 3px;
+  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
+}
+
+div.gata-dagsins-score.disabled {
+  background-color: white;
+  color: var(--middle-shadow);
+  border-color: var(--middle-shadow);
+  border-style: solid;
+  border-width: 3px;
+}
+
+div.gata-dagsins-score.illegal {
+  background-color: white;
+  color: black;
+  border-color: var(--logo-primary-light);
+  border-style: solid;
+  border-width: 3px;
+}
+
+div.gata-dagsins-score.word-bad {
+  background-color: white;
+  color: var(--logo-primary-light);
+  border-color: var(--logo-primary-light);
+  border-style: solid;
+  border-width: 3px;
+}
+
+span.gata-dagsins-legend {
+  display: inline-block;
+  font-family: var(--number-font);
+  font-weight: 700;
+  font-size: 22px;
+  line-height: 22px;
+}
+
+/* Thermometer wrapper - positioned above board on mobile */
+
+div.gatadagsins-right-side-wrapper {
+  flex: 0 0 80px;
+  display: flex;
+  flex-direction: row;
+  order: -1;
+}
+
+div.gatadagsins-thermometer-column {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Thermometer component styles */
+
+.thermometer-container {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  width: 100%;
+  align-items: center;
+}
+
+.thermometer-best-score {
+  position: absolute;
+  display: flex;
+  width: 40px;
+  height: 100%;
+  align-self: flex-start;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  right: -32px;
+}
+
+.thermometer-best-score-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  border-radius: 10px;
+  padding-left: 10px;
+  padding-right: 10px;
+  left: -10px;
+  cursor: pointer;
+}
+
+.thermometer-best-score-container:hover {
+  outline-width: 2px;
+  outline-style: solid;
+  outline-color: var(--malfridur-secondary-light);
+}
+
+.thermometer-best-circle {
+  background-color: var(--malfridur-green);
+  color: white;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 22px;
+  font-weight: bold;
+  font-family: var(--number-font);
+  margin-left: -5px;
+  flex-shrink: 0;
+  transition: background-color 1.0s ease;
+}
+
+.celebrate .thermometer-best-circle {
+  background-color: var(--malfridur-secondary);
+}
+
+.thermometer-best-label {
+  margin-top: 8px;
+  margin-left: 0;
+  font-size: 12px;
+  color: var(--malfridur-green);
+  font-style: italic;
+  font-family: var(--primary-font);
+  transition: color 1.0s ease;
+  text-align: center;
+}
+
+.celebrate .thermometer-best-label {
+  font-family: var(--number-font);
+  font-weight: bold;
+  color: var(--malfridur-secondary);
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.celebrate .thermometer-best-circle {
+  position: relative;
+  animation: celebrationPulse 2s ease-in-out 3;
+  box-shadow: 0 0 25px rgba(var(--malfridur-secondary), 0.7);
+}
+
+/* Sun corona component styling */
+
+.sun-corona {
+  position: absolute;
+  top: 50%;
+  left: 30px;
+  transform: translate(-50%, -50%) rotate(0deg);
+  pointer-events: none;
+}
+
+.sun-corona.rotating {
+  animation: rotateSunCorona 6s linear infinite;
+}
+
+@keyframes celebrationPulse {
+  0%, 100% { 
+    transform: scale(1);
+  }
+  50% { 
+    transform: scale(1.1);
+  }
+}
+
+@keyframes rotateSunCorona {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg) scale(1.3);
+  }
+  25% {
+    transform: translate(-50%, -50%) rotate(90deg) scale(1.6);
+  }
+  50% {
+    transform: translate(-50%, -50%) rotate(180deg) scale(1.3);
+  }
+  75% {
+    transform: translate(-50%, -50%) rotate(270deg) scale(1.6);
+  }
+  100% { 
+    transform: translate(-50%, -50%) rotate(360deg) scale(1.3);
+  }
+}
+
+.thermometer-body {
+  position: relative;
+  align-self: center;
+  width: 100%;
+  height: 40px;
+  margin: 0;
+  border-radius: 20px;
+  overflow: visible;
+}
+
+.thermometer-zones {
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+
+.thermometer-zone {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  height: 100%;
+  width: var(--zone-size);
+  border-radius: 20px;
+  transition: width 0.5s ease-in-out;
+}
+
+.thermometer-zone.hot,
+div.gata-dagsins-score.hot {
+  background-color: var(--logo-accent);
+}
+
+.thermometer-zone.warm,
+div.gata-dagsins-score.warm {
+  background-color: var(--malfridur-secondary);
+}
+
+.thermometer-zone.cold,
+div.gata-dagsins-score.cold {
+  background-color: var(--cold);
+}
+
+.thermometer-current-circle {
+  color: white;
+  border: 3px solid white;
+  border-radius: 50%;
+  width: 34px;
+  height: 34px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  font-weight: bold;
+  font-family: var(--number-font);
+}
+
+.thermometer-moves-overlay-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.thermometer-move-overlay {
+  position: absolute;
+  bottom: -10px;
+  left: var(--move-position);
+  transform: translateX(50%);
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  pointer-events: auto;
+  font-family: var(--number-font);
+  cursor: pointer;
+  border-radius: 10px;
+  padding: 2px;
+}
+
+.thermometer-move-overlay.hot {
+  color: var(--logo-accent);
+}
+
+.thermometer-move-overlay.warm {
+  color: var(--malfridur-secondary);
+}
+
+.thermometer-move-overlay.cold {
+  color: var(--cold);
+}
+
+.thermometer-move-overlay:hover {
+  outline-width: 2px;
+  outline-style: solid;
+}
+
+.thermometer-move-overlay.hot:hover {
+  outline-color: var(--logo-accent-light);
+}
+
+.thermometer-move-overlay.warm:hover {
+  outline-color: var(--malfridur-secondary-light);
+}
+
+.thermometer-move-overlay.cold:hover {
+  outline-color: var(--cold-light);
+}
+
+.thermometer-move-overlay .thermometer-move-score {
+  position: relative;
+  min-width: 40px;
+  color: white;
+  font-weight: bold;
+  text-align: center;
+  font-size: 20px;
+}
+
+.thermometer-move-overlay .thermometer-current-score {
+  position: relative;
+  min-width: 40px;
+}
+
+.thermometer-move-overlay .thermometer-move-word {
+  font-weight: bold;
+  margin-left: 10px;
+  font-size: 16px;
+  font-style: italic;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.thermometer-move-overlay .thermometer-move-coord {
+  font-size: 14px;
+  margin-left: 8px;
+  white-space: nowrap;
+}
+
+/* Animation for gentle pulsing effect */
+
+@keyframes gentlePulse {
+  0% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.3);
+  }
+  50% {
+    transform: scale(1.08);
+    box-shadow: 0 0 12px 6px rgba(39, 174, 96, 0.18);
+  }
+  100% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.3);
+  }
+}
+
+.thermometer-current-score.this-player .thermometer-current-circle {
+  animation: gentlePulse 1.2s ease-in-out infinite;
+  transform-origin: center center;
+}
+
+/* Hide all thermometer moves except the top one on mobile */
+
+.thermometer-move-overlay:nth-child(n+2) {
+  display: none;
+}
+
+/* Desktop styles for Gáta Dagsins */
+
+@media all and (min-width: 1024px) {
+  /* Show all thermometer moves on desktop */
+  .thermometer-move-overlay:nth-child(n+2) {
+    display: flex;
+  }
+
+  /* Restore vertical thermometer layout on desktop */
+  .thermometer-container {
+    flex-direction: column;
+  }
+
+  .thermometer-body {
+    width: 40px;
+    height: 100%;
+    position: absolute;
+    left: 0;
+  }
+
+  .thermometer-zone {
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: var(--zone-size);
+    transition: height 0.5s ease-in-out;
+  }
+
+  .thermometer-best-score {
+    width: 100%;
+    height: 40px;
+    flex-direction: row;
+    top: -32px;
+    right: auto;
+  }
+
+  .thermometer-best-score-container {
+    flex-direction: row;
+    justify-content: flex-start;
+  }
+
+  .thermometer-best-label {
+    margin-top: 0;
+    margin-left: 12px;
+    font-size: 16px;
+    text-align: left;
+  }
+
+  .thermometer-move-overlay {
+    left: -10px;
+    bottom: var(--move-position);
+    transform: translateY(50%);
+    flex-direction: row;
+    padding-right: 10px;
+    padding-left: 10px;
+  }
+  div.gatadagsins-container {
+    height: 680px;
+  }
+  
+  div.gatadagsins-container div.board {
+    /* 16 x 34 pixels, i.e. 15 rows/columns plus row/column id */
+    height: 544px;
+    width: 544px;
+  }
+
+  div.gatadagsins-main {
+    flex-direction: row;
+    padding-left: 60px;
+    /* gap: 20px; */
+  }
+
+  div.gatadagsins-right-side-wrapper {
+    flex: 0 0 280px;
+    flex-direction: column;
+    order: 0;
+  }
+  
+  div.gatadagsins-rack-area {
+    flex: 0 0 120px;
+    /* Push left to compensate for row ids
+       on the left side of the board */
+    padding-left: 36px;
+  }
+
+  div.gatadagsins-thermometer-column {
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: flex-start;
+    padding-top: 60px;
+    padding-bottom: 100px;
+  }
+
+  div.gata-dagsins-score {
+    width: 64px;
+    height: 64px;
+    padding-top: 0;
+    border-radius: 50%;
+  }
+
+  div.gatadagsins-container div.scramblebtn,
+  div.gatadagsins-container div.recallbtn {
+    width: 64px;
+    height: 45px;
+  }
+
+}