dlg-ui 1.0.12 → 1.0.14

package/addon/components/player/card.hbs

@@ -0,0 +1,22 @@
+<div class='player-wrapper'>
+  <div class='player-card'>
+    <div class='player-pos'>
+      {{@position}}
+    </div>
+    <div class='player-name'>
+      <span class='player-text'>
+        {{@player}}
+      </span>
+      <span class='player-points'>
+        {{@points}}
+        pts
+      </span>
+    </div>
+    <div class='player-pic'>
+      <img src={{@picture}} alt='Player Picture' />
+    </div>
+    <div class={{this.trophyClass}} style={{this.trophyStyle}}>
+      <img src='/trophy-removebg-preview.png' alt='Player Trophy' />
+    </div>
+  </div>
+</div>

package/addon/components/player/card.js

@@ -0,0 +1,14 @@
+import Component from '@glimmer/component';
+
+export default class PlayerCardComponent extends Component {
+  get trophyClass() {
+    return this.args.trophyCount ? 'player-trophy has-trophy' : 'player-trophy';
+  }
+
+  get trophyStyle() {
+    if (this.args.trophyCount) {
+      return `--trophy-count: "${this.args.trophyCount}"`;
+    }
+    return '';
+  }
+}

package/addon/styles/addon.css

@@ -264,6 +264,86 @@
   padding-top: 8px;
 }
 
+.player-card {
+  display: flex;
+  flex-direction: row;
+  padding: 0.5em;
+  font-size: 1em;
+  background-color: #f6f6f6;
+  border: solid;
+}
+
+.player-name {
+  width: 40%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.player-pic {
+  width: 30%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.player-points {
+  font-size: 0.8em;
+}
+
+.player-pos {
+  width: 10%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.player-text {
+  text-align: center;
+}
+
+.player-trophy {
+  width: 20%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+
+.has-trophy::after {
+  content: '\00D7'var(--trophy-count);
+  color: Blue;
+  font-weight: 900;
+  font-size: 1.3em;
+  position: absolute;
+  left: 50%;
+  top: 30%;
+  transform: translate(-50%, -60%);
+  pointer-events: none;
+  text-shadow: 1px 1px 2px #0002;
+}
+
+.player-pic img,
+.player-trophy img {
+  width: 100%;
+  height: auto;
+  display: block;
+  object-fit: contain;
+}
+
+.player-pic img {
+  border-radius: 50%;
+}
+
+.player-wrapper {
+  container-type: inline-size;
+  width: 100%;
+}
+
 .radio-label {
   font-weight: bold;
 }
@@ -273,3 +353,34 @@
   flex-direction: column;
   margin: 5px 0px 5px 0px;
 }
+
+@container (min-width: 100px) {
+  .player-card {
+    font-size: 0.6rem;
+  }
+}
+@container (min-width: 200px) {
+  .player-card {
+    font-size: 0.8rem;
+  }
+}
+@container (min-width: 300px) {
+  .player-card {
+    font-size: 1rem;
+  }
+}
+@container (min-width: 400px) {
+  .player-card {
+    font-size: 1.4rem;
+  }
+}
+@container (min-width: 500px) {
+  .player-card {
+    font-size: 1.5rem;
+  }
+}
+@container (min-width: 600px) {
+  .player-card {
+    font-size: 2rem;
+  }
+}

package/app/components/player/card.js

@@ -0,0 +1 @@
+export { default } from 'dlg-ui/components/player/card';

package/config/environment.js

@@ -1,5 +1,7 @@
 'use strict';
 
 module.exports = function (/* environment, appConfig */) {
-  return {};
+  return {
+    modulePrefix: 'dlg-ui',
+  };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dlg-ui",
-  "version": "1.0.12",
+  "version": "1.0.14",
   "description": "The default blueprint for ember-cli addons.",
   "keywords": [
     "ember-addon"
@@ -26,34 +26,35 @@
     "test:ember-compatibility": "ember try:each"
   },
   "dependencies": {
-    "ember-cli-babel": "^7.26.11",
-    "ember-cli-htmlbars": "^6.1.1"
+    "@ember/string": "^3.1.1",
+    "ember-cli-babel": "^8.2.0",
+    "ember-cli-htmlbars": "^6.3.0"
+  },
+  "peerDependencies": {
+    "ember-source": "^4.8.0 || ^5.0.0 || ^6.0.0"
   },
   "devDependencies": {
     "@ember/optional-features": "^2.0.0",
-    "@ember/render-modifiers": "^2.1.0",
+    "@ember/render-modifiers": "^3.0.0",
     "@ember/test-helpers": "^2.8.1",
     "@embroider/test-setup": "^1.8.3",
     "@glimmer/component": "^1.1.2",
-    "@glimmer/tracking": "^1.1.2",
     "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",
     "ember-auto-import": "^2.4.3",
-    "ember-cli": "~4.8.1",
+    "ember-cli": "~4.12.0",
     "ember-cli-dependency-checker": "^3.3.1",
     "ember-cli-inject-live-reload": "^2.1.0",
     "ember-cli-sri": "^2.1.1",
     "ember-cli-terser": "^4.0.2",
-    "ember-disable-prototype-extensions": "^1.1.3",
     "ember-load-initializers": "^2.1.2",
-    "ember-page-title": "^7.0.0",
+    "ember-page-title": "^9.0.3",
     "ember-qunit": "^6.0.0",
-    "ember-resolver": "^8.0.3",
-    "ember-source": "~4.8.0",
+    "ember-resolver": "^10.0.0",
+    "ember-source": "~5.4.0",
     "ember-source-channel-url": "^3.0.0",
     "ember-template-lint": "^4.16.1",
     "ember-truth-helpers": "^4.0.3",
-    "ember-try": "^2.0.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-ember": "^11.1.0",
@@ -64,7 +65,7 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^2.7.1",
     "qunit": "^2.19.2",
-    "qunit-dom": "^2.0.0",
+    "qunit-dom": "^3.5.0",
     "webpack": "^5.74.0"
   },
   "engines": {